@dust-tt/sparkle 0.4.26 → 0.5.0

package/dist/esm/stories/DataTable.stories.js

@@ -1,14 +1,14 @@
-import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { __rest } from "tslib";
 import React, { useCallback, useMemo, useState } from "react";
 import { DataTable, Dialog, DialogContainer, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, ScrollableDataTable, } from "../components";
 import { createRadioSelectionColumn, createSelectionColumn, } from "../components/DataTable";
 import { FolderIcon } from "../icons/app";
-var meta = {
+const meta = {
     title: "Components/DataTable",
     component: DataTable,
 };
 export default meta;
-var data = [
+const data = [
     {
         name: "Soupinou with tooltip on avatar",
         usedBy: 100,
@@ -18,12 +18,12 @@ var data = [
         avatarUrl: "https://avatars.githubusercontent.com/u/138893015?s=200&v=4",
         avatarTooltipLabel: "Meow",
         roundedAvatar: true,
-        onClick: function () { return alert("Soupinou clicked"); },
+        onClick: () => alert("Soupinou clicked"),
         menuItems: [
             {
                 kind: "item",
                 label: "Edit (disabled)",
-                onClick: function () { return alert("Soupinou clicked"); },
+                onClick: () => alert("Soupinou clicked"),
                 disabled: true,
             },
         ],
@@ -37,7 +37,7 @@ var data = [
         size: "32kb",
         avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
         roundedAvatar: true,
-        onClick: function () { return alert("Marketing clicked"); },
+        onClick: () => alert("Marketing clicked"),
     },
     {
         name: "Design",
@@ -50,7 +50,7 @@ var data = [
             {
                 kind: "item",
                 label: "Edit (disabled)",
-                onClick: function () { return alert("Design menu clicked"); },
+                onClick: () => alert("Design menu clicked"),
                 disabled: true,
             },
         ],
@@ -72,7 +72,7 @@ var data = [
                     { id: "space3", name: "Space 3" },
                     { id: "space4", name: "Space 4" },
                 ],
-                onSelect: function (itemId) { return console.log("Add to Space", itemId); },
+                onSelect: (itemId) => console.log("Add to Space", itemId),
             },
             {
                 disabled: true,
@@ -84,7 +84,7 @@ var data = [
                     { id: "space3", name: "Space 3" },
                     { id: "space4", name: "Space 4" },
                 ],
-                onSelect: function (itemId) { return console.log("Add to Space", itemId); },
+                onSelect: (itemId) => console.log("Add to Space", itemId),
             },
             {
                 kind: "item",
@@ -103,7 +103,7 @@ var data = [
             {
                 kind: "item",
                 label: "Edit",
-                onClick: function () { return alert("Design menu clicked"); },
+                onClick: () => alert("Design menu clicked"),
             },
         ],
     },
@@ -129,7 +129,7 @@ var data = [
         size: "48kb",
     },
 ];
-var avatarStackData = [
+const avatarStackData = [
     {
         name: "Team Alpha",
         description: "Development team",
@@ -159,7 +159,7 @@ var avatarStackData = [
                 visual: "https://avatars.githubusercontent.com/u/5?s=200&v=4",
             },
         ],
-        onClick: function () { return alert("Team Alpha clicked"); },
+        onClick: () => alert("Team Alpha clicked"),
     },
     {
         name: "Marketing Team",
@@ -182,7 +182,7 @@ var avatarStackData = [
                 visual: "https://avatars.githubusercontent.com/u/8?s=200&v=4",
             },
         ],
-        onClick: function () { return alert("Marketing Team clicked"); },
+        onClick: () => alert("Marketing Team clicked"),
     },
     {
         name: "Design Squad",
@@ -210,7 +210,7 @@ var avatarStackData = [
             },
         ],
         roundedAvatar: true,
-        onClick: function () { return alert("Design Squad clicked"); },
+        onClick: () => alert("Design Squad clicked"),
     },
     {
         name: "Large Team",
@@ -249,10 +249,10 @@ var avatarStackData = [
                 visual: "https://avatars.githubusercontent.com/u/19?s=200&v=4",
             },
         ],
-        onClick: function () { return alert("Large Team clicked"); },
+        onClick: () => alert("Large Team clicked"),
     },
 ];
-var columns = [
+const columns = [
     {
         accessorKey: "name",
         header: "Name",
@@ -262,7 +262,7 @@ var columns = [
             className: "s-w-full",
             tooltip: "User's full name",
         },
-        cell: function (info) { return (React.createElement(DataTable.CellContent, { avatarUrl: info.row.original.avatarUrl, avatarTooltipLabel: info.row.original.avatarTooltipLabel, icon: info.row.original.icon, description: info.row.original.description, roundedAvatar: info.row.original.roundedAvatar }, info.row.original.name)); },
+        cell: (info) => (React.createElement(DataTable.CellContent, { avatarUrl: info.row.original.avatarUrl, avatarTooltipLabel: info.row.original.avatarTooltipLabel, icon: info.row.original.icon, description: info.row.original.description, roundedAvatar: info.row.original.roundedAvatar }, info.row.original.name)),
     },
     {
         accessorKey: "usedBy",
@@ -271,7 +271,7 @@ var columns = [
             className: "s-w-[82px] s-hidden @xs/table:s-table-cell",
         },
         header: "Used by",
-        cell: function (info) { return (React.createElement(DataTable.BasicCellContent, { label: info.row.original.usedBy })); },
+        cell: (info) => (React.createElement(DataTable.BasicCellContent, { label: info.row.original.usedBy })),
     },
     {
         accessorKey: "addedBy",
@@ -280,7 +280,7 @@ var columns = [
         meta: {
             className: "s-w-[128px]",
         },
-        cell: function (info) { return (React.createElement(DataTable.BasicCellContent, { label: info.row.original.addedBy, textToCopy: info.row.original.addedBy, tooltip: info.row.original.addedBy })); },
+        cell: (info) => (React.createElement(DataTable.BasicCellContent, { label: info.row.original.addedBy, textToCopy: info.row.original.addedBy, tooltip: info.row.original.addedBy })),
     },
     {
         accessorKey: "lastUpdated",
@@ -289,7 +289,7 @@ var columns = [
         meta: {
             className: "s-w-[128px] s-hidden @sm/table:s-table-cell",
         },
-        cell: function (info) { return (React.createElement(DataTable.BasicCellContent, { label: info.row.original.lastUpdated })); },
+        cell: (info) => (React.createElement(DataTable.BasicCellContent, { label: info.row.original.lastUpdated })),
         enableSorting: false,
     },
     {
@@ -299,42 +299,44 @@ var columns = [
         meta: {
             className: "s-w-[48px] s-hidden @sm/table:s-table-cell",
         },
-        cell: function (info) { return (React.createElement(DataTable.BasicCellContent, { label: info.row.original.size })); },
+        cell: (info) => (React.createElement(DataTable.BasicCellContent, { label: info.row.original.size })),
     },
     {
         id: "actions",
         header: "",
-        cell: function (info) { return (React.createElement(DataTable.MoreButton, { menuItems: info.row.original.menuItems, dropdownMenuProps: info.row.original.dropdownMenuProps })); },
+        cell: (info) => (React.createElement(DataTable.MoreButton, { menuItems: info.row.original.menuItems, dropdownMenuProps: info.row.original.dropdownMenuProps })),
         meta: {
             className: "s-w-12 s-cursor-pointer s-text-foreground",
         },
     },
 ];
 // TODO: Fix 'Edit' changing the order of the rows
-export var DataTableExample = function () {
-    var _a = __read(React.useState(""), 2), filter = _a[0], setFilter = _a[1];
-    var _b = __read(React.useState(false), 2), dialogOpen = _b[0], setDialogOpen = _b[1];
-    var _c = __read(React.useState(""), 2), selectedName = _c[0], setSelectedName = _c[1];
-    var tableData = data.map(function (_a) {
-        var menuItems = _a.menuItems, item = __rest(_a, ["menuItems"]);
-        return (__assign(__assign({}, item), { menuItems: (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length)
-                ? __spreadArray([
+export const DataTableExample = () => {
+    const [filter, setFilter] = React.useState("");
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [selectedName, setSelectedName] = React.useState("");
+    const tableData = data.map((_a) => {
+        var { menuItems } = _a, item = __rest(_a, ["menuItems"]);
+        return (Object.assign(Object.assign({}, item), { menuItems: (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length)
+                ? [
                     {
                         kind: "item",
                         label: "Edit",
-                        onClick: function () {
+                        onClick: () => {
                             setSelectedName(item.name);
                             setDialogOpen(true);
                         },
-                    }
-                ], __read(menuItems), false) : undefined }));
+                    },
+                    ...menuItems,
+                ]
+                : undefined }));
     });
     return (React.createElement("div", { className: "s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6" },
-        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
         React.createElement("div", { className: "" },
             React.createElement(DataTable, { data: tableData, filter: filter, filterColumn: "name", columns: columns })),
-        React.createElement(Dialog, { open: dialogOpen, onOpenChange: function (open) { return setDialogOpen(open); } },
-            React.createElement(DialogContent, { onOpenAutoFocus: function (e) { return e.preventDefault(); }, onCloseAutoFocus: function (e) { return e.preventDefault(); } },
+        React.createElement(Dialog, { open: dialogOpen, onOpenChange: (open) => setDialogOpen(open) },
+            React.createElement(DialogContent, { onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault() },
                 React.createElement(DialogHeader, null,
                     React.createElement(DialogTitle, null,
                         "Edit ",
@@ -347,167 +349,167 @@ export var DataTableExample = function () {
                     }, rightButtonProps: {
                         label: "Save",
                         variant: "primary",
-                        onClick: function () { return setDialogOpen(false); },
+                        onClick: () => setDialogOpen(false),
                     } })))));
 };
-export var DataTableClientSideSortingExample = function () {
-    var _a = __read(React.useState([
+export const DataTableClientSideSortingExample = () => {
+    const [sorting, setSorting] = React.useState([
         { id: "name", desc: true },
-    ]), 2), sorting = _a[0], setSorting = _a[1];
-    var _b = __read(React.useState(""), 2), filter = _b[0], setFilter = _b[1];
+    ]);
+    const [filter, setFilter] = React.useState("");
     return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
-        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
         React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: data, filter: filter, filterColumn: "name", columns: columns, columnsBreakpoints: { lastUpdated: "sm" }, sorting: sorting, setSorting: setSorting })));
 };
-export var DataTablePaginatedExample = function () {
-    var _a = __read(React.useState({
+export const DataTablePaginatedExample = () => {
+    const [pagination, setPagination] = React.useState({
         pageIndex: 0,
         pageSize: 2,
-    }), 2), pagination = _a[0], setPagination = _a[1];
-    var _b = __read(React.useState(""), 2), filter = _b[0], setFilter = _b[1];
+    });
+    const [filter, setFilter] = React.useState("");
     return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
-        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
         React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: data, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, columnsBreakpoints: { lastUpdated: "sm" } })));
 };
-export var DataTablePaginatedPageButtonsDisabledExample = function () {
-    var _a = __read(React.useState({
+export const DataTablePaginatedPageButtonsDisabledExample = () => {
+    const [pagination, setPagination] = React.useState({
         pageIndex: 0,
         pageSize: 2,
-    }), 2), pagination = _a[0], setPagination = _a[1];
-    var _b = __read(React.useState(""), 2), filter = _b[0], setFilter = _b[1];
+    });
+    const [filter, setFilter] = React.useState("");
     return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
-        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
         React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: data, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, columnsBreakpoints: { lastUpdated: "sm" }, disablePaginationNumbers: true })));
 };
-export var DataTablePaginatedServerSideExample = function () {
-    var _a = __read(React.useState({
+export const DataTablePaginatedServerSideExample = () => {
+    const [pagination, setPagination] = React.useState({
         pageIndex: 0,
         pageSize: 2,
-    }), 2), pagination = _a[0], setPagination = _a[1];
-    var _b = __read(React.useState([
+    });
+    const [sorting, setSorting] = React.useState([
         { id: "name", desc: true },
-    ]), 2), sorting = _b[0], setSorting = _b[1];
-    var _c = __read(React.useState(""), 2), filter = _c[0], setFilter = _c[1];
-    var rows = useMemo(function () {
+    ]);
+    const [filter, setFilter] = React.useState("");
+    const rows = useMemo(() => {
         if (sorting.length > 0) {
-            var order_1 = sorting[0].desc ? -1 : 1;
+            const order = sorting[0].desc ? -1 : 1;
             return data
-                .sort(function (a, b) {
-                return (a.name.toLowerCase().localeCompare(b.name.toLowerCase()) * order_1);
+                .sort((a, b) => {
+                return (a.name.toLowerCase().localeCompare(b.name.toLowerCase()) * order);
             })
                 .slice(pagination.pageIndex * pagination.pageSize, (pagination.pageIndex + 1) * pagination.pageSize);
         }
         return data.slice(pagination.pageIndex * pagination.pageSize, (pagination.pageIndex + 1) * pagination.pageSize);
     }, [data, pagination, sorting]);
     return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
-        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
         React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: rows, totalRowCount: data.length, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, sorting: sorting, setSorting: setSorting, columnsBreakpoints: { lastUpdated: "sm" }, isServerSideSorting: true })));
 };
-export var DataTablePaginatedServerSideRowCountCappedExample = function () {
-    var _a = __read(React.useState({
+export const DataTablePaginatedServerSideRowCountCappedExample = () => {
+    const [pagination, setPagination] = React.useState({
         pageIndex: 0,
         pageSize: 2,
-    }), 2), pagination = _a[0], setPagination = _a[1];
-    var _b = __read(React.useState([
+    });
+    const [sorting, setSorting] = React.useState([
         { id: "name", desc: true },
-    ]), 2), sorting = _b[0], setSorting = _b[1];
-    var _c = __read(React.useState(""), 2), filter = _c[0], setFilter = _c[1];
-    var rows = useMemo(function () {
+    ]);
+    const [filter, setFilter] = React.useState("");
+    const rows = useMemo(() => {
         if (sorting.length > 0) {
-            var order_2 = sorting[0].desc ? -1 : 1;
+            const order = sorting[0].desc ? -1 : 1;
             return data
-                .sort(function (a, b) {
-                return (a.name.toLowerCase().localeCompare(b.name.toLowerCase()) * order_2);
+                .sort((a, b) => {
+                return (a.name.toLowerCase().localeCompare(b.name.toLowerCase()) * order);
             })
                 .slice(pagination.pageIndex * pagination.pageSize, (pagination.pageIndex + 1) * pagination.pageSize);
         }
         return data.slice(pagination.pageIndex * pagination.pageSize, (pagination.pageIndex + 1) * pagination.pageSize);
     }, [data, pagination, sorting]);
     return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
-        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
         React.createElement(DataTable, { className: "s-w-full s-max-w-4xl s-overflow-x-auto", data: rows, totalRowCount: data.length, rowCountIsCapped: true, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, sorting: sorting, setSorting: setSorting, columnsBreakpoints: { lastUpdated: "sm" }, isServerSideSorting: true })));
 };
-var createData = function (start, count) {
+const createData = (start, count) => {
     return Array(count)
         .fill(0)
-        .map(function (_, i) { return ({
+        .map((_, i) => ({
         id: i,
-        name: "Item ".concat(start + i + 1),
+        name: `Item ${start + i + 1}`,
         usedBy: Math.floor(Math.random() * 100),
-        addedBy: "UserUserUserUserUserUserUserUserUserUserUser ".concat(Math.floor(Math.random() * 10) + 1),
-        lastUpdated: "2023-08-".concat(Math.floor(Math.random() * 30) + 1),
-        size: "".concat(Math.floor(Math.random() * 200), "kb"),
+        addedBy: `UserUserUserUserUserUserUserUserUserUserUser ${Math.floor(Math.random() * 10) + 1}`,
+        lastUpdated: `2023-08-${Math.floor(Math.random() * 30) + 1}`,
+        size: `${Math.floor(Math.random() * 200)}kb`,
         menuItems: [
-            { kind: "item", label: "test", onClick: function () { return console.log("hey"); } },
+            { kind: "item", label: "test", onClick: () => console.log("hey") },
         ],
-    }); });
+    }));
 };
-export var ScrollableDataTableExample = function () {
-    var _a = __read(useState(""), 2), filter = _a[0], setFilter = _a[1];
-    var _b = __read(useState({}), 2), rowSelection = _b[0], setRowSelection = _b[1];
-    var _c = __read(useState(function () { return createData(0, 50); }), 2), data = _c[0], setData = _c[1];
-    var _d = __read(useState(false), 2), isLoading = _d[0], setIsLoading = _d[1];
+export const ScrollableDataTableExample = () => {
+    const [filter, setFilter] = useState("");
+    const [rowSelection, setRowSelection] = useState({});
+    const [data, setData] = useState(() => createData(0, 50));
+    const [isLoading, setIsLoading] = useState(false);
     // Load more data when user scrolls to bottom
-    var loadMore = useCallback(function () {
+    const loadMore = useCallback(() => {
         setIsLoading(true);
         // Simulate API call delay
-        setTimeout(function () {
-            setData(function (prevData) { return __spreadArray(__spreadArray([], __read(prevData), false), __read(createData(prevData.length, 50)), false); });
+        setTimeout(() => {
+            setData((prevData) => [...prevData, ...createData(prevData.length, 50)]);
             setIsLoading(false);
         }, 1000);
     }, []);
-    var columnsWithSize = columns.map(function (column, index) {
-        return __assign(__assign({}, column), { meta: { sizeRatio: index % 2 === 0 ? 15 : 10 } });
+    const columnsWithSize = columns.map((column, index) => {
+        return Object.assign(Object.assign({}, column), { meta: { sizeRatio: index % 2 === 0 ? 15 : 10 } });
     });
-    var columnsWithSelection = useMemo(function () { return __spreadArray([createSelectionColumn()], __read(columnsWithSize), false); }, []);
+    const columnsWithSelection = useMemo(() => [createSelectionColumn(), ...columnsWithSize], []);
     return (React.createElement("div", { className: "s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6" },
         React.createElement("h3", { className: "s-text-lg s-font-medium" }, "Virtualized ScrollableDataTable with Infinite Scrolling"),
         React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
-            React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
+            React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
             React.createElement(ScrollableDataTable, { data: data, filter: filter, filterColumn: "name", columns: columnsWithSelection, onLoadMore: loadMore, isLoading: isLoading, maxHeight: "s-max-h-[500px]", rowSelection: rowSelection, setRowSelection: setRowSelection, enableRowSelection: true }),
             React.createElement("div", { className: "s-text-sm s-text-muted-foreground" },
                 "Loaded ",
                 data.length,
                 " rows. Scroll to the bottom to load more."))));
 };
-export var ScrollableDataTableFullHeightExample = function () {
-    var _a = __read(useState(""), 2), filter = _a[0], setFilter = _a[1];
-    var _b = __read(useState({}), 2), rowSelection = _b[0], setRowSelection = _b[1];
-    var _c = __read(useState(function () { return createData(0, 50); }), 2), data = _c[0], setData = _c[1];
-    var _d = __read(useState(false), 2), isLoading = _d[0], setIsLoading = _d[1];
+export const ScrollableDataTableFullHeightExample = () => {
+    const [filter, setFilter] = useState("");
+    const [rowSelection, setRowSelection] = useState({});
+    const [data, setData] = useState(() => createData(0, 50));
+    const [isLoading, setIsLoading] = useState(false);
     // Load more data when user scrolls to bottom
-    var loadMore = useCallback(function () {
+    const loadMore = useCallback(() => {
         setIsLoading(true);
         // Simulate API call delay
-        setTimeout(function () {
-            setData(function (prevData) { return __spreadArray(__spreadArray([], __read(prevData), false), __read(createData(prevData.length, 50)), false); });
+        setTimeout(() => {
+            setData((prevData) => [...prevData, ...createData(prevData.length, 50)]);
             setIsLoading(false);
         }, 1000);
     }, []);
-    var columnsWithSize = columns.map(function (column, index) {
-        return __assign(__assign({}, column), { meta: { sizeRatio: index % 2 === 0 ? 15 : 10 } });
+    const columnsWithSize = columns.map((column, index) => {
+        return Object.assign(Object.assign({}, column), { meta: { sizeRatio: index % 2 === 0 ? 15 : 10 } });
     });
-    var columnsWithSelection = useMemo(function () { return __spreadArray([createSelectionColumn()], __read(columnsWithSize), false); }, []);
+    const columnsWithSelection = useMemo(() => [createSelectionColumn(), ...columnsWithSize], []);
     return (React.createElement("div", { className: "s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6" },
         React.createElement("h3", { className: "s-text-lg s-font-medium" }, "Virtualized ScrollableDataTable with Infinite Scrolling based on parent height"),
         React.createElement("div", { className: "s-flex s-h-[400px] s-flex-col s-gap-4" },
-            React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
+            React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
             React.createElement(ScrollableDataTable, { data: data, filter: filter, filterColumn: "name", columns: columnsWithSelection, onLoadMore: loadMore, isLoading: isLoading, maxHeight: true, rowSelection: rowSelection, setRowSelection: setRowSelection, enableRowSelection: true }),
             React.createElement("div", { className: "s-text-sm s-text-muted-foreground" },
                 "Loaded ",
                 data.length,
                 " rows. Scroll to the bottom to load more."))));
 };
-export var DataTableWithRowSelectionExample = function () {
-    var _a = __read(useState({}), 2), rowSelection = _a[0], setRowSelection = _a[1];
-    var _b = __read(useState(function () { return createData(0, 10); }), 1), data = _b[0];
-    var _c = __read(useState(""), 2), filter = _c[0], setFilter = _c[1];
-    var columnsWithSelection = useMemo(function () { return __spreadArray([createSelectionColumn()], __read(columns), false); }, []);
+export const DataTableWithRowSelectionExample = () => {
+    const [rowSelection, setRowSelection] = useState({});
+    const [data] = useState(() => createData(0, 10));
+    const [filter, setFilter] = useState("");
+    const columnsWithSelection = useMemo(() => [createSelectionColumn(), ...columns], []);
     return (React.createElement("div", { className: "s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6" },
         React.createElement("h3", { className: "s-text-lg s-font-medium" }, "DataTable with Row Selection"),
         React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
-            React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
-            React.createElement(DataTable, { data: data, filter: filter, filterColumn: "name", columns: columnsWithSelection, rowSelection: rowSelection, setRowSelection: setRowSelection, enableRowSelection: true, getRowId: function (row) { return row.name; } }),
+            React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
+            React.createElement(DataTable, { data: data, filter: filter, filterColumn: "name", columns: columnsWithSelection, rowSelection: rowSelection, setRowSelection: setRowSelection, enableRowSelection: true, getRowId: (row) => row.name }),
             React.createElement("div", { className: "s-rounded-md s-border s-bg-muted/50 s-p-2" },
                 React.createElement("h4", { className: "s-mb-2 s-font-medium" }, "Selection State:"),
                 React.createElement("pre", { className: "s-overflow-auto s-text-xs" }, JSON.stringify(rowSelection, null, 2)),
@@ -518,28 +520,28 @@ export var DataTableWithRowSelectionExample = function () {
                     data.length,
                     " rows")))));
 };
-export var DataTableWithRadioSelectionExample = function () {
-    var _a = __read(useState({}), 2), rowSelection = _a[0], setRowSelection = _a[1];
-    var _b = __read(useState(function () { return createData(0, 10); }), 1), data = _b[0];
-    var _c = __read(useState(""), 2), filter = _c[0], setFilter = _c[1];
-    var columnsWithRadioSelection = useMemo(function () { return __spreadArray([createRadioSelectionColumn()], __read(columns), false); }, []);
+export const DataTableWithRadioSelectionExample = () => {
+    const [rowSelection, setRowSelection] = useState({});
+    const [data] = useState(() => createData(0, 10));
+    const [filter, setFilter] = useState("");
+    const columnsWithRadioSelection = useMemo(() => [createRadioSelectionColumn(), ...columns], []);
     // Get the selected row ID from rowSelection state
-    var selectedRowId = Object.keys(rowSelection).find(function (id) { return rowSelection[id]; });
+    const selectedRowId = Object.keys(rowSelection).find((id) => rowSelection[id]);
     return (React.createElement("div", { className: "s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6" },
         React.createElement("h3", { className: "s-text-lg s-font-medium" }, "DataTable with Radio Selection (Single Row)"),
         React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
-            React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
-            React.createElement(DataTable, { data: data, filter: filter, filterColumn: "name", columns: columnsWithRadioSelection, rowSelection: rowSelection, setRowSelection: setRowSelection, enableRowSelection: true, enableMultiRowSelection: false, getRowId: function (row) { return row.name; } }),
+            React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: (e) => setFilter(e.target.value) }),
+            React.createElement(DataTable, { data: data, filter: filter, filterColumn: "name", columns: columnsWithRadioSelection, rowSelection: rowSelection, setRowSelection: setRowSelection, enableRowSelection: true, enableMultiRowSelection: false, getRowId: (row) => row.name }),
             React.createElement("div", { className: "s-rounded-md s-border s-bg-muted/50 s-p-2" },
                 React.createElement("h4", { className: "s-mb-2 s-font-medium" }, "Radio Selection State:"),
                 React.createElement("pre", { className: "s-overflow-auto s-text-xs" }, JSON.stringify(rowSelection, null, 2)),
                 React.createElement("p", { className: "s-mt-2 s-text-sm" },
-                    selectedRowId ? "Selected: ".concat(selectedRowId) : "No row selected",
+                    selectedRowId ? `Selected: ${selectedRowId}` : "No row selected",
                     " ",
                     "(only one row can be selected at a time)")))));
 };
 // Column definition for avatar stack story
-var avatarStackColumns = [
+const avatarStackColumns = [
     {
         accessorKey: "name",
         header: "Team Name",
@@ -549,12 +551,12 @@ var avatarStackColumns = [
             className: "s-w-full",
             tooltip: "Team name with member avatars",
         },
-        cell: function (info) { return (React.createElement(DataTable.CellContent, { avatarStack: info.row.original.avatarStack
+        cell: (info) => (React.createElement(DataTable.CellContent, { avatarStack: info.row.original.avatarStack
                 ? {
                     items: info.row.original.avatarStack,
                     nbVisibleItems: 3,
                 }
-                : undefined, description: info.row.original.description, roundedAvatar: info.row.original.roundedAvatar }, info.row.original.name)); },
+                : undefined, description: info.row.original.description, roundedAvatar: info.row.original.roundedAvatar }, info.row.original.name)),
     },
     {
         accessorKey: "usedBy",
@@ -563,7 +565,7 @@ var avatarStackColumns = [
             className: "s-w-[82px] s-hidden @xs/table:s-table-cell",
         },
         header: "Members",
-        cell: function (info) { return (React.createElement(DataTable.BasicCellContent, { label: info.row.original.usedBy })); },
+        cell: (info) => (React.createElement(DataTable.BasicCellContent, { label: info.row.original.usedBy })),
     },
     {
         accessorKey: "addedBy",
@@ -572,7 +574,7 @@ var avatarStackColumns = [
         meta: {
             className: "s-w-[128px]",
         },
-        cell: function (info) { return (React.createElement(DataTable.BasicCellContent, { label: info.row.original.addedBy, textToCopy: info.row.original.addedBy, tooltip: info.row.original.addedBy })); },
+        cell: (info) => (React.createElement(DataTable.BasicCellContent, { label: info.row.original.addedBy, textToCopy: info.row.original.addedBy, tooltip: info.row.original.addedBy })),
     },
     {
         accessorKey: "lastUpdated",
@@ -581,7 +583,7 @@ var avatarStackColumns = [
         meta: {
             className: "s-w-[128px] s-hidden @sm/table:s-table-cell",
         },
-        cell: function (info) { return (React.createElement(DataTable.BasicCellContent, { label: info.row.original.lastUpdated })); },
+        cell: (info) => (React.createElement(DataTable.BasicCellContent, { label: info.row.original.lastUpdated })),
         enableSorting: false,
     },
     {
@@ -591,16 +593,16 @@ var avatarStackColumns = [
         meta: {
             className: "s-w-[48px] s-hidden @sm/table:s-table-cell",
         },
-        cell: function (info) { return (React.createElement(DataTable.BasicCellContent, { label: info.row.original.size })); },
+        cell: (info) => (React.createElement(DataTable.BasicCellContent, { label: info.row.original.size })),
     },
 ];
-export var DataTableWithAvatarStackExample = function () {
-    var _a = __read(React.useState(""), 2), filter = _a[0], setFilter = _a[1];
+export const DataTableWithAvatarStackExample = () => {
+    const [filter, setFilter] = React.useState("");
     return (React.createElement("div", { className: "s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6" },
         React.createElement("h3", { className: "s-text-lg s-font-medium" }, "DataTable with Avatar Stack"),
         React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "This example demonstrates the DataTable with avatar stacks showing team members. The avatar stack displays up to 4 visible avatars with a count indicator for additional members."),
         React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
-            React.createElement(Input, { name: "filter", placeholder: "Filter teams...", value: filter, onChange: function (e) { return setFilter(e.target.value); } }),
+            React.createElement(Input, { name: "filter", placeholder: "Filter teams...", value: filter, onChange: (e) => setFilter(e.target.value) }),
             React.createElement(DataTable, { data: avatarStackData, filter: filter, filterColumn: "name", columns: avatarStackColumns }))));
 };
 //# sourceMappingURL=DataTable.stories.js.map