From 235029f2b39f256a50dbe3abf572e02c3f1cf69a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 13 Aug 2025 12:37:36 +0200 Subject: [PATCH 01/28] Removed forwardRef from FloatingActionButtonAndPopover --- .../home/sidebar/FloatingActionButtonAndPopover.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx index ea2626d50b6c..836ed6e3fb7e 100644 --- a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx @@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native'; import {Str} from 'expensify-common'; import type {ImageContentFit} from 'expo-image'; import type {ForwardedRef} from 'react'; -import React, {forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import React, {useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import ConfirmModal from '@components/ConfirmModal'; @@ -68,6 +68,9 @@ type FloatingActionButtonAndPopoverProps = { /* If the tooltip is allowed to be shown */ isTooltipAllowed: boolean; + + /** Reference to the outer element */ + ref?: ForwardedRef }; type FloatingActionButtonAndPopoverRef = { @@ -90,7 +93,7 @@ const policySelector = (policy: OnyxEntry): PolicySelector => * Responsible for rendering the {@link PopoverMenu}, and the accompanying * FAB that can open or close the menu. */ -function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isTooltipAllowed}: FloatingActionButtonAndPopoverProps, ref: ForwardedRef) { +function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isTooltipAllowed, ref}: FloatingActionButtonAndPopoverProps) { const styles = useThemeStyles(); const theme = useTheme(); const {translate} = useLocalize(); @@ -605,6 +608,6 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT FloatingActionButtonAndPopover.displayName = 'FloatingActionButtonAndPopover'; -export default forwardRef(FloatingActionButtonAndPopover); +export default FloatingActionButtonAndPopover; export type {PolicySelector}; From cd30e316fefa9b0528ed9b8ffeb3901d4e5ea9df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 13 Aug 2025 12:39:30 +0200 Subject: [PATCH 02/28] Removed forwardRef from FloatingActionButton --- src/components/FloatingActionButton.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx index 8f5fba3f4c57..ca5d1a645bf8 100644 --- a/src/components/FloatingActionButton.tsx +++ b/src/components/FloatingActionButton.tsx @@ -1,5 +1,5 @@ import type {ForwardedRef} from 'react'; -import React, {forwardRef, useEffect, useRef} from 'react'; +import React, {useEffect, useRef} from 'react'; // eslint-disable-next-line no-restricted-imports import type {GestureResponderEvent, Role, Text, View} from 'react-native'; import Animated, {Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; @@ -42,9 +42,12 @@ type FloatingActionButtonProps = { /* If the tooltip is allowed to be shown */ isTooltipAllowed: boolean; + + /** Reference to the outer element */ + ref?: ForwardedRef }; -function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabel, role, isTooltipAllowed}: FloatingActionButtonProps, ref: ForwardedRef) { +function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabel, role, isTooltipAllowed, ref}: FloatingActionButtonProps) { const {success, buttonDefaultBG, textLight} = useTheme(); const styles = useThemeStyles(); const borderRadius = styles.floatingActionButton.borderRadius; @@ -157,4 +160,4 @@ function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabe FloatingActionButton.displayName = 'FloatingActionButton'; -export default forwardRef(FloatingActionButton); +export default FloatingActionButton; From c65c25e7002c154e3de92e5bada1e0203662325e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Thu, 7 Aug 2025 15:57:24 +0200 Subject: [PATCH 03/28] Removed forwardRef from MenuItem.tsx and MenuItemWithTopDescription.tsx --- src/components/MenuItem.tsx | 11 +++++------ src/components/MenuItemWithTopDescription.tsx | 9 ++++++--- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 6bf8f20c18f5..a22df50af2d7 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -1,6 +1,6 @@ import type {ImageContentFit} from 'expo-image'; import type {ReactElement, ReactNode, Ref} from 'react'; -import React, {forwardRef, useContext, useMemo, useRef} from 'react'; +import React, {useContext, useMemo, useRef} from 'react'; import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native'; import {ActivityIndicator, View} from 'react-native'; import type {ValueOf} from 'type-fest'; @@ -63,9 +63,8 @@ type NoIcon = { }; type MenuItemBaseProps = { - /* View ref */ - /* eslint-disable-next-line react/no-unused-prop-types */ - ref?: Ref; + /** Reference to the outer element */ + ref?: PressableRef | Ref; /** Function to fire when component is pressed */ onPress?: (event: GestureResponderEvent | KeyboardEvent) => void | Promise; @@ -502,8 +501,8 @@ function MenuItem( copyValue, plaidUrl, hasSubMenuItems = false, + ref, }: MenuItemProps, - ref: PressableRef, ) { const theme = useTheme(); const styles = useThemeStyles(); @@ -1006,4 +1005,4 @@ function MenuItem( MenuItem.displayName = 'MenuItem'; export type {MenuItemBaseProps, MenuItemProps}; -export default forwardRef(MenuItem); +export default MenuItem; diff --git a/src/components/MenuItemWithTopDescription.tsx b/src/components/MenuItemWithTopDescription.tsx index 96efa3399efa..c3fe3b240caf 100644 --- a/src/components/MenuItemWithTopDescription.tsx +++ b/src/components/MenuItemWithTopDescription.tsx @@ -1,5 +1,5 @@ import type {ForwardedRef} from 'react'; -import React, {forwardRef} from 'react'; +import React from 'react'; import type {View} from 'react-native'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useTheme from '@hooks/useTheme'; @@ -9,9 +9,12 @@ import type {MenuItemProps} from './MenuItem'; type MenuItemWithTopDescriptionProps = MenuItemProps & { /** Should the menu item be highlighted? */ highlighted?: boolean; + + /** Reference to the outer element */ + ref?: ForwardedRef; }; -function MenuItemWithTopDescription({highlighted, outerWrapperStyle, ...props}: MenuItemWithTopDescriptionProps, ref: ForwardedRef) { +function MenuItemWithTopDescription({highlighted, outerWrapperStyle, ref, ...props}: MenuItemWithTopDescriptionProps) { const theme = useTheme(); const highlightedOuterWrapperStyle = useAnimatedHighlightStyle({ shouldHighlight: highlighted ?? false, @@ -33,4 +36,4 @@ function MenuItemWithTopDescription({highlighted, outerWrapperStyle, ...props}: MenuItemWithTopDescription.displayName = 'MenuItemWithTopDescription'; -export default forwardRef(MenuItemWithTopDescription); +export default MenuItemWithTopDescription; From a6d4d4a8d66718e8ac7a3bc9eaefbefea8156f02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 13 Aug 2025 13:26:17 +0200 Subject: [PATCH 04/28] Removed ref prop from MenuItemWithTopDescription.tsx --- src/components/MenuItemWithTopDescription.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/MenuItemWithTopDescription.tsx b/src/components/MenuItemWithTopDescription.tsx index c3fe3b240caf..afc78d27dcfd 100644 --- a/src/components/MenuItemWithTopDescription.tsx +++ b/src/components/MenuItemWithTopDescription.tsx @@ -1,6 +1,4 @@ -import type {ForwardedRef} from 'react'; import React from 'react'; -import type {View} from 'react-native'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useTheme from '@hooks/useTheme'; import MenuItem from './MenuItem'; @@ -9,9 +7,6 @@ import type {MenuItemProps} from './MenuItem'; type MenuItemWithTopDescriptionProps = MenuItemProps & { /** Should the menu item be highlighted? */ highlighted?: boolean; - - /** Reference to the outer element */ - ref?: ForwardedRef; }; function MenuItemWithTopDescription({highlighted, outerWrapperStyle, ref, ...props}: MenuItemWithTopDescriptionProps) { From e4ba91ed97f908c03e1d5a5a2a10cd862adc79c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 13 Aug 2025 14:46:28 +0200 Subject: [PATCH 05/28] Removed forwardRef from DraggableList component --- src/components/DraggableList/index.native.tsx | 4 ++-- src/components/DraggableList/index.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/DraggableList/index.native.tsx b/src/components/DraggableList/index.native.tsx index a943fd45dffc..c9165a5b09c7 100644 --- a/src/components/DraggableList/index.native.tsx +++ b/src/components/DraggableList/index.native.tsx @@ -4,7 +4,7 @@ import type {FlatList} from 'react-native-gesture-handler'; import useThemeStyles from '@hooks/useThemeStyles'; import type DraggableListProps from './types'; -function DraggableList({...viewProps}: DraggableListProps, ref: React.ForwardedRef>) { +function DraggableList({ref, ...viewProps}: DraggableListProps & {ref?: React.ForwardedRef>}) { const styles = useThemeStyles(); return ( ({...viewProps}: DraggableListProps, ref: React.Forw DraggableList.displayName = 'DraggableList'; -export default React.forwardRef(DraggableList); +export default DraggableList; diff --git a/src/components/DraggableList/index.tsx b/src/components/DraggableList/index.tsx index 36860887bc1e..e7fa265df8fd 100644 --- a/src/components/DraggableList/index.tsx +++ b/src/components/DraggableList/index.tsx @@ -24,8 +24,8 @@ function DraggableList( onDragEnd: onDragEndCallback, // eslint-disable-next-line @typescript-eslint/naming-convention ListFooterComponent, - }: DraggableListProps, - ref: React.ForwardedRef, + ref, + }: DraggableListProps & {ref?: React.ForwardedRef}, ) { const styles = useThemeStyles(); @@ -103,4 +103,4 @@ function DraggableList( DraggableList.displayName = 'DraggableList'; -export default React.forwardRef(DraggableList); +export default DraggableList; From ecc29aa2678c12a9209bd6dff545f1da828af362 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 13 Aug 2025 15:14:35 +0200 Subject: [PATCH 06/28] Removed forwardRef from PressableWithSecondaryInteraction component --- .../PressableWithSecondaryInteraction/index.native.tsx | 7 +++---- src/components/PressableWithSecondaryInteraction/index.tsx | 7 +++---- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.native.tsx b/src/components/PressableWithSecondaryInteraction/index.native.tsx index d448e6d6ecc3..3802d478facd 100644 --- a/src/components/PressableWithSecondaryInteraction/index.native.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx @@ -1,7 +1,6 @@ import type {ReactNode} from 'react'; -import React, {forwardRef} from 'react'; +import React from 'react'; import type {GestureResponderEvent, TextProps} from 'react-native'; -import type {PressableRef} from '@components/Pressable/GenericPressable/types'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; import type PressableWithSecondaryInteractionProps from './types'; @@ -18,9 +17,9 @@ function PressableWithSecondaryInteraction( preventDefaultContextMenu, withoutFocusOnSecondaryInteraction, enableLongPressWithHover, + ref, ...rest }: PressableWithSecondaryInteractionProps, - ref: PressableRef, ) { const executeSecondaryInteraction = (event: GestureResponderEvent) => { event.preventDefault(); @@ -59,4 +58,4 @@ function PressableWithSecondaryInteraction( PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction'; -export default forwardRef(PressableWithSecondaryInteraction); +export default PressableWithSecondaryInteraction; diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index 810aa45ebf07..3812c5b0cf10 100644 --- a/src/components/PressableWithSecondaryInteraction/index.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.tsx @@ -1,6 +1,5 @@ -import React, {forwardRef, useEffect, useRef} from 'react'; +import React, {useEffect, useRef} from 'react'; import type {GestureResponderEvent} from 'react-native'; -import type {PressableRef} from '@components/Pressable/GenericPressable/types'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -21,9 +20,9 @@ function PressableWithSecondaryInteraction( onSecondaryInteraction, activeOpacity = 1, opacityAnimationDuration, + ref, ...rest }: PressableWithSecondaryInteractionProps, - ref: PressableRef, ) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -113,4 +112,4 @@ function PressableWithSecondaryInteraction( PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction'; -export default forwardRef(PressableWithSecondaryInteraction); +export default PressableWithSecondaryInteraction; From 89629c7c59fde3c6aaf446c7ca2fc696d30cc15a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 13 Aug 2025 15:20:11 +0200 Subject: [PATCH 07/28] Removed forwardRef from FocusTrapContainterElement/index.web.tsx --- .../FocusTrapContainerElementProps.ts | 6 +++++- .../FocusTrap/FocusTrapContainerElement/index.web.tsx | 5 ++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/FocusTrap/FocusTrapContainerElement/FocusTrapContainerElementProps.ts b/src/components/FocusTrap/FocusTrapContainerElement/FocusTrapContainerElementProps.ts index 004e8bd6dbc4..a64a83d2d1c8 100644 --- a/src/components/FocusTrap/FocusTrapContainerElement/FocusTrapContainerElementProps.ts +++ b/src/components/FocusTrap/FocusTrapContainerElement/FocusTrapContainerElementProps.ts @@ -1,8 +1,12 @@ -import type {ViewProps} from 'react-native'; +import type { ForwardedRef } from 'react'; +import type {View, ViewProps} from 'react-native'; type FocusTrapContainerElementProps = ViewProps & { /** Callback to register focus trap container element */ onContainerElementChanged?: (element: HTMLElement | null) => void; + + /** Reference to the outer element */ + ref?: ForwardedRef; }; export default FocusTrapContainerElementProps; diff --git a/src/components/FocusTrap/FocusTrapContainerElement/index.web.tsx b/src/components/FocusTrap/FocusTrapContainerElement/index.web.tsx index 15307ee23604..4f11817240d8 100644 --- a/src/components/FocusTrap/FocusTrapContainerElement/index.web.tsx +++ b/src/components/FocusTrap/FocusTrapContainerElement/index.web.tsx @@ -1,12 +1,11 @@ /** * A wrapper View component allowing us to register a container element for a FocusTrap */ -import type {ForwardedRef} from 'react'; import React from 'react'; import {View} from 'react-native'; import type FocusTrapContainerElementProps from './FocusTrapContainerElementProps'; -function FocusTrapContainerElement({onContainerElementChanged, ...props}: FocusTrapContainerElementProps, ref?: ForwardedRef) { +function FocusTrapContainerElement({onContainerElementChanged, ref, ...props}: FocusTrapContainerElementProps) { return ( { @@ -26,4 +25,4 @@ function FocusTrapContainerElement({onContainerElementChanged, ...props}: FocusT FocusTrapContainerElement.displayName = 'FocusTrapContainerElement'; -export default React.forwardRef(FocusTrapContainerElement); +export default FocusTrapContainerElement; From 37f1faa114c5ae29a2067aa930dc1fad09f68df8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 13 Aug 2025 18:16:07 +0200 Subject: [PATCH 08/28] Removed forwardRef from ScreenWrapper component --- .../ScreenWrapper/ScreenWrapperContainer.tsx | 10 +++++++--- src/components/ScreenWrapper/index.tsx | 10 +++++----- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/ScreenWrapper/ScreenWrapperContainer.tsx b/src/components/ScreenWrapper/ScreenWrapperContainer.tsx index f2da80dc9033..a2c0b3a3a23e 100644 --- a/src/components/ScreenWrapper/ScreenWrapperContainer.tsx +++ b/src/components/ScreenWrapper/ScreenWrapperContainer.tsx @@ -1,5 +1,5 @@ import type {ForwardedRef, ReactNode} from 'react'; -import React, {forwardRef, useContext, useEffect, useMemo, useRef} from 'react'; +import React, {useContext, useEffect, useMemo, useRef} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {Keyboard, PanResponder, View} from 'react-native'; import {PickerAvoidingView} from 'react-native-picker-select'; @@ -81,6 +81,9 @@ type ScreenWrapperContainerProps = React.PropsWithChildren<{ * Whether the screen is focused. (Only passed if wrapped in ScreenWrapper) */ isFocused?: boolean; + + /** Reference to the outer element */ + ref?: ForwardedRef; }>; function ScreenWrapperContainer( @@ -104,8 +107,8 @@ function ScreenWrapperContainer( includePaddingTop = true, includeSafeAreaPaddingBottom = false, isFocused = true, + ref, }: ScreenWrapperContainerProps, - ref: ForwardedRef, ) { const {windowHeight} = useWindowDimensions(shouldUseCachedViewportHeight); const {initialHeight} = useInitialDimensions(); @@ -205,6 +208,7 @@ function ScreenWrapperContainer( testID={testID} > , ) { /** * We are only passing navigation as prop from @@ -266,5 +266,5 @@ function ScreenWrapper( } ScreenWrapper.displayName = 'ScreenWrapper'; -export default withNavigationFallback(forwardRef(ScreenWrapper)); +export default withNavigationFallback(ScreenWrapper); export type {ScreenWrapperProps, ScreenWrapperChildrenProps}; From ee1faaf1380db7c4d511dd5a90da8ff50fe36620 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Thu, 14 Aug 2025 11:26:36 +0200 Subject: [PATCH 09/28] Removed forwardRef from SelectionList component --- src/components/SelectionList/index.native.tsx | 9 ++++----- src/components/SelectionList/index.tsx | 9 ++++----- src/components/SelectionList/types.ts | 5 ++++- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/SelectionList/index.native.tsx b/src/components/SelectionList/index.native.tsx index 359044dcc6bf..b8d3f6283cb7 100644 --- a/src/components/SelectionList/index.native.tsx +++ b/src/components/SelectionList/index.native.tsx @@ -1,10 +1,9 @@ -import React, {forwardRef} from 'react'; -import type {ForwardedRef} from 'react'; +import React from 'react'; import {Keyboard} from 'react-native'; import BaseSelectionList from './BaseSelectionList'; -import type {ListItem, SelectionListHandle, SelectionListProps} from './types'; +import type {ListItem, SelectionListProps} from './types'; -function SelectionList({shouldHideKeyboardOnScroll = true, ...props}: SelectionListProps, ref: ForwardedRef) { +function SelectionList({shouldHideKeyboardOnScroll = true, ref, ...props}: SelectionListProps) { return ( ({shouldHideKeyboardOnScroll = tru SelectionList.displayName = 'SelectionList'; -export default forwardRef(SelectionList); +export default SelectionList; diff --git a/src/components/SelectionList/index.tsx b/src/components/SelectionList/index.tsx index c5f26d8c3b1d..177506612bb8 100644 --- a/src/components/SelectionList/index.tsx +++ b/src/components/SelectionList/index.tsx @@ -1,13 +1,12 @@ -import React, {forwardRef, useEffect, useState} from 'react'; -import type {ForwardedRef} from 'react'; +import React, {useEffect, useState} from 'react'; import {Keyboard} from 'react-native'; import {isMobileChrome} from '@libs/Browser'; import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import CONST from '@src/CONST'; import BaseSelectionList from './BaseSelectionList'; -import type {ListItem, SelectionListHandle, SelectionListProps} from './types'; +import type {ListItem, SelectionListProps} from './types'; -function SelectionList({onScroll, shouldHideKeyboardOnScroll = true, ...props}: SelectionListProps, ref: ForwardedRef) { +function SelectionList({onScroll, shouldHideKeyboardOnScroll = true, ref, ...props}: SelectionListProps) { const [isScreenTouched, setIsScreenTouched] = useState(false); const touchStart = () => setIsScreenTouched(true); @@ -81,4 +80,4 @@ function SelectionList({onScroll, shouldHideKeyboardOnSc SelectionList.displayName = 'SelectionList'; -export default forwardRef(SelectionList); +export default SelectionList; diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 0c8cc8429cb7..1823ab2a7c82 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,4 +1,4 @@ -import type {MutableRefObject, ReactElement, ReactNode} from 'react'; +import type {ForwardedRef, MutableRefObject, ReactElement, ReactNode} from 'react'; import type { GestureResponderEvent, InputModeOptions, @@ -864,6 +864,9 @@ type SelectionListProps = Partial & { /** Whether to hide the keyboard when scrolling a list */ shouldHideKeyboardOnScroll?: boolean; + + /** Reference to the outer element */ + ref?: ForwardedRef; } & TRightHandSideComponent; type SelectionListHandle = { From 684fbc20810317b259db64cf6ddff4b43bc9a984 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Thu, 14 Aug 2025 12:06:06 +0200 Subject: [PATCH 10/28] Removed forwardRef from Form/InputWrapper.tsx --- src/components/Form/InputWrapper.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Form/InputWrapper.tsx b/src/components/Form/InputWrapper.tsx index a01c1ca3c136..c93296c4e349 100644 --- a/src/components/Form/InputWrapper.tsx +++ b/src/components/Form/InputWrapper.tsx @@ -1,5 +1,5 @@ import type {ComponentPropsWithoutRef, ComponentType, ForwardedRef} from 'react'; -import React, {forwardRef, useContext} from 'react'; +import React, {useContext} from 'react'; import type {AnimatedTextInputRef} from '@components/RNTextInput'; import RoomNameInput from '@components/RoomNameInput'; import type RoomNameInputProps from '@components/RoomNameInput/types'; @@ -69,9 +69,12 @@ type InputWrapperProps }; -function InputWrapper(props: InputWrapperProps, ref: ForwardedRef) { +function InputWrapper({ref, ...props}: InputWrapperProps) { const {InputComponent, inputID, valueType = 'string', shouldSubmitForm: propShouldSubmitForm, ...rest} = props as InputComponentBaseProps; const {registerInput} = useContext(FormContext); @@ -91,4 +94,4 @@ function InputWrapper(p InputWrapper.displayName = 'InputWrapper'; -export default forwardRef(InputWrapper); +export default InputWrapper; From 5cc49fc5c60611d5172eb8e158ef62904946912b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Thu, 14 Aug 2025 12:11:48 +0200 Subject: [PATCH 11/28] Added ? to ref in Form/InputWrapper.tsx --- src/components/Form/InputWrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form/InputWrapper.tsx b/src/components/Form/InputWrapper.tsx index c93296c4e349..4e4e3c73d30f 100644 --- a/src/components/Form/InputWrapper.tsx +++ b/src/components/Form/InputWrapper.tsx @@ -71,7 +71,7 @@ type InputWrapperProps + ref?: ForwardedRef }; function InputWrapper({ref, ...props}: InputWrapperProps) { From a6054a1dc1e7f2fa2a6f236bb6ee8cb8037212df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Thu, 14 Aug 2025 12:34:49 +0200 Subject: [PATCH 12/28] Adjusted type of refs forwarded by other components to InputWrapper --- src/pages/tasks/TaskDescriptionPage.tsx | 2 +- src/pages/tasks/TaskTitlePage.tsx | 2 +- src/pages/workspace/WorkspaceInviteMessagePage.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/tasks/TaskDescriptionPage.tsx b/src/pages/tasks/TaskDescriptionPage.tsx index b8340a3ace8d..e513cf56ec31 100644 --- a/src/pages/tasks/TaskDescriptionPage.tsx +++ b/src/pages/tasks/TaskDescriptionPage.tsx @@ -122,7 +122,7 @@ function TaskDescriptionPage({report, currentUserPersonalDetails}: TaskDescripti label={translate('newTaskPage.descriptionOptional')} accessibilityLabel={translate('newTaskPage.descriptionOptional')} defaultValue={Parser.htmlToMarkdown(report?.description ?? '')} - ref={(element: AnimatedTextInputRef) => { + ref={(element: AnimatedTextInputRef | null) => { if (!element) { return; } diff --git a/src/pages/tasks/TaskTitlePage.tsx b/src/pages/tasks/TaskTitlePage.tsx index deb45f410d21..b12f17abf276 100644 --- a/src/pages/tasks/TaskTitlePage.tsx +++ b/src/pages/tasks/TaskTitlePage.tsx @@ -114,7 +114,7 @@ function TaskTitlePage({report, currentUserPersonalDetails}: TaskTitlePageProps) label={translate('task.title')} accessibilityLabel={translate('task.title')} defaultValue={Parser.htmlToMarkdown(report?.reportName ?? '', {})} - ref={(element: AnimatedTextInputRef) => { + ref={(element: AnimatedTextInputRef | null) => { if (!element) { return; } diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.tsx b/src/pages/workspace/WorkspaceInviteMessagePage.tsx index 83a144684149..541d0e117a37 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.tsx +++ b/src/pages/workspace/WorkspaceInviteMessagePage.tsx @@ -230,7 +230,7 @@ function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}: onChangeText={(text: string) => { setWelcomeNote(text); }} - ref={(element: AnimatedTextInputRef) => { + ref={(element: AnimatedTextInputRef | null) => { if (!element) { return; } From 6b982099135287e417b53a32977e849d2aba0c1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 11:59:31 +0200 Subject: [PATCH 13/28] Resolved deprecated errors from ESLINT --- src/components/Form/FormProvider.tsx | 2 +- src/components/PressableWithSecondaryInteraction/index.tsx | 6 +++--- src/pages/PrivateNotes/PrivateNotesEditPage.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 4eaf7d3a5348..07768e4d9011 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -314,7 +314,7 @@ function FormProvider( const registerInput = useCallback( (inputID, shouldSubmitForm, inputProps) => { - const newRef: MutableRefObject = inputRefs.current[inputID] ?? inputProps.ref ?? createRef(); + const newRef: RefObject = inputRefs.current[inputID] ?? inputProps.ref ?? createRef(); if (inputRefs.current[inputID] !== newRef) { inputRefs.current[inputID] = newRef; } diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index 3812c5b0cf10..6e1678ffe916 100644 --- a/src/components/PressableWithSecondaryInteraction/index.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.tsx @@ -3,7 +3,7 @@ import type {GestureResponderEvent} from 'react-native'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import {hasHoverSupport, canUseTouchScreen} from '@libs/DeviceCapabilities'; import type PressableWithSecondaryInteractionProps from './types'; /** This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. */ @@ -29,7 +29,7 @@ function PressableWithSecondaryInteraction( const pressableRef = useRef(null); const executeSecondaryInteraction = (event: GestureResponderEvent) => { - if (DeviceCapabilities.hasHoverSupport() && !enableLongPressWithHover) { + if (hasHoverSupport() && !enableLongPressWithHover) { return; } if (withoutFocusOnSecondaryInteraction && pressableRef.current) { @@ -97,7 +97,7 @@ function PressableWithSecondaryInteraction( // ESLint is disabled here to propagate all the props, enhancing PressableWithSecondaryInteraction's versatility across different use cases. // eslint-disable-next-line react/jsx-props-no-spreading {...rest} - wrapperStyle={[StyleUtils.combineStyles(DeviceCapabilities.canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [], inlineStyle), wrapperStyle]} + wrapperStyle={[StyleUtils.combineStyles(canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [], inlineStyle), wrapperStyle]} onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined} pressDimmingValue={activeOpacity} dimAnimationDuration={opacityAnimationDuration} diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx index 01d6223326bf..5c6e68b9fa8b 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx @@ -43,7 +43,7 @@ function PrivateNotesEditPage({route, report, accountID}: PrivateNotesEditPagePr const backTo = route.params.backTo; const styles = useThemeStyles(); const {translate} = useLocalize(); - const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false}); // We need to edit the note in markdown format, but display it in HTML format const [privateNote, setPrivateNote] = useState( From 449d55a5a6dc9963617ab948c50895ef63d1fa71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 13:12:00 +0200 Subject: [PATCH 14/28] Prettier run --- src/components/DraggableList/index.tsx | 20 +- src/components/FloatingActionButton.tsx | 2 +- .../FocusTrapContainerElementProps.ts | 2 +- src/components/Form/FormProvider.tsx | 25 ++ src/components/Form/InputWrapper.tsx | 2 +- src/components/MenuItem.tsx | 224 +++++++++--------- .../index.native.tsx | 28 +-- .../index.tsx | 34 ++- .../ScreenWrapper/ScreenWrapperContainer.tsx | 46 ++-- src/components/ScreenWrapper/index.tsx | 46 ++-- .../implementation/index.native.tsx | 60 +++++ .../BaseTextInput/implementation/index.tsx | 54 +++++ .../TextInput/BaseTextInput/types.ts | 1 + .../FloatingActionButtonAndPopover.tsx | 2 +- 14 files changed, 337 insertions(+), 209 deletions(-) diff --git a/src/components/DraggableList/index.tsx b/src/components/DraggableList/index.tsx index e7fa265df8fd..926860bbb736 100644 --- a/src/components/DraggableList/index.tsx +++ b/src/components/DraggableList/index.tsx @@ -16,17 +16,15 @@ const minimumActivationDistance = 5; // pointer must move at least this much bef * Draggable (vertical) list using dnd-kit. Dragging is restricted to the vertical axis only * */ -function DraggableList( - { - data = [], - renderItem, - keyExtractor, - onDragEnd: onDragEndCallback, - // eslint-disable-next-line @typescript-eslint/naming-convention - ListFooterComponent, - ref, - }: DraggableListProps & {ref?: React.ForwardedRef}, -) { +function DraggableList({ + data = [], + renderItem, + keyExtractor, + onDragEnd: onDragEndCallback, + // eslint-disable-next-line @typescript-eslint/naming-convention + ListFooterComponent, + ref, +}: DraggableListProps & {ref?: React.ForwardedRef}) { const styles = useThemeStyles(); const items = data.map((item, index) => { diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx index ca5d1a645bf8..1fdd88cc445d 100644 --- a/src/components/FloatingActionButton.tsx +++ b/src/components/FloatingActionButton.tsx @@ -44,7 +44,7 @@ type FloatingActionButtonProps = { isTooltipAllowed: boolean; /** Reference to the outer element */ - ref?: ForwardedRef + ref?: ForwardedRef; }; function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabel, role, isTooltipAllowed, ref}: FloatingActionButtonProps) { diff --git a/src/components/FocusTrap/FocusTrapContainerElement/FocusTrapContainerElementProps.ts b/src/components/FocusTrap/FocusTrapContainerElement/FocusTrapContainerElementProps.ts index a64a83d2d1c8..718ee986416b 100644 --- a/src/components/FocusTrap/FocusTrapContainerElement/FocusTrapContainerElementProps.ts +++ b/src/components/FocusTrap/FocusTrapContainerElement/FocusTrapContainerElementProps.ts @@ -1,4 +1,4 @@ -import type { ForwardedRef } from 'react'; +import type {ForwardedRef} from 'react'; import type {View, ViewProps} from 'react-native'; type FocusTrapContainerElementProps = ViewProps & { diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 07768e4d9011..bac3f1492a41 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -98,6 +98,7 @@ type FormProviderProps = FormProps, ) { +======= + + /** Reference to the outer element */ + forwardedRef?: ForwardedRef; +}; + +function FormProvider({ + formID, + validate, + shouldValidateOnBlur = true, + shouldValidateOnChange = true, + children, + enabledWhenOffline = false, + onSubmit, + shouldTrimValues = true, + allowHTML = false, + isLoading = false, + shouldRenderFooterAboveSubmit = false, + shouldUseStrictHtmlTagValidation = false, + shouldPreventDefaultFocusOnPressSubmit = false, + forwardedRef, + ...rest +}: FormProviderProps) { +>>>>>>> 7acd72ff71c (Prettier run) const [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: true}); const [formState] = useOnyx(`${formID}`, {canBeMissing: true}); const [draftValues, draftValuesMetadata] = useOnyx(`${formID}Draft`, {canBeMissing: true}); diff --git a/src/components/Form/InputWrapper.tsx b/src/components/Form/InputWrapper.tsx index 4e4e3c73d30f..4545c9bd53b7 100644 --- a/src/components/Form/InputWrapper.tsx +++ b/src/components/Form/InputWrapper.tsx @@ -71,7 +71,7 @@ type InputWrapperProps + ref?: ForwardedRef; }; function InputWrapper({ref, ...props}: InputWrapperProps) { diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index a22df50af2d7..8223bed05714 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -391,119 +391,117 @@ const getSubscriptAvatarBackgroundColor = (isHovered: boolean, isPressed: boolea return hoveredBackgroundColor; } }; -function MenuItem( - { - interactive = true, - onPress, - badgeText, - style, - wrapperStyle, - titleWrapperStyle, - outerWrapperStyle, - containerStyle, - titleStyle, - labelStyle, - descriptionTextStyle, - badgeStyle, - viewMode = CONST.OPTION_MODE.DEFAULT, - numberOfLinesTitle = 1, - numberOfLinesDescription = 2, - icon, - iconFill, - secondaryIcon, - secondaryIconFill, - iconType = CONST.ICON_TYPE_ICON, - isSecondaryIconHoverable = false, - iconWidth, - iconHeight, - iconStyles, - fallbackIcon = Expensicons.FallbackAvatar, - shouldShowTitleIcon = false, - titleIcon, - rightIconAccountID, - iconAccountID, - shouldShowRightIcon = false, - iconRight = Expensicons.ArrowRight, - furtherDetailsIcon, - furtherDetails, - furtherDetailsNumberOfLines = 2, - furtherDetailsStyle, - furtherDetailsComponent, - description, - helperText, - helperTextStyle, - errorText, - errorTextStyle, - shouldShowRedDotIndicator, - hintText, - success = false, - iconReportID, - focused = false, - disabled = false, - title, - titleComponent, - titleContainerStyle, - subtitle, - shouldShowBasicTitle, - label, - shouldTruncateTitle = false, - characterLimit = 200, - isLabelHoverable = true, - rightLabel, - shouldShowSelectedState = false, - isSelected = false, - shouldStackHorizontally = false, - shouldShowDescriptionOnTop = false, - shouldShowRightComponent = false, - rightComponent, - rightIconReportID, - avatarSize = CONST.AVATAR_SIZE.DEFAULT, - isSmallAvatarSubscriptMenu = false, - brickRoadIndicator, - shouldRenderAsHTML = false, - shouldEscapeText = undefined, - shouldGreyOutWhenDisabled = true, - shouldRemoveBackground = false, - shouldRemoveHoverBackground = false, - shouldUseDefaultCursorWhenDisabled = false, - shouldShowLoadingSpinnerIcon = false, - isAnonymousAction = false, - shouldBlockSelection = false, - shouldParseTitle = false, - shouldParseHelperText = false, - shouldRenderHintAsHTML = false, - shouldRenderErrorAsHTML = false, - excludedMarkdownRules = [], - shouldCheckActionAllowedOnPress = true, - onSecondaryInteraction, - titleWithTooltips, - displayInDefaultIconColor = false, - contentFit = 'cover', - isPaneMenu = true, - shouldPutLeftPaddingWhenNoIcon = false, - onFocus, - onBlur, - avatarID, - shouldRenderTooltip = false, - shouldHideOnScroll = false, - tooltipAnchorAlignment, - tooltipWrapperStyle = {}, - tooltipShiftHorizontal = 0, - tooltipShiftVertical = 0, - renderTooltipContent, - onEducationTooltipPress, - additionalIconStyles, - shouldShowSelectedItemCheck = false, - shouldIconUseAutoWidthStyle = false, - shouldBreakWord = false, - pressableTestID, - shouldTeleportPortalToModalLayer, - copyValue, - plaidUrl, - hasSubMenuItems = false, - ref, - }: MenuItemProps, -) { +function MenuItem({ + interactive = true, + onPress, + badgeText, + style, + wrapperStyle, + titleWrapperStyle, + outerWrapperStyle, + containerStyle, + titleStyle, + labelStyle, + descriptionTextStyle, + badgeStyle, + viewMode = CONST.OPTION_MODE.DEFAULT, + numberOfLinesTitle = 1, + numberOfLinesDescription = 2, + icon, + iconFill, + secondaryIcon, + secondaryIconFill, + iconType = CONST.ICON_TYPE_ICON, + isSecondaryIconHoverable = false, + iconWidth, + iconHeight, + iconStyles, + fallbackIcon = Expensicons.FallbackAvatar, + shouldShowTitleIcon = false, + titleIcon, + rightIconAccountID, + iconAccountID, + shouldShowRightIcon = false, + iconRight = Expensicons.ArrowRight, + furtherDetailsIcon, + furtherDetails, + furtherDetailsNumberOfLines = 2, + furtherDetailsStyle, + furtherDetailsComponent, + description, + helperText, + helperTextStyle, + errorText, + errorTextStyle, + shouldShowRedDotIndicator, + hintText, + success = false, + iconReportID, + focused = false, + disabled = false, + title, + titleComponent, + titleContainerStyle, + subtitle, + shouldShowBasicTitle, + label, + shouldTruncateTitle = false, + characterLimit = 200, + isLabelHoverable = true, + rightLabel, + shouldShowSelectedState = false, + isSelected = false, + shouldStackHorizontally = false, + shouldShowDescriptionOnTop = false, + shouldShowRightComponent = false, + rightComponent, + rightIconReportID, + avatarSize = CONST.AVATAR_SIZE.DEFAULT, + isSmallAvatarSubscriptMenu = false, + brickRoadIndicator, + shouldRenderAsHTML = false, + shouldEscapeText = undefined, + shouldGreyOutWhenDisabled = true, + shouldRemoveBackground = false, + shouldRemoveHoverBackground = false, + shouldUseDefaultCursorWhenDisabled = false, + shouldShowLoadingSpinnerIcon = false, + isAnonymousAction = false, + shouldBlockSelection = false, + shouldParseTitle = false, + shouldParseHelperText = false, + shouldRenderHintAsHTML = false, + shouldRenderErrorAsHTML = false, + excludedMarkdownRules = [], + shouldCheckActionAllowedOnPress = true, + onSecondaryInteraction, + titleWithTooltips, + displayInDefaultIconColor = false, + contentFit = 'cover', + isPaneMenu = true, + shouldPutLeftPaddingWhenNoIcon = false, + onFocus, + onBlur, + avatarID, + shouldRenderTooltip = false, + shouldHideOnScroll = false, + tooltipAnchorAlignment, + tooltipWrapperStyle = {}, + tooltipShiftHorizontal = 0, + tooltipShiftVertical = 0, + renderTooltipContent, + onEducationTooltipPress, + additionalIconStyles, + shouldShowSelectedItemCheck = false, + shouldIconUseAutoWidthStyle = false, + shouldBreakWord = false, + pressableTestID, + shouldTeleportPortalToModalLayer, + copyValue, + plaidUrl, + ref, + hasSubMenuItems = false, +}: MenuItemProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/components/PressableWithSecondaryInteraction/index.native.tsx b/src/components/PressableWithSecondaryInteraction/index.native.tsx index 3802d478facd..b9a3632f4973 100644 --- a/src/components/PressableWithSecondaryInteraction/index.native.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx @@ -6,21 +6,19 @@ import Text from '@components/Text'; import type PressableWithSecondaryInteractionProps from './types'; /** This is a special Pressable that calls onSecondaryInteraction when LongPressed. */ -function PressableWithSecondaryInteraction( - { - children, - onSecondaryInteraction, - inline = false, - needsOffscreenAlphaCompositing = false, - suppressHighlighting = false, - activeOpacity = 1, - preventDefaultContextMenu, - withoutFocusOnSecondaryInteraction, - enableLongPressWithHover, - ref, - ...rest - }: PressableWithSecondaryInteractionProps, -) { +function PressableWithSecondaryInteraction({ + children, + onSecondaryInteraction, + inline = false, + needsOffscreenAlphaCompositing = false, + suppressHighlighting = false, + activeOpacity = 1, + preventDefaultContextMenu, + withoutFocusOnSecondaryInteraction, + enableLongPressWithHover, + ref, + ...rest +}: PressableWithSecondaryInteractionProps) { const executeSecondaryInteraction = (event: GestureResponderEvent) => { event.preventDefault(); onSecondaryInteraction?.(event); diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index 6e1678ffe916..e44e87f5014d 100644 --- a/src/components/PressableWithSecondaryInteraction/index.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.tsx @@ -3,27 +3,25 @@ import type {GestureResponderEvent} from 'react-native'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import {hasHoverSupport, canUseTouchScreen} from '@libs/DeviceCapabilities'; +import {canUseTouchScreen, hasHoverSupport} from '@libs/DeviceCapabilities'; import type PressableWithSecondaryInteractionProps from './types'; /** This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. */ -function PressableWithSecondaryInteraction( - { - children, - inline = false, - style, - wrapperStyle, - enableLongPressWithHover = false, - withoutFocusOnSecondaryInteraction = false, - needsOffscreenAlphaCompositing = false, - preventDefaultContextMenu = true, - onSecondaryInteraction, - activeOpacity = 1, - opacityAnimationDuration, - ref, - ...rest - }: PressableWithSecondaryInteractionProps, -) { +function PressableWithSecondaryInteraction({ + children, + inline = false, + style, + wrapperStyle, + enableLongPressWithHover = false, + withoutFocusOnSecondaryInteraction = false, + needsOffscreenAlphaCompositing = false, + preventDefaultContextMenu = true, + onSecondaryInteraction, + activeOpacity = 1, + opacityAnimationDuration, + ref, + ...rest +}: PressableWithSecondaryInteractionProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); diff --git a/src/components/ScreenWrapper/ScreenWrapperContainer.tsx b/src/components/ScreenWrapper/ScreenWrapperContainer.tsx index a2c0b3a3a23e..8e5f25e42bfc 100644 --- a/src/components/ScreenWrapper/ScreenWrapperContainer.tsx +++ b/src/components/ScreenWrapper/ScreenWrapperContainer.tsx @@ -86,30 +86,28 @@ type ScreenWrapperContainerProps = React.PropsWithChildren<{ ref?: ForwardedRef; }>; -function ScreenWrapperContainer( - { - children, - style, - testID, - bottomContent, - bottomContentStyle: bottomContentStyleProp, - keyboardAvoidingViewBehavior = 'padding', - keyboardVerticalOffset, - shouldEnableKeyboardAvoidingView = true, - shouldEnableMaxHeight = false, - shouldEnableMinHeight = false, - shouldEnablePickerAvoiding = true, - shouldDismissKeyboardBeforeClose = true, - shouldAvoidScrollOnVirtualViewport = true, - shouldUseCachedViewportHeight = false, - shouldKeyboardOffsetBottomSafeAreaPadding: shouldKeyboardOffsetBottomSafeAreaPaddingProp, - enableEdgeToEdgeBottomSafeAreaPadding, - includePaddingTop = true, - includeSafeAreaPaddingBottom = false, - isFocused = true, - ref, - }: ScreenWrapperContainerProps, -) { +function ScreenWrapperContainer({ + children, + style, + testID, + bottomContent, + bottomContentStyle: bottomContentStyleProp, + keyboardAvoidingViewBehavior = 'padding', + keyboardVerticalOffset, + shouldEnableKeyboardAvoidingView = true, + shouldEnableMaxHeight = false, + shouldEnableMinHeight = false, + shouldEnablePickerAvoiding = true, + shouldDismissKeyboardBeforeClose = true, + shouldAvoidScrollOnVirtualViewport = true, + shouldUseCachedViewportHeight = false, + shouldKeyboardOffsetBottomSafeAreaPadding: shouldKeyboardOffsetBottomSafeAreaPaddingProp, + enableEdgeToEdgeBottomSafeAreaPadding, + includePaddingTop = true, + includeSafeAreaPaddingBottom = false, + isFocused = true, + ref, +}: ScreenWrapperContainerProps) { const {windowHeight} = useWindowDimensions(shouldUseCachedViewportHeight); const {initialHeight} = useInitialDimensions(); const styles = useThemeStyles(); diff --git a/src/components/ScreenWrapper/index.tsx b/src/components/ScreenWrapper/index.tsx index e3117d55e947..56779aea01fd 100644 --- a/src/components/ScreenWrapper/index.tsx +++ b/src/components/ScreenWrapper/index.tsx @@ -71,30 +71,28 @@ type ScreenWrapperProps = Omit & onEntryTransitionEnd?: () => void; }; -function ScreenWrapper( - { - navigation: navigationProp, - children, - style, - bottomContent, - headerGapStyles, - offlineIndicatorStyle, - disableOfflineIndicatorSafeAreaPadding, - shouldShowOfflineIndicator: shouldShowSmallScreenOfflineIndicator, - shouldShowOfflineIndicatorInWideScreen: shouldShowWideScreenOfflineIndicator, - shouldMobileOfflineIndicatorStickToBottom: shouldSmallScreenOfflineIndicatorStickToBottomProp, - shouldDismissKeyboardBeforeClose, - onEntryTransitionEnd, - includePaddingTop = true, - includeSafeAreaPaddingBottom: includeSafeAreaPaddingBottomProp = true, - enableEdgeToEdgeBottomSafeAreaPadding: enableEdgeToEdgeBottomSafeAreaPaddingProp, - shouldKeyboardOffsetBottomSafeAreaPadding: shouldKeyboardOffsetBottomSafeAreaPaddingProp, - isOfflineIndicatorTranslucent, - focusTrapSettings, - ref, - ...restContainerProps - }: ScreenWrapperProps, -) { +function ScreenWrapper({ + navigation: navigationProp, + children, + style, + bottomContent, + headerGapStyles, + offlineIndicatorStyle, + disableOfflineIndicatorSafeAreaPadding, + shouldShowOfflineIndicator: shouldShowSmallScreenOfflineIndicator, + shouldShowOfflineIndicatorInWideScreen: shouldShowWideScreenOfflineIndicator, + shouldMobileOfflineIndicatorStickToBottom: shouldSmallScreenOfflineIndicatorStickToBottomProp, + shouldDismissKeyboardBeforeClose, + onEntryTransitionEnd, + includePaddingTop = true, + includeSafeAreaPaddingBottom: includeSafeAreaPaddingBottomProp = true, + enableEdgeToEdgeBottomSafeAreaPadding: enableEdgeToEdgeBottomSafeAreaPaddingProp, + shouldKeyboardOffsetBottomSafeAreaPadding: shouldKeyboardOffsetBottomSafeAreaPaddingProp, + isOfflineIndicatorTranslucent, + focusTrapSettings, + ref, + ...restContainerProps +}: ScreenWrapperProps) { /** * We are only passing navigation as prop from * ReportScreen -> ScreenWrapper diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 7450c7dfc143..c301cf68c2a9 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -29,6 +29,7 @@ import isInputAutoFilled from '@libs/isInputAutoFilled'; import variables from '@styles/variables'; import CONST from '@src/CONST'; +<<<<<<< HEAD function BaseTextInput( { label = '', @@ -83,6 +84,60 @@ function BaseTextInput( }: BaseTextInputProps, ref: ForwardedRef, ) { +======= +function BaseTextInput({ + label = '', + /** + * To be able to function as either controlled or uncontrolled component we should not + * assign a default prop value for `value` or `defaultValue` props + */ + value = undefined, + defaultValue = undefined, + placeholder = '', + errorText = '', + iconLeft = null, + icon = null, + textInputContainerStyles, + shouldApplyPaddingToContainer = true, + touchableInputWrapperStyle, + containerStyles, + inputStyle, + shouldUseFullInputHeight = false, + forceActiveLabel = false, + disableKeyboard = false, + autoGrow = false, + autoGrowExtraSpace = 0, + autoGrowMarginSide, + autoGrowHeight = false, + maxAutoGrowHeight, + hideFocusedState = false, + maxLength = undefined, + hint = '', + onInputChange = () => {}, + multiline = false, + autoCorrect = true, + prefixCharacter = '', + suffixCharacter = '', + inputID, + type = 'default', + excludedMarkdownStyles = [], + shouldShowClearButton = false, + shouldHideClearButton = true, + prefixContainerStyle = [], + prefixStyle = [], + suffixContainerStyle = [], + suffixStyle = [], + contentWidth, + loadingSpinnerStyle, + uncontrolled, + placeholderTextColor, + onClearInput, + iconContainerStyle, + shouldUseDefaultLineHeightForPrefix = true, + ref, + ...props +}: BaseTextInputProps) { +>>>>>>> 7acd72ff71c (Prettier run) const InputComponent = InputComponentMap.get(type) ?? RNTextInput; const isMarkdownEnabled = type === 'markdown'; const isAutoGrowHeightMarkdown = isMarkdownEnabled && autoGrowHeight; @@ -376,7 +431,12 @@ function BaseTextInput( ref.current = baseTextInputRef; } +<<<<<<< HEAD input.current = element; +======= + const elementRef = element as AnimatedTextInputRef | AnimatedMarkdownTextInputRef | null; + input.current = elementRef; +>>>>>>> 7acd72ff71c (Prettier run) }} // eslint-disable-next-line {...inputProps} diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 0901ccf28ad4..10ac9f8ac340 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -32,6 +32,7 @@ import isInputAutoFilled from '@libs/isInputAutoFilled'; import variables from '@styles/variables'; import CONST from '@src/CONST'; +<<<<<<< HEAD function BaseTextInput( { label = '', @@ -85,6 +86,59 @@ function BaseTextInput( }: BaseTextInputProps, ref: ForwardedRef, ) { +======= +function BaseTextInput({ + label = '', + /** + * To be able to function as either controlled or uncontrolled component we should not + * assign a default prop value for `value` or `defaultValue` props + */ + value = undefined, + defaultValue = undefined, + placeholder = '', + errorText = '', + icon = null, + iconLeft = null, + textInputContainerStyles, + shouldApplyPaddingToContainer = true, + touchableInputWrapperStyle, + containerStyles, + inputStyle, + forceActiveLabel = false, + disableKeyboard = false, + autoGrow = false, + autoGrowHeight = false, + maxAutoGrowHeight, + hideFocusedState = false, + maxLength = undefined, + hint = '', + onInputChange = () => {}, + multiline = false, + shouldInterceptSwipe = false, + autoCorrect = true, + prefixCharacter = '', + suffixCharacter = '', + inputID, + type = 'default', + excludedMarkdownStyles = [], + shouldShowClearButton = false, + shouldHideClearButton = true, + shouldUseDisabledStyles = true, + prefixContainerStyle = [], + prefixStyle = [], + suffixContainerStyle = [], + suffixStyle = [], + contentWidth, + loadingSpinnerStyle, + uncontrolled = false, + placeholderTextColor, + onClearInput, + iconContainerStyle, + shouldUseDefaultLineHeightForPrefix = true, + ref, + ...inputProps +}: BaseTextInputProps) { +>>>>>>> 7acd72ff71c (Prettier run) const InputComponent = InputComponentMap.get(type) ?? RNTextInput; const isMarkdownEnabled = type === 'markdown'; const isAutoGrowHeightMarkdown = isMarkdownEnabled && autoGrowHeight; diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index b29a70b8eab4..6e1a7b48c3c8 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -1,4 +1,5 @@ import type {MarkdownRange, MarkdownStyle} from '@expensify/react-native-live-markdown'; +import type {ForwardedRef} from 'react'; import type {GestureResponderEvent, StyleProp, TextInputProps, TextStyle, ViewStyle} from 'react-native'; import type {MaskedTextInputOwnProps} from 'react-native-advanced-input-mask/lib/typescript/src/types'; import type {AnimatedTextInputRef} from '@components/RNTextInput'; diff --git a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx index 836ed6e3fb7e..100764449ba1 100644 --- a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx @@ -70,7 +70,7 @@ type FloatingActionButtonAndPopoverProps = { isTooltipAllowed: boolean; /** Reference to the outer element */ - ref?: ForwardedRef + ref?: ForwardedRef; }; type FloatingActionButtonAndPopoverRef = { From af5c9d1059af7ec185e3ac3848f7b23f268809c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 14:04:14 +0200 Subject: [PATCH 15/28] Removed forwardRef from SectionList component --- src/components/SectionList/BaseSectionList.tsx | 9 ++++----- src/components/SectionList/index.android.tsx | 8 ++++---- src/components/SectionList/index.tsx | 8 ++++---- src/components/SectionList/types.ts | 3 +++ 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/SectionList/BaseSectionList.tsx b/src/components/SectionList/BaseSectionList.tsx index eb39de8bd541..66083f0f7fe4 100644 --- a/src/components/SectionList/BaseSectionList.tsx +++ b/src/components/SectionList/BaseSectionList.tsx @@ -1,11 +1,10 @@ -import React, {forwardRef} from 'react'; +import React from 'react'; import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle'; import AnimatedSectionList from './AnimatedSectionList'; -import type {SectionListProps, SectionListRef} from './types'; +import type {SectionListProps} from './types'; function BaseSectionList( - {addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, contentContainerStyle: contentContainerStyleProp, ...restProps}: SectionListProps, - ref: SectionListRef, + {addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, contentContainerStyle: contentContainerStyleProp, ref, ...restProps}: SectionListProps, ) { const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style: contentContainerStyleProp}); @@ -21,4 +20,4 @@ function BaseSectionList( BaseSectionList.displayName = 'BaseSectionList'; -export default forwardRef(BaseSectionList); +export default BaseSectionList; diff --git a/src/components/SectionList/index.android.tsx b/src/components/SectionList/index.android.tsx index d9877fd5afca..d592e8267fc0 100644 --- a/src/components/SectionList/index.android.tsx +++ b/src/components/SectionList/index.android.tsx @@ -1,8 +1,8 @@ -import React, {forwardRef} from 'react'; +import React from 'react'; import BaseSectionList from './BaseSectionList'; -import type {SectionListProps, SectionListRef} from './types'; +import type {SectionListProps} from './types'; -function SectionListWithRef(props: SectionListProps, ref: SectionListRef) { +function SectionListWithRef({ref, ...props}: SectionListProps) { return ( (props: SectionListProps(props: SectionListProps, ref: SectionListRef) { +function SectionList({ref, ...props}: SectionListProps) { return ( (props: SectionListProps, SectionList.displayName = 'SectionList'; -export default forwardRef(SectionList); +export default SectionList; diff --git a/src/components/SectionList/types.ts b/src/components/SectionList/types.ts index 0c588a5c5adc..1d3112272152 100644 --- a/src/components/SectionList/types.ts +++ b/src/components/SectionList/types.ts @@ -7,6 +7,9 @@ type SectionListProps = RNSectionListProps & { /** Whether to add bottom safe area padding to the content. */ addOfflineIndicatorBottomSafeAreaPadding?: boolean; + + /** Reference to the outer element */ + ref?: SectionListRef; }; type SectionListRef = ForwardedRef>; From 44b618fb3874776b6d9d18b5bebbc8f69efed346 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 14:38:46 +0200 Subject: [PATCH 16/28] Removed forwardRef from BaseSelectionList.tsx --- src/components/SelectionList/BaseSelectionList.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 8d72632fd661..3b65268a8428 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -1,8 +1,7 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; import lodashDebounce from 'lodash/debounce'; import isEmpty from 'lodash/isEmpty'; -import type {ForwardedRef} from 'react'; -import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import type { LayoutChangeEvent, NativeSyntheticEvent, @@ -42,7 +41,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import arraysEqual from '@src/utils/arraysEqual'; import BaseSelectionListItemRenderer from './BaseSelectionListItemRenderer'; import FocusAwareCellRendererComponent from './FocusAwareCellRendererComponent'; -import type {ButtonOrCheckBoxRoles, FlattenedSectionsReturn, ListItem, SectionListDataType, SectionWithIndexOffset, SelectionListHandle, SelectionListProps} from './types'; +import type {ButtonOrCheckBoxRoles, FlattenedSectionsReturn, ListItem, SectionListDataType, SectionWithIndexOffset, SelectionListProps} from './types'; const getDefaultItemHeight = () => variables.optionRowHeight; @@ -150,8 +149,8 @@ function BaseSelectionList( selectedItems = [], isSelected, canShowProductTrainingTooltip, + ref, }: SelectionListProps, - ref: ForwardedRef, ) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -1069,4 +1068,4 @@ function BaseSelectionList( BaseSelectionList.displayName = 'BaseSelectionList'; -export default forwardRef(BaseSelectionList); +export default BaseSelectionList; From d6bf9591dccb2b4b85d21c90dd50057f362ad70c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 14:39:23 +0200 Subject: [PATCH 17/28] Removed forwardRef from ButtonWithDropdownMenu component --- src/components/ButtonWithDropdownMenu/index.tsx | 12 ++++-------- src/components/ButtonWithDropdownMenu/types.ts | 8 ++++++++ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index ee0badb49dab..cddcf9f87ed0 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -1,5 +1,5 @@ import type {RefObject} from 'react'; -import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import {View} from 'react-native'; import type {GestureResponderEvent} from 'react-native'; import Button from '@components/Button'; @@ -17,13 +17,9 @@ import mergeRefs from '@libs/mergeRefs'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import type {AnchorPosition} from '@src/styles'; -import type {ButtonWithDropdownMenuProps} from './types'; +import type {ButtonWithDropdownMenuProps, ButtonWithDropdownMenuRef} from './types'; -type ButtonWithDropdownMenuRef = { - setIsMenuVisible: (visible: boolean) => void; -}; - -function ButtonWithDropdownMenuInner(props: ButtonWithDropdownMenuProps, ref: React.Ref) { +function ButtonWithDropdownMenuInner({ref, ...props}: ButtonWithDropdownMenuProps) { const { success = true, isSplitButton = true, @@ -319,7 +315,7 @@ function ButtonWithDropdownMenuInner(props: ButtonWithDropdownMenuPr } ButtonWithDropdownMenuInner.displayName = 'ButtonWithDropdownMenu'; -const ButtonWithDropdownMenu = forwardRef(ButtonWithDropdownMenuInner) as ( +const ButtonWithDropdownMenu = ButtonWithDropdownMenuInner as ( props: ButtonWithDropdownMenuProps & {ref?: React.Ref}, ) => ReturnType; export default ButtonWithDropdownMenu; diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts index 85a06bfa5e88..87cb10f437d6 100644 --- a/src/components/ButtonWithDropdownMenu/types.ts +++ b/src/components/ButtonWithDropdownMenu/types.ts @@ -159,6 +159,13 @@ type ButtonWithDropdownMenuProps = { /** Whether to display the option icon when only one option is available */ shouldUseOptionIcon?: boolean; + + /** Reference to the outer element */ + ref?: React.Ref; +}; + +type ButtonWithDropdownMenuRef = { + setIsMenuVisible: (visible: boolean) => void; }; export type { @@ -171,4 +178,5 @@ export type { WorkspaceTaxRatesBulkActionType, ReportExportType, OnboardingHelpType, + ButtonWithDropdownMenuRef, }; From c32d58d65aac64438d757a5c578ce935086b5a61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 14:42:46 +0200 Subject: [PATCH 18/28] Prettier run --- .../SectionList/BaseSectionList.tsx | 10 +- .../SelectionList/BaseSelectionList.tsx | 212 +++++++++--------- 2 files changed, 112 insertions(+), 110 deletions(-) diff --git a/src/components/SectionList/BaseSectionList.tsx b/src/components/SectionList/BaseSectionList.tsx index 66083f0f7fe4..1320634dcf51 100644 --- a/src/components/SectionList/BaseSectionList.tsx +++ b/src/components/SectionList/BaseSectionList.tsx @@ -3,9 +3,13 @@ import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddi import AnimatedSectionList from './AnimatedSectionList'; import type {SectionListProps} from './types'; -function BaseSectionList( - {addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, contentContainerStyle: contentContainerStyleProp, ref, ...restProps}: SectionListProps, -) { +function BaseSectionList({ + addBottomSafeAreaPadding, + addOfflineIndicatorBottomSafeAreaPadding, + contentContainerStyle: contentContainerStyleProp, + ref, + ...restProps +}: SectionListProps) { const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style: contentContainerStyleProp}); return ( diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 3b65268a8428..5619a3ce28da 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -45,113 +45,111 @@ import type {ButtonOrCheckBoxRoles, FlattenedSectionsReturn, ListItem, SectionLi const getDefaultItemHeight = () => variables.optionRowHeight; -function BaseSelectionList( - { - sections, - ListItem, - shouldUseUserSkeletonView, - canSelectMultiple = false, - onSelectRow, - shouldSingleExecuteRowSelect = false, - onCheckboxPress, - onSelectAll, - onDismissError, - getItemHeight = getDefaultItemHeight, - textInputLabel = '', - textInputPlaceholder = '', - textInputValue = '', - textInputStyle, - textInputHint, - textInputMaxLength, - inputMode = CONST.INPUT_MODE.TEXT, - onChangeText, - initiallyFocusedOptionKey = '', - onScroll, - onScrollBeginDrag, - headerMessage = '', - confirmButtonText = '', - onConfirm, - headerContent, - footerContent, - listFooterContent, - footerContentAbovePagination, - listEmptyContent, - showScrollIndicator = true, - showLoadingPlaceholder = false, - LoadingPlaceholderComponent = OptionsListSkeletonView, - showConfirmButton = false, - isConfirmButtonDisabled = false, - shouldUseDefaultTheme = false, - shouldPreventDefaultFocusOnSelectRow = false, - containerStyle, - sectionListStyle, - disableKeyboardShortcuts = false, - children, - autoCorrect, - shouldStopPropagation = false, - shouldPreventDefault = true, - shouldShowTooltips = true, - shouldUseDynamicMaxToRenderPerBatch = false, - rightHandSideComponent, - isLoadingNewOptions = false, - onLayout, - customListHeader, - customListHeaderHeight = 0, - listHeaderWrapperStyle, - isRowMultilineSupported = false, - isAlternateTextMultilineSupported = false, - alternateTextNumberOfLines = 2, - textInputRef, - headerMessageStyle, - confirmButtonStyles, - shouldHideListOnInitialRender = true, - textInputIconLeft, - sectionTitleStyles, - textInputAutoFocus = true, - shouldShowTextInputAfterHeader = false, - shouldShowHeaderMessageAfterHeader = false, - includeSafeAreaPaddingBottom = true, - shouldTextInputInterceptSwipe = false, - listHeaderContent, - onEndReached = () => {}, - onEndReachedThreshold, - windowSize = 5, - updateCellsBatchingPeriod = 50, - removeClippedSubviews = true, - shouldDelayFocus = true, - onArrowFocus = () => {}, - shouldUpdateFocusedIndex = false, - onLongPressRow, - shouldShowTextInput = !!textInputLabel || !!textInputIconLeft, - shouldShowListEmptyContent = true, - listItemWrapperStyle, - shouldIgnoreFocus = false, - scrollEventThrottle, - contentContainerStyle, - shouldKeepFocusedItemAtTopOfViewableArea = false, - shouldDebounceScrolling = false, - shouldPreventActiveCellVirtualization = false, - shouldScrollToFocusedIndex = true, - isSmallScreenWidth, - onContentSizeChange, - listItemTitleStyles, - initialNumToRender = 12, - listItemTitleContainerStyles, - isScreenFocused = false, - shouldSubscribeToArrowKeyEvents = true, - shouldClearInputOnSelect = true, - addBottomSafeAreaPadding, - addOfflineIndicatorBottomSafeAreaPadding, - fixedNumItemsForLoader, - loaderSpeed, - errorText, - shouldUseDefaultRightHandSideCheckmark, - selectedItems = [], - isSelected, - canShowProductTrainingTooltip, - ref, - }: SelectionListProps, -) { +function BaseSelectionList({ + sections, + ListItem, + shouldUseUserSkeletonView, + canSelectMultiple = false, + onSelectRow, + shouldSingleExecuteRowSelect = false, + onCheckboxPress, + onSelectAll, + onDismissError, + getItemHeight = getDefaultItemHeight, + textInputLabel = '', + textInputPlaceholder = '', + textInputValue = '', + textInputStyle, + textInputHint, + textInputMaxLength, + inputMode = CONST.INPUT_MODE.TEXT, + onChangeText, + initiallyFocusedOptionKey = '', + onScroll, + onScrollBeginDrag, + headerMessage = '', + confirmButtonText = '', + onConfirm, + headerContent, + footerContent, + listFooterContent, + footerContentAbovePagination, + listEmptyContent, + showScrollIndicator = true, + showLoadingPlaceholder = false, + LoadingPlaceholderComponent = OptionsListSkeletonView, + showConfirmButton = false, + isConfirmButtonDisabled = false, + shouldUseDefaultTheme = false, + shouldPreventDefaultFocusOnSelectRow = false, + containerStyle, + sectionListStyle, + disableKeyboardShortcuts = false, + children, + autoCorrect, + shouldStopPropagation = false, + shouldPreventDefault = true, + shouldShowTooltips = true, + shouldUseDynamicMaxToRenderPerBatch = false, + rightHandSideComponent, + isLoadingNewOptions = false, + onLayout, + customListHeader, + customListHeaderHeight = 0, + listHeaderWrapperStyle, + isRowMultilineSupported = false, + isAlternateTextMultilineSupported = false, + alternateTextNumberOfLines = 2, + textInputRef, + headerMessageStyle, + confirmButtonStyles, + shouldHideListOnInitialRender = true, + textInputIconLeft, + sectionTitleStyles, + textInputAutoFocus = true, + shouldShowTextInputAfterHeader = false, + shouldShowHeaderMessageAfterHeader = false, + includeSafeAreaPaddingBottom = true, + shouldTextInputInterceptSwipe = false, + listHeaderContent, + onEndReached = () => {}, + onEndReachedThreshold, + windowSize = 5, + updateCellsBatchingPeriod = 50, + removeClippedSubviews = true, + shouldDelayFocus = true, + onArrowFocus = () => {}, + shouldUpdateFocusedIndex = false, + onLongPressRow, + shouldShowTextInput = !!textInputLabel || !!textInputIconLeft, + shouldShowListEmptyContent = true, + listItemWrapperStyle, + shouldIgnoreFocus = false, + scrollEventThrottle, + contentContainerStyle, + shouldKeepFocusedItemAtTopOfViewableArea = false, + shouldDebounceScrolling = false, + shouldPreventActiveCellVirtualization = false, + shouldScrollToFocusedIndex = true, + isSmallScreenWidth, + onContentSizeChange, + listItemTitleStyles, + initialNumToRender = 12, + listItemTitleContainerStyles, + isScreenFocused = false, + shouldSubscribeToArrowKeyEvents = true, + shouldClearInputOnSelect = true, + addBottomSafeAreaPadding, + addOfflineIndicatorBottomSafeAreaPadding, + fixedNumItemsForLoader, + loaderSpeed, + errorText, + shouldUseDefaultRightHandSideCheckmark, + selectedItems = [], + isSelected, + canShowProductTrainingTooltip, + ref, +}: SelectionListProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const listRef = useRef>>(null); From 5ac856f5299f26dc7159e1de96c747f7f3c8b2e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 16:29:53 +0200 Subject: [PATCH 19/28] Prettier run --- src/components/Form/FormProvider.tsx | 25 ----------------- src/components/MoneyRequestAmountInput.tsx | 31 ++++++++++++++++++++++ 2 files changed, 31 insertions(+), 25 deletions(-) diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index bac3f1492a41..07768e4d9011 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -98,7 +98,6 @@ type FormProviderProps = FormProps, ) { -======= - - /** Reference to the outer element */ - forwardedRef?: ForwardedRef; -}; - -function FormProvider({ - formID, - validate, - shouldValidateOnBlur = true, - shouldValidateOnChange = true, - children, - enabledWhenOffline = false, - onSubmit, - shouldTrimValues = true, - allowHTML = false, - isLoading = false, - shouldRenderFooterAboveSubmit = false, - shouldUseStrictHtmlTagValidation = false, - shouldPreventDefaultFocusOnPressSubmit = false, - forwardedRef, - ...rest -}: FormProviderProps) { ->>>>>>> 7acd72ff71c (Prettier run) const [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: true}); const [formState] = useOnyx(`${formID}`, {canBeMissing: true}); const [draftValues, draftValuesMetadata] = useOnyx(`${formID}Draft`, {canBeMissing: true}); diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index f0293da0779f..90110322d743 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -115,6 +115,7 @@ const defaultOnFormatAmount = (amount: number, currency?: string) => convertToFr /** * Specialized money amount input with currency and money amount formatting. */ +<<<<<<< HEAD function MoneyRequestAmountInput( { amount = 0, @@ -145,6 +146,36 @@ function MoneyRequestAmountInput( }: MoneyRequestAmountInputProps, forwardedRef: ForwardedRef, ) { +======= +function MoneyRequestAmountInput({ + amount = 0, + currency = CONST.CURRENCY.USD, + isCurrencyPressable = true, + onCurrencyButtonPress, + onAmountChange, + prefixCharacter = '', + hideCurrencySymbol = false, + moneyRequestAmountInputRef, + disableKeyboard = true, + onFormatAmount = defaultOnFormatAmount, + formatAmountOnBlur, + maxLength, + hideFocusedState = true, + shouldKeepUserInput = false, + shouldShowBigNumberPad = false, + inputStyle, + autoGrow = true, + autoGrowExtraSpace, + contentWidth, + testID, + submitBehavior, + shouldApplyPaddingToContainer = false, + shouldUseDefaultLineHeightForPrefix = true, + shouldWrapInputInContainer = true, + forwardedRef, + ...props +}: MoneyRequestAmountInputProps) { +>>>>>>> 6ddd1784ffe (Prettier run) const textInput = useRef(null); const numberFormRef = useRef(null); const decimals = getCurrencyDecimals(currency); From 299239f23603f6d8ae587d695083092519ff990b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 17:07:01 +0200 Subject: [PATCH 20/28] Removed forwardRef from withCurrentUserPersonalDetails.tsx --- src/components/withCurrentUserPersonalDetails.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/withCurrentUserPersonalDetails.tsx b/src/components/withCurrentUserPersonalDetails.tsx index 91fd388eabf1..0c9a9c0604ab 100644 --- a/src/components/withCurrentUserPersonalDetails.tsx +++ b/src/components/withCurrentUserPersonalDetails.tsx @@ -1,4 +1,4 @@ -import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; +import type {ComponentType} from 'react'; import React from 'react'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import getComponentDisplayName from '@libs/getComponentDisplayName'; @@ -10,16 +10,15 @@ type HOCProps = { type WithCurrentUserPersonalDetailsProps = HOCProps; -export default function ( - WrappedComponent: ComponentType>, -): ComponentType & RefAttributes> { - function WithCurrentUserPersonalDetails(props: Omit, ref: ForwardedRef) { +export default function ( + WrappedComponent: ComponentType, +): ComponentType> { + function WithCurrentUserPersonalDetails(props: Omit) { const currentUserPersonalDetails = useCurrentUserPersonalDetails(); return ( ); @@ -27,7 +26,7 @@ export default function Date: Mon, 18 Aug 2025 17:07:35 +0200 Subject: [PATCH 21/28] Removed forwardRef from withFullTransactionOrNotFound.tsx --- .../step/withFullTransactionOrNotFound.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx index 7ea66d6f8ec3..2c1c6d40c815 100644 --- a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx +++ b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx @@ -1,6 +1,6 @@ import {useIsFocused} from '@react-navigation/native'; -import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; -import React, {forwardRef} from 'react'; +import type {ComponentType} from 'react'; +import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import useOnyx from '@hooks/useOnyx'; @@ -54,11 +54,11 @@ type MoneyRequestRouteName = type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & PlatformStackScreenProps; -export default function , TRef>( - WrappedComponent: ComponentType>, -): React.ComponentType & RefAttributes> { +export default function >( + WrappedComponent: ComponentType, +): React.ComponentType> { // eslint-disable-next-line rulesdir/no-negated-variables - function WithFullTransactionOrNotFound(props: Omit, ref: ForwardedRef) { + function WithFullTransactionOrNotFound(props: Omit) { const {route} = props; const transactionID = route.params.transactionID; const userAction = 'action' in route.params && route.params.action ? route.params.action : CONST.IOU.ACTION.CREATE; @@ -87,14 +87,13 @@ export default function ); } WithFullTransactionOrNotFound.displayName = `withFullTransactionOrNotFound(${getComponentDisplayName(WrappedComponent)})`; - return forwardRef(WithFullTransactionOrNotFound); + return WithFullTransactionOrNotFound; } export type {WithFullTransactionOrNotFoundProps}; From d88edc6e39997ab0449290b78e0c8de7e19f5205 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 17:08:08 +0200 Subject: [PATCH 22/28] Removed forwardRef from withWritableReportOrNotFound.tsx --- .../request/step/withWritableReportOrNotFound.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index 557a28a47b5b..c64497900678 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -1,5 +1,5 @@ -import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; -import React, {forwardRef, useEffect} from 'react'; +import type {ComponentType} from 'react'; +import React, {useEffect} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; @@ -57,12 +57,12 @@ type MoneyRequestRouteName = type WithWritableReportOrNotFoundProps = WithWritableReportOrNotFoundOnyxProps & PlatformStackScreenProps; -export default function , TRef>( - WrappedComponent: ComponentType>, +export default function >( + WrappedComponent: ComponentType, shouldIncludeDeprecatedIOUType = false, -): React.ComponentType, keyof WithWritableReportOrNotFoundOnyxProps>> { +): React.ComponentType> { // eslint-disable-next-line rulesdir/no-negated-variables - function WithWritableReportOrNotFound(props: Omit, ref: ForwardedRef) { + function WithWritableReportOrNotFound(props: Omit) { const {route} = props; const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, {canBeMissing: true}); const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true}); @@ -96,14 +96,13 @@ export default function ); } WithWritableReportOrNotFound.displayName = `withWritableReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`; - return forwardRef(WithWritableReportOrNotFound); + return WithWritableReportOrNotFound; } export type {WithWritableReportOrNotFoundProps}; From 3f4a336060819e4772d1f0196cd77e31e326548a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Mon, 18 Aug 2025 17:09:49 +0200 Subject: [PATCH 23/28] Prettier run --- src/components/withCurrentUserPersonalDetails.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/withCurrentUserPersonalDetails.tsx b/src/components/withCurrentUserPersonalDetails.tsx index 0c9a9c0604ab..0b0a8e7d221f 100644 --- a/src/components/withCurrentUserPersonalDetails.tsx +++ b/src/components/withCurrentUserPersonalDetails.tsx @@ -10,9 +10,7 @@ type HOCProps = { type WithCurrentUserPersonalDetailsProps = HOCProps; -export default function ( - WrappedComponent: ComponentType, -): ComponentType> { +export default function (WrappedComponent: ComponentType): ComponentType> { function WithCurrentUserPersonalDetails(props: Omit) { const currentUserPersonalDetails = useCurrentUserPersonalDetails(); return ( From d1bcff7463c13005a10de709ab71d0ddba5c17c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 20 Aug 2025 11:24:53 +0200 Subject: [PATCH 24/28] Resolved merge conflicts after rebase --- src/components/MoneyRequestAmountInput.tsx | 31 ----------- .../implementation/index.native.tsx | 55 ------------------- .../BaseTextInput/implementation/index.tsx | 54 ------------------ 3 files changed, 140 deletions(-) diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 90110322d743..f0293da0779f 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -115,7 +115,6 @@ const defaultOnFormatAmount = (amount: number, currency?: string) => convertToFr /** * Specialized money amount input with currency and money amount formatting. */ -<<<<<<< HEAD function MoneyRequestAmountInput( { amount = 0, @@ -146,36 +145,6 @@ function MoneyRequestAmountInput( }: MoneyRequestAmountInputProps, forwardedRef: ForwardedRef, ) { -======= -function MoneyRequestAmountInput({ - amount = 0, - currency = CONST.CURRENCY.USD, - isCurrencyPressable = true, - onCurrencyButtonPress, - onAmountChange, - prefixCharacter = '', - hideCurrencySymbol = false, - moneyRequestAmountInputRef, - disableKeyboard = true, - onFormatAmount = defaultOnFormatAmount, - formatAmountOnBlur, - maxLength, - hideFocusedState = true, - shouldKeepUserInput = false, - shouldShowBigNumberPad = false, - inputStyle, - autoGrow = true, - autoGrowExtraSpace, - contentWidth, - testID, - submitBehavior, - shouldApplyPaddingToContainer = false, - shouldUseDefaultLineHeightForPrefix = true, - shouldWrapInputInContainer = true, - forwardedRef, - ...props -}: MoneyRequestAmountInputProps) { ->>>>>>> 6ddd1784ffe (Prettier run) const textInput = useRef(null); const numberFormRef = useRef(null); const decimals = getCurrencyDecimals(currency); diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index c301cf68c2a9..e98b7c8f8502 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -29,7 +29,6 @@ import isInputAutoFilled from '@libs/isInputAutoFilled'; import variables from '@styles/variables'; import CONST from '@src/CONST'; -<<<<<<< HEAD function BaseTextInput( { label = '', @@ -84,60 +83,6 @@ function BaseTextInput( }: BaseTextInputProps, ref: ForwardedRef, ) { -======= -function BaseTextInput({ - label = '', - /** - * To be able to function as either controlled or uncontrolled component we should not - * assign a default prop value for `value` or `defaultValue` props - */ - value = undefined, - defaultValue = undefined, - placeholder = '', - errorText = '', - iconLeft = null, - icon = null, - textInputContainerStyles, - shouldApplyPaddingToContainer = true, - touchableInputWrapperStyle, - containerStyles, - inputStyle, - shouldUseFullInputHeight = false, - forceActiveLabel = false, - disableKeyboard = false, - autoGrow = false, - autoGrowExtraSpace = 0, - autoGrowMarginSide, - autoGrowHeight = false, - maxAutoGrowHeight, - hideFocusedState = false, - maxLength = undefined, - hint = '', - onInputChange = () => {}, - multiline = false, - autoCorrect = true, - prefixCharacter = '', - suffixCharacter = '', - inputID, - type = 'default', - excludedMarkdownStyles = [], - shouldShowClearButton = false, - shouldHideClearButton = true, - prefixContainerStyle = [], - prefixStyle = [], - suffixContainerStyle = [], - suffixStyle = [], - contentWidth, - loadingSpinnerStyle, - uncontrolled, - placeholderTextColor, - onClearInput, - iconContainerStyle, - shouldUseDefaultLineHeightForPrefix = true, - ref, - ...props -}: BaseTextInputProps) { ->>>>>>> 7acd72ff71c (Prettier run) const InputComponent = InputComponentMap.get(type) ?? RNTextInput; const isMarkdownEnabled = type === 'markdown'; const isAutoGrowHeightMarkdown = isMarkdownEnabled && autoGrowHeight; diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 10ac9f8ac340..0901ccf28ad4 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -32,7 +32,6 @@ import isInputAutoFilled from '@libs/isInputAutoFilled'; import variables from '@styles/variables'; import CONST from '@src/CONST'; -<<<<<<< HEAD function BaseTextInput( { label = '', @@ -86,59 +85,6 @@ function BaseTextInput( }: BaseTextInputProps, ref: ForwardedRef, ) { -======= -function BaseTextInput({ - label = '', - /** - * To be able to function as either controlled or uncontrolled component we should not - * assign a default prop value for `value` or `defaultValue` props - */ - value = undefined, - defaultValue = undefined, - placeholder = '', - errorText = '', - icon = null, - iconLeft = null, - textInputContainerStyles, - shouldApplyPaddingToContainer = true, - touchableInputWrapperStyle, - containerStyles, - inputStyle, - forceActiveLabel = false, - disableKeyboard = false, - autoGrow = false, - autoGrowHeight = false, - maxAutoGrowHeight, - hideFocusedState = false, - maxLength = undefined, - hint = '', - onInputChange = () => {}, - multiline = false, - shouldInterceptSwipe = false, - autoCorrect = true, - prefixCharacter = '', - suffixCharacter = '', - inputID, - type = 'default', - excludedMarkdownStyles = [], - shouldShowClearButton = false, - shouldHideClearButton = true, - shouldUseDisabledStyles = true, - prefixContainerStyle = [], - prefixStyle = [], - suffixContainerStyle = [], - suffixStyle = [], - contentWidth, - loadingSpinnerStyle, - uncontrolled = false, - placeholderTextColor, - onClearInput, - iconContainerStyle, - shouldUseDefaultLineHeightForPrefix = true, - ref, - ...inputProps -}: BaseTextInputProps) { ->>>>>>> 7acd72ff71c (Prettier run) const InputComponent = InputComponentMap.get(type) ?? RNTextInput; const isMarkdownEnabled = type === 'markdown'; const isAutoGrowHeightMarkdown = isMarkdownEnabled && autoGrowHeight; From 6779253dcbcc893fa11fbc6f1f95c1d7cbb67b8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 20 Aug 2025 11:27:00 +0200 Subject: [PATCH 25/28] Resolved more merge conflicts after rebase --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index e98b7c8f8502..7450c7dfc143 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -376,12 +376,7 @@ function BaseTextInput( ref.current = baseTextInputRef; } -<<<<<<< HEAD input.current = element; -======= - const elementRef = element as AnimatedTextInputRef | AnimatedMarkdownTextInputRef | null; - input.current = elementRef; ->>>>>>> 7acd72ff71c (Prettier run) }} // eslint-disable-next-line {...inputProps} From 7d42e3d3cb3c3c7912690bef49492bba06df82cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 20 Aug 2025 11:29:37 +0200 Subject: [PATCH 26/28] Revert changes in FOrmProvider.tsx --- src/components/Form/FormProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 07768e4d9011..4eaf7d3a5348 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -314,7 +314,7 @@ function FormProvider( const registerInput = useCallback( (inputID, shouldSubmitForm, inputProps) => { - const newRef: RefObject = inputRefs.current[inputID] ?? inputProps.ref ?? createRef(); + const newRef: MutableRefObject = inputRefs.current[inputID] ?? inputProps.ref ?? createRef(); if (inputRefs.current[inputID] !== newRef) { inputRefs.current[inputID] = newRef; } From fbb774ba4bdc281425d1da2da77f006b69f97569 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Wed, 20 Aug 2025 12:26:48 +0200 Subject: [PATCH 27/28] Resolved eslint errors --- src/components/TextInput/BaseTextInput/types.ts | 1 - src/pages/PrivateNotes/PrivateNotesEditPage.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 6e1a7b48c3c8..b29a70b8eab4 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -1,5 +1,4 @@ import type {MarkdownRange, MarkdownStyle} from '@expensify/react-native-live-markdown'; -import type {ForwardedRef} from 'react'; import type {GestureResponderEvent, StyleProp, TextInputProps, TextStyle, ViewStyle} from 'react-native'; import type {MaskedTextInputOwnProps} from 'react-native-advanced-input-mask/lib/typescript/src/types'; import type {AnimatedTextInputRef} from '@components/RNTextInput'; diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx index 5c6e68b9fa8b..cdd753646af7 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx @@ -167,7 +167,7 @@ function PrivateNotesEditPage({route, report, accountID}: PrivateNotesEditPagePr debouncedSavePrivateNote(text); setPrivateNote(text); }} - ref={(el: AnimatedTextInputRef) => { + ref={(el: AnimatedTextInputRef | null) => { if (!el) { return; } From 8d35fac719b18111e9c6dda5678b4cda7f82002a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= Date: Thu, 21 Aug 2025 11:01:06 +0200 Subject: [PATCH 28/28] Prettier run --- src/components/MenuItem.tsx | 226 ++++++++++++++++++------------------ 1 file changed, 112 insertions(+), 114 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index d6517763582e..c5f440565cfb 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -395,120 +395,118 @@ const getSubscriptAvatarBackgroundColor = (isHovered: boolean, isPressed: boolea return hoveredBackgroundColor; } }; -function MenuItem( - { - interactive = true, - onPress, - badgeText, - style, - wrapperStyle, - titleWrapperStyle, - outerWrapperStyle, - containerStyle, - titleStyle, - labelStyle, - descriptionTextStyle, - badgeStyle, - viewMode = CONST.OPTION_MODE.DEFAULT, - numberOfLinesTitle = 1, - numberOfLinesDescription = 2, - icon, - iconFill, - secondaryIcon, - secondaryIconFill, - iconType = CONST.ICON_TYPE_ICON, - isSecondaryIconHoverable = false, - iconWidth, - iconHeight, - iconStyles, - fallbackIcon = Expensicons.FallbackAvatar, - shouldShowTitleIcon = false, - titleIcon, - rightIconAccountID, - iconAccountID, - shouldShowRightIcon = false, - iconRight = Expensicons.ArrowRight, - furtherDetailsIcon, - furtherDetails, - furtherDetailsNumberOfLines = 2, - furtherDetailsStyle, - furtherDetailsComponent, - description, - helperText, - helperTextStyle, - errorText, - errorTextStyle, - shouldShowRedDotIndicator, - hintText, - success = false, - iconReportID, - focused = false, - disabled = false, - title, - titleComponent, - titleContainerStyle, - subtitle, - shouldShowBasicTitle, - label, - shouldTruncateTitle = false, - characterLimit = 200, - isLabelHoverable = true, - rightLabel, - shouldShowSelectedState = false, - isSelected = false, - shouldStackHorizontally = false, - shouldShowDescriptionOnTop = false, - shouldShowRightComponent = false, - rightComponent, - rightIconReportID, - avatarSize = CONST.AVATAR_SIZE.DEFAULT, - isSmallAvatarSubscriptMenu = false, - brickRoadIndicator, - shouldRenderAsHTML = false, - shouldEscapeText = undefined, - shouldGreyOutWhenDisabled = true, - shouldRemoveBackground = false, - shouldRemoveHoverBackground = false, - shouldUseDefaultCursorWhenDisabled = false, - shouldShowLoadingSpinnerIcon = false, - isAnonymousAction = false, - shouldBlockSelection = false, - shouldParseTitle = false, - shouldParseHelperText = false, - shouldRenderHintAsHTML = false, - shouldRenderErrorAsHTML = false, - excludedMarkdownRules = [], - shouldCheckActionAllowedOnPress = true, - onSecondaryInteraction, - titleWithTooltips, - displayInDefaultIconColor = false, - contentFit = 'cover', - isPaneMenu = true, - shouldPutLeftPaddingWhenNoIcon = false, - onFocus, - onBlur, - avatarID, - shouldRenderTooltip = false, - shouldHideOnScroll = false, - tooltipAnchorAlignment, - tooltipWrapperStyle = {}, - tooltipShiftHorizontal = 0, - tooltipShiftVertical = 0, - renderTooltipContent, - onEducationTooltipPress, - additionalIconStyles, - shouldShowSelectedItemCheck = false, - shouldIconUseAutoWidthStyle = false, - shouldBreakWord = false, - pressableTestID, - shouldTeleportPortalToModalLayer, - plaidUrl, - copyValue = title, - copyable = false, - hasSubMenuItems = false, - ref, - }: MenuItemProps, -) { +function MenuItem({ + interactive = true, + onPress, + badgeText, + style, + wrapperStyle, + titleWrapperStyle, + outerWrapperStyle, + containerStyle, + titleStyle, + labelStyle, + descriptionTextStyle, + badgeStyle, + viewMode = CONST.OPTION_MODE.DEFAULT, + numberOfLinesTitle = 1, + numberOfLinesDescription = 2, + icon, + iconFill, + secondaryIcon, + secondaryIconFill, + iconType = CONST.ICON_TYPE_ICON, + isSecondaryIconHoverable = false, + iconWidth, + iconHeight, + iconStyles, + fallbackIcon = Expensicons.FallbackAvatar, + shouldShowTitleIcon = false, + titleIcon, + rightIconAccountID, + iconAccountID, + shouldShowRightIcon = false, + iconRight = Expensicons.ArrowRight, + furtherDetailsIcon, + furtherDetails, + furtherDetailsNumberOfLines = 2, + furtherDetailsStyle, + furtherDetailsComponent, + description, + helperText, + helperTextStyle, + errorText, + errorTextStyle, + shouldShowRedDotIndicator, + hintText, + success = false, + iconReportID, + focused = false, + disabled = false, + title, + titleComponent, + titleContainerStyle, + subtitle, + shouldShowBasicTitle, + label, + shouldTruncateTitle = false, + characterLimit = 200, + isLabelHoverable = true, + rightLabel, + shouldShowSelectedState = false, + isSelected = false, + shouldStackHorizontally = false, + shouldShowDescriptionOnTop = false, + shouldShowRightComponent = false, + rightComponent, + rightIconReportID, + avatarSize = CONST.AVATAR_SIZE.DEFAULT, + isSmallAvatarSubscriptMenu = false, + brickRoadIndicator, + shouldRenderAsHTML = false, + shouldEscapeText = undefined, + shouldGreyOutWhenDisabled = true, + shouldRemoveBackground = false, + shouldRemoveHoverBackground = false, + shouldUseDefaultCursorWhenDisabled = false, + shouldShowLoadingSpinnerIcon = false, + isAnonymousAction = false, + shouldBlockSelection = false, + shouldParseTitle = false, + shouldParseHelperText = false, + shouldRenderHintAsHTML = false, + shouldRenderErrorAsHTML = false, + excludedMarkdownRules = [], + shouldCheckActionAllowedOnPress = true, + onSecondaryInteraction, + titleWithTooltips, + displayInDefaultIconColor = false, + contentFit = 'cover', + isPaneMenu = true, + shouldPutLeftPaddingWhenNoIcon = false, + onFocus, + onBlur, + avatarID, + shouldRenderTooltip = false, + shouldHideOnScroll = false, + tooltipAnchorAlignment, + tooltipWrapperStyle = {}, + tooltipShiftHorizontal = 0, + tooltipShiftVertical = 0, + renderTooltipContent, + onEducationTooltipPress, + additionalIconStyles, + shouldShowSelectedItemCheck = false, + shouldIconUseAutoWidthStyle = false, + shouldBreakWord = false, + pressableTestID, + shouldTeleportPortalToModalLayer, + plaidUrl, + copyValue = title, + copyable = false, + hasSubMenuItems = false, + ref, +}: MenuItemProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils();