remove forward ref

software-mansion-labs · Dec 6, 2023 · 461a428 · 461a428
1 parent 1348cb8
commit 461a428
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/src/components/Tooltip/BaseTooltip/index.tsx b/src/components/Tooltip/BaseTooltip/index.tsx
@@ -1,5 +1,5 @@
 import {BoundsObserver} from '@react-ng/bounds-observer';
-import React, {ForwardedRef, forwardRef, memo, useCallback, useEffect, useRef, useState} from 'react';
+import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
 import {Animated} from 'react-native';
 import Hoverable from '@components/Hoverable';
 import TooltipRenderedOnPageBody from '@components/Tooltip/TooltipRenderedOnPageBody';
@@ -55,20 +55,18 @@ function chooseBoundingBox(target: HTMLElement, clientX: number, clientY: number
     return target.getBoundingClientRect();
 }
 
-function Tooltip(
-    {
-        children,
-        numberOfLines = CONST.TOOLTIP_MAX_LINES,
-        maxWidth = variables.sideBarWidth,
-        text = '',
-        renderTooltipContent,
-        renderTooltipContentKey = [],
-        shouldHandleScroll = false,
-        shiftHorizontal = 0,
-        shiftVertical = 0,
-    }: TooltipProps,
-    ref: ForwardedRef<BoundsObserver>,
-) {
+function Tooltip({
+    children,
+    numberOfLines = CONST.TOOLTIP_MAX_LINES,
+    maxWidth = variables.sideBarWidth,
+    text = '',
+    renderTooltipContent,
+    renderTooltipContentKey = [],
+    shouldHandleScroll = false,
+    shiftHorizontal = 0,
+    shiftVertical = 0,
+    tooltipRef,
+}: TooltipProps) {
     const {preferredLocale} = useLocalize();
     const {windowWidth} = useWindowDimensions();
 
@@ -214,7 +212,7 @@ function Tooltip(
             <BoundsObserver
                 enabled={isVisible}
                 onBoundsChange={updateBounds}
-                ref={ref}
+                ref={tooltipRef}
             >
                 <Hoverable
                     onMouseEnter={updateTargetAndMousePosition}
@@ -231,4 +229,4 @@ function Tooltip(
 
 Tooltip.displayName = 'Tooltip';
 
-export default memo(forwardRef(Tooltip));
+export default memo(Tooltip);
diff --git a/src/components/Tooltip/PopoverAnchorTooltip.tsx b/src/components/Tooltip/PopoverAnchorTooltip.tsx
@@ -26,7 +26,7 @@ function PopoverAnchorTooltip({shouldRender = true, children, ...props}: Tooltip
         <BaseTooltip
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            ref={tooltipRef}
+            tooltipRef={tooltipRef}
         >
             {children}
         </BaseTooltip>

diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
@@ -1,4 +1,5 @@
-import {ReactElement, ReactNode} from 'react';
+import {BoundsObserver} from '@react-ng/bounds-observer';
+import {ReactElement, ReactNode, RefObject} from 'react';
 
 type TooltipProps = {
     /** The text to display in the tooltip. If text is ommitted, only children will be rendered. */
@@ -29,6 +30,9 @@ type TooltipProps = {
 
     /** passes this down to Hoverable component to decide whether to handle the scroll behaviour to show hover once the scroll ends */
     shouldHandleScroll?: boolean;
+
+    /** Reference to the tooltip container */
+    tooltipRef?: RefObject<BoundsObserver> | null;
 };
 
 type TooltipExtendedProps = TooltipProps & {