. ' +\n+ 'This requires its parent DOM node to be positioned too, but the ' +\n+ 'parent DOM node was found to have the style \"position\" set to ' +\n+ 'either no value, or a value of \"static\". Try using a \"position\" ' +\n+ 'value of \"relative\".',\n+ );\n+ warning(\n+ computedStyles.getPropertyValue('zIndex') !== '',\n+ ' inserts an empty

with \"z-index\" of \"-1\". ' +\n+ 'This requires its parent DOM node to have a \"z-index\" great than \"-1\",' +\n+ 'but the parent DOM node was found to no \"z-index\" value set.' +\n+ ' Try using a \"z-index\" value of \"0\" or greater.',\n+ );\n+ }\n }\n }\n }\ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\nindex 7630d8d7b4..5f12b84a1c 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n@@ -17,7 +17,10 @@ import {\n PASSIVE_NOT_SUPPORTED,\n } from 'events\/EventSystemFlags';\n import type {AnyNativeEvent} from 'events\/PluginModuleType';\n-import {EventComponent} from 'shared\/ReactWorkTags';\n+import {\n+ EventComponent,\n+ EventTarget as EventTargetWorkTag,\n+} from 'shared\/ReactWorkTags';\n import type {\n ReactEventResponder,\n ReactEventResponderEventType,\n@@ -110,7 +113,31 @@ const eventResponderContext: ResponderContext = {\n eventsWithStopPropagation.add(eventObject);\n }\n },\n- isPositionWithinTouchHitTarget(x: number, y: number): boolean {\n+ isPositionWithinTouchHitTarget(doc: Document, x: number, y: number): boolean {\n+ \/\/ This isn't available in some environments (JSDOM)\n+ if (typeof doc.elementFromPoint !== 'function') {\n+ return false;\n+ }\n+ const target = doc.elementFromPoint(x, y);\n+ if (target === null) {\n+ return false;\n+ }\n+ const childFiber = getClosestInstanceFromNode(target);\n+ if (childFiber === null) {\n+ return false;\n+ }\n+ const parentFiber = childFiber.return;\n+ if (parentFiber !== null && parentFiber.tag === EventTargetWorkTag) {\n+ const parentNode = ((target.parentNode: any): Element);\n+ \/\/ TODO find another way to do this without using the\n+ \/\/ expensive getBoundingClientRect.\n+ const {left, top, right, bottom} = parentNode.getBoundingClientRect();\n+ \/\/ Check if the co-ords intersect with the target element's rect.\n+ if (x > left && y > top && x < right && y < bottom) {\n+ return false;\n+ }\n+ return true;\n+ }\n return false;\n },\n isTargetWithinEventComponent(target: Element | Document): boolean {\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\nindex 7eecd8dd41..c493c0398c 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n@@ -39,6 +39,7 @@ import {\n REACT_MEMO_TYPE,\n REACT_EVENT_COMPONENT_TYPE,\n REACT_EVENT_TARGET_TYPE,\n+ REACT_EVENT_TARGET_TOUCH_HIT,\n } from 'shared\/ReactSymbols';\n \n import {\n@@ -1168,6 +1169,29 @@ class ReactDOMServerRenderer {\n case REACT_EVENT_COMPONENT_TYPE:\n case REACT_EVENT_TARGET_TYPE: {\n if (enableEventAPI) {\n+ if (\n+ elementType.$$typeof === REACT_EVENT_TARGET_TYPE &&\n+ elementType.type === REACT_EVENT_TARGET_TOUCH_HIT\n+ ) {\n+ const props = nextElement.props;\n+ const bottom = props.bottom || 0;\n+ const left = props.left || 0;\n+ const right = props.right || 0;\n+ const top = props.top || 0;\n+\n+ if (bottom === 0 && left === 0 && right === 0 && top === 0) {\n+ return '';\n+ }\n+ let topString = top ? `-${top}px` : '0px';\n+ let leftString = left ? `-${left}px` : '0px';\n+ let rightString = right ? `-${right}px` : '0x';\n+ let bottomString = bottom ? `-${bottom}px` : '0px';\n+\n+ return (\n+ `

