@dust-tt/sparkle 0.2.225 → 0.2.227-rc

package/dist/esm/hooks/useHashParams.js

@@ -0,0 +1,67 @@
+/**
+ * Original code from : https://www.npmjs.com/package/use-hash-param
+ * ISC License
+ */
+import { __read } from "tslib";
+import { useCallback, useEffect, useState } from "react";
+var getHashSearchParams = function (location) {
+    var hash = location.hash.slice(1);
+    var _a = __read(hash.split("?"), 2), prefix = _a[0], query = _a[1];
+    return [prefix, new URLSearchParams(query)];
+};
+var getHashParam = function (key, defaultValue) {
+    var _a;
+    if (typeof window === "undefined") {
+        return defaultValue;
+    }
+    var _b = __read(getHashSearchParams(window.location), 2), searchParams = _b[1];
+    return (_a = searchParams.get(key)) !== null && _a !== void 0 ? _a : defaultValue;
+};
+var setHashParam = function (key, value, shouldReplaceState) {
+    if (typeof window !== "undefined") {
+        var _a = __read(getHashSearchParams(window.location), 2), prefix = _a[0], searchParams = _a[1];
+        if (typeof value === "undefined" || value === "") {
+            searchParams.delete(key);
+        }
+        else {
+            searchParams.set(key, value);
+        }
+        var search = searchParams.toString();
+        var hash = search ? "".concat(prefix, "?").concat(search) : prefix;
+        if (shouldReplaceState && "replaceState" in history) {
+            history.replaceState(null, "", "#".concat(hash));
+        }
+        else {
+            window.location.hash = hash;
+        }
+    }
+};
+/**
+ * @param key The parameter-name to use from the hash-string query string.
+ * @param defaultValue A default value to use if the parameter is not specified and on the server.
+ * @returns A two-tuple, the first element is the selected param value (either extracted from the hash param or the default value).
+ *  The second element is a setter function to change the param value.
+ */
+export var useHashParam = function (key, defaultValue) {
+    var _a = __read(useState(function () {
+        return getHashParam(key, defaultValue);
+    }), 2), innerValue = _a[0], setInnerValue = _a[1];
+    useEffect(function () {
+        var handleHashChange = function () {
+            return setInnerValue(getHashParam(key, defaultValue));
+        };
+        handleHashChange();
+        window.addEventListener("hashchange", handleHashChange);
+        return function () { return window.removeEventListener("hashchange", handleHashChange); };
+    }, [key]);
+    var setValue = useCallback(function (newValue, options) {
+        if (options === void 0) { options = { history: "replace" }; }
+        var newInnerValue = typeof newValue === "function"
+            ? newValue(getHashParam(key, defaultValue))
+            : newValue;
+        setInnerValue(newInnerValue);
+        setHashParam(key, newInnerValue, options.history === "replace");
+    }, [key]);
+    return [innerValue || defaultValue, setValue];
+};
+//# sourceMappingURL=useHashParams.js.map

