@dust-tt/sparkle 0.2.243 → 0.2.244-rc

package/dist/cjs/index.js

@@ -40400,9 +40400,12 @@ 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 handleMouseOver = function () {
         var id = window.setTimeout(function () {
             setIsHovered(true);
+            updateTooltipPosition();
         }, 600);
         setTimerId(id);
     };
@@ -40412,6 +40415,15 @@ 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 () {
@@ -40420,21 +40432,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 (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 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", { 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", { 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)));
 }
 
 var textClasses = {