@dust-tt/sparkle 0.2.236 → 0.2.238

package/dist/cjs/index.js

@@ -103414,10 +103414,10 @@ function shouldRenderColumn(windowWidth, breakpoint) {
     return windowWidth >= breakpoints[breakpoint];
 }
 function DataTable(_a) {
-    var data = _a.data, totalRowCount = _a.totalRowCount, columns = _a.columns, className = _a.className, filter = _a.filter, filterColumn = _a.filterColumn, initialColumnOrder = _a.initialColumnOrder, _b = _a.columnsBreakpoints, columnsBreakpoints = _b === void 0 ? {} : _b, 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, initialColumnOrder = _a.initialColumnOrder, _c = _a.columnsBreakpoints, columnsBreakpoints = _c === void 0 ? {} : _c, pagination = _a.pagination, setPagination = _a.setPagination;
     var windowSize = useWindowSize();
-    var _c = __read(React.useState(initialColumnOrder !== null && initialColumnOrder !== void 0 ? initialColumnOrder : []), 2), sorting = _c[0], setSorting = _c[1];
-    var _d = __read(React.useState([]), 2), columnFilters = _d[0], setColumnFilters = _d[1];
+    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 onPaginationChange = pagination && setPagination
         ? function (updater) {
@@ -103452,15 +103452,15 @@ function DataTable(_a) {
             (_a = table.getColumn(filterColumn)) === null || _a === void 0 ? void 0 : _a.setFilterValue(filter);
         }
     }, [filter, filterColumn]);
-    return (React.createElement("div", { className: "s-flex s-flex-col s-gap-2" },
-        React.createElement(DataTable.Root, { className: className },
-            React.createElement(DataTable.Header, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(DataTable.Row, { key: headerGroup.id }, headerGroup.headers.map(function (header) {
+    return (React.createElement("div", { className: classNames("s-flex s-flex-col s-gap-2", className || "", widthClassName) },
+        React.createElement(DataTable.Root, null,
+            React.createElement(DataTable.Header, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(DataTable.Row, { key: headerGroup.id, widthClassName: widthClassName }, headerGroup.headers.map(function (header) {
                 var breakpoint = columnsBreakpoints[header.id];
                 if (!windowSize.width ||
                     !shouldRenderColumn(windowSize.width, breakpoint)) {
                     return null;
                 }
-                return (React.createElement(DataTable.Head, { key: header.id, onClick: header.column.getToggleSortingHandler(), className: classNames(header.column.getCanSort() ? "s-cursor-pointer" : "") },
+                return (React.createElement(DataTable.Head, { column: header.column, key: header.id, onClick: header.column.getToggleSortingHandler(), className: classNames(header.column.getCanSort() ? "s-cursor-pointer" : "") },
                     React.createElement("div", { className: "s-flex s-items-center s-space-x-1 s-whitespace-nowrap" },
                         flexRender(header.column.columnDef.header, header.getContext()),
                         header.column.getCanSort() && (React.createElement(Icon, { visual: header.column.getIsSorted() === "asc"
@@ -103471,55 +103471,67 @@ function DataTable(_a) {
                                 ? "s-opacity-100"
                                 : "s-opacity-0") })))));
             }))); })),
-            React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { key: row.id, onClick: row.original.onClick, moreMenuItems: row.original.moreMenuItems }, row.getVisibleCells().map(function (cell) {
+            React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { widthClassName: widthClassName, key: row.id, onClick: row.original.onClick, moreMenuItems: row.original.moreMenuItems }, row.getVisibleCells().map(function (cell) {
                 var breakpoint = columnsBreakpoints[cell.column.id];
                 if (!windowSize.width ||
                     !shouldRenderColumn(windowSize.width, breakpoint)) {
                     return null;
                 }
-                return (React.createElement(DataTable.Cell, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())));
+                return (React.createElement(DataTable.Cell, { column: cell.column, key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())));
             }))); }))),
         pagination && (React.createElement("div", { className: "s-p-1" },
             React.createElement(Pagination, { pagination: table.getState().pagination, setPagination: table.setPagination, rowCount: table.getRowCount() })))));
 }
 DataTable.Root = function DataTableRoot(_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("table", __assign({ className: classNames("s-w-full s-border-collapse", className || "") }, props), children));
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement("table", __assign({ className: "s-w-full s-border-collapse" }, props), children));
 };
 DataTable.Header = function Header(_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     return (React.createElement("thead", __assign({ className: classNames("s-text-xs s-capitalize", className || "") }, props), children));
 };
 DataTable.Head = function Head(_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("th", __assign({ className: classNames("s-w-full s-py-1 s-pr-3 s-text-left s-font-medium s-text-element-800", className || "") }, props), children));
