@dust-tt/sparkle 0.2.244-rc → 0.2.244-rc-alb

package/dist/cjs/index.js

@@ -40400,12 +40400,11 @@ function Tooltip(_a) {
     var _c = __read(React.useState(false), 2), isHovered = _c[0], setIsHovered = _c[1];
     var _d = __read(React.useState(null), 2), timerId = _d[0], setTimerId = _d[1];
     var _e = __read(React.useState(false), 2), isTouchDevice = _e[0], setIsTouchDevice = _e[1];
-    var _f = __read(React.useState({ top: 0, left: 0 }), 2), tooltipPosition = _f[0], setTooltipPosition = _f[1];
     var triggerRef = React.useRef(null);
+    var tooltipRef = React.useRef(null);
     var handleMouseOver = function () {
         var id = window.setTimeout(function () {
             setIsHovered(true);
-            updateTooltipPosition();
         }, 600);
         setTimerId(id);
     };
@@ -40415,15 +40414,6 @@ function Tooltip(_a) {
         }
         setIsHovered(false);
     };
-    var updateTooltipPosition = function () {
-        if (triggerRef.current) {
-            var rect = triggerRef.current.getBoundingClientRect();
-            setTooltipPosition({
-                top: position === "above" ? rect.top - 10 : rect.bottom + 10,
-                left: rect.left + rect.width / 2,
-            });
-        }
-    };
     React.useEffect(function () {
         setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
         return function () {
@@ -40433,13 +40423,30 @@ function Tooltip(_a) {
         };
     }, [timerId]);
     React.useEffect(function () {
-        window.addEventListener("scroll", updateTooltipPosition);
-        window.addEventListener("resize", updateTooltipPosition);
-        return function () {
-            window.removeEventListener("scroll", updateTooltipPosition);
-            window.removeEventListener("resize", updateTooltipPosition);
-        };
-    }, []);
+        if (isHovered && triggerRef.current && tooltipRef.current) {
+            var triggerRect = triggerRef.current.getBoundingClientRect();
+            var tooltipRect = tooltipRef.current.getBoundingClientRect();
+            var top_1 = position === "above"
+                ? triggerRect.top - tooltipRect.height - 10
+                : triggerRect.bottom + 10;
+            var left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+            // Adjust if tooltip goes off-screen
+            if (left < 0) {
+                left = 0;
+            }
+            if (left + tooltipRect.width > window.innerWidth) {
+                left = window.innerWidth - tooltipRect.width;
+            }
+            if (top_1 < 0) {
+                top_1 = triggerRect.bottom + 10; // Switch to below if above doesn't fit
+            }
+            if (top_1 + tooltipRect.height > window.innerHeight) {
+                top_1 = triggerRect.top - tooltipRect.height - 10; // Switch to above if below doesn't fit
+            }
+            tooltipRef.current.style.top = "".concat(top_1, "px");
+            tooltipRef.current.style.left = "".concat(left, "px");
+        }
+    }, [isHovered, position]);
     if (isTouchDevice) {
         return React.createElement(React.Fragment, null, children);
     }
@@ -40447,15 +40454,11 @@ function Tooltip(_a) {
     var hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none";
     var visibleClasses = "-s-translate-y-0 s-opacity-100";
     var hiddenOnMobileClasses = "s-hidden sm:s-block";
-    var tooltipCenterClasses = "-s-translate-x-1/2";
     var labelLength = (label === null || label === void 0 ? void 0 : label.length) || 0;
     var labelClasses = labelLength > 80 ? "s-w-[38em]" : "s-whitespace-nowrap";
     return (React.createElement("div", { ref: triggerRef, onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
         children,
-        React.createElement("div", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, hiddenOnMobileClasses, tooltipCenterClasses, contentChildren ? "" : labelClasses), style: {
-                top: "".concat(tooltipPosition.top, "px"),
-                left: "".concat(tooltipPosition.left, "px"),
-            }, onAnimationEnd: function () { return setIsHovered(false); } }, contentChildren || label)));
+        React.createElement("div", { ref: tooltipRef, className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, hiddenOnMobileClasses, contentChildren ? "" : labelClasses), style: { position: "fixed", top: 0, left: 0 }, onAnimationEnd: function () { return setIsHovered(false); } }, contentChildren || label)));
 }
 
 var textClasses = {