diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx index 50a1c9024293..cb158150fc88 100644 --- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx +++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx @@ -1,5 +1,5 @@ import React, {memo, useEffect, useRef} from 'react'; -import type {LayoutEvent} from 'react-native'; +import type {LayoutChangeEvent} from 'react-native'; import GenericTooltip from '@components/Tooltip/GenericTooltip'; import type TooltipProps from '@components/Tooltip/types'; import getBounds from './getBounds'; @@ -44,7 +44,7 @@ function BaseEducationalTooltip({children, ...props}: TooltipProps) { // eslint-disable-next-line react-compiler/react-compiler hideTooltipRef.current = hideTooltip; return React.cloneElement(children as React.ReactElement, { - onLayout: (e: LayoutEvent) => { + onLayout: (e: LayoutChangeEvent) => { updateTargetBounds(getBounds(e)); showTooltip(); }, diff --git a/src/components/Tooltip/EducationalTooltip/getBounds/index.native.ts b/src/components/Tooltip/EducationalTooltip/getBounds/index.native.ts index e0f06785d338..44e34ba5ff21 100644 --- a/src/components/Tooltip/EducationalTooltip/getBounds/index.native.ts +++ b/src/components/Tooltip/EducationalTooltip/getBounds/index.native.ts @@ -1,6 +1,6 @@ -import type {LayoutEvent} from 'react-native'; +import type {LayoutChangeEvent} from 'react-native'; import type GetBounds from './types'; -const getBounds: GetBounds = (layoutEvent: LayoutEvent) => layoutEvent.nativeEvent.layout; +const getBounds: GetBounds = (event: LayoutChangeEvent) => event.nativeEvent.layout; export default getBounds; diff --git a/src/components/Tooltip/EducationalTooltip/getBounds/index.ts b/src/components/Tooltip/EducationalTooltip/getBounds/index.ts index be728b519c51..d94949277740 100644 --- a/src/components/Tooltip/EducationalTooltip/getBounds/index.ts +++ b/src/components/Tooltip/EducationalTooltip/getBounds/index.ts @@ -1,6 +1,6 @@ -import type {LayoutEvent} from 'react-native'; +import type {LayoutChangeEvent} from 'react-native'; import type GetBounds from './types'; -const getBounds: GetBounds = (layoutEvent: LayoutEvent) => (layoutEvent.nativeEvent.target as HTMLElement).getBoundingClientRect(); +const getBounds: GetBounds = (event: LayoutChangeEvent) => (event.nativeEvent.target as HTMLElement).getBoundingClientRect(); export default getBounds; diff --git a/src/components/Tooltip/EducationalTooltip/getBounds/types.ts b/src/components/Tooltip/EducationalTooltip/getBounds/types.ts index 5edf6f60e0c6..081962166ff1 100644 --- a/src/components/Tooltip/EducationalTooltip/getBounds/types.ts +++ b/src/components/Tooltip/EducationalTooltip/getBounds/types.ts @@ -1,5 +1,5 @@ -import type {LayoutEvent, LayoutRectangle} from 'react-native'; +import type {LayoutChangeEvent, LayoutRectangle} from 'react-native'; -type GetBounds = (layoutEvent: LayoutEvent) => LayoutRectangle; +type GetBounds = (event: LayoutChangeEvent) => LayoutRectangle; export default GetBounds; diff --git a/src/types/modules/react-native.d.ts b/src/types/modules/react-native.d.ts index 2efab8e90cfc..87628fded0cc 100644 --- a/src/types/modules/react-native.d.ts +++ b/src/types/modules/react-native.d.ts @@ -4,8 +4,9 @@ /* eslint-disable @typescript-eslint/consistent-type-definitions */ // eslint-disable-next-line no-restricted-imports -import type {CSSProperties, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler} from 'react'; +import type {CSSProperties, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, TouchEventHandler, UIEventHandler, WheelEventHandler} from 'react'; import 'react-native'; +import type {GestureResponderEvent, LayoutRectangle, NativeSyntheticEvent, TargetedEvent} from 'react-native'; import type {BootSplashModule} from '@libs/BootSplash/types'; import type {EnvironmentCheckerModule} from '@libs/Environment/betaChecker/types'; import type StartupTimer from '@libs/StartupTimer/types'; @@ -21,7 +22,7 @@ type RNTextInputResetModule = { }; declare module 'react-native' { - // <------ REACT NATIVE WEB (0.19.0) ------> + // <------ REACT NATIVE WEB (0.19.12) ------> // Extracted from react-native-web, packages/react-native-web/src/exports/View/types.js type idRef = string; type idRefList = idRef | idRef[]; @@ -52,7 +53,7 @@ declare module 'react-native' { 'aria-label'?: string; 'aria-labelledby'?: idRef; 'aria-level'?: number; - 'aria-live'?: 'assertive' | 'none' | 'polite'; + 'aria-live'?: 'assertive' | 'off' | 'polite'; 'aria-modal'?: boolean; 'aria-multiline'?: boolean; 'aria-multiselectable'?: boolean; @@ -74,7 +75,6 @@ declare module 'react-native' { 'aria-valuemin'?: number; 'aria-valuenow'?: number; 'aria-valuetext'?: string; - role?: string; // @deprecated accessibilityActiveDescendant?: idRef; @@ -111,7 +111,6 @@ declare module 'react-native' { accessibilityPressed?: boolean | 'mixed'; accessibilityReadOnly?: boolean; accessibilityRequired?: boolean; - accessibilityRole?: string; accessibilityRoleDescription?: string; accessibilityRowCount?: number; accessibilityRowIndex?: number; @@ -128,9 +127,9 @@ declare module 'react-native' { // https://necolas.github.io/react-native-web/docs/interactions/#pointerevent-props-api // Extracted properties from react-native-web, packages/react-native-web/src/exports/View/types.js and packages/react-native-web/src/modules/forwardedProps/index.js // Extracted types from @types/react, index.d.ts - interface PointerProps { - onAuxClick?: MouseEventHandler; + interface ClickProps { onClick?: MouseEventHandler; + onAuxClick?: MouseEventHandler; onContextMenu?: MouseEventHandler; onGotPointerCapture?: PointerEventHandler; onLostPointerCapture?: PointerEventHandler; @@ -142,6 +141,31 @@ declare module 'react-native' { onPointerOut?: PointerEventHandler; onPointerOver?: PointerEventHandler; onPointerUp?: PointerEventHandler; + onScroll?: UIEventHandler; + onWheel?: WheelEventHandler; + } + + // https://necolas.github.io/react-native-web/docs/interactions/#focusevent-props-api + // Extracted properties from react-native-web, packages/react-native-web/src/exports/View/types.js and packages/react-native-web/src/modules/forwardedProps/index.js + // Extracted types from @types/react, index.d.ts + interface FocusProps { + onBlur?: FocusEventHandler; + onFocus?: FocusEventHandler; + } + + // https://necolas.github.io/react-native-web/docs/interactions/#keyboardevent-props-api + // Extracted properties from react-native-web, packages/react-native-web/src/exports/View/types.js and packages/react-native-web/src/modules/forwardedProps/index.js + // Extracted types from @types/react, index.d.ts + interface KeyboardProps { + onKeyDown?: KeyboardEventHandler; + onKeyDownCapture?: KeyboardEventHandler; + onKeyUp?: KeyboardEventHandler; + onKeyUpCapture?: KeyboardEventHandler; + } + + // Extracted properties from react-native-web, packages/react-native-web/src/exports/View/types.js and packages/react-native-web/src/modules/forwardedProps/index.js + // Extracted types from @types/react, index.d.ts + interface MouseProps { onMouseDown?: MouseEventHandler; onMouseEnter?: MouseEventHandler; onMouseLeave?: MouseEventHandler; @@ -149,8 +173,19 @@ declare module 'react-native' { onMouseOver?: MouseEventHandler; onMouseOut?: MouseEventHandler; onMouseUp?: MouseEventHandler; - onScroll?: UIEventHandler; - onWheel?: WheelEventHandler; + } + + // Extracted properties from react-native-web, packages/react-native-web/src/exports/View/types.js and packages/react-native-web/src/modules/forwardedProps/index.js + // Extracted types from @types/react, index.d.ts + interface TouchProps { + onTouchCancel?: TouchEventHandler; + onTouchCancelCapture?: TouchEventHandler; + onTouchEnd?: TouchEventHandler; + onTouchEndCapture?: TouchEventHandler; + onTouchMove?: TouchEventHandler; + onTouchMoveCapture?: TouchEventHandler; + onTouchStart?: TouchEventHandler; + onTouchStartCapture?: TouchEventHandler; } // https://necolas.github.io/react-native-web/docs/interactions/#responderevent-props-api @@ -204,14 +239,6 @@ declare module 'react-native' { touchHistory: TouchHistory; }; - interface TextInputFocusEventData extends TargetedEvent { - text: string; - eventCount: number; - relatedTarget?: { - id?: string; - }; - } - // https://necolas.github.io/react-native-web/docs/interactions/#responderevent-props-api // Extracted from react-native-web, packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js interface ResponderProps { @@ -242,47 +269,16 @@ declare module 'react-native' { onSelectionChangeShouldSetResponderCapture?: (e: ResponderEvent) => boolean; } - // https://necolas.github.io/react-native-web/docs/interactions/#focusevent-props-api - // Extracted properties from react-native-web, packages/react-native-web/src/exports/View/types.js and packages/react-native-web/src/modules/forwardedProps/index.js - // Extracted types from @types/react, index.d.ts - interface FocusProps { - onBlur?: FocusEventHandler; - onFocus?: FocusEventHandler; - } + // @ts-expect-error We override this type in order to provide "target" to onLayout event. + type LayoutChangeEvent = NativeSyntheticEvent<{layout: LayoutRectangle; target?: unknown}>; - // https://necolas.github.io/react-native-web/docs/interactions/#keyboardevent-props-api - // Extracted properties from react-native-web, packages/react-native-web/src/exports/View/types.js and packages/react-native-web/src/modules/forwardedProps/index.js - // Extracted types from @types/react, index.d.ts - interface KeyboardProps { - onKeyDown?: KeyboardEventHandler; - onKeyDownCapture?: KeyboardEventHandler; - onKeyUp?: KeyboardEventHandler; - onKeyUpCapture?: KeyboardEventHandler; - } - - // Extracted from react-native-web, packages/react-native-web/src/types/index.js - type LayoutValue = { - x: number; - y: number; - width: number; - height: number; - }; - type LayoutEvent = { - nativeEvent: { - layout: LayoutValue; - target: unknown; // changed from "any" to "unknown" - }; - timeStamp: number; - }; - interface LayoutProps { - onLayout?: (e: LayoutEvent) => void; - } + interface EventProps extends ClickProps, FocusProps, KeyboardProps, MouseProps, TouchProps, ResponderProps {} /** * Shared props * Extracted from react-native-web, packages/react-native-web/src/exports/View/types.js */ - interface WebSharedProps extends AccessibilityProps, PointerProps, ResponderProps, FocusProps, KeyboardProps, LayoutProps { + interface WebSharedProps extends AccessibilityProps, EventProps { dataSet?: Record; href?: string; hrefAttrs?: { @@ -317,11 +313,10 @@ declare module 'react-native' { * Extracted from react-native-web, packages/react-native-web/src/exports/TextInput/types.js */ interface WebTextInputProps extends WebSharedProps { + dir?: 'auto' | 'ltr' | 'rtl'; disabled?: boolean; } - interface TextInputProps extends WebTextInputProps { - isFullComposerAvailable?: boolean; - } + interface TextInputProps extends WebTextInputProps {} /** * Image @@ -350,28 +345,19 @@ declare module 'react-native' { readonly hovered: boolean; readonly pressed: boolean; } - interface PressableStateCallbackType extends WebPressableStateCallbackType { - readonly isScreenReaderActive: boolean; - readonly isDisabled: boolean; - } + interface PressableStateCallbackType extends WebPressableStateCallbackType {} // Extracted from react-native-web, packages/react-native-web/src/exports/Pressable/index.js interface WebPressableProps extends WebSharedProps { + /** Duration (in milliseconds) from `onPressStart` is called after pointerdown. */ delayPressIn?: number; + /** Duration (in milliseconds) from `onPressEnd` is called after pointerup. */ delayPressOut?: number; - onPressMove?: null | ((event: GestureResponderEvent) => void); - onPressEnd?: null | ((event: GestureResponderEvent) => void); + /** Called when a touch is moving, after `onPressIn`. */ + onPressMove?: (event: GestureResponderEvent) => void; } interface PressableProps extends WebPressableProps {} - interface AppStateStatic { - emitCurrentTestState: (status: string) => void; - } - - interface LinkingStatic { - setInitialURL: (url: string) => void; - } - /** * Styles */ @@ -388,7 +374,28 @@ declare module 'react-native' { interface ViewStyle extends WebStyle {} interface TextStyle extends WebStyle {} interface ImageStyle extends WebStyle {} - // <------ REACT NATIVE WEB (0.19.0) ------> + // <------ REACT NATIVE WEB (0.19.12) ------> + + interface TextInputFocusEventData extends TargetedEvent { + text: string; + eventCount: number; + relatedTarget?: { + id?: string; + }; + } + + interface PressableStateCallbackType extends WebPressableStateCallbackType { + readonly isScreenReaderActive: boolean; + readonly isDisabled: boolean; + } + + interface AppStateStatic { + emitCurrentTestState: (status: string) => void; + } + + interface LinkingStatic { + setInitialURL: (url: string) => void; + } interface NativeModulesStatic { BootSplash: BootSplashModule;