@dust-tt/sparkle 0.4.26 → 0.5.0

package/dist/esm/components/DataTable.js

@@ -1,4 +1,4 @@
-import { __assign, __awaiter, __generator, __read, __rest, __values } from "tslib";
+import { __rest } from "tslib";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import React, { useEffect, useRef, useState } from "react";
@@ -8,50 +8,53 @@ import { useCopyToClipboard } from "../hooks";
 import { ArrowDownIcon, ArrowUpIcon, ClipboardCheckIcon, ClipboardIcon, MoreIcon, } from "../icons/app";
 import { cn } from "../lib/utils";
 import { breakpoints, useWindowSize } from "./WindowUtility";
-var cellHeight = "s-h-12";
+const cellHeight = "s-h-12";
 function shouldRenderColumn(windowWidth, breakpoint) {
     if (!breakpoint) {
         return true;
     }
     return windowWidth >= breakpoints[breakpoint];
 }
-export function DataTable(_a) {
-    var data = _a.data, totalRowCount = _a.totalRowCount, _b = _a.rowCountIsCapped, rowCountIsCapped = _b === void 0 ? false : _b, columns = _a.columns, className = _a.className, _c = _a.widthClassName, widthClassName = _c === void 0 ? "s-w-full" : _c, filter = _a.filter, filterColumn = _a.filterColumn, _d = _a.columnsBreakpoints, columnsBreakpoints = _d === void 0 ? {} : _d, pagination = _a.pagination, setPagination = _a.setPagination, sorting = _a.sorting, setSorting = _a.setSorting, _e = _a.isServerSideSorting, isServerSideSorting = _e === void 0 ? false : _e, _f = _a.disablePaginationNumbers, disablePaginationNumbers = _f === void 0 ? false : _f, rowSelection = _a.rowSelection, setRowSelection = _a.setRowSelection, _g = _a.enableRowSelection, enableRowSelection = _g === void 0 ? false : _g, _h = _a.enableMultiRowSelection, enableMultiRowSelection = _h === void 0 ? true : _h, getRowId = _a.getRowId, _j = _a.enableSortingRemoval, enableSortingRemoval = _j === void 0 ? true : _j;
-    var windowSize = useWindowSize();
-    var _k = __read(useState([]), 2), columnFilters = _k[0], setColumnFilters = _k[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;
+export function DataTable({ data, totalRowCount, rowCountIsCapped = false, columns, className, widthClassName = "s-w-full", filter, filterColumn, columnsBreakpoints = {}, pagination, setPagination, sorting, setSorting, isServerSideSorting = false, disablePaginationNumbers = false, rowSelection, setRowSelection, enableRowSelection = false, enableMultiRowSelection = true, getRowId, enableSortingRemoval = true, }) {
+    const windowSize = useWindowSize();
+    const [columnFilters, setColumnFilters] = useState([]);
+    const isServerSidePagination = !!totalRowCount && totalRowCount > data.length;
+    const isClientSideSortingEnabled = !isServerSideSorting && !isServerSidePagination;
+    const onPaginationChange = pagination && setPagination
+        ? (updater) => {
+            const newValue = typeof updater === "function" ? updater(pagination) : updater;
             setPagination(newValue);
         }
         : undefined;
-    var onSortingChange = sorting && setSorting
-        ? function (updater) {
-            var newValue = typeof updater === "function" ? updater(sorting) : updater;
+    const onSortingChange = sorting && setSorting
+        ? (updater) => {
+            const newValue = typeof updater === "function" ? updater(sorting) : updater;
             setSorting(newValue);
         }
         : undefined;
-    var onRowSelectionChange = rowSelection && setRowSelection
-        ? function (updater) {
-            var newValue = typeof updater === "function" ? updater(rowSelection) : updater;
+    const onRowSelectionChange = rowSelection && setRowSelection
+        ? (updater) => {
+            const newValue = typeof updater === "function" ? updater(rowSelection) : updater;
             setRowSelection(newValue);
         }
         : undefined;
-    var table = useReactTable(__assign(__assign(__assign(__assign(__assign(__assign({ data: data, columns: columns, rowCount: totalRowCount, manualPagination: isServerSidePagination, manualSorting: isServerSideSorting }, (isServerSideSorting && {
+    const table = useReactTable(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ data,
+        columns, rowCount: totalRowCount, manualPagination: isServerSidePagination, manualSorting: isServerSideSorting }, (isServerSideSorting && {
         onSortingChange: onSortingChange,
-    })), { enableSortingRemoval: enableSortingRemoval, getCoreRowModel: getCoreRowModel() }), (!isServerSideSorting && {
+    })), { enableSortingRemoval, getCoreRowModel: getCoreRowModel() }), (!isServerSideSorting && {
         getSortedRowModel: getSortedRowModel(),
         enableSorting: isClientSideSortingEnabled,
     })), { getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: pagination ? getPaginationRowModel() : undefined, onColumnFiltersChange: setColumnFilters }), (enableRowSelection && {
-        onRowSelectionChange: onRowSelectionChange,
-    })), { state: __assign(__assign(__assign({ columnFilters: columnFilters }, (isServerSideSorting && {
-            sorting: sorting,
-        })), { pagination: pagination }), (enableRowSelection && { rowSelection: rowSelection })), initialState: {
-            sorting: sorting,
-        }, onPaginationChange: onPaginationChange, enableRowSelection: enableRowSelection, enableMultiRowSelection: enableMultiRowSelection, getRowId: getRowId }));
-    useEffect(function () {
+        onRowSelectionChange,
+    })), { state: Object.assign(Object.assign(Object.assign({ columnFilters }, (isServerSideSorting && {
+            sorting,
+        })), { pagination }), (enableRowSelection && { rowSelection })), initialState: {
+            sorting,
+        }, onPaginationChange,
+        enableRowSelection,
+        enableMultiRowSelection,
+        getRowId }));
+    useEffect(() => {
         var _a;
         if (filterColumn) {
             (_a = table.getColumn(filterColumn)) === null || _a === void 0 ? void 0 : _a.setFilterValue(filter);
@@ -59,8 +62,8 @@ export function DataTable(_a) {
     }, [filter, filterColumn]);
     return (React.createElement("div", { className: cn("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];
+            React.createElement(DataTable.Header, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(DataTable.Row, { key: headerGroup.id, widthClassName: widthClassName }, headerGroup.headers.map((header) => {
+                const breakpoint = columnsBreakpoints[header.id];
                 if (!windowSize.width ||
                     !shouldRenderColumn(windowSize.width, breakpoint)) {
                     return null;
@@ -75,19 +78,19 @@ export function DataTable(_a) {
                                 : ArrowDownIcon, size: "xs", className: cn("s-ml-1", header.column.getIsSorted()
                                 ? "s-opacity-100"
                                 : "s-opacity-0") })))));
-            }))); })),
-            React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) {
-                var handleRowClick = function () {
+            }))))),
+            React.createElement(DataTable.Body, null, table.getRowModel().rows.map((row) => {
+                const handleRowClick = () => {
                     var _a, _b;
                     if (enableRowSelection && row.getCanSelect()) {
                         row.toggleSelected(!enableMultiRowSelection ? true : undefined);
                     }
                     (_b = (_a = row.original).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                 };
-                return (React.createElement(DataTable.Row, __assign({ widthClassName: widthClassName, key: row.id, onClick: enableRowSelection ? handleRowClick : row.original.onClick, onDoubleClick: row.original.onDoubleClick, rowData: row.original }, (enableRowSelection && {
+                return (React.createElement(DataTable.Row, Object.assign({ widthClassName: widthClassName, key: row.id, onClick: enableRowSelection ? handleRowClick : row.original.onClick, onDoubleClick: row.original.onDoubleClick, rowData: row.original }, (enableRowSelection && {
                     "data-selected": row.getIsSelected(),
-                })), row.getVisibleCells().map(function (cell) {
-                    var breakpoint = columnsBreakpoints[cell.column.id];
+                })), row.getVisibleCells().map((cell) => {
+                    const breakpoint = columnsBreakpoints[cell.column.id];
                     if (!windowSize.width ||
                         !shouldRenderColumn(windowSize.width, breakpoint)) {
                         return null;
@@ -99,17 +102,16 @@ export function DataTable(_a) {
             React.createElement(Pagination, { size: "xs", pagination: table.getState().pagination, setPagination: table.setPagination, rowCount: table.getRowCount(), rowCountIsCapped: rowCountIsCapped, disablePaginationNumbers: disablePaginationNumbers })))));
 }
 // cellHeight in pixels
-var COLUMN_HEIGHT = 48;
-var MIN_COLUMN_WIDTH = 40;
-export function ScrollableDataTable(_a) {
-    var data = _a.data, totalRowCount = _a.totalRowCount, columns = _a.columns, className = _a.className, _b = _a.widthClassName, widthClassName = _b === void 0 ? "s-w-full" : _b, _c = _a.columnsBreakpoints, columnsBreakpoints = _c === void 0 ? {} : _c, maxHeight = _a.maxHeight, onLoadMore = _a.onLoadMore, sorting = _a.sorting, setSorting = _a.setSorting, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, rowSelection = _a.rowSelection, setRowSelection = _a.setRowSelection, enableRowSelection = _a.enableRowSelection, _e = _a.enableMultiRowSelection, enableMultiRowSelection = _e === void 0 ? true : _e, getRowId = _a.getRowId, containerRef = _a.containerRef;
-    var windowSize = useWindowSize();
-    var loadMoreRef = useRef(null);
-    var _f = __read(useState(0), 2), tableWidth = _f[0], setTableWidth = _f[1];
-    var tableContainerRef = useRef(null);
-    var isSorting = !!setSorting;
+const COLUMN_HEIGHT = 48;
+const MIN_COLUMN_WIDTH = 40;
+export function ScrollableDataTable({ data, totalRowCount, columns, className, widthClassName = "s-w-full", columnsBreakpoints = {}, maxHeight, onLoadMore, sorting, setSorting, isLoading = false, rowSelection, setRowSelection, enableRowSelection, enableMultiRowSelection = true, getRowId, containerRef, }) {
+    const windowSize = useWindowSize();
+    const loadMoreRef = useRef(null);
+    const [tableWidth, setTableWidth] = useState(0);
+    const tableContainerRef = useRef(null);
+    const isSorting = !!setSorting;
     // Handle container ref
-    var setRef = function (element) {
+    const setRef = (element) => {
         tableContainerRef.current = element;
         if (containerRef) {
             if (typeof containerRef === "function") {
@@ -121,87 +123,78 @@ export function ScrollableDataTable(_a) {
         }
     };
     // Monitor table width changes
-    useEffect(function () {
+    useEffect(() => {
         if (!tableContainerRef.current) {
             return;
         }
-        var resizeObserver = new ResizeObserver(function (entries) {
-            var e_1, _a;
-            try {
-                for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
-                    var entry = entries_1_1.value;
-                    setTableWidth(entry.contentRect.width);
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
-                }
-                finally { if (e_1) throw e_1.error; }
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setTableWidth(entry.contentRect.width);
             }
         });
         resizeObserver.observe(tableContainerRef.current);
-        return function () {
+        return () => {
             resizeObserver.disconnect();
         };
     }, []);
-    var onSortingChange = sorting && setSorting
-        ? function (updater) {
-            var newValue = typeof updater === "function" ? updater(sorting) : updater;
+    const onSortingChange = sorting && setSorting
+        ? (updater) => {
+            const newValue = typeof updater === "function" ? updater(sorting) : updater;
             setSorting(newValue);
         }
         : undefined;
-    var onRowSelectionChange = rowSelection && setRowSelection
-        ? function (updater) {
-            var newValue = typeof updater === "function" ? updater(rowSelection) : updater;
+    const onRowSelectionChange = rowSelection && setRowSelection
+        ? (updater) => {
+            const newValue = typeof updater === "function" ? updater(rowSelection) : updater;
             setRowSelection(newValue);
         }
         : undefined;
-    var table = useReactTable(__assign(__assign(__assign(__assign({ data: data, columns: columns, rowCount: totalRowCount, getCoreRowModel: getCoreRowModel(), enableColumnResizing: true }, (enableRowSelection && {
-        onRowSelectionChange: onRowSelectionChange,
-    })), { state: __assign(__assign({}, (enableRowSelection && { rowSelection: rowSelection })), (isSorting && {
-            sorting: sorting,
+    const table = useReactTable(Object.assign(Object.assign(Object.assign(Object.assign({ data,
+        columns, rowCount: totalRowCount, getCoreRowModel: getCoreRowModel(), enableColumnResizing: true }, (enableRowSelection && {
+        onRowSelectionChange,
+    })), { state: Object.assign(Object.assign({}, (enableRowSelection && { rowSelection })), (isSorting && {
+            sorting,
         })), manualSorting: isSorting }), (isSorting && {
         onSortingChange: onSortingChange,
-    })), { enableSortingRemoval: true, enableRowSelection: enableRowSelection, enableMultiRowSelection: enableMultiRowSelection, getRowId: getRowId }));
-    useEffect(function () {
+    })), { enableSortingRemoval: true, enableRowSelection,
+        enableMultiRowSelection,
+        getRowId }));
+    useEffect(() => {
         if (!tableContainerRef.current || !table || !tableWidth) {
             return;
         }
-        var columns = table.getAllColumns();
+        const columns = table.getAllColumns();
         // Calculate ideal widths and handle minimums
-        var idealSizing = columns.reduce(function (acc, column) {
+        const idealSizing = columns.reduce((acc, column) => {
             var _a;
-            var _b;
-            var ratio = ((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.sizeRatio) || 0;
-            var calculated = Math.max(Math.floor((ratio / 100) * tableWidth), MIN_COLUMN_WIDTH);
-            return __assign(__assign({}, acc), (_a = {}, _a[column.id] = calculated, _a));
+            const ratio = ((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.sizeRatio) || 0;
+            const calculated = Math.max(Math.floor((ratio / 100) * tableWidth), MIN_COLUMN_WIDTH);
+            return Object.assign(Object.assign({}, acc), { [column.id]: calculated });
         }, {});
         // Ensure total width matches tableWidth
-        var totalIdealWidth = Object.values(idealSizing).reduce(function (a, b) { return a + b; }, 0);
-        var widthDifference = tableWidth - totalIdealWidth;
+        const totalIdealWidth = Object.values(idealSizing).reduce((a, b) => a + b, 0);
+        const widthDifference = tableWidth - totalIdealWidth;
         // adjust the largest column with leftover size
         if (widthDifference !== 0) {
-            var adjustColumnId = Object.entries(idealSizing).sort(function (a, b) { return b[1] - a[1]; })[0][0];
+            const adjustColumnId = Object.entries(idealSizing).sort((a, b) => b[1] - a[1])[0][0];
             idealSizing[adjustColumnId] += widthDifference;
         }
         table.setColumnSizing(idealSizing);
     }, [table, tableWidth]);
     // Get the current column sizing from the table for rendering
-    var columnSizing = table.getState().columnSizing;
-    var rows = table.getRowModel().rows;
-    var rowVirtualizer = useVirtualizer({
+    const columnSizing = table.getState().columnSizing;
+    const { rows } = table.getRowModel();
+    const rowVirtualizer = useVirtualizer({
         count: rows.length,
-        getScrollElement: function () { return tableContainerRef.current; },
-        estimateSize: function () { return COLUMN_HEIGHT; },
+        getScrollElement: () => tableContainerRef.current,
+        estimateSize: () => COLUMN_HEIGHT,
     });
     // Intersection observer for infinite loading
-    useEffect(function () {
+    useEffect(() => {
         if (!onLoadMore || !loadMoreRef.current) {
             return;
         }
-        var observer = new IntersectionObserver(function (entries) {
+        const observer = new IntersectionObserver((entries) => {
             // retrieving the sentinel div
             if (entries[0].isIntersecting && !isLoading) {
                 onLoadMore();
@@ -212,7 +205,7 @@ export function ScrollableDataTable(_a) {
             threshold: 0.1,
         });
         observer.observe(loadMoreRef.current);
-        return function () {
+        return () => {
             if (loadMoreRef.current) {
                 observer.unobserve(loadMoreRef.current);
             }
@@ -226,8 +219,8 @@ export function ScrollableDataTable(_a) {
                 : "s-max-h-100"), ref: setRef },
         React.createElement("div", { className: "s-relative" },
             React.createElement(DataTable.Root, { className: "s-w-full s-table-fixed" },
-                React.createElement(DataTable.Header, { className: "s-sticky s-top-0 s-z-20 s-bg-white s-shadow-sm dark:s-bg-background-night" }, 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];
+                React.createElement(DataTable.Header, { className: "s-sticky s-top-0 s-z-20 s-bg-white s-shadow-sm dark:s-bg-background-night" }, table.getHeaderGroups().map((headerGroup) => (React.createElement(DataTable.Row, { key: headerGroup.id, widthClassName: widthClassName }, headerGroup.headers.map((header) => {
+                    const breakpoint = columnsBreakpoints[header.id];
                     if (!windowSize.width ||
                         !shouldRenderColumn(windowSize.width, breakpoint)) {
                         return null;
@@ -247,24 +240,24 @@ export function ScrollableDataTable(_a) {
                                     : ArrowDownIcon, size: "xs", className: cn("s-ml-1", header.column.getIsSorted()
                                     ? "s-opacity-100"
                                     : "s-opacity-0") })))));
-                }))); })),
+                }))))),
                 React.createElement(DataTable.Body, { className: "s-relative s-w-full", style: {
-                        height: "".concat(rowVirtualizer.getTotalSize(), "px"),
-                    } }, rowVirtualizer.getVirtualItems().map(function (virtualRow) {
-                    var row = rows[virtualRow.index];
-                    var handleRowClick = function () {
+                        height: `${rowVirtualizer.getTotalSize()}px`,
+                    } }, rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                    const row = rows[virtualRow.index];
+                    const handleRowClick = () => {
                         var _a, _b;
                         if (enableRowSelection && row.getCanSelect()) {
                             row.toggleSelected(!enableMultiRowSelection ? true : undefined);
                         }
                         (_b = (_a = row.original).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                     };
-                    return (React.createElement(DataTable.Row, __assign({ key: row.id, id: row.id, widthClassName: widthClassName, onClick: enableRowSelection ? handleRowClick : row.original.onClick, onDoubleClick: row.original.onDoubleClick, rowData: row.original, className: "s-absolute s-w-full" }, (enableRowSelection && {
+                    return (React.createElement(DataTable.Row, Object.assign({ key: row.id, id: row.id, widthClassName: widthClassName, onClick: enableRowSelection ? handleRowClick : row.original.onClick, onDoubleClick: row.original.onDoubleClick, rowData: row.original, className: "s-absolute s-w-full" }, (enableRowSelection && {
                         "data-selected": row.getIsSelected(),
                     }), { style: {
-                            transform: "translateY(".concat(virtualRow.start, "px)"),
-                        } }), row.getVisibleCells().map(function (cell) {
-                        var breakpoint = columnsBreakpoints[cell.column.id];
+                            transform: `translateY(${virtualRow.start}px)`,
+                        } }), row.getVisibleCells().map((cell) => {
+                        const breakpoint = columnsBreakpoints[cell.column.id];
                         if (!windowSize.width ||
                             !shouldRenderColumn(windowSize.width, breakpoint)) {
                             return null;
@@ -284,28 +277,28 @@ export function ScrollableDataTable(_a) {
                 React.createElement("span", null, "Loading more data..."))))));
 }
 DataTable.Root = function DataTableRoot(_a) {
-    var children = _a.children, className = _a.className, containerClassName = _a.containerClassName, containerProps = _a.containerProps, props = __rest(_a, ["children", "className", "containerClassName", "containerProps"]);
-    return (React.createElement("div", __assign({ className: cn("s-@container/table", containerClassName) }, containerProps),
-        React.createElement("table", __assign({ className: cn("s-w-full s-table-fixed s-border-collapse", className) }, props), children)));
+    var { children, className, containerClassName, containerProps } = _a, props = __rest(_a, ["children", "className", "containerClassName", "containerProps"]);
+    return (React.createElement("div", Object.assign({ className: cn("s-@container/table", containerClassName) }, containerProps),
+        React.createElement("table", Object.assign({ className: cn("s-w-full s-table-fixed s-border-collapse", className) }, 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: cn(className) }, props), children));
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (React.createElement("thead", Object.assign({ className: cn(className) }, props), children));
 };
 DataTable.Head = function Head(_a) {
     var _b, _c;
-    var children = _a.children, className = _a.className, column = _a.column, props = __rest(_a, ["children", "className", "column"]);
-    return (React.createElement("th", __assign({ className: cn("s-heading-xs s-py-2 s-pl-2 s-pr-3 s-text-left s-capitalize", "s-text-foreground dark:s-text-foreground-night", (_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.className, className) }, props), ((_c = column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.tooltip) ? (React.createElement(Tooltip, { label: column.columnDef.meta.tooltip, trigger: children })) : (children)));
+    var { children, className, column } = _a, props = __rest(_a, ["children", "className", "column"]);
+    return (React.createElement("th", Object.assign({ className: cn("s-heading-xs s-py-2 s-pl-2 s-pr-3 s-text-left s-capitalize", "s-text-foreground dark:s-text-foreground-night", (_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.className, className) }, props), ((_c = column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.tooltip) ? (React.createElement(Tooltip, { label: column.columnDef.meta.tooltip, trigger: children })) : (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));
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (React.createElement("tbody", Object.assign({ className: className }, props), children));
 };
 DataTable.Row = function Row(_a) {
     var _b, _c;
-    var children = _a.children, className = _a.className, onClick = _a.onClick, onDoubleClick = _a.onDoubleClick, widthClassName = _a.widthClassName, rowData = _a.rowData, props = __rest(_a, ["children", "className", "onClick", "onDoubleClick", "widthClassName", "rowData"]);
-    var _d = __read(useState(null), 2), contextMenuPosition = _d[0], setContextMenuPosition = _d[1];
-    var handleContextMenu = function (event) {
+    var { children, className, onClick, onDoubleClick, widthClassName, rowData } = _a, props = __rest(_a, ["children", "className", "onClick", "onDoubleClick", "widthClassName", "rowData"]);
+    const [contextMenuPosition, setContextMenuPosition] = useState(null);
+    const handleContextMenu = (event) => {
         var _a;
         if (!((_a = rowData === null || rowData === void 0 ? void 0 : rowData.menuItems) === null || _a === void 0 ? void 0 : _a.length)) {
             return;
@@ -314,44 +307,40 @@ DataTable.Row = function Row(_a) {
         setContextMenuPosition({ x: event.clientX, y: event.clientY });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("tr", __assign({ className: cn("s-group/dt-row s-justify-center s-border-b s-transition-colors s-duration-300 s-ease-out", "s-border-separator dark:s-border-separator-night", (onClick || onDoubleClick) &&
+        React.createElement("tr", Object.assign({ className: cn("s-group/dt-row s-justify-center s-border-b s-transition-colors s-duration-300 s-ease-out", "s-border-separator dark:s-border-separator-night", (onClick || onDoubleClick) &&
                 "s-cursor-pointer [&:hover:not(:has(input:hover)):not(:has(button:hover))]:s-bg-muted dark:[&:hover:not(:has(input:hover)):not(:has(button:hover))]:s-bg-muted-night", props["data-selected"] && "s-bg-muted/50 dark:s-bg-muted/50", widthClassName, className), onClick: onClick || undefined, onDoubleClick: onDoubleClick || undefined, onContextMenu: handleContextMenu }, props), children),
-        contextMenuPosition && ((_b = rowData === null || rowData === void 0 ? void 0 : rowData.menuItems) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(DropdownMenu, { open: !!contextMenuPosition, onOpenChange: function (open) { return !open && setContextMenuPosition(null); }, modal: true },
+        contextMenuPosition && ((_b = rowData === null || rowData === void 0 ? void 0 : rowData.menuItems) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(DropdownMenu, { open: !!contextMenuPosition, onOpenChange: (open) => !open && setContextMenuPosition(null), modal: true },
             React.createElement(DropdownMenuPortal, null,
                 React.createElement(DropdownMenuContent, { align: "start", className: "s-whitespace-nowrap", style: {
                         position: "fixed",
                         left: (contextMenuPosition === null || contextMenuPosition === void 0 ? void 0 : contextMenuPosition.x) || 0,
                         top: (contextMenuPosition === null || contextMenuPosition === void 0 ? void 0 : contextMenuPosition.y) || 0,
                     } },
-                    React.createElement(DropdownMenuGroup, null, (_c = rowData === null || rowData === void 0 ? void 0 : rowData.menuItems) === null || _c === void 0 ? void 0 : _c.map(function (item, index) {
-                        return renderMenuItem(item, index, function () {
-                            return setContextMenuPosition(null);
-                        });
-                    }))))))));
+                    React.createElement(DropdownMenuGroup, null, (_c = rowData === null || rowData === void 0 ? void 0 : rowData.menuItems) === null || _c === void 0 ? void 0 : _c.map((item, index) => renderMenuItem(item, index, () => setContextMenuPosition(null))))))))));
 };
 // Shared menu rendering functions
-var renderSubmenuItem = function (item, index, onItemClick) { return (React.createElement(DropdownMenuSub, { key: "".concat(item.label, "-").concat(index) },
+const renderSubmenuItem = (item, index, onItemClick) => (React.createElement(DropdownMenuSub, { key: `${item.label}-${index}` },
     React.createElement(DropdownMenuSubTrigger, { label: item.label, disabled: item.disabled }),
     React.createElement(DropdownMenuPortal, null,
         React.createElement(DropdownMenuSubContent, null,
             React.createElement(ScrollArea, { className: "s-min-w-24 s-flex s-max-h-72 s-flex-col", hideScrollBar: true },
-                item.items.map(function (subItem) { return (React.createElement(DropdownMenuItem, { key: subItem.id, label: subItem.name, onClick: function (event) {
+                item.items.map((subItem) => (React.createElement(DropdownMenuItem, { key: subItem.id, label: subItem.name, onClick: (event) => {
                         event.stopPropagation();
                         item.onSelect(subItem.id);
                         onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
-                    } })); }),
-                React.createElement(ScrollBar, { className: "s-py-0" })))))); };
-var renderRegularItem = function (item, index, onItemClick) {
+                    } }))),
+                React.createElement(ScrollBar, { className: "s-py-0" }))))));
+const renderRegularItem = (item, index, onItemClick) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var kind = item.kind, itemProps = __rest(item, ["kind"]);
-    return (React.createElement(DropdownMenuItem, __assign({ key: "item-".concat(index) }, itemProps, { onClick: function (event) {
+    const { kind } = item, itemProps = __rest(item, ["kind"]);
+    return (React.createElement(DropdownMenuItem, Object.assign({ key: `item-${index}` }, itemProps, { onClick: (event) => {
             var _a;
             event.stopPropagation();
             (_a = itemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(itemProps, event);
             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
         } })));
 };
-var renderMenuItem = function (item, index, onItemClick) {
+const renderMenuItem = (item, index, onItemClick) => {
     switch (item.kind) {
         case "submenu":
             return renderSubmenuItem(item, index, onItemClick);
@@ -359,27 +348,26 @@ var renderMenuItem = function (item, index, onItemClick) {
             return renderRegularItem(item, index, onItemClick);
     }
 };
-DataTable.MoreButton = function MoreButton(_a) {
-    var className = _a.className, menuItems = _a.menuItems, dropdownMenuProps = _a.dropdownMenuProps, disabled = _a.disabled;
+DataTable.MoreButton = function MoreButton({ className, menuItems, dropdownMenuProps, disabled, }) {
     if (!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length)) {
         return null;
     }
-    return (React.createElement(DropdownMenu, __assign({ modal: false }, dropdownMenuProps),
-        React.createElement(DropdownMenuTrigger, { onClick: function (event) {
+    return (React.createElement(DropdownMenu, Object.assign({ modal: false }, dropdownMenuProps),
+        React.createElement(DropdownMenuTrigger, { onClick: (event) => {
                 event.stopPropagation();
             }, asChild: true },
             React.createElement(Button, { icon: MoreIcon, size: "mini", variant: "ghost-secondary", disabled: disabled, className: cn(disabled && "s-cursor-not-allowed s-opacity-50", className) })),
         React.createElement(DropdownMenuContent, { align: "end", hidden: disabled },
-            React.createElement(DropdownMenuGroup, null, menuItems.map(function (item, index) { return renderMenuItem(item, index); })))));
+            React.createElement(DropdownMenuGroup, null, menuItems.map((item, index) => renderMenuItem(item, index))))));
 };
 DataTable.Cell = function Cell(_a) {
     var _b;
-    var children = _a.children, className = _a.className, column = _a.column, props = __rest(_a, ["children", "className", "column"]);
-    return (React.createElement("td", __assign({ className: cn(cellHeight, "s-truncate s-pl-2", (_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.className, className) }, props), children));
+    var { children, className, column } = _a, props = __rest(_a, ["children", "className", "column"]);
+    return (React.createElement("td", Object.assign({ className: cn(cellHeight, "s-truncate s-pl-2", (_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.className, className) }, props), children));
 };
 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, _b = _a.grow, grow = _b === void 0 ? false : _b, disabled = _a.disabled, avatarStack = _a.avatarStack, props = __rest(_a, ["children", "className", "avatarUrl", "avatarTooltipLabel", "roundedAvatar", "icon", "iconClassName", "description", "grow", "disabled", "avatarStack"]);
-    return (React.createElement("div", __assign({ className: cn("s-flex s-items-center", grow ? "s-flex-grow" : "", disabled && "s-cursor-not-allowed s-opacity-50", className), "aria-disabled": disabled || undefined }, props),
+    var { children, className, avatarUrl, avatarTooltipLabel, roundedAvatar, icon, iconClassName, description, grow = false, disabled, avatarStack } = _a, props = __rest(_a, ["children", "className", "avatarUrl", "avatarTooltipLabel", "roundedAvatar", "icon", "iconClassName", "description", "grow", "disabled", "avatarStack"]);
+    return (React.createElement("div", Object.assign({ className: cn("s-flex s-items-center", grow ? "s-flex-grow" : "", disabled && "s-cursor-not-allowed s-opacity-50", className), "aria-disabled": disabled || undefined }, props),
         avatarUrl && avatarTooltipLabel && (React.createElement(Tooltip, { trigger: React.createElement(Avatar, { visual: avatarUrl, size: "xs", className: "s-mr-2", isRounded: roundedAvatar !== null && roundedAvatar !== void 0 ? roundedAvatar : false }), label: avatarTooltipLabel })),
         avatarUrl && !avatarTooltipLabel && (React.createElement(Avatar, { visual: avatarUrl, size: "xs", className: "s-mr-2", isRounded: roundedAvatar !== null && roundedAvatar !== void 0 ? roundedAvatar : false })),
         avatarStack && (React.createElement(Avatar.Stack, { avatars: avatarStack.items, nbVisibleItems: avatarStack.nbVisibleItems, size: "xs", isRounded: roundedAvatar !== null && roundedAvatar !== void 0 ? roundedAvatar : false })),
@@ -389,110 +377,70 @@ DataTable.CellContent = function CellContent(_a) {
             description && (React.createElement("span", { className: cn("s-pl-2 s-text-sm", "s-text-muted-foreground dark:s-text-muted-foreground-night") }, description)))));
 };
 DataTable.BasicCellContent = function BasicCellContent(_a) {
-    var _this = this;
-    var label = _a.label, tooltip = _a.tooltip, className = _a.className, textToCopy = _a.textToCopy, disabled = _a.disabled, props = __rest(_a, ["label", "tooltip", "className", "textToCopy", "disabled"]);
-    var _b = __read(useCopyToClipboard(), 2), isCopied = _b[0], copyToClipboard = _b[1];
-    var handleCopy = function () { return __awaiter(_this, void 0, void 0, function () {
-        var textToUse;
-        return __generator(this, function (_a) {
-            textToUse = textToCopy !== null && textToCopy !== void 0 ? textToCopy : String(label);
-            void copyToClipboard(new ClipboardItem({
-                "text/plain": new Blob([String(textToUse)], {
-                    type: "text/plain",
-                }),
-            }));
-            return [2 /*return*/];
-        });
-    }); };
-    return (React.createElement(React.Fragment, null, tooltip ? (React.createElement(Tooltip, { tooltipTriggerAsChild: true, trigger: React.createElement("div", __assign({ className: cn(cellHeight, "s-group s-flex s-items-center s-gap-2 s-text-sm", "s-text-muted-foreground dark:s-text-muted-foreground-night", disabled && "s-cursor-not-allowed s-opacity-50", className), "aria-disabled": disabled || undefined }, props),
+    var { label, tooltip, className, textToCopy, disabled } = _a, props = __rest(_a, ["label", "tooltip", "className", "textToCopy", "disabled"]);
+    const [isCopied, copyToClipboard] = useCopyToClipboard();
+    const handleCopy = async () => {
+        const textToUse = textToCopy !== null && textToCopy !== void 0 ? textToCopy : String(label);
+        void copyToClipboard(new ClipboardItem({
+            "text/plain": new Blob([String(textToUse)], {
+                type: "text/plain",
+            }),
+        }));
+    };
+    return (React.createElement(React.Fragment, null, tooltip ? (React.createElement(Tooltip, { tooltipTriggerAsChild: true, trigger: React.createElement("div", Object.assign({ className: cn(cellHeight, "s-group s-flex s-items-center s-gap-2 s-text-sm", "s-text-muted-foreground dark:s-text-muted-foreground-night", disabled && "s-cursor-not-allowed s-opacity-50", className), "aria-disabled": disabled || undefined }, props),
             React.createElement("span", { className: "s-truncate" }, label),
-            textToCopy && (React.createElement(Button, { icon: isCopied ? ClipboardCheckIcon : ClipboardIcon, className: "s-hidden group-hover:s-block", variant: "outline", onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                e.stopPropagation();
-                                return [4 /*yield*/, handleCopy()];
-                            case 1:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); }, size: "xs" }))), label: tooltip })) : (React.createElement("div", __assign({ className: cn(cellHeight, "s-group s-flex s-items-center s-gap-2 s-text-sm", "s-text-muted-foreground dark:s-text-muted-foreground-night", disabled && "s-cursor-not-allowed s-opacity-50", className), "aria-disabled": disabled || undefined }, props),
+            textToCopy && (React.createElement(Button, { icon: isCopied ? ClipboardCheckIcon : ClipboardIcon, className: "s-hidden group-hover:s-block", variant: "outline", onClick: async (e) => {
+                    e.stopPropagation();
+                    await handleCopy();
+                }, size: "xs" }))), label: tooltip })) : (React.createElement("div", Object.assign({ className: cn(cellHeight, "s-group s-flex s-items-center s-gap-2 s-text-sm", "s-text-muted-foreground dark:s-text-muted-foreground-night", disabled && "s-cursor-not-allowed s-opacity-50", className), "aria-disabled": disabled || undefined }, props),
         React.createElement("span", { className: "s-truncate" }, label),
-        textToCopy && (React.createElement(Button, { icon: isCopied ? ClipboardCheckIcon : ClipboardIcon, className: "s-hidden group-hover:s-block", variant: "outline", onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            e.stopPropagation();
-                            return [4 /*yield*/, handleCopy()];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }, size: "xs" }))))));
+        textToCopy && (React.createElement(Button, { icon: isCopied ? ClipboardCheckIcon : ClipboardIcon, className: "s-hidden group-hover:s-block", variant: "outline", onClick: async (e) => {
+                e.stopPropagation();
+                await handleCopy();
+            }, size: "xs" }))))));
 };
-DataTable.CellContentWithCopy = function CellContentWithCopy(_a) {
-    var _this = this;
-    var children = _a.children, textToCopy = _a.textToCopy, className = _a.className;
-    var _b = __read(useCopyToClipboard(), 2), isCopied = _b[0], copyToClipboard = _b[1];
-    var handleCopy = function () { return __awaiter(_this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            void copyToClipboard(new ClipboardItem({
-                "text/plain": new Blob([textToCopy !== null && textToCopy !== void 0 ? textToCopy : String(children)], {
-                    type: "text/plain",
-                }),
-            }));
-            return [2 /*return*/];
-        });
-    }); };
+DataTable.CellContentWithCopy = function CellContentWithCopy({ children, textToCopy, className, }) {
+    const [isCopied, copyToClipboard] = useCopyToClipboard();
+    const handleCopy = async () => {
+        void copyToClipboard(new ClipboardItem({
+            "text/plain": new Blob([textToCopy !== null && textToCopy !== void 0 ? textToCopy : String(children)], {
+                type: "text/plain",
+            }),
+        }));
+    };
     return (React.createElement("div", { className: cn("s-flex s-items-center s-space-x-2", className) },
         React.createElement("span", { className: "s-truncate" }, children),
-        React.createElement(IconButton, { icon: isCopied ? ClipboardCheckIcon : ClipboardIcon, variant: "outline", onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            e.stopPropagation();
-                            return [4 /*yield*/, handleCopy()];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); }, size: "xs" })));
+        React.createElement(IconButton, { icon: isCopied ? ClipboardCheckIcon : ClipboardIcon, variant: "outline", onClick: async (e) => {
+                e.stopPropagation();
+                await handleCopy();
+            }, size: "xs" })));
 };
 DataTable.Caption = function Caption(_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("caption", __assign({ className: className }, props), children));
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (React.createElement("caption", Object.assign({ className: className }, props), children));
 };
 export function createSelectionColumn() {
     return {
         id: "select",
         enableSorting: false,
         enableHiding: false,
-        header: function (_a) {
-            var table = _a.table;
-            return (React.createElement(Checkbox, { size: "xs", checked: table.getIsAllRowsSelected()
-                    ? true
-                    : table.getIsSomeRowsSelected()
-                        ? "partial"
-                        : false, onCheckedChange: function (state) {
+        header: ({ table }) => (React.createElement(Checkbox, { size: "xs", checked: table.getIsAllRowsSelected()
+                ? true
+                : table.getIsSomeRowsSelected()
+                    ? "partial"
+                    : false, onCheckedChange: (state) => {
+                if (state === "indeterminate") {
+                    return;
+                }
+                table.toggleAllRowsSelected(state);
+            } })),
+        cell: ({ row }) => (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center" },
+            React.createElement(Checkbox, { size: "xs", checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (state) => {
                     if (state === "indeterminate") {
                         return;
                     }
-                    table.toggleAllRowsSelected(state);
-                } }));
-        },
-        cell: function (_a) {
-            var row = _a.row;
-            return (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center" },
-                React.createElement(Checkbox, { size: "xs", checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: function (state) {
-                        if (state === "indeterminate") {
-                            return;
-                        }
-                        row.toggleSelected(state);
-                    } })));
-        },
+                    row.toggleSelected(state);
+                } }))),
         meta: {
             className: "s-w-10",
         },
@@ -503,12 +451,9 @@ export function createRadioSelectionColumn() {
         id: "radio-select",
         enableSorting: false,
         enableHiding: false,
-        header: function () { return null; },
-        cell: function (_a) {
-            var row = _a.row;
-            return (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center" },
-                React.createElement("div", { className: cn(radioStyles({ size: "xs" }), row.getIsSelected() && "s-bg-muted/50 dark:s-bg-muted/50", !row.getCanSelect() && "s-cursor-not-allowed s-opacity-50"), "aria-checked": row.getIsSelected(), role: "radio" }, row.getIsSelected() && (React.createElement("div", { className: radioIndicatorStyles({ size: "xs" }) })))));
-        },
+        header: () => null,
+        cell: ({ row }) => (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center" },
+            React.createElement("div", { className: cn(radioStyles({ size: "xs" }), row.getIsSelected() && "s-bg-muted/50 dark:s-bg-muted/50", !row.getCanSelect() && "s-cursor-not-allowed s-opacity-50"), "aria-checked": row.getIsSelected(), role: "radio" }, row.getIsSelected() && (React.createElement("div", { className: radioIndicatorStyles({ size: "xs" }) }))))),
         meta: {
             className: "s-w-10",
         },