Merge pull request Expensify#68435 from software-mansion-labs/jakubkalinski0/Fix-console-errors-related-to-forwardRef-batch2

Jakubkalinski0/fix console errors related to forward ref batch2

Author: mountiny

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<IValueType>(props: ButtonWithDropdownMenuProps<IValueType>, ref: React.Ref<ButtonWithDropdownMenuRef>) {
+function ButtonWithDropdownMenuInner<IValueType>({ref, ...props}: ButtonWithDropdownMenuProps<IValueType>) {
     const {
         success = true,
         isSplitButton = true,
@@ -319,7 +315,7 @@ function ButtonWithDropdownMenuInner<IValueType>(props: ButtonWithDropdownMenuPr
 }
 
 ButtonWithDropdownMenuInner.displayName = 'ButtonWithDropdownMenu';
-const ButtonWithDropdownMenu = forwardRef(ButtonWithDropdownMenuInner) as <IValueType>(
+const ButtonWithDropdownMenu = ButtonWithDropdownMenuInner as <IValueType>(
     props: ButtonWithDropdownMenuProps<IValueType> & {ref?: React.Ref<ButtonWithDropdownMenuRef>},
 ) => ReturnType<typeof ButtonWithDropdownMenuInner>;
 export default ButtonWithDropdownMenu;

src/components/ButtonWithDropdownMenu/types.ts

@@ -159,6 +159,13 @@ type ButtonWithDropdownMenuProps<TValueType> = {
 
     /** Whether to display the option icon when only one option is available */
     shouldUseOptionIcon?: boolean;
+
+    /** Reference to the outer element */
+    ref?: React.Ref<ButtonWithDropdownMenuRef>;
+};
+
+type ButtonWithDropdownMenuRef = {
+    setIsMenuVisible: (visible: boolean) => void;
 };
 
 export type {
@@ -171,4 +178,5 @@ export type {
     WorkspaceTaxRatesBulkActionType,
     ReportExportType,
     OnboardingHelpType,
+    ButtonWithDropdownMenuRef,
 };

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<T>({...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<FlatList<T>>) {
+function DraggableList<T>({ref, ...viewProps}: DraggableListProps<T> & {ref?: React.ForwardedRef<FlatList<T>>}) {
     const styles = useThemeStyles();
     return (
         <DraggableFlatList
@@ -20,4 +20,4 @@ function DraggableList<T>({...viewProps}: DraggableListProps<T>, ref: React.Forw
 
 DraggableList.displayName = 'DraggableList';
 
-export default React.forwardRef(DraggableList);
+export default DraggableList;

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<T>(
-    {
-        data = [],
-        renderItem,
-        keyExtractor,
-        onDragEnd: onDragEndCallback,
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        ListFooterComponent,
-    }: DraggableListProps<T>,
-    ref: React.ForwardedRef<RNScrollView>,
-) {
+function DraggableList<T>({
+    data = [],
+    renderItem,
+    keyExtractor,
+    onDragEnd: onDragEndCallback,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    ListFooterComponent,
+    ref,
+}: DraggableListProps<T> & {ref?: React.ForwardedRef<RNScrollView>}) {
     const styles = useThemeStyles();
 
     const items = data.map((item, index) => {
@@ -103,4 +101,4 @@ function DraggableList<T>(
 
 DraggableList.displayName = 'DraggableList';
 
-export default React.forwardRef(DraggableList);
+export default DraggableList;

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<HTMLDivElement | View | Text>;
 };
 
-function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabel, role, isTooltipAllowed}: FloatingActionButtonProps, ref: ForwardedRef<HTMLDivElement | View | Text>) {
+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;

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<View>;
 };
 
 export default FocusTrapContainerElementProps;

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<View>) {
+function FocusTrapContainerElement({onContainerElementChanged, ref, ...props}: FocusTrapContainerElementProps) {
     return (
         <View
             ref={(node) => {
@@ -26,4 +25,4 @@ function FocusTrapContainerElement({onContainerElementChanged, ...props}: FocusT
 
 FocusTrapContainerElement.displayName = 'FocusTrapContainerElement';
 
-export default React.forwardRef(FocusTrapContainerElement);
+export default FocusTrapContainerElement;

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<TInput extends ValidInputs, TValue extends ValueTypeKey =
          * Currently, meaningful only for text inputs.
          */
         shouldSubmitForm?: boolean;
+
+        /** Reference to the outer element */
+        ref?: ForwardedRef<AnimatedTextInputRef>;
     };
 
-function InputWrapper<TInput extends ValidInputs, TValue extends ValueTypeKey>(props: InputWrapperProps<TInput, TValue>, ref: ForwardedRef<AnimatedTextInputRef>) {
+function InputWrapper<TInput extends ValidInputs, TValue extends ValueTypeKey>({ref, ...props}: InputWrapperProps<TInput, TValue>) {
     const {InputComponent, inputID, valueType = 'string', shouldSubmitForm: propShouldSubmitForm, ...rest} = props as InputComponentBaseProps;
     const {registerInput} = useContext(FormContext);
 
@@ -91,4 +94,4 @@ function InputWrapper<TInput extends ValidInputs, TValue extends ValueTypeKey>(p
 
 InputWrapper.displayName = 'InputWrapper';
 
-export default forwardRef(InputWrapper);
+export default InputWrapper;