package/dist/esm/hooks/useHashParams.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHashParams.js","sourceRoot":"","sources":["../../../src/hooks/useHashParams.ts"],"names":[],"mappings":"AAAA;;;GAGG;;AAEH,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,IAAM,mBAAmB,GAAG,UAAC,QAAkB;IAC7C,IAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAA,KAAA,OAAkB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAA,EAAhC,MAAM,QAAA,EAAE,KAAK,QAAmB,CAAC;IAExC,OAAO,CAAC,MAAM,EAAE,IAAI,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG,UAAC,GAAW,EAAE,YAAqB;;IACtD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,YAAY,CAAC;IACtB,CAAC;IAEK,IAAA,KAAA,OAAmB,mBAAmB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAA,EAApD,YAAY,QAAwC,CAAC;IAE9D,OAAO,MAAA,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,mCAAI,YAAY,CAAC;AAC/C,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG,UACnB,GAAW,EACX,KAAyB,EACzB,kBAA2B;IAE3B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAC5B,IAAA,KAAA,OAAyB,mBAAmB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAA,EAA5D,MAAM,QAAA,EAAE,YAAY,QAAwC,CAAC;QAEpE,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YACjD,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC/B,CAAC;QAED,IAAM,MAAM,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;QACvC,IAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,UAAG,MAAM,cAAI,MAAM,CAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QACrD,IAAI,kBAAkB,IAAI,cAAc,IAAI,OAAO,EAAE,CAAC;YACpD,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,WAAI,IAAI,CAAE,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;QAC9B,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAQF;;;;;GAKG;AAEH,MAAM,CAAC,IAAM,YAAY,GAAG,UAC1B,GAAW,EACX,YAAqB;IAEf,IAAA,KAAA,OAA8B,QAAQ,CAAqB;QAC/D,OAAA,YAAY,CAAC,GAAG,EAAE,YAAY,CAAC;IAA/B,CAA+B,CAChC,IAAA,EAFM,UAAU,QAAA,EAAE,aAAa,QAE/B,CAAC;IAEF,SAAS,CAAC;QACR,IAAM,gBAAgB,GAAG;YACvB,OAAA,aAAa,CAAC,YAAY,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;QAA9C,CAA8C,CAAC;QACjD,gBAAgB,EAAE,CAAC;QACnB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;QACxD,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAA1D,CAA0D,CAAC;IAC1E,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,IAAM,QAAQ,GAAG,WAAW,CAC1B,UACE,QAA2B,EAC3B,OAA+C;QAA/C,wBAAA,EAAA,YAA2B,OAAO,EAAE,SAAS,EAAE;QAE/C,IAAM,aAAa,GACjB,OAAO,QAAQ,KAAK,UAAU;YAC5B,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;YAC3C,CAAC,CAAC,QAAQ,CAAC;QAEf,aAAa,CAAC,aAAa,CAAC,CAAC;QAC7B,YAAY,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC;IAClE,CAAC,EACD,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,OAAO,CAAC,UAAU,IAAI,YAAY,EAAE,QAAQ,CAAC,CAAC;AAChD,CAAC,CAAC"}

package/dist/esm/hooks/usePaginationFromUrl.d.ts

@@ -0,0 +1,6 @@
+import { PaginationState } from "@tanstack/react-table";
+export declare const usePaginationFromUrl: (urlPrefix?: string, initialPageSize?: number) => {
+    pagination: PaginationState;
+    setPagination: (newValue: PaginationState) => void;
+};
+//# sourceMappingURL=usePaginationFromUrl.d.ts.map

package/dist/esm/hooks/usePaginationFromUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationFromUrl.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePaginationFromUrl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAOxD,eAAO,MAAM,oBAAoB,eACnB,MAAM;;8BAgBiB,eAAe;CAWnD,CAAC"}

package/dist/esm/hooks/usePaginationFromUrl.js

@@ -0,0 +1,23 @@
+import { __read } from "tslib";
+import { useMemo } from "react";
+import { useHashParam } from "../hooks/useHashParams";
+var defaultPageSize = 25;
+export var usePaginationFromUrl = function (urlPrefix, initialPageSize) {
+    if (initialPageSize === void 0) { initialPageSize = defaultPageSize; }
+    var _a = __read(useHashParam(urlPrefix ? "".concat(urlPrefix, "PageIndex") : "pageIndex"), 2), pageIndexParam = _a[0], setPageIndexParam = _a[1];
+    var _b = __read(useHashParam(urlPrefix ? "".concat(urlPrefix, "PageSize") : "pageSize"), 2), pageSizeParam = _b[0], setPageSizeParam = _b[1];
+    var pageIndex = pageIndexParam ? parseInt(pageIndexParam) : 0;
+    var pageSize = pageSizeParam ? parseInt(pageSizeParam) : initialPageSize;
+    var res = useMemo(function () {
+        var pagination = { pageIndex: pageIndex, pageSize: pageSize };
+        var setPagination = function (newValue) {
+            if (newValue.pageIndex !== pageIndex || newValue.pageSize !== pageSize) {
+                setPageIndexParam(newValue.pageIndex.toString());
+                setPageSizeParam(newValue.pageSize.toString());
+            }
+        };
+        return { pagination: pagination, setPagination: setPagination };
+    }, [pageIndex, pageSize, urlPrefix]);
+    return res;
+};
+//# sourceMappingURL=usePaginationFromUrl.js.map

