@dust-tt/sparkle 0.2.244-rc → 0.2.244

package/dist/cjs/index.js

@@ -40400,12 +40400,9 @@ 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);
     };
@@ -40415,15 +40412,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 () {
@@ -40432,30 +40420,21 @@ 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-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 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 visibleClasses = "-s-translate-y-0 s-opacity-100";
     var hiddenOnMobileClasses = "s-hidden sm:s-block";
-    var tooltipCenterClasses = "-s-translate-x-1/2";
+    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", { ref: triggerRef, onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
+    return (React.createElement("div", { 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", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, hiddenOnMobileClasses, tooltipPositionClasses, tooltipCenterClasses, contentChildren ? "" : labelClasses), onAnimationEnd: function () { return setIsHovered(false); } }, contentChildren || label)));
 }
 
 var textClasses = {
@@ -103496,7 +103475,6 @@ function DataTable(_a) {
     })), { getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: pagination ? getPaginationRowModel() : undefined, onColumnFiltersChange: setColumnFilters, state: __assign(__assign({ columnFilters: columnFilters }, (isServerSideSorting && {
             sorting: sorting,
         })), { pagination: pagination }), initialState: {
-            pagination: pagination,
             sorting: sorting,
         }, onPaginationChange: onPaginationChange }));
     React.useEffect(function () {