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

package/dist/cjs/index.js

@@ -40400,8 +40400,6 @@ 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);
@@ -40422,43 +40420,21 @@ 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-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-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", { 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)));
+        React.createElement("div", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, hiddenOnMobileClasses, tooltipPositionClasses, tooltipCenterClasses, contentChildren ? "" : labelClasses), onAnimationEnd: function () { return setIsHovered(false); } }, contentChildren || label)));
 }
 
 var textClasses = {
@@ -103499,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 () {
@@ -129214,6 +129189,12 @@ function Tree(_a) {
             ? "s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4"
             : "") }, modifiedChildren));
 }
+var treeItemStyleClasses = {
+    base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center",
+    isNavigatableBase: "s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
+    isNavigatableUnselected: "s-border-structure-200/0 s-bg-white/0 hover:s-border-structure-200 hover:s-bg-white",
+    isNavigatableSelected: "s-border-structure-200 s-bg-white",
+};
 Tree.Item = function (_a) {
     var label = _a.label, _b = _a.type, type = _b === void 0 ? "node" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.size, size = _d === void 0 ? "sm" : _d, _e = _a.tailwindIconTextColor, tailwindIconTextColor = _e === void 0 ? "s-text-element-800" : _e, visual = _a.visual, checkbox = _a.checkbox, onChevronClick = _a.onChevronClick, collapsed = _a.collapsed, defaultCollapsed = _a.defaultCollapsed, actions = _a.actions, _f = _a.areActionsFading, areActionsFading = _f === void 0 ? true : _f, renderTreeItems = _a.renderTreeItems, children = _a.children, _g = _a.isNavigatable, isNavigatable = _g === void 0 ? false : _g, _h = _a.isSelected, isSelected = _h === void 0 ? false : _h, onItemClick = _a.onItemClick;
     var _j = __read(React.useState(defaultCollapsed !== null && defaultCollapsed !== void 0 ? defaultCollapsed : true), 2), collapsedState = _j[0], setCollapsedState = _j[1];
@@ -129229,12 +129210,6 @@ Tree.Item = function (_a) {
         return typeof renderTreeItems === "function" ? renderTreeItems() : children;
     };
     var childrenToRender = getChildren();
-    var treeItemStyleClasses = {
-        base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center",
-        isNavigatableBase: "s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
-        isNavigatableUnselected: "s-border-structure-200/0 s-bg-white/0 hover:s-border-structure-200 hover:s-bg-white",
-        isNavigatableSelected: "s-border-structure-200 s-bg-white",
-    };
     var isExpanded = childrenToRender && !effectiveCollapsed;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: classNames(className ? className : "", treeItemStyleClasses.base, onItemClick ? "s-cursor-pointer" : "", isNavigatable ? treeItemStyleClasses.isNavigatableBase : "", isNavigatable
@@ -129264,6 +129239,10 @@ Tree.Item = function (_a) {
                     : "") }, actions))),
         React.Children.count(childrenToRender) > 0 && (React.createElement("div", { className: "s-pl-2.5" }, childrenToRender))));
 };
+Tree.Empty = function (_a) {
+    var label = _a.label;
+    return React.createElement("div", { className: "s-pl-4 s-text-sm s-text-element-600" }, label);
+};
 
 function ZoomableImageCitationWrapper(_a) {
     var alt = _a.alt, imgSrc = _a.imgSrc, title = _a.title, _b = _a.size, size = _b === void 0 ? "sm" : _b;