ReactDOM.useEvent: add EventTarget support (#18355)

* ReactDOM.useEvent: add support for all EventTarget types

Author: trueadm

packages/legacy-events/EventPluginUtils.js

@@ -64,7 +64,8 @@ if (__DEV__) {
  */
 export function executeDispatch(event, listener, inst) {
   const type = event.type || 'unknown-event';
-  event.currentTarget = getNodeFromInstance(inst);
+  event.currentTarget =
+    inst.tag !== undefined ? getNodeFromInstance(inst) : inst;
   invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
   event.currentTarget = null;
 }

packages/legacy-events/EventSystemFlags.js

@@ -16,4 +16,5 @@ export const IS_ACTIVE = 1 << 3;
 export const PASSIVE_NOT_SUPPORTED = 1 << 4;
 export const IS_REPLAYED = 1 << 5;
 export const IS_FIRST_ANCESTOR = 1 << 6;
-export const LEGACY_FB_SUPPORT = 1 << 7;
+export const IS_TARGET_EVENT_ONLY = 1 << 7;
+export const LEGACY_FB_SUPPORT = 1 << 8;

packages/legacy-events/ReactSyntheticEventType.js

@@ -39,7 +39,7 @@ export type ReactSyntheticEvent = {|
     nativeEventTarget: EventTarget,
   ) => ReactSyntheticEvent,
   isPersistent: () => boolean,
-  _dispatchInstances: null | Array<Fiber> | Fiber,
+  _dispatchInstances: null | Array<Fiber | EventTarget> | Fiber | EventTarget,
   _dispatchListeners: null | Array<Function> | Function,
   _targetInst: Fiber,
   type: string,

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -75,11 +75,13 @@ import {
   IS_PASSIVE,
 } from 'legacy-events/EventSystemFlags';
 import {
-  attachElementListener,
-  detachElementListener,
-  isDOMDocument,
-  isDOMElement,
+  isManagedDOMElement,
+  isValidEventTarget,
   listenToTopLevelEvent,
+  detachListenerFromManagedDOMElement,
+  attachListenerFromManagedDOMElement,
+  detachTargetEventListener,
+  attachTargetEventListener,
 } from '../events/DOMModernPluginEventSystem';
 import {getListenerMapForElement} from '../events/DOMEventListenerMap';
 
@@ -1122,25 +1124,21 @@ export function registerEvent(
 export function mountEventListener(listener: ReactDOMListener): void {
   if (enableUseEventAPI) {
     const {target} = listener;
-    if (target === window) {
-      // TODO (useEvent)
-    } else if (isDOMDocument(target)) {
-      // TODO (useEvent)
-    } else if (isDOMElement(target)) {
-      attachElementListener(listener);
+    if (isManagedDOMElement(target)) {
+      attachListenerFromManagedDOMElement(listener);
+    } else {
+      attachTargetEventListener(listener);
     }
   }
 }
 
 export function unmountEventListener(listener: ReactDOMListener): void {
   if (enableUseEventAPI) {
     const {target} = listener;
-    if (target === window) {
-      // TODO (useEvent)
-    } else if (isDOMDocument(target)) {
-      // TODO (useEvent)
-    } else if (isDOMElement(target)) {
-      detachElementListener(listener);
+    if (isManagedDOMElement(target)) {
+      detachListenerFromManagedDOMElement(listener);
+    } else {
+      detachTargetEventListener(listener);
     }
   }
 }
@@ -1152,10 +1150,7 @@ export function validateEventListenerTarget(
   if (enableUseEventAPI) {
     if (
       target != null &&
-      (target === window ||
-        isDOMDocument(target) ||
-        (isDOMElement(target) &&
-          getClosestInstanceFromNode(((target: any): Element))))
+      (isManagedDOMElement(target) || isValidEventTarget(target))
     ) {
       if (listener == null || typeof listener === 'function') {
         return true;
@@ -1169,11 +1164,8 @@ export function validateEventListenerTarget(
     }
     if (__DEV__) {
       console.warn(
-        'Event listener method setListener() from useEvent() hook requires the first argument to be either:' +
-          '\n\n' +
-          '1. A valid DOM node that was rendered and managed by React\n' +
-          '2. The "window" object\n' +
-          '3. The "document" object',
+        'Event listener method setListener() from useEvent() hook requires the first argument to be ' +
+          'a valid DOM EventTarget. If using a ref, ensure the current value is not null.',
       );
     }
   }

packages/react-dom/src/events/DOMEventListenerMap.js

@@ -12,11 +12,11 @@ import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
 import {registrationNameDependencies} from 'legacy-events/EventPluginRegistry';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-// prettier-ignore
-const elementListenerMap:
-  // $FlowFixMe Work around Flow bug
-  | WeakMap
-  | Map<EventTarget, ElementListenerMap> = new PossiblyWeakMap();
+// $FlowFixMe: Flow cannot handle polymorphic WeakMaps
+const elementListenerMap: WeakMap<
+  EventTarget,
+  ElementListenerMap,
+> = new PossiblyWeakMap();
 
 export type ElementListenerMap = Map<
   DOMTopLevelEventType | string,