package/dist/esm/hooks/usePaginationFromUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationFromUrl.js","sourceRoot":"","sources":["../../../src/hooks/usePaginationFromUrl.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,IAAM,eAAe,GAAG,EAAE,CAAC;AAE3B,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAClC,SAAkB,EAClB,eAAiC;IAAjC,gCAAA,EAAA,iCAAiC;IAE3B,IAAA,KAAA,OAAsC,YAAY,CACtD,SAAS,CAAC,CAAC,CAAC,UAAG,SAAS,cAAW,CAAC,CAAC,CAAC,WAAW,CAClD,IAAA,EAFM,cAAc,QAAA,EAAE,iBAAiB,QAEvC,CAAC;IACI,IAAA,KAAA,OAAoC,YAAY,CACpD,SAAS,CAAC,CAAC,CAAC,UAAG,SAAS,aAAU,CAAC,CAAC,CAAC,UAAU,CAChD,IAAA,EAFM,aAAa,QAAA,EAAE,gBAAgB,QAErC,CAAC;IAEF,IAAM,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChE,IAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;IAE3E,IAAM,GAAG,GAAG,OAAO,CAAC;QAClB,IAAM,UAAU,GAAoB,EAAE,SAAS,WAAA,EAAE,QAAQ,UAAA,EAAE,CAAC;QAE5D,IAAM,aAAa,GAAG,UAAC,QAAyB;YAC9C,IAAI,QAAQ,CAAC,SAAS,KAAK,SAAS,IAAI,QAAQ,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBACvE,iBAAiB,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACjD,gBAAgB,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;YACjD,CAAC;QACH,CAAC,CAAC;QAEF,OAAO,EAAE,UAAU,YAAA,EAAE,aAAa,eAAA,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAErC,OAAO,GAAG,CAAC;AACb,CAAC,CAAC"}

package/dist/esm/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./components";
 export { SparkleContext } from "./context";
+export * from "./hooks";
 export * from "./icons";
 export * from "./lib";
 export * from "./logo";

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 export * from "./components";
 export { SparkleContext } from "./context";
+export * from "./hooks";
 export * from "./icons";
 export * from "./lib";
 export * from "./logo";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}

package/dist/esm/stories/DataTable.stories.d.ts

@@ -6,4 +6,6 @@ declare const meta: {
 };
 export default meta;
 export declare const DataTableExample: () => React.JSX.Element;
+export declare const DataTablePaginatedExample: () => React.JSX.Element;
+export declare const DataTablePaginatedServerSideExample: () => React.JSX.Element;
 //# sourceMappingURL=DataTable.stories.d.ts.map

