@dust-tt/sparkle 0.2.239 → 0.2.241

package/dist/cjs/index.js

@@ -71998,14 +71998,25 @@ function DropdownMenu(_a) {
     return (React.createElement(ButtonRefContext.Provider, { value: buttonRef },
         React.createElement(qe$1, { as: "div", className: classNames(className, "s-relative s-inline-block") }, children)));
 }
-DropdownMenu.Button = function (_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "menu" : _b, _c = _a.size, size = _c === void 0 ? "sm" : _c, tooltip = _a.tooltip, icon = _a.icon, children = _a.children, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? "above" : _d, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f;
+DropdownMenu.Button = React.forwardRef(function DropdownMenuButton(_a, forwardedRef) {
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "menu" : _b, _c = _a.size, size = _c === void 0 ? "sm" : _c, tooltip = _a.tooltip, icon = _a.icon, children = _a.children, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? "above" : _d, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, onClick = _a.onClick;
+    var contextRef = React.useContext(ButtonRefContext);
     var finalLabelClasses = classNames(labelClasses$1.base, labelSizeClasses[size], labelClasses$1.dark.base, !disabled ? labelClasses$1.active : "", !disabled ? labelClasses$1.dark.active : "", !disabled ? labelClasses$1.hover : "", !disabled ? labelClasses$1.dark.hover : "", disabled ? labelClasses$1.disabled : "");
     var finalIconClasses = classNames(iconClasses$3.base, iconClasses$3.dark.base, !disabled ? iconClasses$3.hover : "", !disabled ? iconClasses$3.dark.hover : "", disabled ? iconClasses$3.disabled : "");
     var finalChevronClasses = classNames(chevronClasses.base, !disabled ? chevronClasses.hover : "", chevronClasses.dark.base, !disabled ? chevronClasses.dark.hover : "", disabled ? chevronClasses.disabled : "");
-    var buttonRef = React.useContext(ButtonRefContext);
+    var aggregatedRef = function (value) {
+        if (contextRef) {
+            contextRef.current = value;
+        }
+        if (typeof forwardedRef === "function") {
+            forwardedRef(value);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = value;
+        }
+    };
     if (children) {
-        return (React.createElement(qe$1.Button, { as: "div", disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? "s-gap-1.5" : "s-gap-0"), onClick: function (e) { return e.stopPropagation(); } }, tooltip ? (React.createElement(Tooltip, { position: tooltipPosition, label: tooltip }, children)) : (children)));
+        return (React.createElement(qe$1.Button, { as: "div", disabled: disabled, ref: aggregatedRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? "s-gap-1.5" : "s-gap-0"), onClick: function (e) { return e.stopPropagation(); } }, tooltip ? (React.createElement(Tooltip, { position: tooltipPosition, label: tooltip }, children)) : (children)));
     }
     var chevronIcon = type === "select"
         ? SvgChevronUpDown$1
@@ -72013,13 +72024,23 @@ DropdownMenu.Button = function (_a) {
             ? SvgChevronRight$1
             : SvgChevronDown$1;
     return (React.createElement(React.Fragment, null, tooltip ? (React.createElement(Tooltip, { label: tooltip, position: tooltipPosition },
-        React.createElement(qe$1.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5"), onClick: function (e) { return e.stopPropagation(); } },
+        React.createElement(qe$1.Button, { disabled: disabled, ref: aggregatedRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5"), onClick: function (e) {
+                e.stopPropagation();
+                if (onClick) {
+                    onClick();
+                }
+            } },
             React.createElement(Icon, { visual: icon, size: size, className: finalIconClasses }),
-            React.createElement(Icon, { visual: chevronIcon, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))) : (React.createElement(qe$1.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5", type === "submenu" ? "s-opacity-50" : ""), onClick: function (e) { return e.stopPropagation(); } },
+            React.createElement(Icon, { visual: chevronIcon, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))) : (React.createElement(qe$1.Button, { disabled: disabled, ref: aggregatedRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5", type === "submenu" ? "s-opacity-50" : ""), onClick: function (e) {
+            e.stopPropagation();
+            if (onClick) {
+                onClick();
+            }
+        } },
         React.createElement(Icon, { visual: icon, size: size, className: finalIconClasses }),
         React.createElement("span", { className: classNames(finalLabelClasses, type === "submenu" ? "s-w-full" : "") }, label),
         React.createElement(Icon, { visual: chevronIcon, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))));
-};
+});
 DropdownMenu.Item = function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? "default" : _b, label = _a.label, description = _a.description, link = _a.link, disabled = _a.disabled, visual = _a.visual, icon = _a.icon, onClick = _a.onClick, hasChildren = _a.hasChildren, children = _a.children, _c = _a.selected, selected = _c === void 0 ? false : _c;
     return (
@@ -103414,38 +103435,34 @@ function shouldRenderColumn(windowWidth, breakpoint) {
     return windowWidth >= breakpoints[breakpoint];
 }
 function DataTable(_a) {
-    var data = _a.data, totalRowCount = _a.totalRowCount, columns = _a.columns, className = _a.className, _b = _a.widthClassName, widthClassName = _b === void 0 ? "s-w-full s-max-w-4xl" : _b, filter = _a.filter, filterColumn = _a.filterColumn, initialColumnOrder = _a.initialColumnOrder, _c = _a.columnsBreakpoints, columnsBreakpoints = _c === void 0 ? {} : _c, pagination = _a.pagination, setPagination = _a.setPagination;
+    var data = _a.data, totalRowCount = _a.totalRowCount, columns = _a.columns, className = _a.className, _b = _a.widthClassName, widthClassName = _b === void 0 ? "s-w-full s-max-w-4xl" : _b, filter = _a.filter, filterColumn = _a.filterColumn, _c = _a.columnsBreakpoints, columnsBreakpoints = _c === void 0 ? {} : _c, pagination = _a.pagination, setPagination = _a.setPagination, sorting = _a.sorting, setSorting = _a.setSorting, _d = _a.isServerSideSorting, isServerSideSorting = _d === void 0 ? false : _d;
     var windowSize = useWindowSize();
-    var _d = __read(React.useState(initialColumnOrder !== null && initialColumnOrder !== void 0 ? initialColumnOrder : []), 2), sorting = _d[0], setSorting = _d[1];
     var _e = __read(React.useState([]), 2), columnFilters = _e[0], setColumnFilters = _e[1];
     var isServerSidePagination = !!totalRowCount && totalRowCount > data.length;
+    var isClientSideSortingEnabled = !isServerSideSorting && !isServerSidePagination;
     var onPaginationChange = pagination && setPagination
         ? function (updater) {
             var newValue = typeof updater === "function" ? updater(pagination) : updater;
             setPagination(newValue);
         }
         : undefined;
-    var table = useReactTable({
-        data: data,
-        columns: columns,
-        rowCount: totalRowCount,
-        manualPagination: isServerSidePagination,
-        onSortingChange: setSorting,
-        getCoreRowModel: getCoreRowModel(),
+    var onSortingChange = sorting && setSorting
+        ? function (updater) {
+            var newValue = typeof updater === "function" ? updater(sorting) : updater;
+            setSorting(newValue);
+        }
+        : undefined;
+    var table = useReactTable(__assign(__assign(__assign(__assign({ data: data, columns: columns, rowCount: totalRowCount, manualPagination: isServerSidePagination, manualSorting: isServerSideSorting }, (isServerSideSorting && {
+        onSortingChange: onSortingChange,
+    })), { getCoreRowModel: getCoreRowModel() }), (!isServerSideSorting && {
         getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
-        onColumnFiltersChange: setColumnFilters,
-        state: {
-            columnFilters: columnFilters,
-            sorting: isServerSidePagination ? undefined : sorting,
-            pagination: pagination,
-        },
-        initialState: {
+        enableSorting: isClientSideSortingEnabled,
+    })), { getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: pagination ? getPaginationRowModel() : undefined, onColumnFiltersChange: setColumnFilters, state: __assign(__assign({ columnFilters: columnFilters }, (isServerSideSorting && {
+            sorting: sorting,
+        })), { pagination: pagination }), initialState: {
             pagination: pagination,
-        },
-        onPaginationChange: onPaginationChange,
-    });
+            sorting: sorting,
+        }, onPaginationChange: onPaginationChange }));
     React.useEffect(function () {
         var _a;
         if (filterColumn) {