From 116490eadff06f3f29bf02787dd8b020c0c8916b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= <kacpermikolajczak10@gmail.com>
Date: Mon, 8 Jan 2024 13:45:59 +0100
Subject: [PATCH] fix Tooltip children typings

---
 src/components/Tooltip/BaseTooltip/index.tsx | 39 ++++++++++++--------
 src/components/Tooltip/types.ts              |  8 ++--
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/Tooltip/BaseTooltip/index.tsx b/src/components/Tooltip/BaseTooltip/index.tsx
index 48d57a4ccd4a..2adde759b847 100644
--- 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
index 253013f49761..739e9a4d0a22 100644
--- 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;