@dust-tt/sparkle 0.2.559 → 0.2.562

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.559",
+  "version": "0.2.562",
   "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",

package/src/components/DataTable.tsx

@@ -39,6 +39,10 @@ import {
   Spinner,
   Tooltip,
 } from "@sparkle/components";
+import {
+  radioIndicatorStyles,
+  radioStyles,
+} from "@sparkle/components/RadioGroup";
 import { useCopyToClipboard } from "@sparkle/hooks";
 import {
   ArrowDownIcon,
@@ -107,6 +111,7 @@ interface DataTableProps<TData extends TBaseData> {
   rowSelection?: RowSelectionState;
   setRowSelection?: (rowSelection: RowSelectionState) => void;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+  enableMultiRowSelection?: boolean;
 }
 
 export function DataTable<TData extends TBaseData>({
@@ -128,6 +133,7 @@ export function DataTable<TData extends TBaseData>({
   rowSelection,
   setRowSelection,
   enableRowSelection = false,
+  enableMultiRowSelection = true,
   getRowId,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
@@ -198,6 +204,7 @@ export function DataTable<TData extends TBaseData>({
     },
     onPaginationChange,
     enableRowSelection,
+    enableMultiRowSelection,
     getRowId,
   });
 
@@ -328,6 +335,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
   rowSelection,
   setRowSelection,
   enableRowSelection,
+  enableMultiRowSelection = true,
   getRowId,
 }: ScrollableDataTableProps<TData>) {
   const windowSize = useWindowSize();
@@ -369,7 +377,6 @@ export function ScrollableDataTable<TData extends TBaseData>({
     rowCount: totalRowCount,
     getCoreRowModel: getCoreRowModel(),
     enableColumnResizing: true,
-    onRowSelectionChange,
     ...(enableRowSelection && {
       onRowSelectionChange,
     }),
@@ -377,6 +384,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
       ...(enableRowSelection && { rowSelection }),
     },
     enableRowSelection,
+    enableMultiRowSelection,
     getRowId,
   });
 
@@ -693,8 +701,7 @@ DataTable.Row = function Row({
         onClick
           ? "s-cursor-pointer hover:s-bg-muted dark:hover:s-bg-muted-night"
           : "",
-        props["data-selected"] &&
-          "s-bg-highlight-50 dark:s-bg-highlight-900/10",
+        props["data-selected"] && "s-bg-muted/50 dark:s-bg-muted/50",
         widthClassName,
         className
       )}
@@ -1119,3 +1126,37 @@ export function createSelectionColumn<TData>(): ColumnDef<TData> {
     },
   };
 }
+
+export function createRadioSelectionColumn<TData>(): ColumnDef<TData> {
+  return {
+    id: "radio-select",
+    enableSorting: false,
+    enableHiding: false,
+    header: () => null,
+    cell: ({ row }) => (
+      <div className="s-flex s-h-full s-w-full s-items-center">
+        <button
+          type="button"
+          className={cn(
+            radioStyles({ size: "xs" }),
+            row.getIsSelected() && "s-bg-muted/50 dark:s-bg-muted/50",
+            row.getCanSelect() && "s-cursor-pointer"
+          )}
+          onClick={() =>
+            row.getCanSelect() && row.toggleSelected(!row.getIsSelected())
+          }
+          disabled={!row.getCanSelect()}
+          aria-checked={row.getIsSelected()}
+          role="radio"
+        >
+          {row.getIsSelected() && (
+            <div className={radioIndicatorStyles({ size: "xs" })} />
+          )}
+        </button>
+      </div>
+    ),
+    meta: {
+      className: "s-w-10",
+    },
+  };
+}

package/src/components/RadioGroup.tsx

@@ -7,7 +7,7 @@ import { Label } from "@sparkle/components/Label";
 import { Tooltip } from "@sparkle/components/Tooltip";
 import { cn } from "@sparkle/lib/utils";
 
