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

package/dist/cjs/index.js

@@ -40400,6 +40400,8 @@ 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 triggerRef = React.useRef(null);
+    var tooltipRef = React.useRef(null);
     var handleMouseOver = function () {
         var id = window.setTimeout(function () {
             setIsHovered(true);
@@ -40420,21 +40422,43 @@ function Tooltip(_a) {
             }
         };
     }, [timerId]);
+    React.useEffect(function () {
+        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);
     }
-    var baseClasses = classNames("s-absolute s-z-10 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform", "s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark");
-    var hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none"; // Added s-pointer-events-none
+    var baseClasses = classNames("s-fixed s-z-50 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform", "s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark");
+    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-left-1/2 -s-translate-x-1/2";
-    var tooltipPositionClasses = position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
-    // if tooltip text is too long we need to wrap it
     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", { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
+    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, tooltipPositionClasses, tooltipCenterClasses, contentChildren ? "" : labelClasses), 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 = {