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

Jakubkalinski0/fix console errors related to forward ref batch1

Author: mountiny

src/components/BaseMiniContextMenuItem.tsx

@@ -1,4 +1,3 @@
-import type {ForwardedRef} from 'react';
 import React from 'react';
 import type {PressableStateCallbackType} from 'react-native';
 import {View} from 'react-native';
@@ -9,6 +8,7 @@ import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type {PressableRef} from './Pressable/GenericPressable/types';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Tooltip from './Tooltip/PopoverAnchorTooltip';
 
@@ -36,16 +36,18 @@ type BaseMiniContextMenuItemProps = {
      * Can be used to control the click event, and for example whether or not to lose focus from the composer when pressing the item
      */
     shouldPreventDefaultFocusOnPress?: boolean;
+
+    /**
+     * Reference to the outer element
+     */
+    ref?: PressableRef;
 };
 
 /**
  * Component that renders a mini context menu item with a
  * pressable. Also renders a tooltip when hovering the item.
  */
-function BaseMiniContextMenuItem(
-    {tooltipText, onPress, children, isDelayButtonStateComplete = true, shouldPreventDefaultFocusOnPress = true}: BaseMiniContextMenuItemProps,
-    ref: ForwardedRef<View>,
-) {
+function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonStateComplete = true, shouldPreventDefaultFocusOnPress = true, ref}: BaseMiniContextMenuItemProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     return (
@@ -95,4 +97,4 @@ function BaseMiniContextMenuItem(
 
 BaseMiniContextMenuItem.displayName = 'BaseMiniContextMenuItem';
 
-export default React.forwardRef(BaseMiniContextMenuItem);
+export default BaseMiniContextMenuItem;

src/components/Button/index.tsx

@@ -5,6 +5,7 @@ import type {GestureResponderEvent, LayoutChangeEvent, StyleProp, TextStyle, Vie
 import {ActivityIndicator, StyleSheet, View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import type {PressableRef} from '@components/Pressable/GenericPressable/types';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
@@ -161,6 +162,11 @@ type ButtonProps = Partial<ChildrenProps> & {
      * This is needed for buttons that allow content to display under them.
      */
     shouldBlendOpacity?: boolean;
+
+    /**
+     * Reference to the outer element.
+     */
+    ref?: ForwardedRef<View>;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority' | 'isPressOnEnterActive'>;
@@ -209,67 +215,65 @@ function KeyboardShortcutComponent({
 
 KeyboardShortcutComponent.displayName = 'KeyboardShortcutComponent';
 
-function Button(
-    {
-        allowBubble = false,
-
-        iconRight = Expensicons.ArrowRight,
-        iconFill,
-        iconHoverFill,
-        icon = null,
-        iconStyles = [],
-        iconRightStyles = [],
-        iconWrapperStyles = [],
-        text = '',
-
-        small = false,
-        large = false,
-        medium = !small && !large,
-
-        isLoading = false,
-        isDisabled = false,
-
-        onLayout = () => {},
-        onPress = () => {},
-        onLongPress = () => {},
-        onPressIn = () => {},
-        onPressOut = () => {},
-        onMouseDown = undefined,
-
-        pressOnEnter = false,
-        enterKeyEventListenerPriority = 0,
-
-        style = [],
-        disabledStyle,
-        innerStyles = [],
-        textStyles = [],
-        textHoverStyles = [],
-
-        shouldUseDefaultHover = true,
-        hoverStyles = undefined,
-        success = false,
-        danger = false,
-
-        shouldRemoveRightBorderRadius = false,
-        shouldRemoveLeftBorderRadius = false,
-        shouldEnableHapticFeedback = false,
-        isLongPressDisabled = false,
-        shouldShowRightIcon = false,
-
-        id = '',
-        testID = undefined,
-        accessibilityLabel = '',
-        isSplitButton = false,
-        link = false,
-        isContentCentered = false,
-        isPressOnEnterActive,
-        isNested = false,
-        secondLineText = '',
-        shouldBlendOpacity = false,
-        ...rest
-    }: ButtonProps,
-    ref: ForwardedRef<View>,
-) {
+function Button({
+    allowBubble = false,
+
+    iconRight = Expensicons.ArrowRight,
+    iconFill,
+    iconHoverFill,
+    icon = null,
+    iconStyles = [],
+    iconRightStyles = [],
+    iconWrapperStyles = [],
+    text = '',
+
+    small = false,
+    large = false,
+    medium = !small && !large,
+
+    isLoading = false,
+    isDisabled = false,
+
+    onLayout = () => {},
+    onPress = () => {},
+    onLongPress = () => {},
+    onPressIn = () => {},
+    onPressOut = () => {},
+    onMouseDown = undefined,
+
+    pressOnEnter = false,
+    enterKeyEventListenerPriority = 0,
+
+    style = [],
+    disabledStyle,
+    innerStyles = [],
+    textStyles = [],
+    textHoverStyles = [],
+
+    shouldUseDefaultHover = true,
+    hoverStyles = undefined,
+    success = false,
+    danger = false,
+
+    shouldRemoveRightBorderRadius = false,
+    shouldRemoveLeftBorderRadius = false,
+    shouldEnableHapticFeedback = false,
+    isLongPressDisabled = false,
+    shouldShowRightIcon = false,
+
+    id = '',
+    testID = undefined,
+    accessibilityLabel = '',
+    isSplitButton = false,
+    link = false,
+    isContentCentered = false,
+    isPressOnEnterActive,
+    isNested = false,
+    secondLineText = '',
+    shouldBlendOpacity = false,
+    ref,
+    ...rest
+}: ButtonProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -447,7 +451,7 @@ function Button(
                 dataSet={{
                     listener: pressOnEnter ? CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey : undefined,
                 }}
-                ref={ref}
+                ref={ref as PressableRef}
                 onLayout={onLayout}
                 onPress={(event) => {
                     if (event?.type === 'click') {
@@ -517,6 +521,6 @@ function Button(
 
 Button.displayName = 'Button';
 
-export default withNavigationFallback(React.forwardRef(Button));
+export default withNavigationFallback(Button);
 
 export type {ButtonProps};

src/components/Checkbox.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef, MouseEventHandler, KeyboardEvent as ReactKeyboardEvent} from 'react';
-import React, {forwardRef} from 'react';
+import React from 'react';
 import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -9,6 +9,7 @@ import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
+import type {PressableRef} from './Pressable/GenericPressable/types';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 type CheckboxProps = Partial<ChildrenProps> & {
@@ -56,29 +57,30 @@ type CheckboxProps = Partial<ChildrenProps> & {
 
     /** Additional styles to add to checkbox wrapper */
     wrapperStyle?: StyleProp<ViewStyle>;
+
+    /** Reference to the outer element */
+    ref?: ForwardedRef<View>;
 };
 
-function Checkbox(
-    {
-        isChecked = false,
-        isIndeterminate = false,
-        hasError = false,
-        disabled = false,
-        style,
-        containerStyle,
-        children = null,
-        onMouseDown,
-        containerSize = 20,
-        containerBorderRadius = 4,
-        caretSize = 14,
-        onPress,
-        accessibilityLabel,
-        shouldStopMouseDownPropagation,
-        shouldSelectOnPressEnter,
-        wrapperStyle,
-    }: CheckboxProps,
-    ref: ForwardedRef<View>,
-) {
+function Checkbox({
+    isChecked = false,
+    isIndeterminate = false,
+    hasError = false,
+    disabled = false,
+    style,
+    containerStyle,
+    children = null,
+    onMouseDown,
+    containerSize = 20,
+    containerBorderRadius = 4,
+    caretSize = 14,
+    onPress,
+    accessibilityLabel,
+    shouldStopMouseDownPropagation,
+    shouldSelectOnPressEnter,
+    wrapperStyle,
+    ref,
+}: CheckboxProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -117,7 +119,7 @@ function Checkbox(
                 }
                 onMouseDown?.(e);
             }}
-            ref={ref}
+            ref={ref as PressableRef}
             style={[StyleUtils.getCheckboxPressableStyle(containerBorderRadius + 2), style]} // to align outline on focus, border-radius of pressable should be 2px more than Checkbox
             onKeyDown={handleSpaceOrEnterKey}
             role={CONST.ROLE.CHECKBOX}
@@ -157,6 +159,6 @@ function Checkbox(
 
 Checkbox.displayName = 'Checkbox';
 
-export default forwardRef(Checkbox);
+export default Checkbox;
 
 export type {CheckboxProps};

src/components/FormElement/index.native.tsx

@@ -1,9 +1,8 @@
-import type {ForwardedRef} from 'react';
-import React, {forwardRef} from 'react';
-import type {ViewProps} from 'react-native';
+import React from 'react';
 import {View} from 'react-native';
+import type {FormElementProps} from './index';
 
-function FormElement(props: ViewProps, ref: ForwardedRef<View>) {
+function FormElement({ref, ...props}: FormElementProps) {
     return (
         <View
             ref={ref}
@@ -15,4 +14,4 @@ function FormElement(props: ViewProps, ref: ForwardedRef<View>) {
 
 FormElement.displayName = 'FormElement';
 
-export default forwardRef(FormElement);
+export default FormElement;

src/components/FormElement/index.tsx

@@ -1,20 +1,24 @@
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useEffect, useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import type {ViewProps} from 'react-native';
 import {View} from 'react-native';
-import * as ComponentUtils from '@libs/ComponentUtils';
+import {ACCESSIBILITY_ROLE_FORM} from '@libs/ComponentUtils/index';
 import mergeRefs from '@libs/mergeRefs';
 
+type FormElementProps = ViewProps & {
+    ref?: ForwardedRef<View>;
+};
+
 const preventFormDefault = (event: SubmitEvent) => {
     // When Enter is pressed, the form is submitted to the action URL (POST /).
     // As we are using a controlled component, we need to disable this behavior here.
     event.preventDefault();
 };
 
-function FormElement(props: ViewProps, outerRef: ForwardedRef<View>) {
+function FormElement({ref, ...props}: FormElementProps) {
     const formRef = useRef<HTMLFormElement & View>(null);
     // eslint-disable-next-line react-compiler/react-compiler
-    const mergedRef = mergeRefs(formRef, outerRef);
+    const mergedRef = mergeRefs(formRef, ref);
 
     useEffect(() => {
         const formCurrent = formRef.current;
@@ -38,7 +42,7 @@ function FormElement(props: ViewProps, outerRef: ForwardedRef<View>) {
 
     return (
         <View
-            role={ComponentUtils.ACCESSIBILITY_ROLE_FORM}
+            role={ACCESSIBILITY_ROLE_FORM}
             ref={mergedRef}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
@@ -48,4 +52,6 @@ function FormElement(props: ViewProps, outerRef: ForwardedRef<View>) {
 
 FormElement.displayName = 'FormElement';
 
-export default forwardRef(FormElement);
+export default FormElement;
+
+export type {FormElementProps};

src/components/Hoverable/ActiveHoverable.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react-compiler/react-compiler */
-import type {Ref} from 'react';
-import {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {cloneElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {DeviceEventEmitter} from 'react-native';
 import useOnyx from '@hooks/useOnyx';
 import usePrevious from '@hooks/usePrevious';
@@ -16,7 +15,7 @@ type MouseEvents = 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove';
 
 type OnMouseEvents = Record<MouseEvents, (e: React.MouseEvent) => void>;
 
-function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreezeCapture, children}: ActiveHoverableProps, outerRef: Ref<HTMLElement>) {
+function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreezeCapture, children, ref}: ActiveHoverableProps) {
     const [isHovered, setIsHovered] = useState(false);
     const elementRef = useRef<HTMLElement | null>(null);
     const isScrollingRef = useRef(false);
@@ -111,7 +110,7 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
     const {onMouseEnter, onMouseLeave} = child.props as OnMouseEvents;
 
     return cloneElement(child, {
-        ref: mergeRefs(elementRef, outerRef, child.ref),
+        ref: mergeRefs(elementRef, ref, child.props.ref),
         onMouseEnter: (e: React.MouseEvent) => {
             handleMouseEvents('enter')();
             onMouseEnter?.(e);
@@ -123,4 +122,4 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
     } as React.HTMLAttributes<HTMLElement>);
 }
 
-export default forwardRef(ActiveHoverable);
+export default ActiveHoverable;