ReactDOM.useEvent: add useEvent interaction hook (facebook#18604)

Author: trueadm

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -52,7 +52,7 @@ type ReactDebugListenerMap = {|
   clear: () => void,
   setListener: (
     target: EventTarget | ReactScopeMethods,
-    callback: ?(Event) => void,
+    callback: ?(SyntheticEvent<EventTarget>) => void,
   ) => void,
 |};
 

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

@@ -1216,7 +1216,7 @@ export function unmountEventListener(listener: ReactDOMListener): void {
 
 export function validateEventListenerTarget(
   target: EventTarget | ReactScopeMethods,
-  listener: ?(Event) => void,
+  listener: ?(SyntheticEvent<EventTarget>) => void,
 ): boolean {
   if (enableUseEventAPI) {
     if (

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

@@ -42,9 +42,10 @@ function resolveDispatcher() {
 }
 
 export function useEvent(
-  type: DOMTopLevelEventType,
+  type: string,
   options?: EventOptions,
 ): ReactDOMListenerMap {
+  const topLevelType = ((type: any): DOMTopLevelEventType);
   const dispatcher = resolveDispatcher();
   let capture = false;
   let passive = undefined; // Undefined means to use the browser default
@@ -66,13 +67,13 @@ export function useEvent(
     }
   }
   if (priority === undefined) {
-    priority = getEventPriorityForListenerSystem(type);
+    priority = getEventPriorityForListenerSystem(topLevelType);
   }
   const event: ReactDOMListenerEvent = {
     capture,
     passive,
     priority,
-    type,
+    type: topLevelType,
   };
   return dispatcher.useEvent(event);
 }

packages/react-dom/src/shared/ReactDOMTypes.js

@@ -89,12 +89,12 @@ export type ReactDOMListenerMap = {|
   clear: () => void,
   setListener: (
     target: EventTarget | ReactScopeMethods,
-    callback: ?(Event) => void,
+    callback: ?(SyntheticEvent<EventTarget>) => void,
   ) => void,
 |};
 
 export type ReactDOMListener = {|
-  callback: Event => void,
+  callback: (SyntheticEvent<EventTarget>) => void,
   destroy: Node => void,
   event: ReactDOMListenerEvent,
   target: EventTarget | ReactScopeMethods,

packages/react-interactions/events/deprecated-focus.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/dom/DeprecatedFocus';

packages/react-interactions/events/focus.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/dom/Focus';
+export * from './src/dom/use-event/Focus';

packages/react-interactions/events/src/dom/Focus.js renamed to packages/react-interactions/events/src/dom/DeprecatedFocus.js

@@ -32,8 +32,9 @@ function initializeModules(hasPointerEvents) {
   // TODO: This import throws outside of experimental mode. Figure out better
   // strategy for gated imports.
   if (__EXPERIMENTAL__) {
-    FocusResponder = require('react-interactions/events/focus').FocusResponder;
-    useFocus = require('react-interactions/events/focus').useFocus;
+    FocusResponder = require('react-interactions/events/deprecated-focus')
+      .FocusResponder;
+    useFocus = require('react-interactions/events/deprecated-focus').useFocus;
   }
 }
 

packages/react-interactions/events/src/dom/__tests__/Focus-test.internal.js

@@ -31,9 +31,10 @@ const initializeModules = hasPointerEvents => {
   // TODO: This import throws outside of experimental mode. Figure out better
   // strategy for gated imports.
   if (__EXPERIMENTAL__) {
-    FocusWithinResponder = require('react-interactions/events/focus')
+    FocusWithinResponder = require('react-interactions/events/deprecated-focus')
       .FocusWithinResponder;
-    useFocusWithin = require('react-interactions/events/focus').useFocusWithin;
+    useFocusWithin = require('react-interactions/events/deprecated-focus')
+      .useFocusWithin;
   }
 };