From e815fdae53e45cfc669954377109a024a1716a5c Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Fri, 31 Jan 2025 04:54:42 -0800 Subject: [PATCH] Align TextInput event types with TypeScript (#48971) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/48971 Changelog: [Internal] Mosltly align event types of TextInput components with TypeScript definitions. Reviewed By: mellyeliu, thatmichael85 Differential Revision: D68713180 fbshipit-source-id: d8e9c0458466ef492fecf516fd58bc5459b35e26 --- .../TextInput/InputAccessoryView.js | 6 +- .../Components/TextInput/TextInput.flow.js | 108 ++++----- .../Components/TextInput/TextInput.js | 112 +++++----- .../Libraries/Types/CoreEventTypes.js | 2 + .../__snapshots__/public-api-test.js.snap | 206 +++++++++--------- 5 files changed, 222 insertions(+), 212 deletions(-) diff --git a/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js b/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js index ada95cdc3d6b68..d80716cbf313f6 100644 --- a/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js +++ b/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js @@ -76,7 +76,7 @@ import * as React from 'react'; * For an example, look at InputAccessoryViewExample.js in RNTester. */ -type Props = $ReadOnly<{ +export type InputAccessoryViewProps = $ReadOnly<{ +children: React.Node, /** * An ID which is used to associate this `InputAccessoryView` to @@ -87,7 +87,9 @@ type Props = $ReadOnly<{ backgroundColor?: ?ColorValue, }>; -const InputAccessoryView: React.ComponentType = (props: Props) => { +const InputAccessoryView: React.ComponentType = ( + props: InputAccessoryViewProps, +) => { const {width} = useWindowDimensions(); if (Platform.OS === 'ios') { diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js index adcb361f67f2a3..fa7e042fc60a5c 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js @@ -25,13 +25,13 @@ import * as React from 'react'; type ReactRefSetter = {current: null | T, ...} | ((ref: null | T) => mixed); -export type ChangeEvent = SyntheticEvent< - $ReadOnly<{ - eventCount: number, - target: number, - text: string, - }>, ->; +export type TextInputChangeEventData = $ReadOnly<{ + eventCount: number, + target: number, + text: string, +}>; + +export type TextInputChangeEvent = SyntheticEvent; export type TextInputEvent = SyntheticEvent< $ReadOnly<{ @@ -46,52 +46,56 @@ export type TextInputEvent = SyntheticEvent< }>, >; -export type ContentSizeChangeEvent = SyntheticEvent< - $ReadOnly<{ - target: number, - contentSize: $ReadOnly<{ - width: number, - height: number, - }>, +export type TextInputContentSizeChangeEventData = $ReadOnly<{ + target: number, + contentSize: $ReadOnly<{ + width: number, + height: number, }>, ->; +}>; -type TargetEvent = SyntheticEvent< - $ReadOnly<{ - target: number, - }>, ->; +export type TextInputContentSizeChangeEvent = + SyntheticEvent; + +export type TargetEvent = $ReadOnly<{ + target: number, +}>; + +export type TextInputFocusEventData = TargetEvent; -export type BlurEvent = TargetEvent; -export type FocusEvent = TargetEvent; +export type TextInputBlurEvent = SyntheticEvent; +export type TextInputFocusEvent = SyntheticEvent; type Selection = $ReadOnly<{ start: number, end: number, }>; -export type SelectionChangeEvent = SyntheticEvent< - $ReadOnly<{ - selection: Selection, - target: number, - }>, ->; +export type TextInputSelectionChangeEventData = $ReadOnly<{ + ...TargetEvent, + selection: Selection, +}>; -export type KeyPressEvent = SyntheticEvent< - $ReadOnly<{ - key: string, - target?: ?number, - eventCount?: ?number, - }>, ->; +export type TextInputSelectionChangeEvent = + SyntheticEvent; -export type EditingEvent = SyntheticEvent< - $ReadOnly<{ - eventCount: number, - text: string, - target: number, - }>, ->; +export type TextInputKeyPressEventData = $ReadOnly<{ + ...TargetEvent, + key: string, + target?: ?number, + eventCount: number, +}>; + +export type TextInputKeyPressEvent = SyntheticEvent; + +export type TextInputEndEditingEventData = $ReadOnly<{ + ...TargetEvent, + eventCount: number, + text: string, +}>; + +export type TextInputEditingEvent = + SyntheticEvent; type DataDetectorTypesType = | 'phoneNumber' @@ -727,12 +731,12 @@ export type Props = $ReadOnly<{ /** * Callback that is called when the text input is blurred. */ - onBlur?: ?(e: BlurEvent) => mixed, + onBlur?: ?(e: TextInputBlurEvent) => mixed, /** * Callback that is called when the text input's text changes. */ - onChange?: ?(e: ChangeEvent) => mixed, + onChange?: ?(e: TextInputChangeEvent) => mixed, /** * DANGER: this API is not stable and will change in the future. @@ -742,7 +746,7 @@ export type Props = $ReadOnly<{ * * @platform ios */ - unstable_onChangeSync?: ?(e: ChangeEvent) => mixed, + unstable_onChangeSync?: ?(e: TextInputChangeEvent) => mixed, /** * Callback that is called when the text input's text changes. @@ -768,17 +772,17 @@ export type Props = $ReadOnly<{ * * Only called for multiline text inputs. */ - onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed, + onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed, /** * Callback that is called when text input ends. */ - onEndEditing?: ?(e: EditingEvent) => mixed, + onEndEditing?: ?(e: TextInputEditingEvent) => mixed, /** * Callback that is called when the text input is focused. */ - onFocus?: ?(e: FocusEvent) => mixed, + onFocus?: ?(e: TextInputFocusEvent) => mixed, /** * Callback that is called when a key is pressed. @@ -787,7 +791,7 @@ export type Props = $ReadOnly<{ * the typed-in character otherwise including `' '` for space. * Fires before `onChange` callbacks. */ - onKeyPress?: ?(e: KeyPressEvent) => mixed, + onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed, /** * DANGER: this API is not stable and will change in the future. @@ -802,7 +806,7 @@ export type Props = $ReadOnly<{ * * @platform ios */ - unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed, + unstable_onKeyPressSync?: ?(e: TextInputKeyPressEvent) => mixed, /** * Called when a single tap gesture is detected. @@ -824,13 +828,13 @@ export type Props = $ReadOnly<{ * This will be called with * `{ nativeEvent: { selection: { start, end } } }`. */ - onSelectionChange?: ?(e: SelectionChangeEvent) => mixed, + onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => mixed, /** * Callback that is called when the text input's submit button is pressed. * Invalid if `multiline={true}` is specified. */ - onSubmitEditing?: ?(e: EditingEvent) => mixed, + onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed, /** * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`. diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js index 43fd74bd2fd219..ed550e5133ef9b 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.js @@ -66,13 +66,13 @@ if (Platform.OS === 'android') { require('./RCTMultilineTextInputNativeComponent').Commands; } -export type ChangeEvent = SyntheticEvent< - $ReadOnly<{ - eventCount: number, - target: number, - text: string, - }>, ->; +export type TextInputChangeEventData = $ReadOnly<{ + eventCount: number, + target: number, + text: string, +}>; + +export type TextInputChangeEvent = SyntheticEvent; export type TextInputEvent = SyntheticEvent< $ReadOnly<{ @@ -87,52 +87,56 @@ export type TextInputEvent = SyntheticEvent< }>, >; -export type ContentSizeChangeEvent = SyntheticEvent< - $ReadOnly<{ - target: number, - contentSize: $ReadOnly<{ - width: number, - height: number, - }>, +export type TextInputContentSizeChangeEventData = $ReadOnly<{ + target: number, + contentSize: $ReadOnly<{ + width: number, + height: number, }>, ->; +}>; -type TargetEvent = SyntheticEvent< - $ReadOnly<{ - target: number, - }>, ->; +export type TextInputContentSizeChangeEvent = + SyntheticEvent; + +export type TargetEvent = $ReadOnly<{ + target: number, +}>; + +export type TextInputFocusEventData = TargetEvent; -export type BlurEvent = TargetEvent; -export type FocusEvent = TargetEvent; +export type TextInputBlurEvent = SyntheticEvent; +export type TextInputFocusEvent = SyntheticEvent; type Selection = $ReadOnly<{ start: number, end: number, }>; -export type SelectionChangeEvent = SyntheticEvent< - $ReadOnly<{ - selection: Selection, - target: number, - }>, ->; +export type TextInputSelectionChangeEventData = $ReadOnly<{ + ...TargetEvent, + selection: Selection, +}>; -export type KeyPressEvent = SyntheticEvent< - $ReadOnly<{ - key: string, - target?: ?number, - eventCount?: ?number, - }>, ->; +export type TextInputSelectionChangeEvent = + SyntheticEvent; -export type EditingEvent = SyntheticEvent< - $ReadOnly<{ - eventCount: number, - text: string, - target: number, - }>, ->; +type TextInputKeyPressEventData = $ReadOnly<{ + ...TargetEvent, + key: string, + target?: ?number, + eventCount?: ?number, +}>; + +export type TextInputKeyPressEvent = SyntheticEvent; + +export type TextInputEndEditingEventData = $ReadOnly<{ + ...TargetEvent, + eventCount: number, + text: string, +}>; + +export type TextInputEditingEvent = + SyntheticEvent; type DataDetectorTypesType = | 'phoneNumber' @@ -766,12 +770,12 @@ export type Props = $ReadOnly<{ /** * Callback that is called when the text input is blurred. */ - onBlur?: ?(e: BlurEvent) => mixed, + onBlur?: ?(e: TextInputBlurEvent) => mixed, /** * Callback that is called when the text input's text changes. */ - onChange?: ?(e: ChangeEvent) => mixed, + onChange?: ?(e: TextInputChangeEvent) => mixed, /** * Callback that is called when the text input's text changes. @@ -786,17 +790,17 @@ export type Props = $ReadOnly<{ * * Only called for multiline text inputs. */ - onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed, + onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed, /** * Callback that is called when text input ends. */ - onEndEditing?: ?(e: EditingEvent) => mixed, + onEndEditing?: ?(e: TextInputEditingEvent) => mixed, /** * Callback that is called when the text input is focused. */ - onFocus?: ?(e: FocusEvent) => mixed, + onFocus?: ?(e: TextInputFocusEvent) => mixed, /** * Callback that is called when a key is pressed. @@ -805,7 +809,7 @@ export type Props = $ReadOnly<{ * the typed-in character otherwise including `' '` for space. * Fires before `onChange` callbacks. */ - onKeyPress?: ?(e: KeyPressEvent) => mixed, + onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed, /** * Called when a single tap gesture is detected. @@ -827,13 +831,13 @@ export type Props = $ReadOnly<{ * This will be called with * `{ nativeEvent: { selection: { start, end } } }`. */ - onSelectionChange?: ?(e: SelectionChangeEvent) => mixed, + onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => mixed, /** * Callback that is called when the text input's submit button is pressed. * Invalid if `multiline={true}` is specified. */ - onSubmitEditing?: ?(e: EditingEvent) => mixed, + onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed, /** * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`. @@ -1419,7 +1423,7 @@ function InternalTextInput(props: Props): React.Node { const ref = useMergeRefs(setLocalRef, props.forwardedRef); - const _onChange = (event: ChangeEvent) => { + const _onChange = (event: TextInputChangeEvent) => { const currentText = event.nativeEvent.text; props.onChange && props.onChange(event); props.onChangeText && props.onChangeText(currentText); @@ -1438,7 +1442,7 @@ function InternalTextInput(props: Props): React.Node { setMostRecentEventCount(event.nativeEvent.eventCount); }; - const _onSelectionChange = (event: SelectionChangeEvent) => { + const _onSelectionChange = (event: TextInputSelectionChangeEvent) => { props.onSelectionChange && props.onSelectionChange(event); if (inputRef.current == null) { @@ -1453,14 +1457,14 @@ function InternalTextInput(props: Props): React.Node { }); }; - const _onFocus = (event: FocusEvent) => { + const _onFocus = (event: TextInputFocusEvent) => { TextInputState.focusInput(inputRef.current); if (props.onFocus) { props.onFocus(event); } }; - const _onBlur = (event: BlurEvent) => { + const _onBlur = (event: TextInputBlurEvent) => { TextInputState.blurInput(inputRef.current); if (props.onBlur) { props.onBlur(event); diff --git a/packages/react-native/Libraries/Types/CoreEventTypes.js b/packages/react-native/Libraries/Types/CoreEventTypes.js index e5cbb16b44bf3a..1e807f4e66bfd0 100644 --- a/packages/react-native/Libraries/Types/CoreEventTypes.js +++ b/packages/react-native/Libraries/Types/CoreEventTypes.js @@ -271,12 +271,14 @@ export type ScrollEvent = SyntheticEvent< export type BlurEvent = SyntheticEvent< $ReadOnly<{ target: number, + ... }>, >; export type FocusEvent = SyntheticEvent< $ReadOnly<{ target: number, + ... }>, >; diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index da9738f5497495..9e47f30577a82e 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -2445,13 +2445,13 @@ declare export default HostComponent; `; exports[`public API should not change unintentionally Libraries/Components/TextInput/InputAccessoryView.js 1`] = ` -"type Props = $ReadOnly<{ +"export type InputAccessoryViewProps = $ReadOnly<{ +children: React.Node, nativeID?: ?string, style?: ?ViewStyleProp, backgroundColor?: ?ColorValue, }>; -declare const InputAccessoryView: React.ComponentType; +declare const InputAccessoryView: React.ComponentType; declare export default typeof InputAccessoryView; " `; @@ -2493,13 +2493,12 @@ exports[`public API should not change unintentionally Libraries/Components/TextI "type ReactRefSetter = | { current: null | T, ... } | ((ref: null | T) => mixed); -export type ChangeEvent = SyntheticEvent< - $ReadOnly<{ - eventCount: number, - target: number, - text: string, - }>, ->; +export type TextInputChangeEventData = $ReadOnly<{ + eventCount: number, + target: number, + text: string, +}>; +export type TextInputChangeEvent = SyntheticEvent; export type TextInputEvent = SyntheticEvent< $ReadOnly<{ eventCount: number, @@ -2512,46 +2511,45 @@ export type TextInputEvent = SyntheticEvent< text: string, }>, >; -export type ContentSizeChangeEvent = SyntheticEvent< - $ReadOnly<{ - target: number, - contentSize: $ReadOnly<{ - width: number, - height: number, - }>, - }>, ->; -type TargetEvent = SyntheticEvent< - $ReadOnly<{ - target: number, +export type TextInputContentSizeChangeEventData = $ReadOnly<{ + target: number, + contentSize: $ReadOnly<{ + width: number, + height: number, }>, ->; -export type BlurEvent = TargetEvent; -export type FocusEvent = TargetEvent; +}>; +export type TextInputContentSizeChangeEvent = + SyntheticEvent; +export type TargetEvent = $ReadOnly<{ + target: number, +}>; +export type TextInputFocusEventData = TargetEvent; +export type TextInputBlurEvent = SyntheticEvent; +export type TextInputFocusEvent = SyntheticEvent; type Selection = $ReadOnly<{ start: number, end: number, }>; -export type SelectionChangeEvent = SyntheticEvent< - $ReadOnly<{ - selection: Selection, - target: number, - }>, ->; -export type KeyPressEvent = SyntheticEvent< - $ReadOnly<{ - key: string, - target?: ?number, - eventCount?: ?number, - }>, ->; -export type EditingEvent = SyntheticEvent< - $ReadOnly<{ - eventCount: number, - text: string, - target: number, - }>, ->; +export type TextInputSelectionChangeEventData = $ReadOnly<{ + ...TargetEvent, + selection: Selection, +}>; +export type TextInputSelectionChangeEvent = + SyntheticEvent; +export type TextInputKeyPressEventData = $ReadOnly<{ + ...TargetEvent, + key: string, + target?: ?number, + eventCount: number, +}>; +export type TextInputKeyPressEvent = SyntheticEvent; +export type TextInputEndEditingEventData = $ReadOnly<{ + ...TargetEvent, + eventCount: number, + text: string, +}>; +export type TextInputEditingEvent = + SyntheticEvent; type DataDetectorTypesType = | \\"phoneNumber\\" | \\"link\\" @@ -2783,21 +2781,21 @@ export type Props = $ReadOnly<{ maxFontSizeMultiplier?: ?number, maxLength?: ?number, multiline?: ?boolean, - onBlur?: ?(e: BlurEvent) => mixed, - onChange?: ?(e: ChangeEvent) => mixed, - unstable_onChangeSync?: ?(e: ChangeEvent) => mixed, + onBlur?: ?(e: TextInputBlurEvent) => mixed, + onChange?: ?(e: TextInputChangeEvent) => mixed, + unstable_onChangeSync?: ?(e: TextInputChangeEvent) => mixed, onChangeText?: ?(text: string) => mixed, unstable_onChangeTextSync?: ?(text: string) => mixed, - onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed, - onEndEditing?: ?(e: EditingEvent) => mixed, - onFocus?: ?(e: FocusEvent) => mixed, - onKeyPress?: ?(e: KeyPressEvent) => mixed, - unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed, + onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed, + onEndEditing?: ?(e: TextInputEditingEvent) => mixed, + onFocus?: ?(e: TextInputFocusEvent) => mixed, + onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed, + unstable_onKeyPressSync?: ?(e: TextInputKeyPressEvent) => mixed, onPress?: ?(event: PressEvent) => mixed, onPressIn?: ?(event: PressEvent) => mixed, onPressOut?: ?(event: PressEvent) => mixed, - onSelectionChange?: ?(e: SelectionChangeEvent) => mixed, - onSubmitEditing?: ?(e: EditingEvent) => mixed, + onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => mixed, + onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed, onScroll?: ?(e: ScrollEvent) => mixed, placeholder?: ?Stringish, placeholderTextColor?: ?ColorValue, @@ -2847,13 +2845,12 @@ type TextInputInstance = HostInstance & { +getNativeRef: () => ?HostInstance, +setSelection: (start: number, end: number) => void, }; -export type ChangeEvent = SyntheticEvent< - $ReadOnly<{ - eventCount: number, - target: number, - text: string, - }>, ->; +export type TextInputChangeEventData = $ReadOnly<{ + eventCount: number, + target: number, + text: string, +}>; +export type TextInputChangeEvent = SyntheticEvent; export type TextInputEvent = SyntheticEvent< $ReadOnly<{ eventCount: number, @@ -2866,46 +2863,45 @@ export type TextInputEvent = SyntheticEvent< text: string, }>, >; -export type ContentSizeChangeEvent = SyntheticEvent< - $ReadOnly<{ - target: number, - contentSize: $ReadOnly<{ - width: number, - height: number, - }>, - }>, ->; -type TargetEvent = SyntheticEvent< - $ReadOnly<{ - target: number, +export type TextInputContentSizeChangeEventData = $ReadOnly<{ + target: number, + contentSize: $ReadOnly<{ + width: number, + height: number, }>, ->; -export type BlurEvent = TargetEvent; -export type FocusEvent = TargetEvent; +}>; +export type TextInputContentSizeChangeEvent = + SyntheticEvent; +export type TargetEvent = $ReadOnly<{ + target: number, +}>; +export type TextInputFocusEventData = TargetEvent; +export type TextInputBlurEvent = SyntheticEvent; +export type TextInputFocusEvent = SyntheticEvent; type Selection = $ReadOnly<{ start: number, end: number, }>; -export type SelectionChangeEvent = SyntheticEvent< - $ReadOnly<{ - selection: Selection, - target: number, - }>, ->; -export type KeyPressEvent = SyntheticEvent< - $ReadOnly<{ - key: string, - target?: ?number, - eventCount?: ?number, - }>, ->; -export type EditingEvent = SyntheticEvent< - $ReadOnly<{ - eventCount: number, - text: string, - target: number, - }>, ->; +export type TextInputSelectionChangeEventData = $ReadOnly<{ + ...TargetEvent, + selection: Selection, +}>; +export type TextInputSelectionChangeEvent = + SyntheticEvent; +type TextInputKeyPressEventData = $ReadOnly<{ + ...TargetEvent, + key: string, + target?: ?number, + eventCount?: ?number, +}>; +export type TextInputKeyPressEvent = SyntheticEvent; +export type TextInputEndEditingEventData = $ReadOnly<{ + ...TargetEvent, + eventCount: number, + text: string, +}>; +export type TextInputEditingEvent = + SyntheticEvent; type DataDetectorTypesType = | \\"phoneNumber\\" | \\"link\\" @@ -3136,18 +3132,18 @@ export type Props = $ReadOnly<{ maxFontSizeMultiplier?: ?number, maxLength?: ?number, multiline?: ?boolean, - onBlur?: ?(e: BlurEvent) => mixed, - onChange?: ?(e: ChangeEvent) => mixed, + onBlur?: ?(e: TextInputBlurEvent) => mixed, + onChange?: ?(e: TextInputChangeEvent) => mixed, onChangeText?: ?(text: string) => mixed, - onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed, - onEndEditing?: ?(e: EditingEvent) => mixed, - onFocus?: ?(e: FocusEvent) => mixed, - onKeyPress?: ?(e: KeyPressEvent) => mixed, + onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed, + onEndEditing?: ?(e: TextInputEditingEvent) => mixed, + onFocus?: ?(e: TextInputFocusEvent) => mixed, + onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed, onPress?: ?(event: PressEvent) => mixed, onPressIn?: ?(event: PressEvent) => mixed, onPressOut?: ?(event: PressEvent) => mixed, - onSelectionChange?: ?(e: SelectionChangeEvent) => mixed, - onSubmitEditing?: ?(e: EditingEvent) => mixed, + onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => mixed, + onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed, onScroll?: ?(e: ScrollEvent) => mixed, placeholder?: ?Stringish, placeholderTextColor?: ?ColorValue, @@ -7964,11 +7960,13 @@ export type ScrollEvent = SyntheticEvent< export type BlurEvent = SyntheticEvent< $ReadOnly<{ target: number, + ... }>, >; export type FocusEvent = SyntheticEvent< $ReadOnly<{ target: number, + ... }>, >; export type MouseEvent = SyntheticEvent<