package/dist/esm/stories/DataTable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAc,MAAM,uBAAuB,CAAC;AAE9D,QAAA,MAAM,IAAI;;;CAGwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAiBpB,eAAO,MAAM,gBAAgB,yBA6I5B,CAAC"}
+{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,SAAS,EAAc,MAAM,uBAAuB,CAAC;AAE9D,QAAA,MAAM,IAAI;;;CAGwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AA+IpB,eAAO,MAAM,gBAAgB,yBAmB5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,yBA2BrC,CAAC;AAEF,eAAO,MAAM,mCAAmC,yBAkC/C,CAAC"}

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

@@ -1,116 +1,143 @@
-import React from "react";
+import { __read } from "tslib";
+import React, { useMemo } from "react";
+import { Input } from "../components/Input";
 import { DataTable, FolderIcon } from "../index_with_tw_base";
 var meta = {
     title: "Components/DataTable",
     component: DataTable,
 };
 export default meta;
+var data = [
+    {
+        name: "Soupinou with tooltip on avatar",
+        usedBy: 100,
+        addedBy: "User1",
+        lastUpdated: "July 8, 2023",
+        size: "32kb",
+        avatarUrl: "https://avatars.githubusercontent.com/u/138893015?s=200&v=4",
+        avatarTooltipLabel: "Meow",
+        roundedAvatar: true,
+        onClick: function () { return console.log("hehe"); },
+    },
+    {
+        name: "Marketing",
+        description: "(23 items)",
+        usedBy: 8,
+        addedBy: "User1",
+        lastUpdated: "July 8, 2023",
+        size: "32kb",
+        avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+        roundedAvatar: true,
+        onClick: function () { return alert("Marketing clicked"); },
+    },
+    {
+        name: "Design",
+        usedBy: 2,
+        addedBy: "User2",
+        lastUpdated: "2023-07-09",
+        size: "64kb",
+        icon: FolderIcon,
+        moreMenuItems: [
+            {
+                label: "Edit (disabled)",
+                onClick: function () { return alert("Design menu clicked"); },
+                disabled: true,
+            },
+        ],
+        onClick: function () { return alert("Design clicked"); },
+    },
+    {
+        name: "design",
+        usedBy: 3,
+        addedBy: "User21",
+        lastUpdated: "2023-07-09",
+        size: "64kb",
+        icon: FolderIcon,
+        moreMenuItems: [
+            {
+                label: "Edit",
+                onClick: function () { return alert("Design menu clicked"); },
+            },
+        ],
+    },
+    {
+        name: "Development",
+        usedBy: 5,
+        addedBy: "User3",
+        lastUpdated: "2023-07-07",
+        size: "128kb",
+    },
+    {
+        name: "Sales",
+        usedBy: 10,
+        addedBy: "User4",
+        lastUpdated: "2023-07-10",
+        size: "16kb",
+    },
+    {
+        name: "HR",
+        usedBy: 3,
+        addedBy: "User5",
+        lastUpdated: "2023-07-06",
+        size: "48kb",
+    },
+];
+var columns = [
+    {
+        accessorKey: "name",
+        header: "Name",
+        sortingFn: "text",
+        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)); },
+    },
+    {
+        accessorKey: "usedBy",
+        header: "Used by",
+        cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.usedBy)); },
+    },
+    {
+        accessorKey: "addedBy",
+        header: "Added by",
+        cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.addedBy)); },
+    },
+    {
+        accessorKey: "lastUpdated",
+        header: "Last updated",
+        cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.lastUpdated)); },
+        enableSorting: false,
+    },
+    {
+        accessorKey: "size",
+        header: "Size",
+        cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.size)); },
+    },
+];
 export var DataTableExample = function () {
-    var data = [
-        {
-            name: "Soupinou with tooltip on avatar",
-            usedBy: 100,
-            addedBy: "User1",
-            lastUpdated: "July 8, 2023",
-            size: "32kb",
-            avatarUrl: "https://avatars.githubusercontent.com/u/138893015?s=200&v=4",
-            avatarTooltipLabel: "Meow",
-            roundedAvatar: true,
-            onClick: function () { return console.log("hehe"); },
-        },
-        {
-            name: "Marketing",
-            description: "(23 items)",
-            usedBy: 8,
-            addedBy: "User1",
-            lastUpdated: "July 8, 2023",
-            size: "32kb",
-            avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
-            roundedAvatar: true,
-            onClick: function () { return alert("Marketing clicked"); },
-        },
-        {
-            name: "Design",
-            usedBy: 2,
-            addedBy: "User2",
-            lastUpdated: "2023-07-09",
-            size: "64kb",
-            icon: FolderIcon,
-            moreMenuItems: [
-                {
-                    label: "Edit (disabled)",
-                    onClick: function () { return alert("Design menu clicked"); },
-                    disabled: true,
-                },
-            ],
-            onClick: function () { return alert("Design clicked"); },
-        },
-        {
-            name: "design",
-            usedBy: 3,
-            addedBy: "User21",
-            lastUpdated: "2023-07-09",
-            size: "64kb",
-            icon: FolderIcon,
-            moreMenuItems: [
-                {
-                    label: "Edit",
-                    onClick: function () { return alert("Design menu clicked"); },
-                },
-            ],
-        },
-        {
-            name: "Development",
-            usedBy: 5,
-            addedBy: "User3",
-            lastUpdated: "2023-07-07",
-            size: "128kb",
-        },
-        {
-            name: "Sales",
-            usedBy: 10,
-            addedBy: "User4",
-            lastUpdated: "2023-07-10",
-            size: "16kb",
-        },
-        {
-            name: "HR",
-            usedBy: 3,
-            addedBy: "User5",
-            lastUpdated: "2023-07-06",
-            size: "48kb",
-        },
-    ];
-    var columns = [
-        {
-            accessorKey: "name",
-            header: "Name",
-            sortingFn: "text",
-            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)); },
-        },
-        {
-            accessorKey: "usedBy",
-            header: "Used by",
-            cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.usedBy)); },
-        },
-        {
-            accessorKey: "addedBy",
-            header: "Added by",
-            cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.addedBy)); },
-        },
-        {
-            accessorKey: "lastUpdated",
-            header: "Last updated",
-            cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.lastUpdated)); },
-            enableSorting: false,
-        },
-        {
-            accessorKey: "size",
-            header: "Size",
-            cell: function (info) { return (React.createElement(DataTable.CellContent, null, info.row.original.size)); },
-        },
-    ];
+    var _a = __read(React.useState(""), 2), filter = _a[0], setFilter = _a[1];
     return (React.createElement("div", { className: "s-w-full s-max-w-4xl s-overflow-x-auto" },
-        React.createElement(DataTable, { data: data, columns: columns, initialColumnOrder: [{ id: "name", desc: false }], columnsBreakpoints: { lastUpdated: "sm" } })));
+        React.createElement(Input, { name: "filter", placeholder: "Filter", value: filter, onChange: function (v) { return setFilter(v); } }),
+        React.createElement(DataTable, { data: data, filter: filter, filterColumn: "name", columns: columns })));
+};
+export var DataTablePaginatedExample = function () {
+    var _a = __read(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];
+    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 (v) { return setFilter(v); } }),
+        React.createElement(DataTable, { data: data, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, initialColumnOrder: [{ id: "name", desc: false }], columnsBreakpoints: { lastUpdated: "sm" } })));
+};
+export var DataTablePaginatedServerSideExample = function () {
+    var _a = __read(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];
+    var rows = useMemo(function () {
+        return data.slice(pagination.pageIndex * pagination.pageSize, (pagination.pageIndex + 1) * pagination.pageSize);
+    }, [data, pagination]);
+    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 (v) { return setFilter(v); } }),
+        React.createElement(DataTable, { data: rows, totalRowCount: data.length, filter: filter, filterColumn: "name", pagination: pagination, setPagination: setPagination, columns: columns, initialColumnOrder: [{ id: "name", desc: false }], columnsBreakpoints: { lastUpdated: "sm" } })));
 };
 //# sourceMappingURL=DataTable.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.stories.js","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTable.stories.js","sourceRoot":"","sources":["../../../src/stories/DataTable.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/stories/Pagination.stories.d.ts

