fix(react): wrap Tooltip.Content with forwardRef

jonambas · Jun 1, 2024 · e7ef5cc · e7ef5cc
1 parent 391d8a3
commit e7ef5cc
Showing 1 changed file with 44 additions and 33 deletions.
diff --git a/packages/react/src/tooltip/tooltip.tsx b/packages/react/src/tooltip/tooltip.tsx
@@ -4,6 +4,7 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
 import {
   createContext,
   type FC,
+  forwardRef,
   type PropsWithChildren,
   useContext,
   useState,
@@ -60,41 +61,51 @@ export interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
   hideArrow?: boolean;
 }
 
-const Content: FC<TooltipContentProps> = (props) => {
-  const { children, hideArrow = false, size = 'md', ...rest } = props;
-  const context = useContext(TooltipContext);
+const Content = forwardRef<HTMLDivElement, TooltipContentProps>(
+  (props, userRef) => {
+    const { children, hideArrow = false, size = 'md', ...rest } = props;
+    const context = useContext(TooltipContext);
 
-  return (
-    <AnimatePresence>
-      {context.open ?
-        <RadixTooltip.Content arrowPadding={3} {...rest} asChild aria-hidden>
-          <motion.div
-            transition={{ duration: 0.1, ease: 'easeInOut' }}
-            initial={{
-              opacity: 0,
-              transform: 'scale(0.9)',
-            }}
-            animate={{
-              opacity: 1,
-              transform: 'scale(1)',
-            }}
+    return (
+      <AnimatePresence>
+        {context.open ?
+          <RadixTooltip.Content
+            arrowPadding={3}
+            {...rest}
+            asChild
+            aria-hidden
+            ref={userRef}
           >
-            {!hideArrow ?
-              <RadixTooltip.Arrow
-                width={10}
-                height={3}
-                className={css({
-                  fill: { base: 'gray12', _dark: 'white' },
-                })}
-              />
-            : null}
-            <div className={contentStyles({ size, hideArrow })}>{children}</div>
-          </motion.div>
-        </RadixTooltip.Content>
-      : null}
-    </AnimatePresence>
-  );
-};
+            <motion.div
+              transition={{ duration: 0.1, ease: 'easeInOut' }}
+              initial={{
+                opacity: 0,
+                transform: 'scale(0.9)',
+              }}
+              animate={{
+                opacity: 1,
+                transform: 'scale(1)',
+              }}
+            >
+              {!hideArrow ?
+                <RadixTooltip.Arrow
+                  width={10}
+                  height={3}
+                  className={css({
+                    fill: { base: 'gray12', _dark: 'white' },
+                  })}
+                />
+              : null}
+              <div className={contentStyles({ size, hideArrow })}>
+                {children}
+              </div>
+            </motion.div>
+          </RadixTooltip.Content>
+        : null}
+      </AnimatePresence>
+    );
+  },
+);
 
 const Root: FC<RadixTooltip.TooltipProps> = (props) => {
   const {