diff --git a/packages/twenty-front-component-renderer/scripts/remote-dom/generators/remote-components.generator.ts b/packages/twenty-front-component-renderer/scripts/remote-dom/generators/remote-components.generator.ts index da973589cd..84bad657e3 100644 --- a/packages/twenty-front-component-renderer/scripts/remote-dom/generators/remote-components.generator.ts +++ b/packages/twenty-front-component-renderer/scripts/remote-dom/generators/remote-components.generator.ts @@ -1,6 +1,6 @@ import type { Project, SourceFile } from 'ts-morph'; -import { EVENT_TO_REACT } from '../../../src/constants/EventToReact'; +import { DOM_EVENT_TYPE_TO_REACT_PROP } from '../../../src/constants/DomEventTypeToReactProp'; import { type ComponentSchema } from './schemas'; import { addExportedConst } from './utils'; @@ -15,7 +15,7 @@ const generateComponentDefinition = ( if (hasEvents) { const eventProps = component.events .map((event) => { - const propName = EVENT_TO_REACT[event]; + const propName = DOM_EVENT_TYPE_TO_REACT_PROP[event]; return ` ${propName}: { event: '${event}' },`; }) .join('\n'); diff --git a/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-drag-drop.front-component.tsx b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-drag-drop.front-component.tsx new file mode 100644 index 0000000000..be54611b33 --- /dev/null +++ b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-drag-drop.front-component.tsx @@ -0,0 +1,40 @@ +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'; +import { FILL_RECT_STYLE } from '@/__stories__/shared/front-components/styles'; + +const DivDragDropFrontComponent = () => { + const { entries, pushEvent } = useEventLog(); + + return ( + +
+ drag source +
+
+ drop zone +
+ + + ); +}; + +export default defineFrontComponent({ + universalIdentifier: 'fc-div-dnd-00000000-0000-0000-0000-000000000020', + name: 'div-drag-drop-front-component', + description: 'Front component covering drag and drop events on
', + component: DivDragDropFrontComponent, +}); diff --git a/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-events.stories.tsx b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-events.stories.tsx index 235313d5dc..79146db4d2 100644 --- a/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-events.stories.tsx +++ b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-events.stories.tsx @@ -1,5 +1,5 @@ import { type Meta, type StoryObj } from '@storybook/react-vite'; -import { userEvent, within } from 'storybook/test'; +import { expect, userEvent, waitFor, within } from 'storybook/test'; import { FrontComponentRenderer } from '@/host/components/FrontComponentRenderer'; import { @@ -73,6 +73,56 @@ export const MouseEnterLeave: Story = runFrontComponentStory({ }, }); +export const DragDrop: Story = runFrontComponentStory({ + frontComponentBundleName: 'div-drag-drop', + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expectFrontComponentMounted(canvas); + + const subject = await canvas.findByTestId('subject'); + const dropZone = await canvas.findByTestId('drop-zone'); + + subject.dispatchEvent( + new DragEvent('dragstart', { bubbles: true, cancelable: true }), + ); + await expectEventLogged({ canvas, matcher: { type: 'dragstart' } }); + + await waitFor(() => { + const dragOverEvent = new DragEvent('dragover', { + bubbles: true, + cancelable: true, + }); + dropZone.dispatchEvent(dragOverEvent); + expect(dragOverEvent.defaultPrevented).toBe(true); + }); + await expectEventLogged({ canvas, matcher: { type: 'dragover' } }); + + dropZone.dispatchEvent( + new DragEvent('drop', { bubbles: true, cancelable: true }), + ); + await expectEventLogged({ canvas, matcher: { type: 'drop' } }); + }, +}); + +export const FocusInOut: Story = runFrontComponentStory({ + frontComponentBundleName: 'div-focus-in-out', + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expectFrontComponentMounted(canvas); + await expectFrontComponentValue({ canvas, expected: 'ready' }); + + const subject = await canvas.findByTestId('subject'); + + await userEvent.click(subject); + await expectEventLogged({ canvas, matcher: { type: 'focusin' } }); + + subject.blur(); + await expectEventLogged({ canvas, matcher: { type: 'focusout' } }); + }, +}); + export const PointerMove: Story = runFrontComponentStory({ frontComponentBundleName: 'div-pointermove', play: async ({ canvasElement }) => { diff --git a/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-focus-in-out.front-component.tsx b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-focus-in-out.front-component.tsx new file mode 100644 index 0000000000..faa41713cb --- /dev/null +++ b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-focus-in-out.front-component.tsx @@ -0,0 +1,55 @@ +import { type SyntheticEvent, useEffect, useRef, useState } from 'react'; +import { defineFrontComponent } from 'twenty-sdk/define'; +import { isDefined } from 'twenty-shared/utils'; +import { + EventLog, + useEventLog, +} from '@/__stories__/shared/front-components/event-log'; +import { FrontComponentCard } from '@/__stories__/shared/front-components/front-component-card'; + +const DivFocusInOutFrontComponent = () => { + const containerRef = useRef(null); + const [isListening, setIsListening] = useState(false); + const { entries, pushEvent } = useEventLog(); + + useEffect(() => { + const container = containerRef.current; + if (!isDefined(container)) { + return; + } + + const handleFocusEvent = (event: Event) => { + pushEvent(event as unknown as SyntheticEvent); + }; + + 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<