);
+ };
+
+ container.addEventListener('focusin', handleFocusEvent);
+ container.addEventListener('focusout', handleFocusEvent);
+ setIsListening(true);
+
+ return () => {
+ container.removeEventListener('focusin', handleFocusEvent);
+ container.removeEventListener('focusout', handleFocusEvent);
+ };
+ }, [pushEvent]);
+
+ return (
+
+
+
+
+ {isListening ? 'ready' : 'pending'}
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier:
+ 'fc-div-focus-in-out-00000000-0000-0000-0000-000000000020',
+ name: 'div-focus-in-out-front-component',
+ description:
+ 'Front component covering focusin and focusout listeners on ',
+ component: DivFocusInOutFrontComponent,
+});
diff --git a/packages/twenty-front-component-renderer/src/__stories__/html-tag/interactive/details/details-events.stories.tsx b/packages/twenty-front-component-renderer/src/__stories__/html-tag/interactive/details/details-events.stories.tsx
index 293c80c813..e67d2e5b34 100644
--- a/packages/twenty-front-component-renderer/src/__stories__/html-tag/interactive/details/details-events.stories.tsx
+++ b/packages/twenty-front-component-renderer/src/__stories__/html-tag/interactive/details/details-events.stories.tsx
@@ -1,4 +1,5 @@
import { type Meta } from '@storybook/react-vite';
+import { userEvent, within } from 'storybook/test';
import { FrontComponentRenderer } from '@/host/components/FrontComponentRenderer';
import {
@@ -9,6 +10,9 @@ import {
createHtmlTagClickStory,
createHtmlTagFocusStory,
} from '@/__stories__/shared/test-utils/createHtmlElementStory';
+import { expectEventLogged } from '@/__stories__/shared/test-utils/matchers/expectEventLogged';
+import { expectFrontComponentMounted } from '@/__stories__/shared/test-utils/matchers/expectFrontComponentMounted';
+import { runFrontComponentStory } from '@/__stories__/shared/test-utils/runFrontComponentStory';
const meta: Meta = {
title: 'FrontComponent/HtmlTag/Interactive/Details/Events',
@@ -27,3 +31,18 @@ export const Click = createHtmlTagClickStory({
export const FocusBlur = createHtmlTagFocusStory({
frontComponentBundleName: 'details-focus-blur',
});
+
+export const Toggle = runFrontComponentStory({
+ frontComponentBundleName: 'details-toggle',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ await expectFrontComponentMounted(canvas);
+
+ const summary = await canvas.findByTestId('summary');
+
+ await userEvent.click(summary);
+
+ await expectEventLogged({ canvas, matcher: { type: 'toggle' } });
+ },
+});
diff --git a/packages/twenty-front-component-renderer/src/__stories__/html-tag/interactive/details/details-toggle.front-component.tsx b/packages/twenty-front-component-renderer/src/__stories__/html-tag/interactive/details/details-toggle.front-component.tsx
new file mode 100644
index 0000000000..32385b377b
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/__stories__/html-tag/interactive/details/details-toggle.front-component.tsx
@@ -0,0 +1,27 @@
+import { defineFrontComponent } from 'twenty-sdk/define';
+import {
+ EventLog,
+ useEventLog,
+} from '@/__stories__/shared/front-components/event-log';
+import { FrontComponentCard } from '@/__stories__/shared/front-components/front-component-card';
+
+const DetailsToggleFrontComponent = () => {
+ const { entries, pushEvent } = useEventLog();
+
+ return (
+
+
+ summary
+ details content
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'fc-details-toggle-00000000-0000-0000-0000-000000000020',
+ name: 'details-toggle-front-component',
+ description: 'Front component covering toggle on ',
+ component: DetailsToggleFrontComponent,
+});
diff --git a/packages/twenty-front-component-renderer/src/__stories__/shared/front-components/event-log.tsx b/packages/twenty-front-component-renderer/src/__stories__/shared/front-components/event-log.tsx
index 5daef98aa9..cc1ad0ed4e 100644
--- a/packages/twenty-front-component-renderer/src/__stories__/shared/front-components/event-log.tsx
+++ b/packages/twenty-front-component-renderer/src/__stories__/shared/front-components/event-log.tsx
@@ -1,4 +1,4 @@
-import { type SyntheticEvent, useState } from 'react';
+import { type SyntheticEvent, useCallback, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
export type LoggedEventFile = {
@@ -136,7 +136,7 @@ const toUnknownRecord = (value: unknown): Record =>
export const useEventLog = () => {
const [entries, setEntries] = useState([]);
- const pushEvent = (event: SyntheticEvent) => {
+ const pushEvent = useCallback((event: SyntheticEvent) => {
setEntries((previousEntries) => {
const eventRecord = event as unknown as Record;
const target = toUnknownRecord(eventRecord.target);
@@ -254,7 +254,7 @@ export const useEventLog = () => {
return [...previousEntries, entry];
});
- };
+ }, []);
return { entries, pushEvent };
};
diff --git a/packages/twenty-front-component-renderer/src/constants/AllowedHtmlElements.ts b/packages/twenty-front-component-renderer/src/constants/AllowedHtmlElements.ts
index c0f604e18b..fd6e299c5e 100644
--- a/packages/twenty-front-component-renderer/src/constants/AllowedHtmlElements.ts
+++ b/packages/twenty-front-component-renderer/src/constants/AllowedHtmlElements.ts
@@ -50,6 +50,7 @@ export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [
width: { type: 'number', optional: true },
height: { type: 'number', optional: true },
},
+ events: ['load', 'error'],
},
{ tag: 'html-ul', name: 'HtmlUl', properties: {} },
{ tag: 'html-ol', name: 'HtmlOl', properties: {} },
@@ -333,6 +334,7 @@ export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [
properties: {
open: { type: 'boolean', optional: true },
},
+ events: ['toggle'],
},
{ tag: 'html-summary', name: 'HtmlSummary', properties: {} },
{ tag: 'html-address', name: 'HtmlAddress', properties: {} },
@@ -342,6 +344,7 @@ export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [
properties: {
open: { type: 'boolean', optional: true },
},
+ events: ['toggle'],
},
{ tag: 'html-hgroup', name: 'HtmlHgroup', properties: {} },
{ tag: 'html-search', name: 'HtmlSearch', properties: {} },
diff --git a/packages/twenty-front-component-renderer/src/constants/CommonHtmlEvents.ts b/packages/twenty-front-component-renderer/src/constants/CommonHtmlEvents.ts
index 5a812d2d0f..3e92fac2c1 100644
--- a/packages/twenty-front-component-renderer/src/constants/CommonHtmlEvents.ts
+++ b/packages/twenty-front-component-renderer/src/constants/CommonHtmlEvents.ts
@@ -28,4 +28,19 @@ export const COMMON_HTML_EVENTS = [
'wheel',
'contextmenu',
'drag',
+ 'dragstart',
+ 'dragenter',
+ 'dragleave',
+ 'dragover',
+ 'dragend',
+ 'drop',
+ 'touchstart',
+ 'touchmove',
+ 'touchend',
+ 'touchcancel',
+ 'focusin',
+ 'focusout',
+ 'animationend',
+ 'transitionend',
+ 'scrollend',
] as const;
diff --git a/packages/twenty-front-component-renderer/src/constants/EventToReact.ts b/packages/twenty-front-component-renderer/src/constants/DomEventTypeToReactProp.ts
similarity index 70%
rename from packages/twenty-front-component-renderer/src/constants/EventToReact.ts
rename to packages/twenty-front-component-renderer/src/constants/DomEventTypeToReactProp.ts
index 0a303aafd6..47668df22c 100644
--- a/packages/twenty-front-component-renderer/src/constants/EventToReact.ts
+++ b/packages/twenty-front-component-renderer/src/constants/DomEventTypeToReactProp.ts
@@ -1,4 +1,4 @@
-export const EVENT_TO_REACT: Record = {
+export const DOM_EVENT_TYPE_TO_REACT_PROP: Record = {
click: 'onClick',
dblclick: 'onDoubleClick',
mousedown: 'onMouseDown',
@@ -28,6 +28,23 @@ export const EVENT_TO_REACT: Record = {
wheel: 'onWheel',
contextmenu: 'onContextMenu',
drag: 'onDrag',
+ dragstart: 'onDragStart',
+ dragenter: 'onDragEnter',
+ dragleave: 'onDragLeave',
+ dragover: 'onDragOver',
+ dragend: 'onDragEnd',
+ drop: 'onDrop',
+ touchstart: 'onTouchStart',
+ touchmove: 'onTouchMove',
+ touchend: 'onTouchEnd',
+ touchcancel: 'onTouchCancel',
+ focusin: 'onFocusIn',
+ focusout: 'onFocusOut',
+ animationend: 'onAnimationEnd',
+ transitionend: 'onTransitionEnd',
+ scrollend: 'onScrollEnd',
+ toggle: 'onToggle',
+ load: 'onLoad',
timeupdate: 'onTimeUpdate',
play: 'onPlay',
pause: 'onPause',
diff --git a/packages/twenty-front-component-renderer/src/host/constants/ReactUnsupportedEventPropToEventType.ts b/packages/twenty-front-component-renderer/src/host/constants/ReactUnsupportedEventPropToEventType.ts
new file mode 100644
index 0000000000..fd7220bd77
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/constants/ReactUnsupportedEventPropToEventType.ts
@@ -0,0 +1,9 @@
+import { type ReactUnsupportedEventType } from '@/host/types/ReactUnsupportedEventType';
+
+export const REACT_UNSUPPORTED_EVENT_PROP_TO_EVENT_TYPE: Record<
+ string,
+ ReactUnsupportedEventType
+> = {
+ onFocusIn: 'focusin',
+ onFocusOut: 'focusout',
+};
diff --git a/packages/twenty-front-component-renderer/src/host/hooks/useReactUnsupportedEventListenerRef.ts b/packages/twenty-front-component-renderer/src/host/hooks/useReactUnsupportedEventListenerRef.ts
new file mode 100644
index 0000000000..3b25de1e9f
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/hooks/useReactUnsupportedEventListenerRef.ts
@@ -0,0 +1,22 @@
+import { useRef, useState } from 'react';
+
+import { type ReactUnsupportedEventHandlers } from '@/host/types/ReactUnsupportedEventHandlers';
+import { createReactUnsupportedEventListenerRef } from '@/host/utils/createReactUnsupportedEventListenerRef';
+
+export const useReactUnsupportedEventListenerRef = (
+ reactUnsupportedEventHandlers: ReactUnsupportedEventHandlers,
+): ((element: Element | null) => void) | undefined => {
+ const latestHandlersRef = useRef(reactUnsupportedEventHandlers);
+ latestHandlersRef.current = reactUnsupportedEventHandlers;
+
+ const [reactUnsupportedEventListenerRef] = useState(() =>
+ createReactUnsupportedEventListenerRef(latestHandlersRef),
+ );
+
+ const hasReactUnsupportedEventHandlers =
+ Object.keys(reactUnsupportedEventHandlers).length > 0;
+
+ return hasReactUnsupportedEventHandlers
+ ? reactUnsupportedEventListenerRef
+ : undefined;
+};
diff --git a/packages/twenty-front-component-renderer/src/host/types/ReactUnsupportedEventHandlers.ts b/packages/twenty-front-component-renderer/src/host/types/ReactUnsupportedEventHandlers.ts
new file mode 100644
index 0000000000..fe55df4909
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/types/ReactUnsupportedEventHandlers.ts
@@ -0,0 +1,5 @@
+import { type ReactUnsupportedEventType } from '@/host/types/ReactUnsupportedEventType';
+
+export type ReactUnsupportedEventHandlers = Partial<
+ Record void>
+>;
diff --git a/packages/twenty-front-component-renderer/src/host/types/ReactUnsupportedEventType.ts b/packages/twenty-front-component-renderer/src/host/types/ReactUnsupportedEventType.ts
new file mode 100644
index 0000000000..f273798ef8
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/types/ReactUnsupportedEventType.ts
@@ -0,0 +1 @@
+export type ReactUnsupportedEventType = 'focusin' | 'focusout';
diff --git a/packages/twenty-front-component-renderer/src/host/types/RemoteEventHandler.ts b/packages/twenty-front-component-renderer/src/host/types/RemoteEventHandler.ts
new file mode 100644
index 0000000000..cd0d4413f5
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/types/RemoteEventHandler.ts
@@ -0,0 +1,3 @@
+export type RemoteEventHandler = (event: {
+ preventDefault: () => void;
+}) => void;
diff --git a/packages/twenty-front-component-renderer/src/host/utils/__tests__/buildHostReactPropsFromRemoteProps.test.ts b/packages/twenty-front-component-renderer/src/host/utils/__tests__/buildHostReactPropsFromRemoteProps.test.ts
new file mode 100644
index 0000000000..3f8ec663c4
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/__tests__/buildHostReactPropsFromRemoteProps.test.ts
@@ -0,0 +1,193 @@
+import { DOM_EVENT_TYPE_TO_REACT_PROP } from '@/constants/DomEventTypeToReactProp';
+
+import { buildHostReactPropsFromRemoteProps } from '../buildHostReactPropsFromRemoteProps';
+
+describe('buildHostReactPropsFromRemoteProps', () => {
+ it('should drop internal remote-dom props', () => {
+ const result = buildHostReactPropsFromRemoteProps(
+ { element: {}, receiver: {}, components: {}, id: 'keep' },
+ 'div',
+ );
+
+ expect(result).toEqual({ id: 'keep' });
+ });
+
+ it('should drop undefined values', () => {
+ const result = buildHostReactPropsFromRemoteProps(
+ { title: undefined, id: 'x' },
+ 'div',
+ );
+
+ expect('title' in result).toBe(false);
+ expect(result.id).toBe('x');
+ });
+
+ it('should parse the style string into an object', () => {
+ const result = buildHostReactPropsFromRemoteProps(
+ { style: 'color: red' },
+ 'div',
+ );
+
+ expect(result.style).toEqual({ color: 'red' });
+ });
+
+ it('should wrap function event handlers and normalize their key', () => {
+ const onClick = jest.fn();
+ const result = buildHostReactPropsFromRemoteProps({ onClick }, 'div');
+
+ expect(typeof result.onClick).toBe('function');
+ expect(result.onClick).not.toBe(onClick);
+ });
+
+ it('should normalize and wrap newly allowed event handlers', () => {
+ const handler = jest.fn();
+ const result = buildHostReactPropsFromRemoteProps(
+ {
+ onTouchstart: handler,
+ onDragstart: handler,
+ onDrop: handler,
+ onAnimationend: handler,
+ onTransitionend: handler,
+ onScrollend: handler,
+ onToggle: handler,
+ onLoad: handler,
+ },
+ 'div',
+ );
+
+ expect(typeof result.onTouchStart).toBe('function');
+ expect(typeof result.onDragStart).toBe('function');
+ expect(typeof result.onDrop).toBe('function');
+ expect(typeof result.onAnimationEnd).toBe('function');
+ expect(typeof result.onTransitionEnd).toBe('function');
+ expect(typeof result.onScrollEnd).toBe('function');
+ expect(typeof result.onToggle).toBe('function');
+ expect(typeof result.onLoad).toBe('function');
+ });
+
+ it('should normalize focusin and focusout handlers to their react-style keys', () => {
+ const handler = jest.fn();
+ const result = buildHostReactPropsFromRemoteProps(
+ { onFocusin: handler, onFocusout: handler },
+ 'div',
+ );
+
+ expect(typeof result.onFocusIn).toBe('function');
+ expect(typeof result.onFocusOut).toBe('function');
+ });
+
+ it('should drop event-handler props whose value is not a function', () => {
+ const result = buildHostReactPropsFromRemoteProps(
+ { onClick: 'alert(1)', onmouseover: 'x' },
+ 'div',
+ );
+
+ expect('onClick' in result).toBe(false);
+ expect('onMouseOver' in result).toBe(false);
+ expect('onmouseover' in result).toBe(false);
+ });
+
+ it('should drop handler props whose event type is not allow-listed', () => {
+ const handler = jest.fn();
+ const result = buildHostReactPropsFromRemoteProps(
+ {
+ onCopy: handler,
+ onCut: handler,
+ onPaste: handler,
+ onSelect: handler,
+ onBeforeInput: handler,
+ },
+ 'div',
+ );
+
+ expect(result).toEqual({});
+ });
+
+ it('should keep every allow-listed event under its react prop name', () => {
+ const handler = jest.fn();
+
+ for (const reactProp of Object.values(DOM_EVENT_TYPE_TO_REACT_PROP)) {
+ const result = buildHostReactPropsFromRemoteProps(
+ { [reactProp]: handler },
+ 'div',
+ );
+
+ expect(Object.keys(result)).toEqual([reactProp]);
+ }
+ });
+
+ it('should drop capture-phase handler props', () => {
+ const handler = jest.fn();
+ const result = buildHostReactPropsFromRemoteProps(
+ { onClickCapture: handler, onKeyDownCapture: handler },
+ 'div',
+ );
+
+ expect(result).toEqual({});
+ });
+
+ it('should drop a dangerous scheme on a navigation attribute', () => {
+ const result = buildHostReactPropsFromRemoteProps(
+ { href: 'javascript:alert(1)' },
+ 'a',
+ );
+
+ expect('href' in result).toBe(false);
+ });
+
+ it('should keep a dangerous scheme on a non-navigation attribute', () => {
+ const dataImage = 'data:image/png;base64,iVBOR';
+ const result = buildHostReactPropsFromRemoteProps(
+ { src: dataImage },
+ 'img',
+ );
+
+ expect(result.src).toBe(dataImage);
+ });
+
+ it('should keep a safe url on a navigation attribute', () => {
+ const result = buildHostReactPropsFromRemoteProps(
+ { href: 'https://twenty.com' },
+ 'a',
+ );
+
+ expect(result.href).toBe('https://twenty.com');
+ });
+
+ it('should forward arbitrary aria-* and data-* attributes', () => {
+ const result = buildHostReactPropsFromRemoteProps(
+ {
+ 'aria-selected': 'true',
+ 'aria-activedescendant': 'item-2',
+ 'data-state': 'open',
+ 'data-count': '3',
+ },
+ 'div',
+ );
+
+ expect(result['aria-selected']).toBe('true');
+ expect(result['aria-activedescendant']).toBe('item-2');
+ expect(result['data-state']).toBe('open');
+ expect(result['data-count']).toBe('3');
+ });
+
+ it('should forward the draggable attribute', () => {
+ expect(
+ buildHostReactPropsFromRemoteProps({ draggable: 'true' }, 'div')
+ .draggable,
+ ).toBe('true');
+ expect(
+ buildHostReactPropsFromRemoteProps({ draggable: true }, 'div').draggable,
+ ).toBe(true);
+ });
+
+ it('should still drop a non-function on* handler smuggled as a data-adjacent prop', () => {
+ const result = buildHostReactPropsFromRemoteProps(
+ { onClick: 'alert(1)', 'data-state': 'open' },
+ 'div',
+ );
+
+ expect('onClick' in result).toBe(false);
+ expect(result['data-state']).toBe('open');
+ });
+});
diff --git a/packages/twenty-front-component-renderer/src/host/utils/__tests__/createCaretPreservingElement.test.ts b/packages/twenty-front-component-renderer/src/host/utils/__tests__/createCaretPreservingElement.test.ts
index ffa4744373..5c515060e2 100644
--- a/packages/twenty-front-component-renderer/src/host/utils/__tests__/createCaretPreservingElement.test.ts
+++ b/packages/twenty-front-component-renderer/src/host/utils/__tests__/createCaretPreservingElement.test.ts
@@ -7,46 +7,46 @@ const getProps = (element: ReactElement): Record =>
describe('createCaretPreservingElement', () => {
it('should create an element of the requested tag', () => {
- const element = createCaretPreservingElement(
- 'input',
- { type: 'text' },
- undefined,
- null,
- );
+ const element = createCaretPreservingElement({
+ htmlTag: 'input',
+ reactBindableProps: { type: 'text' },
+ hostEnforcedProps: undefined,
+ setEditableFocused: null,
+ });
expect(element.type).toBe('input');
expect(getProps(element).type).toBe('text');
});
it('should seed the initial value from value', () => {
- const element = createCaretPreservingElement(
- 'input',
- { value: 'hello' },
- undefined,
- null,
- );
+ const element = createCaretPreservingElement({
+ htmlTag: 'input',
+ reactBindableProps: { value: 'hello' },
+ hostEnforcedProps: undefined,
+ setEditableFocused: null,
+ });
expect(getProps(element).defaultValue).toBe('hello');
});
it('should prefer defaultValue over value for the initial value', () => {
- const element = createCaretPreservingElement(
- 'input',
- { value: 'v', defaultValue: 'd' },
- undefined,
- null,
- );
+ const element = createCaretPreservingElement({
+ htmlTag: 'input',
+ reactBindableProps: { value: 'v', defaultValue: 'd' },
+ hostEnforcedProps: undefined,
+ setEditableFocused: null,
+ });
expect(getProps(element).defaultValue).toBe('d');
});
- it('should apply forced props', () => {
- const element = createCaretPreservingElement(
- 'textarea',
- {},
- { readOnly: true },
- null,
- );
+ it('should apply host enforced props', () => {
+ const element = createCaretPreservingElement({
+ htmlTag: 'textarea',
+ reactBindableProps: {},
+ hostEnforcedProps: { readOnly: true },
+ setEditableFocused: null,
+ });
expect(getProps(element).readOnly).toBe(true);
});
@@ -54,12 +54,12 @@ describe('createCaretPreservingElement', () => {
it('should notify focus state and forward the original focus handler', () => {
const setEditableFocused = jest.fn();
const onFocus = jest.fn();
- const element = createCaretPreservingElement(
- 'input',
- { onFocus },
- undefined,
+ const element = createCaretPreservingElement({
+ htmlTag: 'input',
+ reactBindableProps: { onFocus },
+ hostEnforcedProps: undefined,
setEditableFocused,
- );
+ });
const event = {} as never;
(getProps(element).onFocus as (event: unknown) => void)(event);
@@ -70,12 +70,12 @@ describe('createCaretPreservingElement', () => {
it('should notify blur state', () => {
const setEditableFocused = jest.fn();
- const element = createCaretPreservingElement(
- 'input',
- {},
- undefined,
+ const element = createCaretPreservingElement({
+ htmlTag: 'input',
+ reactBindableProps: {},
+ hostEnforcedProps: undefined,
setEditableFocused,
- );
+ });
(getProps(element).onBlur as (event: unknown) => void)({} as never);
diff --git a/packages/twenty-front-component-renderer/src/host/utils/__tests__/createDropTargetGuardProps.test.ts b/packages/twenty-front-component-renderer/src/host/utils/__tests__/createDropTargetGuardProps.test.ts
new file mode 100644
index 0000000000..e14b77ee8b
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/__tests__/createDropTargetGuardProps.test.ts
@@ -0,0 +1,44 @@
+import { createDropTargetGuardProps } from '../createDropTargetGuardProps';
+
+describe('createDropTargetGuardProps', () => {
+ it('should return undefined without drag over or drop handlers', () => {
+ expect(createDropTargetGuardProps({ onClick: jest.fn() })).toBeUndefined();
+ });
+
+ it('should prevent default on drag over and forward to the remote handler', () => {
+ const onDragOver = jest.fn();
+ const props = createDropTargetGuardProps({ onDragOver });
+ const event = { preventDefault: jest.fn() };
+
+ (props?.onDragOver as (event: unknown) => void)(event);
+
+ expect(event.preventDefault).toHaveBeenCalledTimes(1);
+ expect(onDragOver).toHaveBeenCalledWith(event);
+ });
+
+ it('should prevent default on drag over when only a drop handler exists', () => {
+ const onDrop = jest.fn();
+ const props = createDropTargetGuardProps({ onDrop });
+ const dragOverEvent = { preventDefault: jest.fn() };
+ const dropEvent = { preventDefault: jest.fn() };
+
+ (props?.onDragOver as (event: unknown) => void)(dragOverEvent);
+ (props?.onDrop as (event: unknown) => void)(dropEvent);
+
+ expect(dragOverEvent.preventDefault).toHaveBeenCalledTimes(1);
+ expect(dropEvent.preventDefault).toHaveBeenCalledTimes(1);
+ expect(onDrop).toHaveBeenCalledWith(dropEvent);
+ });
+
+ it('should prevent default without forwarding to a non-function handler', () => {
+ const props = createDropTargetGuardProps({
+ onDragOver: 'alert(1)',
+ onDrop: jest.fn(),
+ });
+ const event = { preventDefault: jest.fn() };
+
+ (props?.onDragOver as (event: unknown) => void)(event);
+
+ expect(event.preventDefault).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/packages/twenty-front-component-renderer/src/host/utils/__tests__/createHtmlHostWrapper.test.ts b/packages/twenty-front-component-renderer/src/host/utils/__tests__/createHtmlHostWrapper.test.ts
index e5a4d370ca..20f8d42e09 100644
--- a/packages/twenty-front-component-renderer/src/host/utils/__tests__/createHtmlHostWrapper.test.ts
+++ b/packages/twenty-front-component-renderer/src/host/utils/__tests__/createHtmlHostWrapper.test.ts
@@ -1,10 +1,15 @@
import './setupServerRenderingGlobals';
-import { createElement } from 'react';
+import { act, createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
import { renderToStaticMarkup } from 'react-dom/server';
import { createHtmlHostWrapper } from '../createHtmlHostWrapper';
+(
+ globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
const renderWrapper = (
htmlTag: string,
props: Record,
@@ -93,3 +98,90 @@ describe('createHtmlHostWrapper prop hardening', () => {
expect(markup).toContain(dataImageUrl);
});
});
+
+describe('createHtmlHostWrapper client events', () => {
+ let container: HTMLDivElement;
+ let root: Root;
+
+ beforeEach(() => {
+ container = document.createElement('div');
+ document.body.appendChild(container);
+ root = createRoot(container);
+ });
+
+ afterEach(() => {
+ act(() => {
+ root.unmount();
+ });
+ container.remove();
+ });
+
+ it('should forward focusin through a native listener', () => {
+ const handleFocusIn = jest.fn();
+ const Wrapper = createHtmlHostWrapper('div');
+
+ act(() => {
+ root.render(createElement(Wrapper, { onFocusin: handleFocusIn }));
+ });
+
+ const node = container.firstElementChild as HTMLElement;
+ act(() => {
+ node.dispatchEvent(new Event('focusin', { bubbles: true }));
+ });
+
+ expect(handleFocusIn).toHaveBeenCalledTimes(1);
+ expect(handleFocusIn).toHaveBeenCalledWith(
+ expect.objectContaining({ type: 'focusin' }),
+ );
+ });
+
+ it('should stop forwarding focusin after the handler prop is removed', () => {
+ const handleFocusIn = jest.fn();
+ const Wrapper = createHtmlHostWrapper('div');
+
+ act(() => {
+ root.render(createElement(Wrapper, { onFocusin: handleFocusIn }));
+ });
+
+ const node = container.firstElementChild as HTMLElement;
+
+ act(() => {
+ root.render(createElement(Wrapper, {}));
+ });
+ act(() => {
+ node.dispatchEvent(new Event('focusin', { bubbles: true }));
+ });
+
+ expect(handleFocusIn).not.toHaveBeenCalled();
+ });
+
+ it('should prevent default on dragover when a remote drop handler exists', () => {
+ const handleDrop = jest.fn();
+ const Wrapper = createHtmlHostWrapper('div');
+
+ act(() => {
+ root.render(createElement(Wrapper, { onDrop: handleDrop }));
+ });
+
+ const node = container.firstElementChild as HTMLElement;
+ const dragOverEvent = new Event('dragover', {
+ bubbles: true,
+ cancelable: true,
+ });
+ act(() => {
+ node.dispatchEvent(dragOverEvent);
+ });
+
+ expect(dragOverEvent.defaultPrevented).toBe(true);
+
+ const dropEvent = new Event('drop', { bubbles: true, cancelable: true });
+ act(() => {
+ node.dispatchEvent(dropEvent);
+ });
+
+ expect(dropEvent.defaultPrevented).toBe(true);
+ expect(handleDrop).toHaveBeenCalledWith(
+ expect.objectContaining({ type: 'drop' }),
+ );
+ });
+});
diff --git a/packages/twenty-front-component-renderer/src/host/utils/__tests__/createReactUnsupportedEventListenerRef.test.ts b/packages/twenty-front-component-renderer/src/host/utils/__tests__/createReactUnsupportedEventListenerRef.test.ts
new file mode 100644
index 0000000000..4fc70f8bfb
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/__tests__/createReactUnsupportedEventListenerRef.test.ts
@@ -0,0 +1,61 @@
+import { createReactUnsupportedEventListenerRef } from '../createReactUnsupportedEventListenerRef';
+
+describe('createReactUnsupportedEventListenerRef', () => {
+ it('should forward focusin events to the latest handler', () => {
+ const initialHandler = jest.fn();
+ const handlersRef = { current: { focusin: initialHandler } };
+ const ref = createReactUnsupportedEventListenerRef(handlersRef);
+ const node = document.createElement('div');
+
+ ref(node);
+ node.dispatchEvent(new Event('focusin'));
+
+ expect(initialHandler).toHaveBeenCalledTimes(1);
+
+ const replacementHandler = jest.fn();
+ handlersRef.current = { focusin: replacementHandler };
+ node.dispatchEvent(new Event('focusin'));
+
+ expect(initialHandler).toHaveBeenCalledTimes(1);
+ expect(replacementHandler).toHaveBeenCalledTimes(1);
+ });
+
+ it('should ignore events without a registered handler', () => {
+ const ref = createReactUnsupportedEventListenerRef({ current: {} });
+ const node = document.createElement('div');
+
+ ref(node);
+
+ expect(() => node.dispatchEvent(new Event('focusout'))).not.toThrow();
+ });
+
+ it('should stop forwarding after the node detaches', () => {
+ const focusinHandler = jest.fn();
+ const ref = createReactUnsupportedEventListenerRef({
+ current: { focusin: focusinHandler },
+ });
+ const node = document.createElement('div');
+
+ ref(node);
+ ref(null);
+ node.dispatchEvent(new Event('focusin'));
+
+ expect(focusinHandler).not.toHaveBeenCalled();
+ });
+
+ it('should move listeners when the node changes', () => {
+ const focusinHandler = jest.fn();
+ const ref = createReactUnsupportedEventListenerRef({
+ current: { focusin: focusinHandler },
+ });
+ const firstNode = document.createElement('div');
+ const secondNode = document.createElement('div');
+
+ ref(firstNode);
+ ref(secondNode);
+ firstNode.dispatchEvent(new Event('focusin'));
+ secondNode.dispatchEvent(new Event('focusin'));
+
+ expect(focusinHandler).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/packages/twenty-front-component-renderer/src/host/utils/__tests__/extractReactUnsupportedEventHandlers.test.ts b/packages/twenty-front-component-renderer/src/host/utils/__tests__/extractReactUnsupportedEventHandlers.test.ts
new file mode 100644
index 0000000000..327d6290da
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/__tests__/extractReactUnsupportedEventHandlers.test.ts
@@ -0,0 +1,35 @@
+import { extractReactUnsupportedEventHandlers } from '../extractReactUnsupportedEventHandlers';
+
+describe('extractReactUnsupportedEventHandlers', () => {
+ it('should extract focusin and focusout handlers from react props', () => {
+ const onFocusIn = jest.fn();
+ const onFocusOut = jest.fn();
+
+ const { reactUnsupportedEventHandlers, reactBindableProps } =
+ extractReactUnsupportedEventHandlers({ onFocusIn, onFocusOut, id: 'x' });
+
+ expect(reactUnsupportedEventHandlers).toEqual({
+ focusin: onFocusIn,
+ focusout: onFocusOut,
+ });
+ expect(reactBindableProps).toEqual({ id: 'x' });
+ });
+
+ it('should drop a react-unsupported handler whose value is not a function', () => {
+ const { reactUnsupportedEventHandlers, reactBindableProps } =
+ extractReactUnsupportedEventHandlers({ onFocusIn: 'alert(1)' });
+
+ expect(reactUnsupportedEventHandlers).toEqual({});
+ expect('onFocusIn' in reactBindableProps).toBe(false);
+ });
+
+ it('should leave other props untouched', () => {
+ const onClick = jest.fn();
+
+ const { reactUnsupportedEventHandlers, reactBindableProps } =
+ extractReactUnsupportedEventHandlers({ onClick });
+
+ expect(reactUnsupportedEventHandlers).toEqual({});
+ expect(reactBindableProps).toEqual({ onClick });
+ });
+});
diff --git a/packages/twenty-front-component-renderer/src/host/utils/__tests__/filterProps.test.ts b/packages/twenty-front-component-renderer/src/host/utils/__tests__/filterProps.test.ts
deleted file mode 100644
index 149c7a3586..0000000000
--- a/packages/twenty-front-component-renderer/src/host/utils/__tests__/filterProps.test.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { filterProps } from '../filterProps';
-
-const filter = (props: Record, htmlTag: string) =>
- filterProps(props, htmlTag) as Record;
-
-describe('filterProps', () => {
- it('should drop internal remote-dom props', () => {
- const result = filter(
- { element: {}, receiver: {}, components: {}, id: 'keep' },
- 'div',
- );
-
- expect(result).toEqual({ id: 'keep' });
- });
-
- it('should drop undefined values', () => {
- const result = filter({ title: undefined, id: 'x' }, 'div');
-
- expect('title' in result).toBe(false);
- expect(result.id).toBe('x');
- });
-
- it('should parse the style string into an object', () => {
- const result = filter({ style: 'color: red' }, 'div');
-
- expect(result.style).toEqual({ color: 'red' });
- });
-
- it('should wrap function event handlers and normalize their key', () => {
- const onClick = jest.fn();
- const result = filter({ onClick }, 'div');
-
- expect(typeof result.onClick).toBe('function');
- expect(result.onClick).not.toBe(onClick);
- });
-
- it('should drop event-handler props whose value is not a function', () => {
- const result = filter({ onClick: 'alert(1)', onmouseover: 'x' }, 'div');
-
- expect('onClick' in result).toBe(false);
- expect('onMouseOver' in result).toBe(false);
- expect('onmouseover' in result).toBe(false);
- });
-
- it('should drop a dangerous scheme on a navigation attribute', () => {
- const result = filter({ href: 'javascript:alert(1)' }, 'a');
-
- expect('href' in result).toBe(false);
- });
-
- it('should keep a dangerous scheme on a non-navigation attribute', () => {
- const dataImage = 'data:image/png;base64,iVBOR';
- const result = filter({ src: dataImage }, 'img');
-
- expect(result.src).toBe(dataImage);
- });
-
- it('should keep a safe url on a navigation attribute', () => {
- const result = filter({ href: 'https://twenty.com' }, 'a');
-
- expect(result.href).toBe('https://twenty.com');
- });
-
- it('should forward arbitrary aria-* and data-* attributes', () => {
- const result = filter(
- {
- 'aria-selected': 'true',
- 'aria-activedescendant': 'item-2',
- 'data-state': 'open',
- 'data-count': '3',
- },
- 'div',
- );
-
- expect(result['aria-selected']).toBe('true');
- expect(result['aria-activedescendant']).toBe('item-2');
- expect(result['data-state']).toBe('open');
- expect(result['data-count']).toBe('3');
- });
-
- it('should forward the draggable attribute', () => {
- expect(filter({ draggable: 'true' }, 'div').draggable).toBe('true');
- expect(filter({ draggable: true }, 'div').draggable).toBe(true);
- });
-
- it('should still drop a non-function on* handler smuggled as a data-adjacent prop', () => {
- const result = filter({ onClick: 'alert(1)', 'data-state': 'open' }, 'div');
-
- expect('onClick' in result).toBe(false);
- expect(result['data-state']).toBe('open');
- });
-});
diff --git a/packages/twenty-front-component-renderer/src/host/utils/__tests__/serializeEvent.test.ts b/packages/twenty-front-component-renderer/src/host/utils/__tests__/serializeEvent.test.ts
index 77215a68f8..8c5dc4a589 100644
--- a/packages/twenty-front-component-renderer/src/host/utils/__tests__/serializeEvent.test.ts
+++ b/packages/twenty-front-component-renderer/src/host/utils/__tests__/serializeEvent.test.ts
@@ -34,6 +34,52 @@ describe('serializeEvent', () => {
expect(result).toEqual({ type: 'wheel' });
});
+ it('should map first changed touch coordinates into coordinate fields', () => {
+ const result = serializeEvent({
+ type: 'touchstart',
+ changedTouches: {
+ length: 1,
+ 0: {
+ clientX: 10,
+ clientY: 20,
+ pageX: 30,
+ pageY: 40,
+ screenX: 50,
+ screenY: 60,
+ },
+ },
+ });
+
+ expect(result).toEqual({
+ type: 'touchstart',
+ clientX: 10,
+ clientY: 20,
+ pageX: 30,
+ pageY: 40,
+ screenX: 50,
+ screenY: 60,
+ });
+ });
+
+ it('should keep own coordinates over changed touch coordinates', () => {
+ const result = serializeEvent({
+ type: 'mousemove',
+ clientX: 1,
+ changedTouches: { length: 1, 0: { clientX: 99 } },
+ });
+
+ expect(result.clientX).toBe(1);
+ });
+
+ it('should ignore an empty changed touches list', () => {
+ const result = serializeEvent({
+ type: 'touchend',
+ changedTouches: { length: 0 },
+ });
+
+ expect(result).toEqual({ type: 'touchend' });
+ });
+
it('should extract safe target properties', () => {
const result = serializeEvent({
type: 'change',
diff --git a/packages/twenty-front-component-renderer/src/host/utils/applyFirstChangedTouchCoordinates.ts b/packages/twenty-front-component-renderer/src/host/utils/applyFirstChangedTouchCoordinates.ts
new file mode 100644
index 0000000000..c6f36c52f2
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/applyFirstChangedTouchCoordinates.ts
@@ -0,0 +1,41 @@
+import { isNumber, isObject } from '@sniptt/guards';
+
+import { type SerializedEventData } from '@/types/SerializedEventData';
+
+const TOUCH_COORDINATE_KEYS = [
+ 'clientX',
+ 'clientY',
+ 'pageX',
+ 'pageY',
+ 'screenX',
+ 'screenY',
+] as const;
+
+export const applyFirstChangedTouchCoordinates = (
+ serializedEvent: SerializedEventData,
+ domEvent: Record,
+): void => {
+ const domEventHasDirectCoordinates = isNumber(domEvent.clientX);
+
+ if (domEventHasDirectCoordinates || !isObject(domEvent.changedTouches)) {
+ return;
+ }
+
+ const firstChangedTouch = (
+ domEvent.changedTouches as Record
+ )[0];
+
+ if (!isObject(firstChangedTouch)) {
+ return;
+ }
+
+ for (const coordinateKey of TOUCH_COORDINATE_KEYS) {
+ const coordinateValue = (firstChangedTouch as Record)[
+ coordinateKey
+ ];
+
+ if (isNumber(coordinateValue)) {
+ serializedEvent[coordinateKey] = coordinateValue;
+ }
+ }
+};
diff --git a/packages/twenty-front-component-renderer/src/host/utils/buildHostReactPropsFromRemoteProps.ts b/packages/twenty-front-component-renderer/src/host/utils/buildHostReactPropsFromRemoteProps.ts
new file mode 100644
index 0000000000..03c5657587
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/buildHostReactPropsFromRemoteProps.ts
@@ -0,0 +1,68 @@
+import { isFunction, isUndefined } from '@sniptt/guards';
+import { isDefined } from 'twenty-shared/utils';
+
+import { DOM_EVENT_TYPE_TO_REACT_PROP } from '@/constants/DomEventTypeToReactProp';
+import { hasDangerousUrlScheme } from '@/host/utils/hasDangerousUrlScheme';
+import { isEventHandlerKey } from '@/host/utils/isEventHandlerKey';
+import { isNavigationUrlAttribute } from '@/host/utils/isNavigationUrlAttribute';
+import { parseCssString } from '@/host/utils/parseCssString';
+import { wrapEventHandler } from '@/host/utils/wrapEventHandler';
+import { type SerializedEventData } from '@/types/SerializedEventData';
+
+const INTERNAL_PROPS = new Set(['element', 'receiver', 'components']);
+
+// Both spellings are indexed: dblclick arrives as ondblclick or onDoubleClick.
+const LOWERCASE_EVENT_PROP_TO_REACT_PROP: Record =
+ Object.fromEntries(
+ Object.entries(DOM_EVENT_TYPE_TO_REACT_PROP).flatMap(
+ ([domEventType, reactProp]) => [
+ [`on${domEventType}`, reactProp],
+ [reactProp.toLowerCase(), reactProp],
+ ],
+ ),
+ );
+
+export const buildHostReactPropsFromRemoteProps = (
+ remoteProps: Record,
+ htmlTag: string,
+): Record => {
+ const hostReactProps: Record = {};
+
+ for (const [remotePropName, remotePropValue] of Object.entries(remoteProps)) {
+ if (INTERNAL_PROPS.has(remotePropName) || isUndefined(remotePropValue)) {
+ continue;
+ }
+
+ if (remotePropName === 'style') {
+ hostReactProps.style = parseCssString(
+ remotePropValue as string | undefined,
+ );
+ continue;
+ }
+
+ // A guest can put any property name on the wire, and React binds every on*
+ // prop it recognizes, so unmapped handler names are dropped.
+ if (isEventHandlerKey(remotePropName)) {
+ const reactPropName =
+ LOWERCASE_EVENT_PROP_TO_REACT_PROP[remotePropName.toLowerCase()];
+
+ if (isDefined(reactPropName) && isFunction(remotePropValue)) {
+ hostReactProps[reactPropName] = wrapEventHandler(
+ remotePropValue as (detail: SerializedEventData) => void,
+ );
+ }
+ continue;
+ }
+
+ if (
+ isNavigationUrlAttribute(htmlTag, remotePropName) &&
+ hasDangerousUrlScheme(remotePropValue)
+ ) {
+ continue;
+ }
+
+ hostReactProps[remotePropName] = remotePropValue;
+ }
+
+ return hostReactProps;
+};
diff --git a/packages/twenty-front-component-renderer/src/host/utils/createCaretPreservingElement.ts b/packages/twenty-front-component-renderer/src/host/utils/createCaretPreservingElement.ts
index 825dc8017f..fdc7ef79a9 100644
--- a/packages/twenty-front-component-renderer/src/host/utils/createCaretPreservingElement.ts
+++ b/packages/twenty-front-component-renderer/src/host/utils/createCaretPreservingElement.ts
@@ -7,19 +7,28 @@ import { syncValuePreservingCaret } from '@/host/utils/syncValuePreservingCaret'
type CaretPreservingElement = HTMLInputElement | HTMLTextAreaElement;
-export const createCaretPreservingElement = (
- htmlTag: 'input' | 'textarea',
- reactProps: Record,
- forcedProps: Record | undefined,
- setEditableFocused: SetEditableFocused | null,
-) => {
+type CreateCaretPreservingElementParams = {
+ htmlTag: 'input' | 'textarea';
+ reactBindableProps: Record;
+ hostEnforcedProps: Record | undefined;
+ setEditableFocused: SetEditableFocused | null;
+ reactUnsupportedEventListenerRef?: (node: Element | null) => void;
+};
+
+export const createCaretPreservingElement = ({
+ htmlTag,
+ reactBindableProps,
+ hostEnforcedProps,
+ setEditableFocused,
+ reactUnsupportedEventListenerRef,
+}: CreateCaretPreservingElementParams) => {
const {
value,
defaultValue,
onFocus: forwardedOnFocus,
onBlur: forwardedOnBlur,
...rest
- } = reactProps;
+ } = reactBindableProps;
const initialValue = isNonEmptyString(defaultValue)
? defaultValue
: isNonEmptyString(value)
@@ -42,11 +51,12 @@ export const createCaretPreservingElement = (
return React.createElement(htmlTag, {
...rest,
- ...forcedProps,
+ ...hostEnforcedProps,
defaultValue: initialValue,
onFocus: handleFocus,
onBlur: handleBlur,
ref: (node: CaretPreservingElement | null) => {
+ reactUnsupportedEventListenerRef?.(node);
if (!isDefined(node)) {
return;
}
diff --git a/packages/twenty-front-component-renderer/src/host/utils/createDropTargetGuardProps.ts b/packages/twenty-front-component-renderer/src/host/utils/createDropTargetGuardProps.ts
new file mode 100644
index 0000000000..b58f0c3994
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/createDropTargetGuardProps.ts
@@ -0,0 +1,20 @@
+import { isFunction } from '@sniptt/guards';
+
+import { preventDefaultThenForwardToRemote } from '@/host/utils/preventDefaultThenForwardToRemote';
+
+// A browser only fires drop on an element whose dragover default was prevented.
+export const createDropTargetGuardProps = (
+ reactBindableProps: Record,
+): Record | undefined => {
+ const remoteDragOverHandler = reactBindableProps.onDragOver;
+ const remoteDropHandler = reactBindableProps.onDrop;
+
+ if (!isFunction(remoteDragOverHandler) && !isFunction(remoteDropHandler)) {
+ return undefined;
+ }
+
+ return {
+ onDragOver: preventDefaultThenForwardToRemote(remoteDragOverHandler),
+ onDrop: preventDefaultThenForwardToRemote(remoteDropHandler),
+ };
+};
diff --git a/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts b/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts
index e37fd043ad..281965a1eb 100644
--- a/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts
+++ b/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts
@@ -1,9 +1,13 @@
import React, { useContext } from 'react';
import { FrontComponentInputFocusContext } from '@/host/contexts/FrontComponentInputFocusContext';
+import { useReactUnsupportedEventListenerRef } from '@/host/hooks/useReactUnsupportedEventListenerRef';
+import { buildHostReactPropsFromRemoteProps } from '@/host/utils/buildHostReactPropsFromRemoteProps';
import { createCaretPreservingElement } from '@/host/utils/createCaretPreservingElement';
-import { filterProps } from '@/host/utils/filterProps';
+import { createDropTargetGuardProps } from '@/host/utils/createDropTargetGuardProps';
+import { extractReactUnsupportedEventHandlers } from '@/host/utils/extractReactUnsupportedEventHandlers';
import { isTextLikeInputType } from '@/host/utils/isTextLikeInputType';
+import { preventDefaultThenForwardToRemote } from '@/host/utils/preventDefaultThenForwardToRemote';
import { sanitizeIframeSandbox } from '@/host/utils/sanitizeIframeSandbox';
const VOID_ELEMENTS = new Set([
@@ -31,49 +35,48 @@ export const createHtmlHostWrapper = (htmlTag: string) => {
return ({ children, ...props }: WrapperProps) => {
const setEditableFocused = useContext(FrontComponentInputFocusContext);
- const reactProps = filterProps(props, htmlTag);
- const forcedProps: Record | undefined = isIframe
- ? { sandbox: sanitizeIframeSandbox(reactProps.sandbox) }
- : isForm
- ? {
- // The remote component's onSubmit is forwarded asynchronously across
- // the remote-dom boundary, so its preventDefault lands too late to
- // stop a native form submission (which navigates and closes the
- // page). Guard synchronously on the host while still forwarding the
- // event to the remote handler. (React 19 also blocks the previous
- // `action="javascript:void(0)"` guard.)
- onSubmit: (event: React.FormEvent) => {
- event.preventDefault();
- const remoteOnSubmit = reactProps.onSubmit;
- // The remote prop is untrusted across the remote-dom boundary, so
- // it may not be a function — guard before invoking.
- if (typeof remoteOnSubmit === 'function') {
- (
- remoteOnSubmit as (
- event: React.FormEvent,
- ) => void
- )(event);
- }
- },
- }
- : undefined;
+ const { reactUnsupportedEventHandlers, reactBindableProps } =
+ extractReactUnsupportedEventHandlers(
+ buildHostReactPropsFromRemoteProps(props, htmlTag),
+ );
+
+ const reactUnsupportedEventListenerRef =
+ useReactUnsupportedEventListenerRef(reactUnsupportedEventHandlers);
+
+ const hostEnforcedProps: Record = {
+ ...createDropTargetGuardProps(reactBindableProps),
+ ...(isIframe && {
+ sandbox: sanitizeIframeSandbox(reactBindableProps.sandbox),
+ }),
+ // React 19 blocks the previous `action="javascript:void(0)"` guard.
+ ...(isForm && {
+ onSubmit: preventDefaultThenForwardToRemote(
+ reactBindableProps.onSubmit,
+ ),
+ }),
+ };
if (
htmlTag === 'textarea' ||
- (htmlTag === 'input' && isTextLikeInputType(reactProps.type))
+ (htmlTag === 'input' && isTextLikeInputType(reactBindableProps.type))
) {
- return createCaretPreservingElement(
+ return createCaretPreservingElement({
htmlTag,
- reactProps,
- forcedProps,
+ reactBindableProps,
+ hostEnforcedProps,
setEditableFocused,
- );
+ reactUnsupportedEventListenerRef,
+ });
}
return React.createElement(
htmlTag,
- { ...reactProps, ...forcedProps },
+ {
+ ...reactBindableProps,
+ ...hostEnforcedProps,
+ ref: reactUnsupportedEventListenerRef,
+ },
isVoid ? undefined : children,
);
};
diff --git a/packages/twenty-front-component-renderer/src/host/utils/createReactUnsupportedEventListenerRef.ts b/packages/twenty-front-component-renderer/src/host/utils/createReactUnsupportedEventListenerRef.ts
new file mode 100644
index 0000000000..5c72ba077f
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/createReactUnsupportedEventListenerRef.ts
@@ -0,0 +1,41 @@
+import { type RefObject } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+import { REACT_UNSUPPORTED_EVENT_PROP_TO_EVENT_TYPE } from '@/host/constants/ReactUnsupportedEventPropToEventType';
+import { type ReactUnsupportedEventHandlers } from '@/host/types/ReactUnsupportedEventHandlers';
+import { type ReactUnsupportedEventType } from '@/host/types/ReactUnsupportedEventType';
+
+const REACT_UNSUPPORTED_EVENT_TYPES = Object.values(
+ REACT_UNSUPPORTED_EVENT_PROP_TO_EVENT_TYPE,
+);
+
+export const createReactUnsupportedEventListenerRef = (
+ latestHandlersRef: RefObject,
+) => {
+ let attachedElement: Element | null = null;
+
+ const forwardEventToLatestHandler = (event: Event) => {
+ const latestHandler =
+ latestHandlersRef.current[event.type as ReactUnsupportedEventType];
+ latestHandler?.(event);
+ };
+
+ return (element: Element | null) => {
+ if (isDefined(attachedElement)) {
+ for (const eventType of REACT_UNSUPPORTED_EVENT_TYPES) {
+ attachedElement.removeEventListener(
+ eventType,
+ forwardEventToLatestHandler,
+ );
+ }
+ }
+
+ attachedElement = element;
+
+ if (isDefined(element)) {
+ for (const eventType of REACT_UNSUPPORTED_EVENT_TYPES) {
+ element.addEventListener(eventType, forwardEventToLatestHandler);
+ }
+ }
+ };
+};
diff --git a/packages/twenty-front-component-renderer/src/host/utils/extractReactUnsupportedEventHandlers.ts b/packages/twenty-front-component-renderer/src/host/utils/extractReactUnsupportedEventHandlers.ts
new file mode 100644
index 0000000000..421c8199f5
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/extractReactUnsupportedEventHandlers.ts
@@ -0,0 +1,34 @@
+import { isFunction } from '@sniptt/guards';
+
+import { REACT_UNSUPPORTED_EVENT_PROP_TO_EVENT_TYPE } from '@/host/constants/ReactUnsupportedEventPropToEventType';
+import { type ReactUnsupportedEventHandlers } from '@/host/types/ReactUnsupportedEventHandlers';
+
+const REACT_UNSUPPORTED_EVENT_PROP_ENTRIES = Object.entries(
+ REACT_UNSUPPORTED_EVENT_PROP_TO_EVENT_TYPE,
+);
+
+export const extractReactUnsupportedEventHandlers = (
+ hostReactProps: Record,
+): {
+ reactUnsupportedEventHandlers: ReactUnsupportedEventHandlers;
+ reactBindableProps: Record;
+} => {
+ const reactUnsupportedEventHandlers: ReactUnsupportedEventHandlers = {};
+ const reactBindableProps = { ...hostReactProps };
+
+ for (const [
+ reactPropName,
+ reactUnsupportedEventType,
+ ] of REACT_UNSUPPORTED_EVENT_PROP_ENTRIES) {
+ const handler = reactBindableProps[reactPropName];
+ delete reactBindableProps[reactPropName];
+
+ if (isFunction(handler)) {
+ reactUnsupportedEventHandlers[reactUnsupportedEventType] = handler as (
+ event: Event,
+ ) => void;
+ }
+ }
+
+ return { reactUnsupportedEventHandlers, reactBindableProps };
+};
diff --git a/packages/twenty-front-component-renderer/src/host/utils/filterProps.ts b/packages/twenty-front-component-renderer/src/host/utils/filterProps.ts
deleted file mode 100644
index b8b8407944..0000000000
--- a/packages/twenty-front-component-renderer/src/host/utils/filterProps.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { isFunction, isUndefined } from '@sniptt/guards';
-
-import { EVENT_TO_REACT } from '@/constants/EventToReact';
-import { hasDangerousUrlScheme } from '@/host/utils/hasDangerousUrlScheme';
-import { isEventHandlerKey } from '@/host/utils/isEventHandlerKey';
-import { isNavigationUrlAttribute } from '@/host/utils/isNavigationUrlAttribute';
-import { parseCssString } from '@/host/utils/parseCssString';
-import { wrapEventHandler } from '@/host/utils/wrapEventHandler';
-import { type SerializedEventData } from '@/types/SerializedEventData';
-
-const INTERNAL_PROPS = new Set(['element', 'receiver', 'components']);
-
-const EVENT_NAME_MAP: Record = Object.fromEntries(
- Object.entries(EVENT_TO_REACT).map(([domEvent, reactProp]) => [
- `on${domEvent}`,
- reactProp,
- ]),
-);
-
-export const filterProps = (props: T, htmlTag: string): T => {
- const filtered: Record = {};
-
- for (const [key, value] of Object.entries(props)) {
- if (INTERNAL_PROPS.has(key) || isUndefined(value)) {
- continue;
- }
-
- if (key === 'style') {
- filtered.style = parseCssString(value as string | undefined);
- continue;
- }
-
- const normalizedKey = EVENT_NAME_MAP[key.toLowerCase()] || key;
-
- if (isEventHandlerKey(normalizedKey)) {
- if (isFunction(value)) {
- filtered[normalizedKey] = wrapEventHandler(
- value as (detail: SerializedEventData) => void,
- );
- }
- continue;
- }
-
- if (
- isNavigationUrlAttribute(htmlTag, normalizedKey) &&
- hasDangerousUrlScheme(value)
- ) {
- continue;
- }
-
- filtered[normalizedKey] = value;
- }
-
- return filtered as T;
-};
diff --git a/packages/twenty-front-component-renderer/src/host/utils/preventDefaultThenForwardToRemote.ts b/packages/twenty-front-component-renderer/src/host/utils/preventDefaultThenForwardToRemote.ts
new file mode 100644
index 0000000000..6ffad9b9cd
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/host/utils/preventDefaultThenForwardToRemote.ts
@@ -0,0 +1,14 @@
+import { isFunction } from '@sniptt/guards';
+
+import { type RemoteEventHandler } from '@/host/types/RemoteEventHandler';
+
+// A remote handler crosses the boundary asynchronously, so its own
+// preventDefault would land after the browser already acted.
+export const preventDefaultThenForwardToRemote =
+ (remoteHandler: unknown) => (event: { preventDefault: () => void }) => {
+ event.preventDefault();
+
+ if (isFunction(remoteHandler)) {
+ (remoteHandler as RemoteEventHandler)(event);
+ }
+ };
diff --git a/packages/twenty-front-component-renderer/src/host/utils/serializeEvent.ts b/packages/twenty-front-component-renderer/src/host/utils/serializeEvent.ts
index 45f8cc1b53..1da81bddd5 100644
--- a/packages/twenty-front-component-renderer/src/host/utils/serializeEvent.ts
+++ b/packages/twenty-front-component-renderer/src/host/utils/serializeEvent.ts
@@ -1,6 +1,7 @@
import { isBoolean, isNumber, isObject, isString } from '@sniptt/guards';
import { isDefined } from 'twenty-shared/utils';
+import { applyFirstChangedTouchCoordinates } from '@/host/utils/applyFirstChangedTouchCoordinates';
import { serializeFileList } from '@/host/utils/serializeFileList';
import { type SerializedEventData } from '@/types/SerializedEventData';
@@ -70,6 +71,8 @@ export const serializeEvent = (event: unknown): SerializedEventData => {
serialized.buttons = domEvent.buttons;
}
+ applyFirstChangedTouchCoordinates(serialized, domEvent);
+
if (isNumber(domEvent.pointerId)) {
serialized.pointerId = domEvent.pointerId;
}
diff --git a/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts b/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts
index b9ad79f351..659b7a7de0 100644
--- a/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts
+++ b/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts
@@ -153,6 +153,21 @@ export const HtmlDiv = createRemoteComponent('html-div', HtmlDivElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlSpan = createRemoteComponent('html-span', HtmlSpanElement, {
@@ -186,6 +201,21 @@ export const HtmlSpan = createRemoteComponent('html-span', HtmlSpanElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlSection = createRemoteComponent(
@@ -222,6 +252,21 @@ export const HtmlSection = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -259,6 +304,21 @@ export const HtmlArticle = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -296,6 +356,21 @@ export const HtmlHeader = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -333,6 +408,21 @@ export const HtmlFooter = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -367,6 +457,21 @@ export const HtmlMain = createRemoteComponent('html-main', HtmlMainElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlNav = createRemoteComponent('html-nav', HtmlNavElement, {
@@ -400,6 +505,21 @@ export const HtmlNav = createRemoteComponent('html-nav', HtmlNavElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlAside = createRemoteComponent('html-aside', HtmlAsideElement, {
@@ -433,6 +553,21 @@ export const HtmlAside = createRemoteComponent('html-aside', HtmlAsideElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlP = createRemoteComponent('html-p', HtmlPElement, {
@@ -466,6 +601,21 @@ export const HtmlP = createRemoteComponent('html-p', HtmlPElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlH1 = createRemoteComponent('html-h1', HtmlH1Element, {
@@ -499,6 +649,21 @@ export const HtmlH1 = createRemoteComponent('html-h1', HtmlH1Element, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlH2 = createRemoteComponent('html-h2', HtmlH2Element, {
@@ -532,6 +697,21 @@ export const HtmlH2 = createRemoteComponent('html-h2', HtmlH2Element, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlH3 = createRemoteComponent('html-h3', HtmlH3Element, {
@@ -565,6 +745,21 @@ export const HtmlH3 = createRemoteComponent('html-h3', HtmlH3Element, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlH4 = createRemoteComponent('html-h4', HtmlH4Element, {
@@ -598,6 +793,21 @@ export const HtmlH4 = createRemoteComponent('html-h4', HtmlH4Element, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlH5 = createRemoteComponent('html-h5', HtmlH5Element, {
@@ -631,6 +841,21 @@ export const HtmlH5 = createRemoteComponent('html-h5', HtmlH5Element, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlH6 = createRemoteComponent('html-h6', HtmlH6Element, {
@@ -664,6 +889,21 @@ export const HtmlH6 = createRemoteComponent('html-h6', HtmlH6Element, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlStrong = createRemoteComponent(
@@ -700,6 +940,21 @@ export const HtmlStrong = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -734,6 +989,21 @@ export const HtmlEm = createRemoteComponent('html-em', HtmlEmElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlSmall = createRemoteComponent('html-small', HtmlSmallElement, {
@@ -767,6 +1037,21 @@ export const HtmlSmall = createRemoteComponent('html-small', HtmlSmallElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlCode = createRemoteComponent('html-code', HtmlCodeElement, {
@@ -800,6 +1085,21 @@ export const HtmlCode = createRemoteComponent('html-code', HtmlCodeElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlPre = createRemoteComponent('html-pre', HtmlPreElement, {
@@ -833,6 +1133,21 @@ export const HtmlPre = createRemoteComponent('html-pre', HtmlPreElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlBlockquote = createRemoteComponent(
@@ -869,6 +1184,21 @@ export const HtmlBlockquote = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -903,6 +1233,21 @@ export const HtmlA = createRemoteComponent('html-a', HtmlAElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlImg = createRemoteComponent('html-img', HtmlImgElement, {
@@ -936,6 +1281,23 @@ export const HtmlImg = createRemoteComponent('html-img', HtmlImgElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
+ onLoad: { event: 'load' },
+ onError: { event: 'error' },
},
});
export const HtmlUl = createRemoteComponent('html-ul', HtmlUlElement, {
@@ -969,6 +1331,21 @@ export const HtmlUl = createRemoteComponent('html-ul', HtmlUlElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlOl = createRemoteComponent('html-ol', HtmlOlElement, {
@@ -1002,6 +1379,21 @@ export const HtmlOl = createRemoteComponent('html-ol', HtmlOlElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlLi = createRemoteComponent('html-li', HtmlLiElement, {
@@ -1035,6 +1427,21 @@ export const HtmlLi = createRemoteComponent('html-li', HtmlLiElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlForm = createRemoteComponent('html-form', HtmlFormElement, {
@@ -1068,6 +1475,21 @@ export const HtmlForm = createRemoteComponent('html-form', HtmlFormElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlLabel = createRemoteComponent('html-label', HtmlLabelElement, {
@@ -1101,6 +1523,21 @@ export const HtmlLabel = createRemoteComponent('html-label', HtmlLabelElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlInput = createRemoteComponent('html-input', HtmlInputElement, {
@@ -1134,6 +1571,21 @@ export const HtmlInput = createRemoteComponent('html-input', HtmlInputElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlTextarea = createRemoteComponent(
@@ -1170,6 +1622,21 @@ export const HtmlTextarea = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -1207,6 +1674,21 @@ export const HtmlSelect = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -1244,6 +1726,21 @@ export const HtmlOption = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -1281,6 +1778,21 @@ export const HtmlButton = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -1315,6 +1827,21 @@ export const HtmlTable = createRemoteComponent('html-table', HtmlTableElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlThead = createRemoteComponent('html-thead', HtmlTheadElement, {
@@ -1348,6 +1875,21 @@ export const HtmlThead = createRemoteComponent('html-thead', HtmlTheadElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlTbody = createRemoteComponent('html-tbody', HtmlTbodyElement, {
@@ -1381,6 +1923,21 @@ export const HtmlTbody = createRemoteComponent('html-tbody', HtmlTbodyElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlTfoot = createRemoteComponent('html-tfoot', HtmlTfootElement, {
@@ -1414,6 +1971,21 @@ export const HtmlTfoot = createRemoteComponent('html-tfoot', HtmlTfootElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlTr = createRemoteComponent('html-tr', HtmlTrElement, {
@@ -1447,6 +2019,21 @@ export const HtmlTr = createRemoteComponent('html-tr', HtmlTrElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlTh = createRemoteComponent('html-th', HtmlThElement, {
@@ -1480,6 +2067,21 @@ export const HtmlTh = createRemoteComponent('html-th', HtmlThElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlTd = createRemoteComponent('html-td', HtmlTdElement, {
@@ -1513,6 +2115,21 @@ export const HtmlTd = createRemoteComponent('html-td', HtmlTdElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlBr = createRemoteComponent('html-br', HtmlBrElement, {
@@ -1546,6 +2163,21 @@ export const HtmlBr = createRemoteComponent('html-br', HtmlBrElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlHr = createRemoteComponent('html-hr', HtmlHrElement, {
@@ -1579,6 +2211,21 @@ export const HtmlHr = createRemoteComponent('html-hr', HtmlHrElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlIframe = createRemoteComponent(
@@ -1615,6 +2262,21 @@ export const HtmlIframe = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -1649,6 +2311,21 @@ export const HtmlVideo = createRemoteComponent('html-video', HtmlVideoElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
onTimeUpdate: { event: 'timeupdate' },
onPlay: { event: 'play' },
onPause: { event: 'pause' },
@@ -1701,6 +2378,21 @@ export const HtmlAudio = createRemoteComponent('html-audio', HtmlAudioElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
onTimeUpdate: { event: 'timeupdate' },
onPlay: { event: 'play' },
onPause: { event: 'pause' },
@@ -1756,6 +2448,21 @@ export const HtmlSource = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -1790,6 +2497,21 @@ export const HtmlB = createRemoteComponent('html-b', HtmlBElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlI = createRemoteComponent('html-i', HtmlIElement, {
@@ -1823,6 +2545,21 @@ export const HtmlI = createRemoteComponent('html-i', HtmlIElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlU = createRemoteComponent('html-u', HtmlUElement, {
@@ -1856,6 +2593,21 @@ export const HtmlU = createRemoteComponent('html-u', HtmlUElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlS = createRemoteComponent('html-s', HtmlSElement, {
@@ -1889,6 +2641,21 @@ export const HtmlS = createRemoteComponent('html-s', HtmlSElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlMark = createRemoteComponent('html-mark', HtmlMarkElement, {
@@ -1922,6 +2689,21 @@ export const HtmlMark = createRemoteComponent('html-mark', HtmlMarkElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlSub = createRemoteComponent('html-sub', HtmlSubElement, {
@@ -1955,6 +2737,21 @@ export const HtmlSub = createRemoteComponent('html-sub', HtmlSubElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlSup = createRemoteComponent('html-sup', HtmlSupElement, {
@@ -1988,6 +2785,21 @@ export const HtmlSup = createRemoteComponent('html-sup', HtmlSupElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlAbbr = createRemoteComponent('html-abbr', HtmlAbbrElement, {
@@ -2021,6 +2833,21 @@ export const HtmlAbbr = createRemoteComponent('html-abbr', HtmlAbbrElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlCite = createRemoteComponent('html-cite', HtmlCiteElement, {
@@ -2054,6 +2881,21 @@ export const HtmlCite = createRemoteComponent('html-cite', HtmlCiteElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlKbd = createRemoteComponent('html-kbd', HtmlKbdElement, {
@@ -2087,6 +2929,21 @@ export const HtmlKbd = createRemoteComponent('html-kbd', HtmlKbdElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlSamp = createRemoteComponent('html-samp', HtmlSampElement, {
@@ -2120,6 +2977,21 @@ export const HtmlSamp = createRemoteComponent('html-samp', HtmlSampElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlVar = createRemoteComponent('html-var', HtmlVarElement, {
@@ -2153,6 +3025,21 @@ export const HtmlVar = createRemoteComponent('html-var', HtmlVarElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlDfn = createRemoteComponent('html-dfn', HtmlDfnElement, {
@@ -2186,6 +3073,21 @@ export const HtmlDfn = createRemoteComponent('html-dfn', HtmlDfnElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlBdi = createRemoteComponent('html-bdi', HtmlBdiElement, {
@@ -2219,6 +3121,21 @@ export const HtmlBdi = createRemoteComponent('html-bdi', HtmlBdiElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlBdo = createRemoteComponent('html-bdo', HtmlBdoElement, {
@@ -2252,6 +3169,21 @@ export const HtmlBdo = createRemoteComponent('html-bdo', HtmlBdoElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlData = createRemoteComponent('html-data', HtmlDataElement, {
@@ -2285,6 +3217,21 @@ export const HtmlData = createRemoteComponent('html-data', HtmlDataElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlDel = createRemoteComponent('html-del', HtmlDelElement, {
@@ -2318,6 +3265,21 @@ export const HtmlDel = createRemoteComponent('html-del', HtmlDelElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlIns = createRemoteComponent('html-ins', HtmlInsElement, {
@@ -2351,6 +3313,21 @@ export const HtmlIns = createRemoteComponent('html-ins', HtmlInsElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlQ = createRemoteComponent('html-q', HtmlQElement, {
@@ -2384,6 +3361,21 @@ export const HtmlQ = createRemoteComponent('html-q', HtmlQElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlTime = createRemoteComponent('html-time', HtmlTimeElement, {
@@ -2417,6 +3409,21 @@ export const HtmlTime = createRemoteComponent('html-time', HtmlTimeElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlRuby = createRemoteComponent('html-ruby', HtmlRubyElement, {
@@ -2450,6 +3457,21 @@ export const HtmlRuby = createRemoteComponent('html-ruby', HtmlRubyElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlRt = createRemoteComponent('html-rt', HtmlRtElement, {
@@ -2483,6 +3505,21 @@ export const HtmlRt = createRemoteComponent('html-rt', HtmlRtElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlRp = createRemoteComponent('html-rp', HtmlRpElement, {
@@ -2516,6 +3553,21 @@ export const HtmlRp = createRemoteComponent('html-rp', HtmlRpElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlDl = createRemoteComponent('html-dl', HtmlDlElement, {
@@ -2549,6 +3601,21 @@ export const HtmlDl = createRemoteComponent('html-dl', HtmlDlElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlDt = createRemoteComponent('html-dt', HtmlDtElement, {
@@ -2582,6 +3649,21 @@ export const HtmlDt = createRemoteComponent('html-dt', HtmlDtElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlDd = createRemoteComponent('html-dd', HtmlDdElement, {
@@ -2615,6 +3697,21 @@ export const HtmlDd = createRemoteComponent('html-dd', HtmlDdElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlFigure = createRemoteComponent(
@@ -2651,6 +3748,21 @@ export const HtmlFigure = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -2688,6 +3800,21 @@ export const HtmlFigcaption = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -2725,6 +3852,22 @@ export const HtmlDetails = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
+ onToggle: { event: 'toggle' },
},
},
);
@@ -2762,6 +3905,21 @@ export const HtmlSummary = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -2799,6 +3957,21 @@ export const HtmlAddress = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -2836,6 +4009,22 @@ export const HtmlDialog = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
+ onToggle: { event: 'toggle' },
},
},
);
@@ -2873,6 +4062,21 @@ export const HtmlHgroup = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -2910,6 +4114,21 @@ export const HtmlSearch = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -2947,6 +4166,21 @@ export const HtmlCaption = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -2984,6 +4218,21 @@ export const HtmlColgroup = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3018,6 +4267,21 @@ export const HtmlCol = createRemoteComponent('html-col', HtmlColElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlFieldset = createRemoteComponent(
@@ -3054,6 +4318,21 @@ export const HtmlFieldset = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3091,6 +4370,21 @@ export const HtmlLegend = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3128,6 +4422,21 @@ export const HtmlOutput = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3165,6 +4474,21 @@ export const HtmlProgress = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3199,6 +4523,21 @@ export const HtmlMeter = createRemoteComponent('html-meter', HtmlMeterElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlOptgroup = createRemoteComponent(
@@ -3235,6 +4574,21 @@ export const HtmlOptgroup = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3272,6 +4626,21 @@ export const HtmlDatalist = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3309,6 +4678,21 @@ export const HtmlPicture = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3343,6 +4727,21 @@ export const HtmlTrack = createRemoteComponent('html-track', HtmlTrackElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlWbr = createRemoteComponent('html-wbr', HtmlWbrElement, {
@@ -3376,6 +4775,21 @@ export const HtmlWbr = createRemoteComponent('html-wbr', HtmlWbrElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlMenu = createRemoteComponent('html-menu', HtmlMenuElement, {
@@ -3409,6 +4823,21 @@ export const HtmlMenu = createRemoteComponent('html-menu', HtmlMenuElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlSvg = createRemoteComponent('html-svg', HtmlSvgElement, {
@@ -3442,6 +4871,21 @@ export const HtmlSvg = createRemoteComponent('html-svg', HtmlSvgElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlG = createRemoteComponent('html-g', HtmlGElement, {
@@ -3475,6 +4919,21 @@ export const HtmlG = createRemoteComponent('html-g', HtmlGElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlDefs = createRemoteComponent('html-defs', HtmlDefsElement, {
@@ -3508,6 +4967,21 @@ export const HtmlDefs = createRemoteComponent('html-defs', HtmlDefsElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlSymbol = createRemoteComponent(
@@ -3544,6 +5018,21 @@ export const HtmlSymbol = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3578,6 +5067,21 @@ export const HtmlUse = createRemoteComponent('html-use', HtmlUseElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlClipPath = createRemoteComponent(
@@ -3614,6 +5118,21 @@ export const HtmlClipPath = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3648,6 +5167,21 @@ export const HtmlMask = createRemoteComponent('html-mask', HtmlMaskElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlCircle = createRemoteComponent(
@@ -3684,6 +5218,21 @@ export const HtmlCircle = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3721,6 +5270,21 @@ export const HtmlEllipse = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3755,6 +5319,21 @@ export const HtmlRect = createRemoteComponent('html-rect', HtmlRectElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlLine = createRemoteComponent('html-line', HtmlLineElement, {
@@ -3788,6 +5367,21 @@ export const HtmlLine = createRemoteComponent('html-line', HtmlLineElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlPath = createRemoteComponent('html-path', HtmlPathElement, {
@@ -3821,6 +5415,21 @@ export const HtmlPath = createRemoteComponent('html-path', HtmlPathElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlPolygon = createRemoteComponent(
@@ -3857,6 +5466,21 @@ export const HtmlPolygon = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3894,6 +5518,21 @@ export const HtmlPolyline = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -3928,6 +5567,21 @@ export const HtmlText = createRemoteComponent('html-text', HtmlTextElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlTspan = createRemoteComponent('html-tspan', HtmlTspanElement, {
@@ -3961,6 +5615,21 @@ export const HtmlTspan = createRemoteComponent('html-tspan', HtmlTspanElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlLinearGradient = createRemoteComponent(
@@ -3997,6 +5666,21 @@ export const HtmlLinearGradient = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -4034,6 +5718,21 @@ export const HtmlRadialGradient = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -4068,6 +5767,21 @@ export const HtmlStop = createRemoteComponent('html-stop', HtmlStopElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlPattern = createRemoteComponent(
@@ -4104,6 +5818,21 @@ export const HtmlPattern = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -4138,6 +5867,21 @@ export const HtmlImage = createRemoteComponent('html-image', HtmlImageElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const HtmlForeignObject = createRemoteComponent(
@@ -4174,6 +5918,21 @@ export const HtmlForeignObject = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -4211,6 +5970,21 @@ export const HtmlMarker = createRemoteComponent(
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
},
);
@@ -4245,6 +6019,21 @@ export const HtmlTitle = createRemoteComponent('html-title', HtmlTitleElement, {
onWheel: { event: 'wheel' },
onContextMenu: { event: 'contextmenu' },
onDrag: { event: 'drag' },
+ onDragStart: { event: 'dragstart' },
+ onDragEnter: { event: 'dragenter' },
+ onDragLeave: { event: 'dragleave' },
+ onDragOver: { event: 'dragover' },
+ onDragEnd: { event: 'dragend' },
+ onDrop: { event: 'drop' },
+ onTouchStart: { event: 'touchstart' },
+ onTouchMove: { event: 'touchmove' },
+ onTouchEnd: { event: 'touchend' },
+ onTouchCancel: { event: 'touchcancel' },
+ onFocusIn: { event: 'focusin' },
+ onFocusOut: { event: 'focusout' },
+ onAnimationEnd: { event: 'animationend' },
+ onTransitionEnd: { event: 'transitionend' },
+ onScrollEnd: { event: 'scrollend' },
},
});
export const RemoteStyle = createRemoteComponent(
diff --git a/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts b/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts
index c42855ef23..2128e1bf6a 100644
--- a/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts
+++ b/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts
@@ -52,6 +52,21 @@ export type HtmlCommonEvents = {
wheel(event: RemoteEvent): void;
contextmenu(event: RemoteEvent): void;
drag(event: RemoteEvent): void;
+ dragstart(event: RemoteEvent): void;
+ dragenter(event: RemoteEvent): void;
+ dragleave(event: RemoteEvent): void;
+ dragover(event: RemoteEvent): void;
+ dragend(event: RemoteEvent): void;
+ drop(event: RemoteEvent): void;
+ touchstart(event: RemoteEvent): void;
+ touchmove(event: RemoteEvent): void;
+ touchend(event: RemoteEvent): void;
+ touchcancel(event: RemoteEvent): void;
+ focusin(event: RemoteEvent): void;
+ focusout(event: RemoteEvent): void;
+ animationend(event: RemoteEvent): void;
+ transitionend(event: RemoteEvent): void;
+ scrollend(event: RemoteEvent): void;
};
const HTML_COMMON_EVENTS_ARRAY = [
@@ -84,6 +99,21 @@ const HTML_COMMON_EVENTS_ARRAY = [
'wheel',
'contextmenu',
'drag',
+ 'dragstart',
+ 'dragenter',
+ 'dragleave',
+ 'dragover',
+ 'dragend',
+ 'drop',
+ 'touchstart',
+ 'touchmove',
+ 'touchend',
+ 'touchcancel',
+ 'focusin',
+ 'focusout',
+ 'animationend',
+ 'transitionend',
+ 'scrollend',
] as const;
const createSerializedEventConfig = (
eventType: string,
@@ -401,7 +431,10 @@ export const HtmlImgElement = createRemoteElement<
HtmlImgProperties,
Record,
Record,
- HtmlCommonEvents
+ HtmlCommonEvents & {
+ load(event: RemoteEvent): void;
+ error(event: RemoteEvent): void;
+ }
>({
properties: {
...HTML_COMMON_PROPERTIES_CONFIG,
@@ -412,6 +445,8 @@ export const HtmlImgElement = createRemoteElement<
},
events: {
...HTML_COMMON_EVENTS_CONFIG,
+ load: createSerializedEventConfig('load'),
+ error: createSerializedEventConfig('error'),
},
});
export const HtmlUlElement = createRemoteElement<
@@ -1332,7 +1367,7 @@ export const HtmlDetailsElement = createRemoteElement<
HtmlDetailsProperties,
Record,
Record,
- HtmlCommonEvents
+ HtmlCommonEvents & { toggle(event: RemoteEvent): void }
>({
properties: {
...HTML_COMMON_PROPERTIES_CONFIG,
@@ -1340,6 +1375,7 @@ export const HtmlDetailsElement = createRemoteElement<
},
events: {
...HTML_COMMON_EVENTS_CONFIG,
+ toggle: createSerializedEventConfig('toggle'),
},
});
export const HtmlSummaryElement = createRemoteElement<
@@ -1373,7 +1409,7 @@ export const HtmlDialogElement = createRemoteElement<
HtmlDialogProperties,
Record,
Record,
- HtmlCommonEvents
+ HtmlCommonEvents & { toggle(event: RemoteEvent): void }
>({
properties: {
...HTML_COMMON_PROPERTIES_CONFIG,
@@ -1381,6 +1417,7 @@ export const HtmlDialogElement = createRemoteElement<
},
events: {
...HTML_COMMON_EVENTS_CONFIG,
+ toggle: createSerializedEventConfig('toggle'),
},
});
export const HtmlHgroupElement = createRemoteElement<