@@ -8,4 +8,5 @@ export default meta;
 export declare const PaginationSM: () => React.JSX.Element;
 export declare const PaginationXS: () => React.JSX.Element;
 export declare const PaginationNoPageButtons: () => React.JSX.Element;
+export declare const PaginationWithUrl: () => React.JSX.Element;
 //# sourceMappingURL=Pagination.stories.d.ts.map

package/dist/esm/stories/Pagination.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Pagination.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAA,MAAM,IAAI;;;CAGyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,YAAY,yBAQxB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAUxB,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAWnC,CAAC"}
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Pagination.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAA,MAAM,IAAI;;;CAGyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,eAAO,MAAM,YAAY,yBAYxB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAcxB,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAenC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yBAa7B,CAAC"}

package/dist/esm/stories/Pagination.stories.js

@@ -1,4 +1,6 @@
+import { __read } from "tslib";
 import React from "react";
+import { usePaginationFromUrl } from "../hooks/usePaginationFromUrl";
 import { Pagination } from "../index_with_tw_base";
 var meta = {
     title: "Components/Pagination",
@@ -6,12 +8,32 @@ var meta = {
 };
 export default meta;
 export var PaginationSM = function () {
-    return (React.createElement(Pagination, { itemsCount: 960, maxItemsPerPage: 50, onButtonClick: function () { } }));
+    var _a = __read(React.useState({
+        pageIndex: 0,
+        pageSize: 50,
+    }), 2), pagination = _a[0], setPagination = _a[1];
+    return (React.createElement(Pagination, { rowCount: 960, pagination: pagination, setPagination: setPagination }));
 };
 export var PaginationXS = function () {
-    return (React.createElement(Pagination, { itemsCount: 960, maxItemsPerPage: 50, size: "xs", showDetails: false, onButtonClick: function () { } }));
+    var _a = __read(React.useState({
+        pageIndex: 0,
+        pageSize: 50,
+    }), 2), pagination = _a[0], setPagination = _a[1];
+    return (React.createElement(Pagination, { rowCount: 960, size: "xs", showDetails: false, pagination: pagination, setPagination: setPagination }));
 };
 export var PaginationNoPageButtons = function () {
-    return (React.createElement(Pagination, { itemsCount: 960, maxItemsPerPage: 50, size: "xs", showDetails: false, showPageButtons: false, onButtonClick: function () { } }));
+    var _a = __read(React.useState({
+        pageIndex: 0,
+        pageSize: 50,
+    }), 2), pagination = _a[0], setPagination = _a[1];
+    return (React.createElement(Pagination, { rowCount: 960, size: "xs", showDetails: false, showPageButtons: false, pagination: pagination, setPagination: setPagination }));
+};
+export var PaginationWithUrl = function () {
+    var _a = usePaginationFromUrl("example", 50), pagination = _a.pagination, setPagination = _a.setPagination;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "s-p-2" },
+            "Current hash: ",
+            location.hash),
+        React.createElement(Pagination, { rowCount: 960, pagination: pagination, setPagination: setPagination })));
 };
 //# sourceMappingURL=Pagination.stories.js.map

