Feature: Tooltip for QAB

src/components/Popover/index.tsx

@@ -4,6 +4,7 @@ import Modal from '@components/Modal';
 import {PopoverContext} from '@components/PopoverProvider';
 import PopoverWithoutOverlay from '@components/PopoverWithoutOverlay';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import TooltipRefManager from '@libs/TooltipRefManager';
 import CONST from '@src/CONST';
 import type {PopoverProps} from './types';
 
@@ -52,6 +53,7 @@ function Popover(props: PopoverProps) {
         if (popover && 'current' in anchorRef) {
             close(anchorRef);
         }
+        TooltipRefManager.hideTooltip();
         onClose();
     };
 

src/components/PopoverMenu.tsx

@@ -242,6 +242,10 @@ function PopoverMenu({
                             onFocus={() => setFocusedIndex(menuIndex)}
                             success={item.success}
                             containerStyle={item.containerStyle}
+                            shouldRenderTooltip={item.shouldRenderTooltip}
+                            shouldForceRenderingTooltipLeft={item.shouldForceRenderingTooltipLeft}
+                            tooltipWrapperStyle={item.tooltipWrapperStyle}
+                            renderTooltipContent={item.renderTooltipContent}
                         />
                     ))}
                 </View>

src/components/Tooltip/BaseGenericTooltip/index.native.tsx

@@ -0,0 +1,132 @@
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {Animated, View} from 'react-native';
+// eslint-disable-next-line no-restricted-imports
+import type {Text as RNText, View as RNView} from 'react-native';
+import Text from '@components/Text';
+import useStyleUtils from '@hooks/useStyleUtils';
+import type {BaseGenericTooltipProps} from './types';
+
+// Props will change frequently.
+// On every tooltip hover, we update the position in state which will result in re-rendering.
+// We also update the state on layout changes which will be triggered often.
+// There will be n number of tooltip components in the page.
+// It's good to memoize this one.
+function BaseGenericTooltip({
+    animation,
+    windowWidth,
+    xOffset,
+    yOffset,
+    targetWidth,
+    targetHeight,
+    shiftHorizontal = 0,
+    shiftVertical = 0,
+    text,
+    numberOfLines,
+    maxWidth = 0,
+    renderTooltipContent,
+    shouldForceRenderingBelow = false,
+    shouldForceRenderingLeft = false,
+    wrapperStyle = {},
+}: BaseGenericTooltipProps) {
+    // The width of tooltip's inner content. Has to be undefined in the beginning
+    // as a width of 0 will cause the content to be rendered of a width of 0,
+    // which prevents us from measuring it correctly.
+    const [contentMeasuredWidth, setContentMeasuredWidth] = useState<number>();
+
+    // The height of tooltip's wrapper.
+    const [wrapperMeasuredHeight, setWrapperMeasuredHeight] = useState<number>();
+    const textContentRef = useRef<RNText>(null);
+    const viewContentRef = useRef<RNView>(null);
+    const rootWrapper = useRef<RNView>(null);
+
+    const StyleUtils = useStyleUtils();
+
+    // Measure content width
+    useEffect(() => {
+        if (!textContentRef.current && !viewContentRef.current) {
+            return;
+        }
+        const contentRef = viewContentRef.current ?? textContentRef.current;
+        contentRef?.measure((x, y, width) => setContentMeasuredWidth(width));
+    }, []);
+
+    const {animationStyle, rootWrapperStyle, textStyle, pointerWrapperStyle, pointerStyle} = useMemo(
+        () =>
+            StyleUtils.getTooltipStyles({
+                tooltip: rootWrapper.current,
+                currentSize: animation,
+                windowWidth,
+                xOffset,
+                yOffset,
+                tooltipTargetWidth: targetWidth,
+                tooltipTargetHeight: targetHeight,
+                maxWidth,
+                tooltipContentWidth: contentMeasuredWidth,
+                tooltipWrapperHeight: wrapperMeasuredHeight,
+                manualShiftHorizontal: shiftHorizontal,
+                manualShiftVertical: shiftVertical,
+                shouldForceRenderingBelow,
+                shouldForceRenderingLeft,
+                wrapperStyle,
+            }),
+        [
+            StyleUtils,
+            animation,
+            windowWidth,
+            xOffset,
+            yOffset,
+            targetWidth,
+            targetHeight,
+            maxWidth,
+            contentMeasuredWidth,
+            wrapperMeasuredHeight,
+            shiftHorizontal,
+            shiftVertical,
+            shouldForceRenderingBelow,
+            shouldForceRenderingLeft,
+            wrapperStyle,
+        ],
+    );
+
+    let content;
+    if (renderTooltipContent) {
+        content = <View ref={viewContentRef}>{renderTooltipContent()}</View>;
+    } else {
+        content = (
+            <Text
+                numberOfLines={numberOfLines}
+                style={textStyle}
+            >
+                <Text
+                    style={textStyle}
+                    ref={textContentRef}
+                >
+                    {text}
+                </Text>
+            </Text>
+        );
+    }
+
+    return (
+        <Animated.View
+            ref={rootWrapper}
+            style={[rootWrapperStyle, animationStyle]}
+            onLayout={(e) => {
+                const {height} = e.nativeEvent.layout;
+                if (height === wrapperMeasuredHeight) {
+                    return;
+                }
+                setWrapperMeasuredHeight(height);
+            }}
+        >
+            {content}
+            <View style={pointerWrapperStyle}>
+                <View style={pointerStyle} />
+            </View>
+        </Animated.View>
+    );
+}
+
+BaseGenericTooltip.displayName = 'BaseGenericTooltip';
+
+export default React.memo(BaseGenericTooltip);