<\/div>`\n+ );\n+ }\n const nextChildren = toArray(\n ((nextChild: any): ReactElement).props.children,\n );\ndiff --git a\/packages\/react-events\/src\/Hover.js b\/packages\/react-events\/src\/Hover.js\nindex 2addb3185e..0668880268 100644\n--- a\/packages\/react-events\/src\/Hover.js\n+++ b\/packages\/react-events\/src\/Hover.js\n@@ -196,7 +196,7 @@ const HoverResponder = {\n props: HoverProps,\n state: HoverState,\n ): void {\n- const {type, nativeEvent} = event;\n+ const {type, target, nativeEvent} = event;\n \n switch (type) {\n \/**\n@@ -218,6 +218,7 @@ const HoverResponder = {\n }\n if (\n context.isPositionWithinTouchHitTarget(\n+ target.ownerDocument,\n (nativeEvent: any).x,\n (nativeEvent: any).y,\n )\n@@ -244,6 +245,7 @@ const HoverResponder = {\n if (state.isInHitSlop) {\n if (\n !context.isPositionWithinTouchHitTarget(\n+ target.ownerDocument,\n (nativeEvent: any).x,\n (nativeEvent: any).y,\n )\n@@ -254,6 +256,7 @@ const HoverResponder = {\n } else if (\n state.isHovered &&\n context.isPositionWithinTouchHitTarget(\n+ target.ownerDocument,\n (nativeEvent: any).x,\n (nativeEvent: any).y,\n )\ndiff --git a\/packages\/react-events\/src\/Press.js b\/packages\/react-events\/src\/Press.js\nindex ab2750d627..2615826b16 100644\n--- a\/packages\/react-events\/src\/Press.js\n+++ b\/packages\/react-events\/src\/Press.js\n@@ -259,6 +259,7 @@ const PressResponder = {\n nativeEvent.button === 2 ||\n \/\/ Ignore pressing on hit slop area with mouse\n context.isPositionWithinTouchHitTarget(\n+ target.ownerDocument,\n (nativeEvent: any).x,\n (nativeEvent: any).y,\n )\ndiff --git a\/packages\/react-events\/src\/__tests__\/TouchHitTarget-test.internal.js b\/packages\/react-events\/src\/__tests__\/TouchHitTarget-test.internal.js\nindex d30a6c92c2..e0bb517518 100644\n--- a\/packages\/react-events\/src\/__tests__\/TouchHitTarget-test.internal.js\n+++ b\/packages\/react-events\/src\/__tests__\/TouchHitTarget-test.internal.js\n@@ -16,6 +16,7 @@ let ReactFeatureFlags;\n let EventComponent;\n let ReactTestRenderer;\n let ReactDOM;\n+let ReactDOMServer;\n let ReactSymbols;\n let ReactEvents;\n let TouchHitTarget;\n@@ -58,6 +59,11 @@ function initReactDOM() {\n ReactDOM = require('react-dom');\n }\n \n+function initReactDOMServer() {\n+ init();\n+ ReactDOMServer = require('react-dom\/server');\n+}\n+\n describe('TouchHitTarget', () => {\n describe('NoopRenderer', () => {\n beforeEach(() => {\n@@ -94,9 +100,7 @@ describe('TouchHitTarget', () => {\n expect(() => {\n ReactNoop.render();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: must not have any children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n \n const Test2 = () => (\n \n@@ -109,9 +113,7 @@ describe('TouchHitTarget', () => {\n expect(() => {\n ReactNoop.render();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: must not have any children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n \n \/\/ Should render without warnings\n const Test3 = () => (\n@@ -181,9 +183,7 @@ describe('TouchHitTarget', () => {\n expect(() => {\n root.update();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: must not have any children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n \n const Test2 = () => (\n \n@@ -196,9 +196,7 @@ describe('TouchHitTarget', () => {\n expect(() => {\n root.update();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: must not have any children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n \n \/\/ Should render without warnings\n const Test3 = () => (\n@@ -269,9 +267,7 @@ describe('TouchHitTarget', () => {\n expect(() => {\n ReactDOM.render(, container);\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: must not have any children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n \n const Test2 = () => (\n \n@@ -284,9 +280,7 @@ describe('TouchHitTarget', () => {\n expect(() => {\n ReactDOM.render(, container);\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: must not have any children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n \n \/\/ Should render without warnings\n const Test3 = () => (\n@@ -318,5 +312,319 @@ describe('TouchHitTarget', () => {\n 'Ensure is a direct child of a DOM element.',\n );\n });\n+\n+ it('should render a conditional TouchHitTarget correctly (false -> true)', () => {\n+ let cond = false;\n+\n+ const Test = () => (\n+ \n+

\n+ {cond ? null : (\n+ \n+ )}\n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe(\n+ '

<\/div><\/div>',\n+ );\n+\n+ cond = true;\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

<\/div>');\n+ });\n+\n+ it('should render a conditional TouchHitTarget correctly (true -> false)', () => {\n+ let cond = true;\n+\n+ const Test = () => (\n+ \n+

<\/div>');\n+\n+ cond = false;\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe(\n+ '

<\/div><\/div>',\n+ );\n+ });\n+\n+ it('should render a conditional TouchHitTarget hit slop correctly (false -> true)', () => {\n+ let cond = false;\n+\n+ const Test = () => (\n+ \n+

\n+ {cond ? (\n+ \n+ ) : (\n+ \n+ )}\n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe(\n+ '

<\/div><\/div>',\n+ );\n+\n+ cond = true;\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

<\/div>');\n+ });\n+\n+ it('should render a conditional TouchHitTarget hit slop correctly (true -> false)', () => {\n+ let cond = true;\n+\n+ const Test = () => (\n+ \n+

\n+ Random span 1<\/span>\n+ {cond ? (\n+ \n+ ) : (\n+ \n+ )}\n+ Random span 2<\/span>\n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe(\n+ '

Random span 1<\/span>Random span 2<\/span><\/div>',\n+ );\n+\n+ cond = false;\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe(\n+ '

Random span 1<\/span>

<\/div>Random span 2<\/span><\/div>',\n+ );\n+ });\n+\n+ it('should update TouchHitTarget hit slop values correctly (false -> true)', () => {\n+ let cond = false;\n+\n+ const Test = () => (\n+ \n+

Random span 1<\/span>

<\/div>Random span 2<\/span><\/div>',\n+ );\n+\n+ cond = true;\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe(\n+ '

Random span 1<\/span>

<\/div>Random span 2<\/span><\/div>',\n+ );\n+ });\n+\n+ it('should update TouchHitTarget hit slop values correctly (true -> false)', () => {\n+ let cond = true;\n+\n+ const Test = () => (\n+ \n+

Random span 1<\/span>

<\/div>Random span 2<\/span><\/div>',\n+ );\n+\n+ cond = false;\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe(\n+ '

Random span 1<\/span>

<\/div>Random span 2<\/span><\/div>',\n+ );\n+ });\n+\n+ it('should hydrate TouchHitTarget hit slop elements correcty', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const container = document.createElement('div');\n+ container.innerHTML = '

<\/div>';\n+ ReactDOM.hydrate(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

<\/div>');\n+\n+ const Test2 = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const container2 = document.createElement('div');\n+ container2.innerHTML =\n+ '

<\/div><\/div>';\n+ ReactDOM.hydrate(, container2);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container2.innerHTML).toBe(\n+ '

<\/div><\/div>',\n+ );\n+ });\n+\n+ it('should hydrate TouchHitTarget hit slop elements correcty and patch them', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const container = document.createElement('div');\n+ container.innerHTML = '

<\/div>';\n+ expect(() => {\n+ ReactDOM.hydrate(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: Expected server HTML to contain a matching

.',\n+ {withoutStack: true},\n+ );\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe(\n+ '

<\/div><\/div>',\n+ );\n+ });\n+ });\n+\n+ describe('ReactDOMServer', () => {\n+ beforeEach(() => {\n+ initReactDOMServer();\n+ EventComponent = createReactEventComponent();\n+ TouchHitTarget = ReactEvents.TouchHitTarget;\n+ });\n+\n+ it('should not warn when a TouchHitTarget is used correctly', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const output = ReactDOMServer.renderToString();\n+ expect(output).toBe('

<\/div>');\n+ });\n+\n+ it('should render a TouchHitTarget with hit slop values', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ let output = ReactDOMServer.renderToString();\n+ expect(output).toBe(\n+ '

<\/div><\/div>',\n+ );\n+\n+ const Test2 = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ output = ReactDOMServer.renderToString();\n+ expect(output).toBe(\n+ '

<\/div><\/div>',\n+ );\n+\n+ const Test3 = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ output = ReactDOMServer.renderToString();\n+ expect(output).toBe(\n+ '

<\/div><\/div>',\n+ );\n+ });\n });\n });\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\nindex c2ccde544c..5f55444bff 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n@@ -438,15 +438,31 @@ export function handleEventComponent(\n eventResponder: ReactEventResponder,\n rootContainerInstance: Container,\n internalInstanceHandle: Object,\n-) {\n- \/\/ TODO: add handleEventComponent implementation\n+): void {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function getEventTargetChildElement(\n+ type: Symbol | number,\n+ props: Props,\n+): null {\n+ throw new Error('Not yet implemented.');\n }\n \n export function handleEventTarget(\n type: Symbol | number,\n props: Props,\n- parentInstance: Container,\n+ rootContainerInstance: Container,\n internalInstanceHandle: Object,\n-) {\n- \/\/ TODO: add handleEventTarget implementation\n+): boolean {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function commitEventTarget(\n+ type: Symbol | number,\n+ props: Props,\n+ instance: Instance,\n+ parentInstance: Instance,\n+): void {\n+ throw new Error('Not yet implemented.');\n }\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\nindex f4b24a1c39..55fe1ba868 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n@@ -498,14 +498,30 @@ export function handleEventComponent(\n rootContainerInstance: Container,\n internalInstanceHandle: Object,\n ) {\n- \/\/ TODO: add handleEventComponent implementation\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function getEventTargetChildElement(\n+ type: Symbol | number,\n+ props: Props,\n+): null {\n+ throw new Error('Not yet implemented.');\n }\n \n export function handleEventTarget(\n type: Symbol | number,\n props: Props,\n- parentInstance: Container,\n+ rootContainerInstance: Container,\n internalInstanceHandle: Object,\n-) {\n- \/\/ TODO: add handleEventTarget implementation\n+): boolean {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function commitEventTarget(\n+ type: Symbol | number,\n+ props: Props,\n+ instance: Instance,\n+ parentInstance: Instance,\n+): void {\n+ throw new Error('Not yet implemented.');\n }\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 55198b6ba4..de42992a6b 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -33,12 +33,32 @@ import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import warningWithoutStack from 'shared\/warningWithoutStack';\n import {enableEventAPI} from 'shared\/ReactFeatureFlags';\n \n+type EventTargetChildElement = {\n+ type: string,\n+ props: null | {\n+ style?: {\n+ position?: string,\n+ bottom?: string,\n+ left?: string,\n+ right?: string,\n+ top?: string,\n+ },\n+ },\n+};\n type Container = {\n rootID: string,\n children: Array,\n pendingChildren: Array,\n };\n-type Props = {prop: any, hidden: boolean, children?: mixed};\n+type Props = {\n+ prop: any,\n+ hidden: boolean,\n+ children?: mixed,\n+ bottom?: null | number,\n+ left?: null | number,\n+ right?: null | number,\n+ top?: null | number,\n+};\n type Instance = {|\n type: string,\n id: number,\n@@ -299,12 +319,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n rootContainerInstance: Container,\n hostContext: HostContext,\n ): Instance {\n- if (__DEV__ && enableEventAPI) {\n- warning(\n- hostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n- 'validateDOMNesting: must not have any children.',\n- );\n- }\n if (type === 'errorInCompletePhase') {\n throw new Error('Error in host config.');\n }\n@@ -379,22 +393,12 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n internalInstanceHandle: Object,\n ): TextInstance {\n if (__DEV__ && enableEventAPI) {\n- warning(\n- hostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n- 'validateDOMNesting: must not have any children.',\n- );\n warning(\n hostContext !== EVENT_COMPONENT_CONTEXT,\n 'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"%s\" in an element.',\n text,\n );\n- warning(\n- hostContext !== EVENT_TARGET_CONTEXT,\n- 'validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n- 'Wrap the child text \"%s\" in an element.',\n- text,\n- );\n }\n if (hostContext === UPPERCASE_CONTEXT) {\n text = text.toUpperCase();\n@@ -431,15 +435,51 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n \/\/ NO-OP\n },\n \n+ getEventTargetChildElement(\n+ type: Symbol | number,\n+ props: Props,\n+ ): null | EventTargetChildElement {\n+ if (enableEventAPI) {\n+ if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n+ const {bottom, left, right, top} = props;\n+\n+ if (!bottom && !left && !right && !top) {\n+ return null;\n+ }\n+ return {\n+ type: 'div',\n+ props: {\n+ style: {\n+ position: 'absolute',\n+ zIndex: -1,\n+ bottom: bottom ? `-${bottom}px` : '0px',\n+ left: left ? `-${left}px` : '0px',\n+ right: right ? `-${right}px` : '0px',\n+ top: top ? `-${top}px` : '0px',\n+ },\n+ },\n+ };\n+ }\n+ }\n+ return null;\n+ },\n+\n handleEventTarget(\n type: Symbol | number,\n props: Props,\n- parentInstance: Container,\n+ rootContainerInstance: Container,\n internalInstanceHandle: Object,\n- ) {\n- if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n- \/\/ TODO\n- }\n+ ): boolean {\n+ return false;\n+ },\n+\n+ commitEventTarget(\n+ type: Symbol | number,\n+ props: Props,\n+ instance: Instance,\n+ parentInstance: Instance,\n+ ): void {\n+ \/\/ NO-OP\n },\n };\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex 2832021950..3c66c38e22 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -96,6 +96,7 @@ import {\n registerSuspenseInstanceRetry,\n } from '.\/ReactFiberHostConfig';\n import type {SuspenseInstance} from '.\/ReactFiberHostConfig';\n+import {getEventTargetChildElement} from '.\/ReactFiberHostConfig';\n import {shouldSuspend} from '.\/ReactFiberReconciler';\n import {\n pushHostContext,\n@@ -1988,15 +1989,33 @@ function updateEventComponent(current, workInProgress, renderExpirationTime) {\n }\n \n function updateEventTarget(current, workInProgress, renderExpirationTime) {\n+ const type = workInProgress.type.type;\n const nextProps = workInProgress.pendingProps;\n- let nextChildren = nextProps.children;\n+ const eventTargetChild = getEventTargetChildElement(type, nextProps);\n \n- reconcileChildren(\n- current,\n- workInProgress,\n- nextChildren,\n- renderExpirationTime,\n- );\n+ if (__DEV__) {\n+ warning(\n+ nextProps.children == null,\n+ 'Event targets should not have children.',\n+ );\n+ }\n+ if (eventTargetChild !== null) {\n+ const child = (workInProgress.child = createFiberFromTypeAndProps(\n+ eventTargetChild.type,\n+ null,\n+ eventTargetChild.props,\n+ null,\n+ workInProgress.mode,\n+ renderExpirationTime,\n+ ));\n+ child.return = workInProgress;\n+\n+ if (current === null || current.child === null) {\n+ child.effectTag = Placement;\n+ }\n+ } else {\n+ reconcileChildren(current, workInProgress, null, renderExpirationTime);\n+ }\n pushHostContextForEventTarget(workInProgress);\n return workInProgress.child;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\nindex a3e479c20a..dfba037021 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n@@ -28,6 +28,7 @@ import {\n enableSchedulerTracing,\n enableProfilerTimer,\n enableSuspenseServerRenderer,\n+ enableEventAPI,\n } from 'shared\/ReactFeatureFlags';\n import {\n FunctionComponent,\n@@ -43,6 +44,7 @@ import {\n IncompleteClassComponent,\n MemoComponent,\n SimpleMemoComponent,\n+ EventTarget,\n } from 'shared\/ReactWorkTags';\n import {\n invokeGuardedCallback,\n@@ -90,6 +92,7 @@ import {\n hideTextInstance,\n unhideInstance,\n unhideTextInstance,\n+ commitEventTarget,\n } from '.\/ReactFiberHostConfig';\n import {\n captureCommitPhaseError,\n@@ -299,6 +302,7 @@ function commitBeforeMutationLifeCycles(\n case HostText:\n case HostPortal:\n case IncompleteClassComponent:\n+ case EventTarget:\n \/\/ Nothing to do for these component types\n return;\n default: {\n@@ -585,6 +589,7 @@ function commitLifeCycles(\n }\n case SuspenseComponent:\n case IncompleteClassComponent:\n+ case EventTarget:\n break;\n default: {\n invariant(\n@@ -817,7 +822,8 @@ function commitContainer(finishedWork: Fiber) {\n switch (finishedWork.tag) {\n case ClassComponent:\n case HostComponent:\n- case HostText: {\n+ case HostText:\n+ case EventTarget: {\n return;\n }\n case HostRoot:\n@@ -955,17 +961,18 @@ function commitPlacement(finishedWork: Fiber): void {\n let node: Fiber = finishedWork;\n while (true) {\n if (node.tag === HostComponent || node.tag === HostText) {\n+ const stateNode = node.stateNode;\n if (before) {\n if (isContainer) {\n- insertInContainerBefore(parent, node.stateNode, before);\n+ insertInContainerBefore(parent, stateNode, before);\n } else {\n- insertBefore(parent, node.stateNode, before);\n+ insertBefore(parent, stateNode, before);\n }\n } else {\n if (isContainer) {\n- appendChildToContainer(parent, node.stateNode);\n+ appendChildToContainer(parent, stateNode);\n } else {\n- appendChild(parent, node.stateNode);\n+ appendChild(parent, stateNode);\n }\n }\n } else if (node.tag === HostPortal) {\n@@ -1195,6 +1202,34 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n commitTextUpdate(textInstance, oldText, newText);\n return;\n }\n+ case EventTarget: {\n+ if (enableEventAPI) {\n+ const type = finishedWork.type.type;\n+ const props = finishedWork.memoizedProps;\n+ const instance = finishedWork.stateNode;\n+ let parentInstance = null;\n+\n+ let node = finishedWork.return;\n+ \/\/ Traverse up the fiber tree until we find the parent host node.\n+ while (node !== null) {\n+ if (node.tag === HostComponent) {\n+ parentInstance = node.stateNode;\n+ break;\n+ } else if (node.tag === HostRoot) {\n+ parentInstance = node.stateNode.containerInfo;\n+ break;\n+ }\n+ node = node.return;\n+ }\n+ invariant(\n+ parentInstance !== null,\n+ 'This should have a parent host component initialized. This error is likely ' +\n+ 'caused by a bug in React. Please file an issue.',\n+ );\n+ commitEventTarget(type, props, instance, parentInstance);\n+ }\n+ return;\n+ }\n case HostRoot: {\n return;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\nindex abd125d3ac..457a6b7289 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n@@ -784,18 +784,15 @@ function completeWork(\n if (enableEventAPI) {\n popHostContext(workInProgress);\n const type = workInProgress.type.type;\n- let node = workInProgress.return;\n- let parentHostInstance = null;\n- \/\/ Traverse up the fiber tree till we find a host component fiber\n- while (node !== null) {\n- if (node.tag === HostComponent) {\n- parentHostInstance = node.stateNode;\n- break;\n- }\n- node = node.return;\n- }\n- if (parentHostInstance !== null) {\n- handleEventTarget(type, newProps, parentHostInstance, workInProgress);\n+ const rootContainerInstance = getRootHostContainer();\n+ const shouldUpdate = handleEventTarget(\n+ type,\n+ newProps,\n+ rootContainerInstance,\n+ workInProgress,\n+ );\n+ if (shouldUpdate) {\n+ markUpdate(workInProgress);\n }\n }\n break;\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js\nindex 73dcc8d4a0..5516f78373 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js\n@@ -127,9 +127,9 @@ describe('ReactFiberEvents', () => {\n it('should render a simple event component with a single event target', () => {\n const Test = () => (\n \n- \n-

Hello world<\/div>\n- <\/EventTarget>\n+

\n+ Hello world\n+ <\/div>\n <\/EventComponent>\n );\n \n@@ -148,10 +148,7 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n ReactNoop.render();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n- 'Wrap the child text \"Hello world\" in an element.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should warn when an event target has a direct text child #2', () => {\n@@ -167,19 +164,15 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n ReactNoop.render();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n- 'Wrap the child text \"Hello world\" in an element.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should not warn if an event target is not a direct child of an event component', () => {\n const Test = () => (\n \n

\n- \n- Child 1<\/span>\n- <\/EventTarget>\n+ \n+ Child 1<\/span>\n <\/div>\n <\/EventComponent>\n );\n@@ -207,9 +200,7 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n ReactNoop.render();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets must not have event components as children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should handle event components correctly with error boundaries', () => {\n@@ -219,11 +210,9 @@ describe('ReactFiberEvents', () => {\n \n const Test = () => (\n \n- \n- \n- \n- <\/span>\n- <\/EventTarget>\n+ \n+ \n+ <\/span>\n <\/EventComponent>\n );\n \n@@ -268,11 +257,9 @@ describe('ReactFiberEvents', () => {\n \n const Parent = () => (\n \n- \n-

\n- \n- <\/div>\n- <\/EventTarget>\n+

\n+ \n+ <\/div>\n <\/EventComponent>\n );\n \n@@ -321,9 +308,7 @@ describe('ReactFiberEvents', () => {\n \n const Parent = () => (\n \n- \n- \n- <\/EventTarget>\n+ \n <\/EventComponent>\n );\n \n@@ -341,7 +326,7 @@ describe('ReactFiberEvents', () => {\n });\n expect(Scheduler).toFlushWithoutYielding();\n }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n+ 'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"Text!\" in an element.',\n );\n });\n@@ -355,11 +340,7 @@ describe('ReactFiberEvents', () => {\n _updateCounter = updateCounter;\n \n if (counter === 1) {\n- return (\n- \n-

Child<\/div>\n- <\/EventComponent>\n- );\n+ return 123<\/EventTarget>;\n }\n \n return (\n@@ -370,18 +351,20 @@ describe('ReactFiberEvents', () => {\n }\n \n const Parent = () => (\n- \n- \n+

\n+ \n \n- <\/EventTarget>\n- <\/EventComponent>\n+ <\/EventComponent>\n+ <\/div>\n );\n \n ReactNoop.render();\n expect(Scheduler).toFlushWithoutYielding();\n expect(ReactNoop).toMatchRenderedOutput(\n

\n- Child - 0<\/span>\n+

\n+ Child - 0<\/span>\n+ <\/div>\n <\/div>,\n );\n \n@@ -390,9 +373,7 @@ describe('ReactFiberEvents', () => {\n _updateCounter(counter => counter + 1);\n });\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets must not have event components as children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should error with a component stack contains the names of the event components and event targets', () => {\n@@ -404,11 +385,9 @@ describe('ReactFiberEvents', () => {\n \n const Test = () => (\n \n- \n- \n- \n- <\/span>\n- <\/EventTarget>\n+ \n+ \n+ <\/span>\n <\/EventComponent>\n );\n \n@@ -437,7 +416,6 @@ describe('ReactFiberEvents', () => {\n \n expect(componentStackMessage.includes('ErrorComponent')).toBe(true);\n expect(componentStackMessage.includes('span')).toBe(true);\n- expect(componentStackMessage.includes('TestEventTarget')).toBe(true);\n expect(componentStackMessage.includes('TestEventComponent')).toBe(true);\n expect(componentStackMessage.includes('Test')).toBe(true);\n expect(componentStackMessage.includes('Wrapper')).toBe(true);\n@@ -498,9 +476,9 @@ describe('ReactFiberEvents', () => {\n it('should render a simple event component with a single event target', () => {\n const Test = () => (\n \n- \n-

Hello world<\/div>\n- <\/EventTarget>\n+

\n+ Hello world\n+ <\/div>\n <\/EventComponent>\n );\n \n@@ -511,9 +489,8 @@ describe('ReactFiberEvents', () => {\n \n const Test2 = () => (\n \n- \n- I am now a span<\/span>\n- <\/EventTarget>\n+ \n+ I am now a span<\/span>\n <\/EventComponent>\n );\n \n@@ -533,10 +510,7 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n root.update();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n- 'Wrap the child text \"Hello world\" in an element.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should warn when an event target has a direct text child #2', () => {\n@@ -553,19 +527,15 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n root.update();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n- 'Wrap the child text \"Hello world\" in an element.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should not warn if an event target is not a direct child of an event component', () => {\n const Test = () => (\n \n

\n- \n- Child 1<\/span>\n- <\/EventTarget>\n+ \n+ Child 1<\/span>\n <\/div>\n <\/EventComponent>\n );\n@@ -595,9 +565,7 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n root.update();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets must not have event components as children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should handle event components correctly with error boundaries', () => {\n@@ -607,11 +575,9 @@ describe('ReactFiberEvents', () => {\n \n const Test = () => (\n \n- \n- \n- \n- <\/span>\n- <\/EventTarget>\n+ \n+ \n+ <\/span>\n <\/EventComponent>\n );\n \n@@ -620,7 +586,7 @@ describe('ReactFiberEvents', () => {\n error: null,\n };\n \n- componentDidCatch(error, errStack) {\n+ componentDidCatch(error) {\n this.setState({\n error,\n });\n@@ -657,11 +623,9 @@ describe('ReactFiberEvents', () => {\n \n const Parent = () => (\n \n- \n-

\n- \n- <\/div>\n- <\/EventTarget>\n+

\n+ \n+ <\/div>\n <\/EventComponent>\n );\n \n@@ -710,9 +674,7 @@ describe('ReactFiberEvents', () => {\n \n const Parent = () => (\n \n- \n- \n- <\/EventTarget>\n+ \n <\/EventComponent>\n );\n \n@@ -730,7 +692,7 @@ describe('ReactFiberEvents', () => {\n _updateCounter(counter => counter + 1);\n });\n }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n+ 'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"Text!\" in an element.',\n );\n });\n@@ -744,11 +706,7 @@ describe('ReactFiberEvents', () => {\n _updateCounter = updateCounter;\n \n if (counter === 1) {\n- return (\n- \n-

Child<\/div>\n- <\/EventComponent>\n- );\n+ return 123<\/EventTarget>;\n }\n \n return (\n@@ -759,11 +717,11 @@ describe('ReactFiberEvents', () => {\n }\n \n const Parent = () => (\n- \n- \n+

\n+ \n \n- <\/EventTarget>\n- <\/EventComponent>\n+ <\/EventComponent>\n+ <\/div>\n );\n \n const root = ReactTestRenderer.create(null);\n@@ -771,7 +729,9 @@ describe('ReactFiberEvents', () => {\n expect(Scheduler).toFlushWithoutYielding();\n expect(root).toMatchRenderedOutput(\n

\n- Child - 0<\/span>\n+

\n+ Child - 0<\/span>\n+ <\/div>\n <\/div>,\n );\n \n@@ -780,9 +740,7 @@ describe('ReactFiberEvents', () => {\n _updateCounter(counter => counter + 1);\n });\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets must not have event components as children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should error with a component stack contains the names of the event components and event targets', () => {\n@@ -794,11 +752,9 @@ describe('ReactFiberEvents', () => {\n \n const Test = () => (\n \n- \n- \n- \n- <\/span>\n- <\/EventTarget>\n+ \n+ \n+ <\/span>\n <\/EventComponent>\n );\n \n@@ -828,7 +784,6 @@ describe('ReactFiberEvents', () => {\n \n expect(componentStackMessage.includes('ErrorComponent')).toBe(true);\n expect(componentStackMessage.includes('span')).toBe(true);\n- expect(componentStackMessage.includes('TestEventTarget')).toBe(true);\n expect(componentStackMessage.includes('TestEventComponent')).toBe(true);\n expect(componentStackMessage.includes('Test')).toBe(true);\n expect(componentStackMessage.includes('Wrapper')).toBe(true);\n@@ -888,9 +843,9 @@ describe('ReactFiberEvents', () => {\n it('should render a simple event component with a single event target', () => {\n const Test = () => (\n \n- \n-

Hello world<\/div>\n- <\/EventTarget>\n+

\n+ Hello world\n+ <\/div>\n <\/EventComponent>\n );\n \n@@ -901,9 +856,8 @@ describe('ReactFiberEvents', () => {\n \n const Test2 = () => (\n \n- \n- I am now a span<\/span>\n- <\/EventTarget>\n+ \n+ I am now a span<\/span>\n <\/EventComponent>\n );\n \n@@ -923,10 +877,7 @@ describe('ReactFiberEvents', () => {\n const container = document.createElement('div');\n ReactDOM.render(, container);\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n- 'Wrap the child text \"Hello world\" in an element.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should warn when an event target has a direct text child #2', () => {\n@@ -943,19 +894,15 @@ describe('ReactFiberEvents', () => {\n const container = document.createElement('div');\n ReactDOM.render(, container);\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n- 'Wrap the child text \"Hello world\" in an element.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should not warn if an event target is not a direct child of an event component', () => {\n const Test = () => (\n \n

\n- \n- Child 1<\/span>\n- <\/EventTarget>\n+ \n+ Child 1<\/span>\n <\/div>\n <\/EventComponent>\n );\n@@ -981,9 +928,7 @@ describe('ReactFiberEvents', () => {\n const container = document.createElement('div');\n ReactDOM.render(, container);\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets must not have event components as children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should handle event components correctly with error boundaries', () => {\n@@ -993,11 +938,9 @@ describe('ReactFiberEvents', () => {\n \n const Test = () => (\n \n- \n- \n- \n- <\/span>\n- <\/EventTarget>\n+ \n+ \n+ <\/span>\n <\/EventComponent>\n );\n \n@@ -1043,11 +986,9 @@ describe('ReactFiberEvents', () => {\n \n const Parent = () => (\n \n- \n-

\n- \n- <\/div>\n- <\/EventTarget>\n+

\n+ \n+ <\/div>\n <\/EventComponent>\n );\n \n@@ -1087,9 +1028,7 @@ describe('ReactFiberEvents', () => {\n \n const Parent = () => (\n \n- \n- \n- <\/EventTarget>\n+ \n <\/EventComponent>\n );\n \n@@ -1103,7 +1042,7 @@ describe('ReactFiberEvents', () => {\n });\n expect(Scheduler).toFlushWithoutYielding();\n }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n+ 'Warning: validateDOMNesting: React event components cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"Text!\" in an element.',\n );\n });\n@@ -1117,11 +1056,7 @@ describe('ReactFiberEvents', () => {\n _updateCounter = updateCounter;\n \n if (counter === 1) {\n- return (\n- \n-

Child<\/div>\n- <\/EventComponent>\n- );\n+ return 123<\/EventTarget>;\n }\n \n return (\n@@ -1132,25 +1067,25 @@ describe('ReactFiberEvents', () => {\n }\n \n const Parent = () => (\n- \n- \n+

\n+ \n \n- <\/EventTarget>\n- <\/EventComponent>\n+ <\/EventComponent>\n+ <\/div>\n );\n \n const container = document.createElement('div');\n ReactDOM.render(, container);\n- expect(container.innerHTML).toBe('

Child - 0<\/span><\/div>');\n+ expect(container.innerHTML).toBe(\n+ '

Child - 0<\/span><\/div><\/div>',\n+ );\n \n expect(() => {\n ReactTestUtils.act(() => {\n _updateCounter(counter => counter + 1);\n });\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets must not have event components as children.',\n- );\n+ }).toWarnDev('Warning: Event targets should not have children.');\n });\n \n it('should error with a component stack contains the names of the event components and event targets', () => {\n@@ -1162,11 +1097,9 @@ describe('ReactFiberEvents', () => {\n \n const Test = () => (\n \n- \n- \n- \n- <\/span>\n- <\/EventTarget>\n+ \n+ \n+ <\/span>\n <\/EventComponent>\n );\n \n@@ -1195,7 +1128,6 @@ describe('ReactFiberEvents', () => {\n \n expect(componentStackMessage.includes('ErrorComponent')).toBe(true);\n expect(componentStackMessage.includes('span')).toBe(true);\n- expect(componentStackMessage.includes('TestEventTarget')).toBe(true);\n expect(componentStackMessage.includes('TestEventComponent')).toBe(true);\n expect(componentStackMessage.includes('Test')).toBe(true);\n expect(componentStackMessage.includes('Wrapper')).toBe(true);\n@@ -1222,9 +1154,9 @@ describe('ReactFiberEvents', () => {\n it('should render a simple event component with a single event target', () => {\n const Test = () => (\n \n- \n-

Hello world<\/div>\n- <\/EventTarget>\n+

\n+ Hello world\n+ <\/div>\n <\/EventComponent>\n );\n \ndiff --git a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\nindex d1f38c65d2..9a571b168f 100644\n--- a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n+++ b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n@@ -65,6 +65,8 @@ export const supportsPersistence = $$$hostConfig.supportsPersistence;\n export const supportsHydration = $$$hostConfig.supportsHydration;\n export const handleEventComponent = $$$hostConfig.handleEventComponent;\n export const handleEventTarget = $$$hostConfig.handleEventTarget;\n+export const getEventTargetChildElement =\n+ $$$hostConfig.getEventTargetChildElement;\n \n \/\/ -------------------\n \/\/ Mutation\n@@ -84,6 +86,9 @@ export const hideInstance = $$$hostConfig.hideInstance;\n export const hideTextInstance = $$$hostConfig.hideTextInstance;\n export const unhideInstance = $$$hostConfig.unhideInstance;\n export const unhideTextInstance = $$$hostConfig.unhideTextInstance;\n+export const commitTouchHitTargetUpdate =\n+ $$$hostConfig.commitTouchHitTargetUpdate;\n+export const commitEventTarget = $$$hostConfig.commitEventTarget;\n \n \/\/ -------------------\n \/\/ Persistence\ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\nindex 8020282394..cb9dceec36 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n@@ -14,6 +14,18 @@ import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared\/ReactSymbols';\n \n import {enableEventAPI} from 'shared\/ReactFeatureFlags';\n \n+type EventTargetChildElement = {\n+ type: string,\n+ props: null | {\n+ style?: {\n+ position?: string,\n+ bottom?: string,\n+ left?: string,\n+ right?: string,\n+ top?: string,\n+ },\n+ },\n+};\n export type Type = string;\n export type Props = Object;\n export type Container = {|\n@@ -170,12 +182,6 @@ export function createInstance(\n hostContext: Object,\n internalInstanceHandle: Object,\n ): Instance {\n- if (__DEV__ && enableEventAPI) {\n- warning(\n- hostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n- 'validateDOMNesting: must not have any children.',\n- );\n- }\n return {\n type,\n props,\n@@ -233,10 +239,6 @@ export function createTextInstance(\n internalInstanceHandle: Object,\n ): TextInstance {\n if (__DEV__ && enableEventAPI) {\n- warning(\n- hostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n- 'validateDOMNesting: must not have any children.',\n- );\n warning(\n hostContext !== EVENT_COMPONENT_CONTEXT,\n 'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +\n@@ -329,17 +331,62 @@ export function handleEventComponent(\n eventResponder: ReactEventResponder,\n rootContainerInstance: Container,\n internalInstanceHandle: Object,\n-) {\n- \/\/ TODO: add handleEventComponent implementation\n+): void {\n+ \/\/ noop\n+}\n+\n+export function getEventTargetChildElement(\n+ type: Symbol | number,\n+ props: Props,\n+): null | EventTargetChildElement {\n+ if (enableEventAPI) {\n+ if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n+ const {bottom, left, right, top} = props;\n+\n+ if (!bottom && !left && !right && !top) {\n+ return null;\n+ }\n+ return {\n+ type: 'div',\n+ props: {\n+ style: {\n+ position: 'absolute',\n+ zIndex: -1,\n+ bottom: bottom ? `-${bottom}px` : '0px',\n+ left: left ? `-${left}px` : '0px',\n+ right: right ? `-${right}px` : '0px',\n+ top: top ? `-${top}px` : '0px',\n+ },\n+ },\n+ };\n+ }\n+ }\n+ return null;\n }\n \n export function handleEventTarget(\n type: Symbol | number,\n props: Props,\n- parentInstance: Container,\n+ rootContainerInstance: Container,\n internalInstanceHandle: Object,\n-) {\n- if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n- \/\/ TODO\n+): boolean {\n+ if (enableEventAPI) {\n+ if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n+ \/\/ In DEV we do a computed style check on the position to ensure\n+ \/\/ the parent host component is correctly position in the document.\n+ if (__DEV__) {\n+ return true;\n+ }\n+ }\n }\n+ return false;\n+}\n+\n+export function commitEventTarget(\n+ type: Symbol | number,\n+ props: Props,\n+ instance: Instance,\n+ parentInstance: Instance,\n+): void {\n+ \/\/ noop\n }\ndiff --git a\/packages\/shared\/HostConfigWithNoHydration.js b\/packages\/shared\/HostConfigWithNoHydration.js\nindex 1be5f0b8a9..adc976a849 100644\n--- a\/packages\/shared\/HostConfigWithNoHydration.js\n+++ b\/packages\/shared\/HostConfigWithNoHydration.js\n@@ -47,3 +47,5 @@ export const didNotFindHydratableContainerSuspenseInstance = shim;\n export const didNotFindHydratableInstance = shim;\n export const didNotFindHydratableTextInstance = shim;\n export const didNotFindHydratableSuspenseInstance = shim;\n+export const canHydrateTouchHitTargetInstance = shim;\n+export const hydrateTouchHitTargetInstance = shim;\ndiff --git a\/packages\/shared\/HostConfigWithNoPersistence.js b\/packages\/shared\/HostConfigWithNoPersistence.js\nindex d5f84cf43f..9646c6a11f 100644\n--- a\/packages\/shared\/HostConfigWithNoPersistence.js\n+++ b\/packages\/shared\/HostConfigWithNoPersistence.js\n@@ -30,3 +30,4 @@ export const finalizeContainerChildren = shim;\n export const replaceContainerChildren = shim;\n export const cloneHiddenInstance = shim;\n export const cloneHiddenTextInstance = shim;\n+export const cloneHiddenTouchHitTargetInstance = shim;\n","body":"","parents":["958b6173fdcba503a4333d3a2e42c10781201f17"]}

dillon1000/react

Files changed