[flow][react-dom] More precise types for touch events

Summary: Changelog: [internal] Reviewed By: SamChou19815 Differential Revision: D70105581 fbshipit-source-id: 3329919ae6e6abdff2d251b73699957517f7f579
facebook · Feb 24, 2025 · 02163da · 02163da
1 parent f631790
commit 02163da
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 77 deletions.
diff --git a/lib/react-dom.js b/lib/react-dom.js
@@ -11,6 +11,23 @@
 
 // The react-dom, react-dom/server and react-dom/test-utils modules were moved to flow-typed.
 
+// https://www.w3.org/TR/uievents-key/#keys-modifier
+type ModifierKey =
+  | 'Alt'
+  | 'AltGraph'
+  | 'CapsLock'
+  | 'Control'
+  | 'Fn'
+  | 'FnLock'
+  | 'Hyper'
+  | 'Meta'
+  | 'NumLock'
+  | 'ScrollLock'
+  | 'Shift'
+  | 'Super'
+  | 'Symbol'
+  | 'SymbolLock';
+
 declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> {
   bubbles: boolean;
   cancelable: boolean;
@@ -77,7 +94,7 @@ declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget>
   altKey: boolean;
   charCode: number;
   ctrlKey: boolean;
-  getModifierState(keyArg?: string): boolean;
+  getModifierState(key: ModifierKey): boolean;
   key: string;
   keyCode: number;
   locale: string;
@@ -99,7 +116,7 @@ declare class SyntheticMouseEvent<
   clientX: number;
   clientY: number;
   ctrlKey: boolean;
-  getModifierState(keyArg: string): boolean;
+  getModifierState(key: ModifierKey): boolean;
   metaKey: boolean;
   pageX: number;
   pageY: number;
@@ -138,18 +155,17 @@ declare class SyntheticPointerEvent<+T: EventTarget = EventTarget>
   pointerType: string;
   isPrimary: boolean;
 }
-
 declare class SyntheticTouchEvent<+T: EventTarget = EventTarget>
   extends SyntheticUIEvent<T, TouchEvent>
 {
   altKey: boolean;
-  changedTouches: any;
+  changedTouches: TouchList;
   ctrlKey: boolean;
-  getModifierState: any;
+  getModifierState(key: ModifierKey): boolean;
   metaKey: boolean;
   shiftKey: boolean;
-  targetTouches: any;
-  touches: any;
+  targetTouches: TouchList;
+  touches: TouchList;
 }
 
 declare class SyntheticTransitionEvent<+T: EventTarget = EventTarget>

diff --git a/tests/badly_positioned_polyt/badly_positioned_polyt.exp b/tests/badly_positioned_polyt/badly_positioned_polyt.exp
@@ -8,14 +8,14 @@ parameter of property `onKeyDown`. [incompatible-type-arg]
                       ^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:74:56
-   74| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget>
+   <BUILTINS>/react-dom.js:91:56
+   91| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget>
                                                               ^^^^^^^^^^^ [1]
    concretize.js:7:47
     7| function _onKeyDown(e: SyntheticKeyboardEvent<C1>): void {};
                                                      ^^ [2]
-   <BUILTINS>/react-dom.js:74:39
-   74| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget>
+   <BUILTINS>/react-dom.js:91:39
+   91| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget>
                                              ^ [3]
 
 
@@ -29,8 +29,8 @@ parameter of property `onKeyDown`. [incompatible-type-arg]
                       ^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:74:42
-   74| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget>
+   <BUILTINS>/react-dom.js:91:42
+   91| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget>
                                                 ^^^^^^^^^^^ [1]
    concretize.js:7:47
     7| function _onKeyDown(e: SyntheticKeyboardEvent<C1>): void {};

diff --git a/tests/component_syntax/component_syntax.exp b/tests/component_syntax/component_syntax.exp
@@ -2482,8 +2482,8 @@ Cannot cast `intrinsicProp.children` to empty because `$Iterable` [1] is incompa
          ^^^^^^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:848:14
-   848|   children?: React$Node,
+   <BUILTINS>/react-dom.js:864:14
+   864|   children?: React$Node,
                      ^^^^^^^^^^ [1]
    propsof.js:14:26
     14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2500,8 +2500,8 @@ Cannot cast `intrinsicProp.children` to empty because `React.Element` [1] is inc
          ^^^^^^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:848:14
-   848|   children?: React$Node,
+   <BUILTINS>/react-dom.js:864:14
+   864|   children?: React$Node,
                      ^^^^^^^^^^ [1]
    propsof.js:14:26
     14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2518,8 +2518,8 @@ Cannot cast `intrinsicProp.children` to empty because `React.Portal` [1] is inco
          ^^^^^^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:848:14