-const radioStyles = cva(
+export const radioStyles = cva(
   cn(
     "s-aspect-square s-rounded-full s-border",
     "s-s-border-border-dark dark:s-border-primary-500",
@@ -32,7 +32,7 @@ const radioStyles = cva(
   }
 );
 
-const radioIndicatorStyles = cva(
+export const radioIndicatorStyles = cva(
   "s-bg-primary dark:s-bg-primary-night s-flex s-items-center s-justify-center s-rounded-full",
   {
     variants: {

package/src/components/TextArea.tsx

@@ -110,4 +110,19 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 );
 TextArea.displayName = "TextArea";
 
-export { TextArea };
+const ReadOnlyTextArea = ({ content }: { content: string | null }) => {
+  return (
+    <TextArea
+      disabled
+      isDisplay
+      className={cn(
+        "s-copy-sm s-h-full s-min-h-60 s-w-full s-min-w-0 s-rounded-xl",
+        "s-resize-none s-border-border s-bg-muted-background",
+        "dark:s-border-border-night dark:s-bg-muted-background-night"
+      )}
+      defaultValue={content ?? ""}
+    />
+  );
+};
+
+export { ReadOnlyTextArea, TextArea };

package/src/components/index.ts

@@ -162,7 +162,7 @@ export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
 export { FlexSplitButton, SplitButton } from "./SplitButton";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
-export { TextArea } from "./TextArea";
+export { ReadOnlyTextArea, TextArea } from "./TextArea";
 export {
   Tooltip,
   TooltipContent,

package/src/hooks/index.ts

@@ -1,3 +1 @@
 export * from "./useCopyToClipboard";
-export * from "./useHashParams";
-export * from "./usePaginationFromUrl";

package/src/stories/DataTable.stories.tsx

@@ -20,7 +20,11 @@ import {
   Input,
   ScrollableDataTable,
 } from "@sparkle/components/";
-import { createSelectionColumn, MenuItem } from "@sparkle/components/DataTable";
+import {
+  createRadioSelectionColumn,
+  createSelectionColumn,
+  MenuItem,
+} from "@sparkle/components/DataTable";
 import { FolderIcon } from "@sparkle/icons/app";
 
 const meta = {
@@ -649,3 +653,59 @@ export const DataTableWithRowSelectionExample = () => {
     </div>
   );
 };
+
+export const DataTableWithRadioSelectionExample = () => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [data] = useState<Data[]>(() => createData(0, 10));
+  const [filter, setFilter] = useState("");
+
+  const columnsWithRadioSelection: ColumnDef<Data>[] = useMemo(
+    () => [createRadioSelectionColumn<Data>(), ...columns],
+    []
+  );
+
+  // Get the selected row ID from rowSelection state
+  const selectedRowId = Object.keys(rowSelection).find(
+    (id) => rowSelection[id]
+  );
+
+  return (
+    <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
+      <h3 className="s-text-lg s-font-medium">
+        DataTable with Radio Selection (Single Row)
+      </h3>
+
+      <div className="s-flex s-flex-col s-gap-4">
+        <Input
+          name="filter"
+          placeholder="Filter"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+
+        <DataTable
+          data={data}
+          filter={filter}
+          filterColumn="name"
+          columns={columnsWithRadioSelection}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={true}
+          enableMultiRowSelection={false}
+          getRowId={(row) => row.name}
+        />
+
+        <div className="s-rounded-md s-border s-bg-muted/50 s-p-2">
+          <h4 className="s-mb-2 s-font-medium">Radio Selection State:</h4>
+          <pre className="s-overflow-auto s-text-xs">
+            {JSON.stringify(rowSelection, null, 2)}
+          </pre>
+          <p className="s-mt-2 s-text-sm">
+            {selectedRowId ? `Selected: ${selectedRowId}` : "No row selected"}{" "}
+            (only one row can be selected at a time)
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,19 +0,0 @@
-/**
- * Original code from : https://www.npmjs.com/package/use-hash-param
- * ISC License
- */
-type Updater = (prevValue?: string) => string;
-export type HistoryOptions = "replace" | "push";
-type SetterOptions = {
-    history: HistoryOptions;
-};
-type Setter = (value?: string | Updater, options?: SetterOptions) => void;
-/**
- * @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 declare const useHashParam: (key: string, defaultValue?: string) => [string | undefined, Setter];
-export {};
-//# sourceMappingURL=useHashParams.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useHashParams.d.ts","sourceRoot":"","sources":["../../../src/hooks/useHashParams.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAgDH,KAAK,OAAO,GAAG,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhD,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,cAAc,CAAC;CACzB,CAAC;AACF,KAAK,MAAM,GAAG,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;AAE1E;;;;;GAKG;AAEH,eAAO,MAAM,YAAY,QAClB,MAAM,iBACI,MAAM,KACpB,CAAC,MAAM,GAAG,SAAS,EAAE,MAAM,CA8B7B,CAAC"}

package/dist/esm/hooks/useHashParams.js

@@ -1,69 +0,0 @@
-/**
- * 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 = window.location, pathname = _a.pathname, search = _a.search;
-        var _b = __read(getHashSearchParams(window.location), 2), prefix = _b[0], searchParams = _b[1];
-        if (typeof value === "undefined" || value === "") {
-            searchParams.delete(key);
-        }
-        else {
-            searchParams.set(key, value);
-        }
-        var hashSearch = searchParams.toString();
-        var hash = hashSearch ? "".concat(prefix, "?").concat(hashSearch) : prefix;
-        var newUrl = "".concat(pathname).concat(search, "#").concat(hash);
-        if (shouldReplaceState && "replaceState" in history) {
-            history.replaceState(null, "", newUrl);
-        }
-        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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"usePaginationFromUrl.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePaginationFromUrl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,EAAE,cAAc,EAAgB,MAAM,8BAA8B,CAAC;AAI5E,eAAO,MAAM,oBAAoB,oDAI9B;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;;8BAee,eAAe,YACf,cAAc;CAc7B,CAAC"}

package/dist/esm/hooks/usePaginationFromUrl.js

@@ -1,25 +0,0 @@
-import { __read } from "tslib";
-import { useMemo } from "react";
-import { useHashParam } from "../hooks/useHashParams";
-var defaultPageSize = 25;
-export var usePaginationFromUrl = function (_a) {
-    var urlPrefix = _a.urlPrefix, _b = _a.initialPageSize, initialPageSize = _b === void 0 ? defaultPageSize : _b, _c = _a.defaultHistory, defaultHistory = _c === void 0 ? "push" : _c;
-    var _d = __read(useHashParam(urlPrefix ? "".concat(urlPrefix, "PageIndex") : "pageIndex"), 2), pageIndexParam = _d[0], setPageIndexParam = _d[1];
-    var _e = __read(useHashParam(urlPrefix ? "".concat(urlPrefix, "PageSize") : "pageSize"), 2), pageSizeParam = _e[0], setPageSizeParam = _e[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, history) {
-            if (newValue.pageIndex !== pageIndex || newValue.pageSize !== pageSize) {
-                setPageIndexParam(newValue.pageIndex.toString(), {
-                    history: history !== null && history !== void 0 ? history : defaultHistory,
-                });
-                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

@@ -1 +0,0 @@
-{"version":3,"file":"usePaginationFromUrl.js","sourceRoot":"","sources":["../../../src/hooks/usePaginationFromUrl.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAkB,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5E,IAAM,eAAe,GAAG,EAAE,CAAC;AAE3B,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,EAQpC;QAPC,SAAS,eAAA,EACT,uBAAiC,EAAjC,eAAe,mBAAG,eAAe,KAAA,EACjC,sBAAuB,EAAvB,cAAc,mBAAG,MAAM,KAAA;IAMjB,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,UACpB,QAAyB,EACzB,OAAwB;YAExB,IAAI,QAAQ,CAAC,SAAS,KAAK,SAAS,IAAI,QAAQ,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBACvE,iBAAiB,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE;oBAC/C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,cAAc;iBACnC,CAAC,CAAC;gBACH,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/stories/Pagination.stories.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { Pagination } from "../index_with_tw_base";
-declare const meta: {
-    title: string;
-    component: typeof Pagination;
-};
-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 PaginationButtonsDisabled: () => 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 +0,0 @@
-{"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,yBAAyB,yBAarC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yBAgB7B,CAAC"}

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

@@ -1,49 +0,0 @@
-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",
-    component: Pagination,
-};
-export default meta;
-export var PaginationSM = 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 () {
-    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 () {
-    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 PaginationButtonsDisabled = 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, disablePaginationNumbers: true }));
-};
-export var PaginationWithUrl = function () {
-    var _a = usePaginationFromUrl({
-        urlPrefix: "example",
-        initialPageSize: 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 +0,0 @@
-{"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,yBAAyB,GAAG;IACjC,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,EAC5B,wBAAwB,SACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG;IACzB,IAAA,KAAgC,oBAAoB,CAAC;QACzD,SAAS,EAAE,SAAS;QACpB,eAAe,EAAE,EAAE;KACpB,CAAC,EAHM,UAAU,gBAAA,EAAE,aAAa,mBAG/B,CAAC;IAEH,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/src/hooks/useHashParams.ts

@@ -1,101 +0,0 @@
-/**
- * Original code from : https://www.npmjs.com/package/use-hash-param
- * ISC License
- */
-
-import { useCallback, useEffect, useState } from "react";
-
-const getHashSearchParams = (location: Location): [string, URLSearchParams] => {
-  const hash = location.hash.slice(1);
-  const [prefix, query] = hash.split("?");
-
-  return [prefix, new URLSearchParams(query)];
-};
-
-const getHashParam = (key: string, defaultValue?: string) => {
-  if (typeof window === "undefined") {
-    return defaultValue;
-  }
-
-  const [, searchParams] = getHashSearchParams(window.location);
-
-  return searchParams.get(key) ?? defaultValue;
-};
-
-const setHashParam = (
-  key: string,
-  value: string | undefined,
-  shouldReplaceState: boolean
-) => {
-  if (typeof window !== "undefined") {
-    const { pathname, search } = window.location;
-    const [prefix, searchParams] = getHashSearchParams(window.location);
-
-    if (typeof value === "undefined" || value === "") {
-      searchParams.delete(key);
-    } else {
-      searchParams.set(key, value);
-    }
-
-    const hashSearch = searchParams.toString();
-    const hash = hashSearch ? `${prefix}?${hashSearch}` : prefix;
-    const newUrl = `${pathname}${search}#${hash}`;
-
-    if (shouldReplaceState && "replaceState" in history) {
-      history.replaceState(null, "", newUrl);
-    } else {
-      window.location.hash = hash;
-    }
-  }
-};
-
-type Updater = (prevValue?: string) => string;
-
-export type HistoryOptions = "replace" | "push";
-
-type SetterOptions = {
-  history: HistoryOptions;
-};
-type Setter = (value?: string | Updater, options?: SetterOptions) => void;
-
-/**
- * @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 const useHashParam = (
-  key: string,
-  defaultValue?: string
-): [string | undefined, Setter] => {
-  const [innerValue, setInnerValue] = useState<string | undefined>(() =>
-    getHashParam(key, defaultValue)
-  );
-
-  useEffect(() => {
-    const handleHashChange = () =>
-      setInnerValue(getHashParam(key, defaultValue));
-    handleHashChange();
-    window.addEventListener("hashchange", handleHashChange);
-    return () => window.removeEventListener("hashchange", handleHashChange);
-  }, [key]);
-
-  const setValue = useCallback<Setter>(
-    (
-      newValue?: string | Updater,
-      options: SetterOptions = { history: "replace" }
-    ) => {
-      const newInnerValue =
-        typeof newValue === "function"
-          ? newValue(getHashParam(key, defaultValue))
-          : newValue;
-
-      setInnerValue(newInnerValue);
-      setHashParam(key, newInnerValue, options.history === "replace");
-    },
-    [key]
-  );
-
-  return [innerValue || defaultValue, setValue];
-};

package/src/hooks/usePaginationFromUrl.ts

@@ -1,46 +0,0 @@
-import { PaginationState } from "@tanstack/react-table";
-import { useMemo } from "react";
-
-import { HistoryOptions, useHashParam } from "@sparkle/hooks/useHashParams";
-
-const defaultPageSize = 25;
-
-export const usePaginationFromUrl = ({
-  urlPrefix,
-  initialPageSize = defaultPageSize,
-  defaultHistory = "push",
-}: {
-  urlPrefix?: string;
-  initialPageSize?: number;
-  defaultHistory?: HistoryOptions;
-}) => {
-  const [pageIndexParam, setPageIndexParam] = useHashParam(
-    urlPrefix ? `${urlPrefix}PageIndex` : "pageIndex"
-  );
-  const [pageSizeParam, setPageSizeParam] = useHashParam(
-    urlPrefix ? `${urlPrefix}PageSize` : "pageSize"
-  );
-
-  const pageIndex = pageIndexParam ? parseInt(pageIndexParam) : 0;
-  const pageSize = pageSizeParam ? parseInt(pageSizeParam) : initialPageSize;
-
-  const res = useMemo(() => {
-    const pagination: PaginationState = { pageIndex, pageSize };
-
-    const setPagination = (
-      newValue: PaginationState,
-      history?: HistoryOptions
-    ) => {
-      if (newValue.pageIndex !== pageIndex || newValue.pageSize !== pageSize) {
-        setPageIndexParam(newValue.pageIndex.toString(), {
-          history: history ?? defaultHistory,
-        });
-        setPageSizeParam(newValue.pageSize.toString());
-      }
-    };
-
-    return { pagination, setPagination };
-  }, [pageIndex, pageSize, urlPrefix]);
-
-  return res;
-};