fix Tooltip children typings

Expensify · Jan 8, 2024 · 116490e · 116490e
1 parent c0a3e84
commit 116490e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/src/components/Tooltip/BaseTooltip/index.tsx b/src/components/Tooltip/BaseTooltip/index.tsx
@@ -222,21 +222,30 @@ function Tooltip(
                     key={[text, ...renderTooltipContentKey, preferredLocale].join('-')}
                 />
             )}
-            <BoundsObserver
-                enabled={isVisible}
-                onBoundsChange={updateBounds}
-                ref={ref}
-            >
-                <Hoverable
-                    onHoverIn={showTooltip}
-                    onHoverOut={hideTooltip}
-                    shouldHandleScroll={shouldHandleScroll}
-                >
-                    {React.cloneElement(children, {
-                        onMouseEnter: updateTargetPositionOnMouseEnter,
-                    })}
-                </Hoverable>
-            </BoundsObserver>
+
+            {
+                // Checks if valid element so we can wrap the BoundsObserver around it
+                // If not, we just return the primitive children
+                React.isValidElement(children) ? (
+                    <BoundsObserver
+                        enabled={isVisible}
+                        onBoundsChange={updateBounds}
+                        ref={ref}
+                    >
+                        <Hoverable
+                            onHoverIn={showTooltip}
+                            onHoverOut={hideTooltip}
+                            shouldHandleScroll={shouldHandleScroll}
+                        >
+                            {React.cloneElement(children as React.ReactElement, {
+                                onMouseEnter: updateTargetPositionOnMouseEnter,
+                            })}
+                        </Hoverable>
+                    </BoundsObserver>
+                ) : (
+                    children
+                )
+            }
         </>
     );
 }

diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
@@ -1,7 +1,9 @@
-import type {ReactNode} from 'react';
-import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import type {ReactElement, ReactNode} from 'react';
+
+type TooltipProps = {
+    /** The children to render the tooltip for. On web it has to be proper HTML element to attach event handlers to. */
+    children: ReactElement<HTMLElement> | ReactNode;
 
-type TooltipProps = ChildrenProps & {
     /** The text to display in the tooltip. If text is ommitted, only children will be rendered. */
     text?: string;