src/components/Tooltip/TooltipRenderedOnPageBody.tsx → src/components/Tooltip/BaseGenericTooltip/index.tsx

@@ -1,47 +1,18 @@
-import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import React, {useLayoutEffect, useMemo, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
 import {Animated, View} from 'react-native';
 import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
-import Log from '@libs/Log';
 import textRef from '@src/types/utils/textRef';
 import viewRef from '@src/types/utils/viewRef';
-import type TooltipProps from './types';
-
-type TooltipRenderedOnPageBodyProps = {
-    /** Window width */
-    windowWidth: number;
-
-    /** Tooltip Animation value */
-    animation: Animated.Value;
-
-    /** The distance between the left side of the wrapper view and the left side of the window */
-    xOffset: number;
-
-    /** The distance between the top of the wrapper view and the top of the window */
-    yOffset: number;
-
-    /** The width of the tooltip's target */
-    targetWidth: number;
-
-    /** The height of the tooltip's target */
-    targetHeight: number;
-
-    /** Any additional amount to manually adjust the horizontal position of the tooltip.
-    A positive value shifts the tooltip to the right, and a negative value shifts it to the left. */
-    shiftHorizontal?: number;
-
-    /** Any additional amount to manually adjust the vertical position of the tooltip.
-    A positive value shifts the tooltip down, and a negative value shifts it up. */
-    shiftVertical?: number;
-} & Pick<TooltipProps, 'renderTooltipContent' | 'maxWidth' | 'numberOfLines' | 'text' | 'shouldForceRenderingBelow'>;
+import type {BaseGenericTooltipProps} from './types';
 
 // Props will change frequently.
 // On every tooltip hover, we update the position in state which will result in re-rendering.
 // We also update the state on layout changes which will be triggered often.
 // There will be n number of tooltip components in the page.
 // It's good to memoize this one.
-function TooltipRenderedOnPageBody({
+function BaseGenericTooltip({
     animation,
     windowWidth,
     xOffset,
@@ -55,7 +26,9 @@ function TooltipRenderedOnPageBody({
     maxWidth = 0,
     renderTooltipContent,
     shouldForceRenderingBelow = false,
-}: TooltipRenderedOnPageBodyProps) {
+    wrapperStyle = {},
+    shouldForceRenderingLeft = false,
+}: BaseGenericTooltipProps) {
     // The width of tooltip's inner content. Has to be undefined in the beginning
     // as a width of 0 will cause the content to be rendered of a width of 0,
     // which prevents us from measuring it correctly.
@@ -67,13 +40,6 @@ function TooltipRenderedOnPageBody({
 
     const StyleUtils = useStyleUtils();
 
-    useEffect(() => {
-        if (!renderTooltipContent || !text) {
-            return;
-        }
-        Log.warn('Developer error: Cannot use both text and renderTooltipContent props at the same time in <TooltipRenderedOnPageBody />!');
-    }, [text, renderTooltipContent]);
-
     useLayoutEffect(() => {
         // Calculate the tooltip width and height before the browser repaints the screen to prevent flicker
         // because of the late update of the width and the height from onLayout.
@@ -97,6 +63,8 @@ function TooltipRenderedOnPageBody({
                 manualShiftHorizontal: shiftHorizontal,
                 manualShiftVertical: shiftVertical,
                 shouldForceRenderingBelow,
+                shouldForceRenderingLeft,
+                wrapperStyle,
             }),
         [
             StyleUtils,
@@ -112,6 +80,8 @@ function TooltipRenderedOnPageBody({
             shiftHorizontal,
             shiftVertical,
             shouldForceRenderingBelow,
+            shouldForceRenderingLeft,
+            wrapperStyle,
         ],
     );
 
@@ -154,6 +124,6 @@ function TooltipRenderedOnPageBody({
     );
 }
 
-TooltipRenderedOnPageBody.displayName = 'TooltipRenderedOnPageBody';
+BaseGenericTooltip.displayName = 'BaseGenericTooltip';
 
-export default React.memo(TooltipRenderedOnPageBody);
+export default React.memo(BaseGenericTooltip);

src/components/Tooltip/BaseGenericTooltip/types.ts

@@ -0,0 +1,33 @@
+import type {Animated} from 'react-native';
+import type TooltipProps from '@components/Tooltip/types';
+
+type BaseGenericTooltipProps = {
+    /** Window width */
+    windowWidth: number;
+
+    /** Tooltip Animation value */
+    animation: Animated.Value;
+
+    /** The distance between the left side of the wrapper view and the left side of the window */
+    xOffset: number;
+
+    /** The distance between the top of the wrapper view and the top of the window */
+    yOffset: number;
+
+    /** The width of the tooltip's target */
+    targetWidth: number;
+
+    /** The height of the tooltip's target */
+    targetHeight: number;
+
+    /** Any additional amount to manually adjust the horizontal position of the tooltip.
+    A positive value shifts the tooltip to the right, and a negative value shifts it to the left. */
+    shiftHorizontal?: number;
+
+    /** Any additional amount to manually adjust the vertical position of the tooltip.
+    A positive value shifts the tooltip down, and a negative value shifts it up. */
+    shiftVertical?: number;
+} & Pick<TooltipProps, 'renderTooltipContent' | 'maxWidth' | 'numberOfLines' | 'text' | 'shouldForceRenderingBelow' | 'wrapperStyle' | 'shouldForceRenderingLeft'>;
+
+// eslint-disable-next-line import/prefer-default-export
+export type {BaseGenericTooltipProps};