package/dist/esm/stories/Pagination.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.stories.js","sourceRoot":"","sources":["../../../src/stories/Pagination.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;CACY,CAAC;AAEpC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,YAAY,GAAG;IAC1B,OAAO,CACL,oBAAC,UAAU,IACT,UAAU,EAAE,GAAG,EACf,eAAe,EAAE,EAAE,EACnB,aAAa,EAAE,cAAO,CAAC,GACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,YAAY,GAAG;IAC1B,OAAO,CACL,oBAAC,UAAU,IACT,UAAU,EAAE,GAAG,EACf,eAAe,EAAE,EAAE,EACnB,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,cAAO,CAAC,GACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG;IACrC,OAAO,CACL,oBAAC,UAAU,IACT,UAAU,EAAE,GAAG,EACf,eAAe,EAAE,EAAE,EACnB,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,KAAK,EAClB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,cAAO,CAAC,GACvB,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Pagination.stories.js","sourceRoot":"","sources":["../../../src/stories/Pagination.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;CACY,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,MAAM,CAAC,IAAM,YAAY,GAAG;IACpB,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAC;QACjD,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,EAAE;KACb,CAAC,IAAA,EAHK,UAAU,QAAA,EAAE,aAAa,QAG9B,CAAC;IACH,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,GAAG,EACb,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,YAAY,GAAG;IACpB,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAC;QACjD,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,EAAE;KACb,CAAC,IAAA,EAHK,UAAU,QAAA,EAAE,aAAa,QAG9B,CAAC;IACH,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,GAAG,EACb,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG;IAC/B,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAC;QACjD,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,EAAE;KACb,CAAC,IAAA,EAHK,UAAU,QAAA,EAAE,aAAa,QAG9B,CAAC;IACH,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,GAAG,EACb,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,KAAK,EAClB,eAAe,EAAE,KAAK,EACtB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG;IACzB,IAAA,KAAgC,oBAAoB,CAAC,SAAS,EAAE,EAAE,CAAC,EAAjE,UAAU,gBAAA,EAAE,aAAa,mBAAwC,CAAC;IAE1E,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,OAAO;;YAAgB,QAAQ,CAAC,IAAI,CAAO;QAC1D,oBAAC,UAAU,IACT,QAAQ,EAAE,GAAG,EACb,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,GAC5B,CACD,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/sparkle.css

@@ -3016,6 +3016,10 @@ select {
   padding: 0px;
 }
 
+.s-p-1 {
+  padding: 0.25rem;
+}
+
 .s-p-10 {
   padding: 2.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.225",
+  "version": "0.2.227-rc",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",