-   848|   children?: React$Node,
+   <BUILTINS>/react-dom.js:864:14
+   864|   children?: React$Node,
                      ^^^^^^^^^^ [1]
    propsof.js:14:26
     14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2535,8 +2535,8 @@ Cannot cast `intrinsicProp.children` to empty because boolean [1] is incompatibl
          ^^^^^^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:848:14
-   848|   children?: React$Node,
+   <BUILTINS>/react-dom.js:864:14
+   864|   children?: React$Node,
                      ^^^^^^^^^^ [1]
    propsof.js:14:26
     14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2552,8 +2552,8 @@ Cannot cast `intrinsicProp.children` to empty because null [1] is incompatible w
          ^^^^^^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:848:14
-   848|   children?: React$Node,
+   <BUILTINS>/react-dom.js:864:14
+   864|   children?: React$Node,
                      ^^^^^^^^^^ [1]
    propsof.js:14:26
     14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2569,8 +2569,8 @@ Cannot cast `intrinsicProp.children` to empty because number [1] is incompatible
          ^^^^^^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:848:14
-   848|   children?: React$Node,
+   <BUILTINS>/react-dom.js:864:14
+   864|   children?: React$Node,
                      ^^^^^^^^^^ [1]
    propsof.js:14:26
     14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2586,8 +2586,8 @@ Cannot cast `intrinsicProp.children` to empty because string [1] is incompatible
          ^^^^^^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:848:14
-   848|   children?: React$Node,
+   <BUILTINS>/react-dom.js:864:14
+   864|   children?: React$Node,
                      ^^^^^^^^^^ [1]
    propsof.js:14:26
     14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2603,8 +2603,8 @@ Cannot cast `intrinsicProp.children` to empty because undefined [1] is incompati
          ^^^^^^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:848:14
-   848|   children?: React$Node,
+   <BUILTINS>/react-dom.js:864:14
+   864|   children?: React$Node,
                      ^^^^^^^^^^ [1]
    propsof.js:14:26
     14| (intrinsicProp.children: empty); // children is ?React.Node