+    var children = _a.children, className = _a.className, column = _a.column, props = __rest(_a, ["children", "className", "column"]);
+    return (React.createElement("th", __assign({ style: getSize(column.columnDef), className: classNames("s-py-1 s-pr-3 s-text-left s-font-medium s-text-element-800", className || "") }, props), children));
 };
 DataTable.Body = function Body(_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     return (React.createElement("tbody", __assign({ className: className }, props), children));
 };
 DataTable.Row = function Row(_a) {
-    var children = _a.children, className = _a.className, onClick = _a.onClick, moreMenuItems = _a.moreMenuItems, props = __rest(_a, ["children", "className", "onClick", "moreMenuItems"]);
-    return (React.createElement("tr", __assign({ className: classNames("s-group/dt s-border-b s-border-structure-200 s-text-sm s-transition-colors s-duration-300 s-ease-out", onClick ? "s-cursor-pointer hover:s-bg-structure-50" : "", className || ""), onClick: onClick ? onClick : undefined }, props),
+    var children = _a.children, className = _a.className, onClick = _a.onClick, moreMenuItems = _a.moreMenuItems, widthClassName = _a.widthClassName, props = __rest(_a, ["children", "className", "onClick", "moreMenuItems", "widthClassName"]);
+    return (React.createElement("tr", __assign({ className: classNames("s-group/dt s-flex s-items-center s-border-b s-border-structure-200 s-text-sm s-transition-colors s-duration-300 s-ease-out", onClick ? "s-cursor-pointer hover:s-bg-structure-50" : "", widthClassName, className || ""), onClick: onClick ? onClick : undefined }, props),
         children,
-        React.createElement("td", { className: "s-w-1 s-cursor-pointer s-pl-1 s-text-element-600" }, moreMenuItems && moreMenuItems.length > 0 && (React.createElement(DropdownMenu, { className: "s-mr-1.5 s-flex" },
+        React.createElement("td", { className: "s-flex s-w-8 s-cursor-pointer s-items-center s-pl-1 s-text-element-600" }, moreMenuItems && moreMenuItems.length > 0 && (React.createElement(DropdownMenu, { className: "s-mr-1.5 s-flex" },
             React.createElement(DropdownMenu.Button, null,
-                React.createElement(IconButton, { icon: SvgMore$1, size: "sm", variant: "tertiary" })),
+                React.createElement(IconButton, { icon: SvgMore$1, size: "sm", variant: "tertiary", className: "s-m-1" })),
             React.createElement(DropdownMenu.Items, { origin: "topRight", width: 220 }, moreMenuItems === null || moreMenuItems === void 0 ? void 0 : moreMenuItems.map(function (item, index) { return (React.createElement(DropdownMenu.Item, __assign({ key: index }, item))); })))))));
 };
 DataTable.Cell = function Cell(_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("td", __assign({ className: classNames("s-h-12 s-whitespace-nowrap s-pl-1.5 s-text-element-800", className || "") }, props), children));
+    var _b;
+    var children = _a.children, className = _a.className, column = _a.column, props = __rest(_a, ["children", "className", "column"]);
+    column.columnDef.minSize;
+    return (React.createElement("td", __assign({ style: getSize(column.columnDef), className: classNames("s-flex s-h-12 s-items-center s-truncate s-whitespace-nowrap s-pl-1.5 s-text-element-800", ((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.className) || "", className || "") }, props), children));
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getSize(columnDef) {
+    var _a, _b, _c;
+    if ((_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.width) {
+        return { width: columnDef.meta.width };
+    }
+    return {
+        flex: (_c = (_b = columnDef.meta) === null || _b === void 0 ? void 0 : _b.flex) !== null && _c !== void 0 ? _c : 1,
+    };
+}
 DataTable.CellContent = function CellContent(_a) {
     var children = _a.children, className = _a.className, avatarUrl = _a.avatarUrl, avatarTooltipLabel = _a.avatarTooltipLabel, roundedAvatar = _a.roundedAvatar, icon = _a.icon, iconClassName = _a.iconClassName, description = _a.description, props = __rest(_a, ["children", "className", "avatarUrl", "avatarTooltipLabel", "roundedAvatar", "icon", "iconClassName", "description"]);
-    return (React.createElement("div", __assign({ className: classNames("s-flex s-items-center s-py-2", className || "") }, props),
+    return (React.createElement("div", __assign({ className: classNames("s-flex s-w-full s-items-center s-py-2", className || "") }, props),
         avatarUrl && avatarTooltipLabel && (React.createElement(Tooltip, { label: avatarTooltipLabel, position: "above" },
             React.createElement(Avatar, { visual: avatarUrl, size: "xs", className: "s-mr-2", isRounded: roundedAvatar !== null && roundedAvatar !== void 0 ? roundedAvatar : false }))),
         avatarUrl && !avatarTooltipLabel && (React.createElement(Avatar, { visual: avatarUrl, size: "xs", className: "s-mr-2", isRounded: roundedAvatar !== null && roundedAvatar !== void 0 ? roundedAvatar : false })),
         icon && (React.createElement(Icon, { visual: icon, size: "sm", className: classNames("s-mr-2 s-text-element-800", iconClassName || "") })),
-        React.createElement("div", { className: "s-flex" },
-            React.createElement("span", { className: "s-text-sm s-text-element-800" }, children),
+        React.createElement("div", { className: "s-flex s-shrink s-truncate" },
+            React.createElement("span", { className: "s-truncate s-text-sm s-text-element-800" }, children),
             description && (React.createElement("span", { className: "s-pl-2 s-text-sm s-text-element-600" }, description)))));
 };
 DataTable.Caption = function Caption(_a) {
@@ -103539,8 +103551,8 @@ function Dialog(_a) {
                     React.createElement(qe.Child, { as: React.Fragment, enter: "s-ease-out s-duration-300", enterFrom: "s-opacity-0 s-translate-y-4 s-scale-95", enterTo: "s-opacity-100 s-translate-y-0 s-scale-100", leave: "s-ease-in s-duration-200", leaveFrom: "s-opacity-100 s-translate-y-0 s-scale-100", leaveTo: "s-opacity-0 s-translate-y-4 s-scale-95" },
                         React.createElement(_t.Panel, { className: classNames("s-relative s-rounded-xl s-border s-border-structure-100 s-bg-structure-0 s-p-4 s-shadow-xl s-transition-all", "s-w-full sm:s-w-[448px]", "s-flex s-flex-col s-gap-6"), ref: referentRef },
                             React.createElement(_t.Title, { className: "s-text-element-950 s-truncate s-text-lg s-font-medium" }, title),
-                            React.createElement("div", { className: "s-z-10 s-text-base s-text-element-700" }, children),
-                            React.createElement("div", { className: "s-z-10 s-flex s-w-full s-justify-end" },
+                            React.createElement("div", { className: "s-text-base s-text-element-700" }, children),
+                            React.createElement("div", { className: "s-flex s-w-full s-justify-end" },
                                 React.createElement(Button.List, null,
                                     !isSaving && (React.createElement(React.Fragment, null,
                                         React.createElement(Button, { label: cancelLabel, variant: "tertiary", onClick: onCancel }),
@@ -129110,26 +129122,12 @@ function Tab(_a) {
 }
 
 function TextArea(_a) {
-    var placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, error = _a.error, _b = _a.showErrorLabel, showErrorLabel = _b === void 0 ? false : _b, className = _a.className, _c = _a.rows, rows = _c === void 0 ? 10 : _c;
+    var placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, error = _a.error, _b = _a.showErrorLabel, showErrorLabel = _b === void 0 ? false : _b, className = _a.className, _c = _a.minRows, minRows = _c === void 0 ? 10 : _c;
     var textareaRef = React.useRef(null);
-    React.useEffect(function () {
-        var textarea = textareaRef.current;
-        if (textarea) {
-            textarea.style.height = 'auto'; // Reset height
-            textarea.style.height = "".concat(textarea.scrollHeight, "px"); // Set to scroll height
-        }
-    }, [value]); // Re-run when value changes
     return (React.createElement("div", { className: "s-flex s-flex-col s-gap-1 s-p-px" },
-        React.createElement("textarea", { rows: rows, ref: textareaRef, className: classNames("overflow-y-auto s-block s-w-full s-min-w-0 s-rounded-xl s-text-sm s-placeholder-element-700 s-transition-all s-duration-200 s-scrollbar-hide", !error
+        React.createElement("textarea", { rows: minRows, ref: textareaRef, className: classNames("overflow-y-auto s-block s-w-full s-min-w-0 s-rounded-xl s-text-sm s-placeholder-element-700 s-transition-all s-duration-200 s-scrollbar-hide", !error
                 ? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
                 : "s-border-red-500 focus:s-border-red-500 focus:s-ring-red-500", "s-border-structure-200 s-bg-structure-50", "s-resize-y", className !== null && className !== void 0 ? className : ""), placeholder: placeholder, value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
-                var newValue = e.target.value;
-                var textAreaComponent = textareaRef.current;
-                if (textAreaComponent &&
-                    (value === null || value === void 0 ? void 0 : value.length) &&
-                    newValue.length < value.length) {
-                    textAreaComponent.style.height = "auto"; // Reset height to recalculate
-                }
                 onChange(e.target.value);
             } }),
         error && showErrorLabel && (React.createElement("div", { className: "s-ml-2 s-text-sm s-text-warning-500" }, error))));