From 02163dad875ffa154412fedbe6c44fbb751aadbb Mon Sep 17 00:00:00 2001 From: Jordan Brown Date: Mon, 24 Feb 2025 12:57:33 -0800 Subject: [PATCH] [flow][react-dom] More precise types for touch events Summary: Changelog: [internal] Reviewed By: SamChou19815 Differential Revision: D70105581 fbshipit-source-id: 3329919ae6e6abdff2d251b73699957517f7f579 --- lib/react-dom.js | 30 ++++++++++---- .../badly_positioned_polyt.exp | 12 +++--- tests/component_syntax/component_syntax.exp | 40 +++++++++---------- .../jsx_intrinsics.builtin.exp | 12 +++--- tests/react/react.exp | 36 ++++++++--------- .../react_clone_element.exp | 40 +++++++++---------- 6 files changed, 93 insertions(+), 77 deletions(-) diff --git a/lib/react-dom.js b/lib/react-dom.js index 2e5169f6c96..8557b3b6a19 100644 --- 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 { 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 index 4f4ce100eb2..2365b250232 100644 --- 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: - /react-dom.js:74:56 - 74| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget> + /react-dom.js:91:56 + 91| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget> ^^^^^^^^^^^ [1] concretize.js:7:47 7| function _onKeyDown(e: SyntheticKeyboardEvent): void {}; ^^ [2] - /react-dom.js:74:39 - 74| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget> + /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: - /react-dom.js:74:42 - 74| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget> + /react-dom.js:91:42 + 91| declare class SyntheticKeyboardEvent<+T: EventTarget = EventTarget> ^^^^^^^^^^^ [1] concretize.js:7:47 7| function _onKeyDown(e: SyntheticKeyboardEvent): void {}; diff --git a/tests/component_syntax/component_syntax.exp b/tests/component_syntax/component_syntax.exp index a63b35cbac5..b985dbcbc82 100644 --- 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: - /react-dom.js:848:14 - 848| children?: React$Node, + /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: - /react-dom.js:848:14 - 848| children?: React$Node, + /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: - /react-dom.js:848:14 - 848| children?: React$Node, + /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: - /react-dom.js:848:14 - 848| children?: React$Node, + /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: - /react-dom.js:848:14 - 848| children?: React$Node, + /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: - /react-dom.js:848:14 - 848| children?: React$Node, + /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: - /react-dom.js:848:14 - 848| children?: React$Node, + /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: - /react-dom.js:848:14 - 848| children?: React$Node, + /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>) { ^^^^^^^^^^^^^^ [1] - /react-dom.js:235:67 - 235| meta: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:251:67 + 251| meta: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^^ [2] propsof.js:26:18 26| component C(ref: React.RefSetter>) { @@ -2664,8 +2664,8 @@ References: propsof.js:26:34 26| component C(ref: React.RefSetter>) { ^^^^^^^^^^^^^^ [1] - /react-dom.js:235:67 - 235| meta: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:251:67 + 251| meta: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^^ [2] propsof.js:26:18 26| component C(ref: React.RefSetter>) { diff --git a/tests/jsx_intrinsics.builtin/jsx_intrinsics.builtin.exp b/tests/jsx_intrinsics.builtin/jsx_intrinsics.builtin.exp index f1cfd5d7086..12661ee02c9 100644 --- a/tests/jsx_intrinsics.builtin/jsx_intrinsics.builtin.exp +++ b/tests/jsx_intrinsics.builtin/jsx_intrinsics.builtin.exp @@ -98,14 +98,14 @@ Cannot assign `
` to `e` because `HTMLDivElement` [1] is incompatible with ^^^^^^^^^^^^^^^^^ References: - /react-dom.js:197:65 - 197| div: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:213:65 + 213| div: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^ [1] - /react-dom.js:261:67 - 261| span: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:277:67 + 277| span: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^^ [2] - /react-dom.js:14:31 - 14| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> { + /react-dom.js:31:31 + 31| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> { ^ [3] /react.js:146:69 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; diff --git a/tests/react/react.exp b/tests/react/react.exp index 88ffb31e1ab..4916d8953ec 100644 --- a/tests/react/react.exp +++ b/tests/react/react.exp @@ -137,14 +137,14 @@ Cannot cast `
` to `ExactReactElement_DEPRECATED` because `HTMLDivElement` ^^^^^^^ References: - /react-dom.js:197:65 - 197| div: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:213:65 + 213| div: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^ [1] - /react-dom.js:261:67 - 261| span: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:277:67 + 277| span: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^^ [2] - /react-dom.js:14:31 - 14| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> { + /react-dom.js:31:31 + 31| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> { ^ [3] /react.js:146:69 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -188,14 +188,14 @@ Cannot cast `
` to `ExactReactElement_DEPRECATED` because `HTMLDivElement` ^^^^^^^ References: - /react-dom.js:197:65 - 197| div: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:213:65 + 213| div: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^ [1] - /react-dom.js:261:67 - 261| span: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:277:67 + 277| span: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^^ [2] - /react-dom.js:14:31 - 14| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> { + /react-dom.js:31:31 + 31| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> { ^ [3] /react.js:146:69 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -261,14 +261,14 @@ Cannot cast `
` to `ExactReactElement_DEPRECATED` because `HTMLDivElement` ^^^^^^^ References: - /react-dom.js:197:65 - 197| div: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:213:65 + 213| div: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^ [1] - /react-dom.js:261:67 - 261| span: ReactDOM$HTMLElementJSXIntrinsicTyped, + /react-dom.js:277:67 + 277| span: ReactDOM$HTMLElementJSXIntrinsicTyped, ^^^^^^^^^^^^^^^^^^^^^ [2] - /react-dom.js:14:31 - 14| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> { + /react-dom.js:31:31 + 31| declare class SyntheticEvent<+T: EventTarget = EventTarget, +E: Event = Event> { ^ [3] /react.js:146:69 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; diff --git a/tests/react_clone_element/react_clone_element.exp b/tests/react_clone_element/react_clone_element.exp index 1f831c4243b..ad706a1f441 100644 --- 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>; ^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -172,8 +172,8 @@ References: test.js:13:45 13| declare var a: ExactReactElement_DEPRECATED>; ^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -200,8 +200,8 @@ References: test.js:14:45 14| declare var b: ExactReactElement_DEPRECATED>; ^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -228,8 +228,8 @@ References: test.js:15:45 15| declare var c: ExactReactElement_DEPRECATED>; ^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -256,8 +256,8 @@ References: test.js:15:45 15| declare var c: ExactReactElement_DEPRECATED>; ^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -343,8 +343,8 @@ References: test.js:16:45 16| declare var d: ExactReactElement_DEPRECATED>; ^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -371,8 +371,8 @@ References: test.js:16:45 16| declare var d: ExactReactElement_DEPRECATED>; ^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -455,8 +455,8 @@ References: test.js:69:1 69| function SFC(props: { p: number }) { return null }; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -483,8 +483,8 @@ References: test.js:74:51 74| declare const exact: ExactReactElement_DEPRECATED; ^^^^^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...}; @@ -546,8 +546,8 @@ References: /react.js:177:49 177| declare type React$MixedElement = React$Element; ^^^^^^^^^^^^^^^^^ [1] - /react-dom.js:166:4 - 166| [string]: ReactDOM$HTMLElementJSXIntrinsic, + /react-dom.js:182:4 + 182| [string]: ReactDOM$HTMLElementJSXIntrinsic, ^^^^^^ [2] /react.js:146:36 146| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps>: {...};