@@ -2639,8 +2639,8 @@ References:
    propsof.js:26:34
     26| component C(ref: React.RefSetter<React.RefOf<A>>) {
                                          ^^^^^^^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:235:67
-   235|   meta: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$metaProps, ReactDOM$metaInstance>,
+   <BUILTINS>/react-dom.js:251:67
+   251|   meta: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$metaProps, ReactDOM$metaInstance>,
                                                                           ^^^^^^^^^^^^^^^^^^^^^ [2]
    propsof.js:26:18
     26| component C(ref: React.RefSetter<React.RefOf<A>>) {
@@ -2664,8 +2664,8 @@ References:
    propsof.js:26:34
     26| component C(ref: React.RefSetter<React.RefOf<A>>) {
                                          ^^^^^^^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:235:67
-   235|   meta: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$metaProps, ReactDOM$metaInstance>,
+   <BUILTINS>/react-dom.js:251:67
+   251|   meta: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$metaProps, ReactDOM$metaInstance>,
                                                                           ^^^^^^^^^^^^^^^^^^^^^ [2]
    propsof.js:26:18
     26| component C(ref: React.RefSetter<React.RefOf<A>>) {

diff --git a/tests/jsx_intrinsics.builtin/jsx_intrinsics.builtin.exp b/tests/jsx_intrinsics.builtin/jsx_intrinsics.builtin.exp
@@ -98,14 +98,14 @@ Cannot assign `<div />` to `e` because `HTMLDivElement` [1] is incompatible with
                                                       ^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:197:65
-   197|   div: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$divProps, ReactDOM$divInstance>,
+   <BUILTINS>/react-dom.js:213:65
+   213|   div: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$divProps, ReactDOM$divInstance>,
                                                                         ^^^^^^^^^^^^^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:261:67
-   261|   span: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$spanProps, ReactDOM$spanInstance>,
+   <BUILTINS>/react-dom.js:277:67
+   277|   span: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$spanProps, ReactDOM$spanInstance>,
                                                                           ^^^^^^^^^^^^^^^^^^^^^ [2]
-   <BUILTINS>/react-dom.js:14:31
-    14| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> {
+   <BUILTINS>/react-dom.js:31:31
+    31| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> {
                                       ^ [3]
    <BUILTINS>/react.js:146:69
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};

diff --git a/tests/react/react.exp b/tests/react/react.exp
@@ -137,14 +137,14 @@ Cannot cast `<div />` to `ExactReactElement_DEPRECATED` because `HTMLDivElement`
           ^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:197:65
-   197|   div: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$divProps, ReactDOM$divInstance>,
+   <BUILTINS>/react-dom.js:213:65
+   213|   div: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$divProps, ReactDOM$divInstance>,
                                                                         ^^^^^^^^^^^^^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:261:67
-   261|   span: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$spanProps, ReactDOM$spanInstance>,
+   <BUILTINS>/react-dom.js:277:67
+   277|   span: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$spanProps, ReactDOM$spanInstance>,
                                                                           ^^^^^^^^^^^^^^^^^^^^^ [2]
-   <BUILTINS>/react-dom.js:14:31
-    14| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> {
+   <BUILTINS>/react-dom.js:31:31
+    31| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> {
                                       ^ [3]
    <BUILTINS>/react.js:146:69
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -188,14 +188,14 @@ Cannot cast `<div />` to `ExactReactElement_DEPRECATED` because `HTMLDivElement`
           ^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:197:65
-   197|   div: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$divProps, ReactDOM$divInstance>,
+   <BUILTINS>/react-dom.js:213:65
+   213|   div: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$divProps, ReactDOM$divInstance>,
                                                                         ^^^^^^^^^^^^^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:261:67
-   261|   span: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$spanProps, ReactDOM$spanInstance>,
+   <BUILTINS>/react-dom.js:277:67
+   277|   span: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$spanProps, ReactDOM$spanInstance>,
                                                                           ^^^^^^^^^^^^^^^^^^^^^ [2]
-   <BUILTINS>/react-dom.js:14:31
-    14| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> {
+   <BUILTINS>/react-dom.js:31:31
+    31| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> {
                                       ^ [3]
    <BUILTINS>/react.js:146:69
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -261,14 +261,14 @@ Cannot cast `<div />` to `ExactReactElement_DEPRECATED` because `HTMLDivElement`
           ^^^^^^^
 
 References:
-   <BUILTINS>/react-dom.js:197:65
-   197|   div: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$divProps, ReactDOM$divInstance>,
+   <BUILTINS>/react-dom.js:213:65
+   213|   div: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$divProps, ReactDOM$divInstance>,
                                                                         ^^^^^^^^^^^^^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:261:67
-   261|   span: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$spanProps, ReactDOM$spanInstance>,
+   <BUILTINS>/react-dom.js:277:67
+   277|   span: ReactDOM$HTMLElementJSXIntrinsicTyped<ReactDOM$spanProps, ReactDOM$spanInstance>,
                                                                           ^^^^^^^^^^^^^^^^^^^^^ [2]
-   <BUILTINS>/react-dom.js:14:31
-    14| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> {
+   <BUILTINS>/react-dom.js:31:31
+    31| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> {
                                       ^ [3]
    <BUILTINS>/react.js:146:69
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};

diff --git a/tests/react_clone_element/react_clone_element.exp b/tests/react_clone_element/react_clone_element.exp
@@ -144,8 +144,8 @@ References:
    test.js:13:45
     13| declare var a: ExactReactElement_DEPRECATED<Class<A>>;
                                                     ^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -172,8 +172,8 @@ References:
    test.js:13:45
     13| declare var a: ExactReactElement_DEPRECATED<Class<A>>;
                                                     ^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -200,8 +200,8 @@ References:
    test.js:14:45
     14| declare var b: ExactReactElement_DEPRECATED<Class<B>>;
                                                     ^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -228,8 +228,8 @@ References:
    test.js:15:45
     15| declare var c: ExactReactElement_DEPRECATED<Class<C>>;
                                                     ^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -256,8 +256,8 @@ References:
    test.js:15:45
     15| declare var c: ExactReactElement_DEPRECATED<Class<C>>;
                                                     ^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -343,8 +343,8 @@ References:
    test.js:16:45
     16| declare var d: ExactReactElement_DEPRECATED<Class<D>>;
                                                     ^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -371,8 +371,8 @@ References:
    test.js:16:45
     16| declare var d: ExactReactElement_DEPRECATED<Class<D>>;
                                                     ^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -455,8 +455,8 @@ References:
    test.js:69:1
     69| function SFC(props: { p: number }) { return null };
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -483,8 +483,8 @@ References:
    test.js:74:51
     74| declare const exact: ExactReactElement_DEPRECATED<typeof Exact>;
                                                           ^^^^^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
@@ -546,8 +546,8 @@ References:
    <BUILTINS>/react.js:177:49
    177| declare type React$MixedElement = React$Element<React$ElementType>;
                                                         ^^^^^^^^^^^^^^^^^ [1]
-   <BUILTINS>/react-dom.js:166:4
-   166|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
+   <BUILTINS>/react-dom.js:182:4
+   182|   [string]: ReactDOM$HTMLElementJSXIntrinsic,
            ^^^^^^ [2]
    <BUILTINS>/react.js:146:36
    146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};