@dust-tt/sparkle 0.2.225 → 0.2.226

package/dist/cjs/index.js

@@ -101681,10 +101681,10 @@ const RowExpanding = {
 //
 
 const defaultPageIndex = 0;
-const defaultPageSize = 10;
+const defaultPageSize$1 = 10;
 const getDefaultPaginationState = () => ({
   pageIndex: defaultPageIndex,
-  pageSize: defaultPageSize
+  pageSize: defaultPageSize$1
 });
 const RowPagination = {
   getInitialState: state => {
@@ -101749,7 +101749,7 @@ const RowPagination = {
     };
     table.resetPageSize = defaultState => {
       var _table$initialState$p3, _table$initialState2;
-      table.setPageSize(defaultState ? defaultPageSize : (_table$initialState$p3 = (_table$initialState2 = table.initialState) == null || (_table$initialState2 = _table$initialState2.pagination) == null ? void 0 : _table$initialState2.pageSize) != null ? _table$initialState$p3 : defaultPageSize);
+      table.setPageSize(defaultState ? defaultPageSize$1 : (_table$initialState$p3 = (_table$initialState2 = table.initialState) == null || (_table$initialState2 = _table$initialState2.pagination) == null ? void 0 : _table$initialState2.pageSize) != null ? _table$initialState$p3 : defaultPageSize$1);
     };
     table.setPageSize = updater => {
       table.setPagination(old => {
@@ -102873,6 +102873,22 @@ function getCoreRowModel() {
     return rowModel;
   }, getMemoOptions(table.options, 'debugTable', 'getRowModel', () => table._autoResetPageIndex()));
 }
+function expandRows(rowModel) {
+  const expandedRows = [];
+  const handleRow = row => {
+    var _row$subRows;
+    expandedRows.push(row);
+    if ((_row$subRows = row.subRows) != null && _row$subRows.length && row.getIsExpanded()) {
+      row.subRows.forEach(handleRow);
+    }
+  };
+  rowModel.rows.forEach(handleRow);
+  return {
+    rows: expandedRows,
+    flatRows: rowModel.flatRows,
+    rowsById: rowModel.rowsById
+  };
+}
 
 function filterRows(rows, filterRowImpl, table) {
   if (table.options.filterFromLeafRows) {
@@ -103063,6 +103079,49 @@ function getFilteredRowModel() {
   }, getMemoOptions(table.options, 'debugTable', 'getFilteredRowModel', () => table._autoResetPageIndex()));
 }
 
+function getPaginationRowModel(opts) {
+  return table => memo(() => [table.getState().pagination, table.getPrePaginationRowModel(), table.options.paginateExpandedRows ? undefined : table.getState().expanded], (pagination, rowModel) => {
+    if (!rowModel.rows.length) {
+      return rowModel;
+    }
+    const {
+      pageSize,
+      pageIndex
+    } = pagination;
+    let {
+      rows,
+      flatRows,
+      rowsById
+    } = rowModel;
+    const pageStart = pageSize * pageIndex;
+    const pageEnd = pageStart + pageSize;
+    rows = rows.slice(pageStart, pageEnd);
+    let paginatedRowModel;
+    if (!table.options.paginateExpandedRows) {
+      paginatedRowModel = expandRows({
+        rows,
+        flatRows,
+        rowsById
+      });
+    } else {
+      paginatedRowModel = {
+        rows,
+        flatRows,
+        rowsById
+      };
+    }
+    paginatedRowModel.flatRows = [];
+    const handleRow = row => {
+      paginatedRowModel.flatRows.push(row);
+      if (row.subRows.length) {
+        row.subRows.forEach(handleRow);
+      }
+    };
+    paginatedRowModel.rows.forEach(handleRow);
+    return paginatedRowModel;
+  }, getMemoOptions(table.options, 'debugTable', 'getPaginationRowModel'));
+}
+
 function getSortedRowModel() {
   return table => memo(() => [table.getState().sorting, table.getPreSortedRowModel()], (sorting, rowModel) => {
     if (!rowModel.rows.length || !(sorting != null && sorting.length)) {
@@ -103218,6 +103277,86 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
+var pagesShownInControls = 7;
+function Pagination(_a) {
+    var _b = _a.size, size = _b === void 0 ? "sm" : _b, _c = _a.showDetails, showDetails = _c === void 0 ? true : _c, _d = _a.showPageButtons, showPageButtons = _d === void 0 ? true : _d, rowCount = _a.rowCount, pagination = _a.pagination, setPagination = _a.setPagination;
+    // pageIndex is 0-based
+    var pageIndex = pagination.pageIndex, pageSize = pagination.pageSize;
+    var numPages = Math.ceil(rowCount / pageSize);
+    var canNextPage = pagination.pageIndex < numPages - 1;
+    var canPreviousPage = pageIndex > 0;
+    var nextPage = function () { return setPagination({ pageSize: pageSize, pageIndex: pageIndex + 1 }); };
+    var previousPage = function () {
+        return setPagination({ pageSize: pageSize, pageIndex: pageIndex - 1 });
+    };
+    var controlsAreHidden = Boolean(numPages <= 1);
+    var firstItemOnPageIndex = pageIndex * pageSize + 1;
+    var lastItemOnPageIndex = rowCount > (pageIndex + 1) * pageSize
+        ? (pageIndex + 1) * pageSize
+        : rowCount;
+    var onPaginationButtonClick = React.useCallback(function (pageIndex) {
+        setPagination({ pageSize: pageSize, pageIndex: pageIndex });
+    }, [pageIndex, setPagination]);
+    var pageButtons = getPageButtons(pageIndex, numPages, pagesShownInControls, onPaginationButtonClick, size);
+    return (React.createElement("div", { className: classNames("s-flex s-w-full s-items-center", controlsAreHidden ? "s-justify-end" : "s-justify-between") },
+        React.createElement("div", { className: classNames("s-flex", controlsAreHidden ? "s-invisible" : "s-visible", showPageButtons ? "s-gap-0" : "s-gap-2") },
+            React.createElement(Button, { variant: "tertiary", size: size === "xs" ? "xs" : "sm", label: "previous", labelVisible: false, disabledTooltip: true, disabled: !canPreviousPage, icon: SvgChevronLeft$1, onClick: previousPage }),
+            React.createElement("div", { className: classNames("s-items-center", size === "xs" ? "s-gap-3 s-px-3" : "s-gap-4 s-px-4", showPageButtons ? "s-flex" : "s-hidden") }, pageButtons),
+            React.createElement(Button, { variant: "tertiary", size: size === "xs" ? "xs" : "sm", label: "next", labelVisible: false, disabledTooltip: true, disabled: !canNextPage, icon: SvgChevronRight$1, onClick: nextPage })),
+        React.createElement("span", { className: classNames("s-text-slate-400", size === "xs" ? "s-text-xs" : "s-text-sm", showDetails ? "s-visible" : "s-collapse") }, controlsAreHidden
+            ? "".concat(rowCount, " items")
+            : "Showing ".concat(firstItemOnPageIndex, "-").concat(lastItemOnPageIndex, " of ").concat(rowCount, " items"))));
+}
+function renderPageNumber(pageNumber, currentPage, onPageClick, size) {
+    return (React.createElement("button", { key: pageNumber, className: classNames("s-font-semibold s-transition-colors s-duration-100", currentPage === pageNumber ? "s-text-action-500" : "s-text-slate-400", size === "xs" ? "s-text-xs" : "s-text-sm"), onClick: function () { return onPageClick(pageNumber); } }, pageNumber + 1));
+}
+function renderEllipses(size) {
+    return (React.createElement("span", { className: classNames("s-text-sm s-font-semibold s-text-slate-400", size === "xs" ? "s-text-xs" : "s-text-sm") }, "..."));
+}
+function getPageButtons(currentPage, totalPages, slots, onPageClick, size) {
+    var pagination = [];
+    // If total pages are less than or equal to slots, show all pages
+    if (totalPages <= slots) {
+        for (var i = 0; i < totalPages; i++) {
+            pagination.push(renderPageNumber(i, currentPage, onPageClick, size));
+        }
+        return pagination;
+    }
+    var remainingSlots = slots - 2; // slots excluding first and last page
+    var halfSlots = Math.floor(remainingSlots / 2);
+    // Ensure current page is within bounds
+    currentPage = Math.max(0, Math.min(currentPage, totalPages - 1));
+    pagination.push(renderPageNumber(0, currentPage, onPageClick, size)); // Always show the first page
+    // Determine the range of pages to display
+    var start, end;
+    if (currentPage <= halfSlots + 1) {
+        start = 1;
+        end = remainingSlots - 1;
+    }
+    else if (currentPage >= totalPages - halfSlots - 2) {
+        start = totalPages - remainingSlots;
+        end = totalPages - 2;
+    }
+    else {
+        start = currentPage - halfSlots + 1;
+        end = currentPage + halfSlots - 1;
+    }
+    // Add ellipsis if there is a gap between the first page and the start of the range
+    if (start > 1) {
+        pagination.push(renderEllipses(size));
+    }
+    // Add the range of pages
+    for (var i = start; i <= end; i++) {
+        pagination.push(renderPageNumber(i, currentPage, onPageClick, size));
+    }
+    // Add ellipsis if there is a gap between the end of the range and the last page
+    if (end < totalPages - 2) {
+        pagination.push(renderEllipses(size));
+    }
+    pagination.push(renderPageNumber(totalPages - 1, currentPage, onPageClick, size)); // Always show the last page
+    return pagination;
+}
+
 // Define breakpoints
 var breakpoints = {
     xs: 0,
@@ -103276,22 +103415,37 @@ function shouldRenderColumn(windowWidth, breakpoint) {
     return windowWidth >= breakpoints[breakpoint];
 }
 function DataTable(_a) {
-    var data = _a.data, columns = _a.columns, className = _a.className, filter = _a.filter, filterColumn = _a.filterColumn, initialColumnOrder = _a.initialColumnOrder, _b = _a.columnsBreakpoints, columnsBreakpoints = _b === void 0 ? {} : _b;
+    var data = _a.data, totalRowCount = _a.totalRowCount, columns = _a.columns, className = _a.className, filter = _a.filter, filterColumn = _a.filterColumn, initialColumnOrder = _a.initialColumnOrder, _b = _a.columnsBreakpoints, columnsBreakpoints = _b === void 0 ? {} : _b, pagination = _a.pagination, setPagination = _a.setPagination;
     var windowSize = useWindowSize();
     var _c = __read(React.useState(initialColumnOrder !== null && initialColumnOrder !== void 0 ? initialColumnOrder : []), 2), sorting = _c[0], setSorting = _c[1];
     var _d = __read(React.useState([]), 2), columnFilters = _d[0], setColumnFilters = _d[1];
+    var isServerSidePagination = !!totalRowCount && totalRowCount > data.length;
+    var onPaginationChange = pagination && setPagination
+        ? function (updater) {
+            var newValue = typeof updater === "function" ? updater(pagination) : updater;
+            setPagination(newValue);
+        }
+        : undefined;
     var table = useReactTable({
         data: data,
         columns: columns,
+        rowCount: totalRowCount,
+        manualPagination: isServerSidePagination,
         onSortingChange: setSorting,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
+        getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
         onColumnFiltersChange: setColumnFilters,
         state: {
             columnFilters: columnFilters,
-            sorting: sorting,
+            sorting: isServerSidePagination ? undefined : sorting,
+            pagination: pagination,
         },
+        initialState: {
+            pagination: pagination,
+        },
+        onPaginationChange: onPaginationChange,
     });
     React.useEffect(function () {
         var _a;
@@ -103299,32 +103453,35 @@ function DataTable(_a) {
             (_a = table.getColumn(filterColumn)) === null || _a === void 0 ? void 0 : _a.setFilterValue(filter);
         }
     }, [filter, filterColumn]);
-    return (React.createElement(DataTable.Root, { className: className },
-        React.createElement(DataTable.Header, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(DataTable.Row, { key: headerGroup.id }, headerGroup.headers.map(function (header) {
-            var breakpoint = columnsBreakpoints[header.id];
-            if (!windowSize.width ||
-                !shouldRenderColumn(windowSize.width, breakpoint)) {
-                return null;
-            }
-            return (React.createElement(DataTable.Head, { key: header.id, onClick: header.column.getToggleSortingHandler(), className: classNames(header.column.getCanSort() ? "s-cursor-pointer" : "") },
-                React.createElement("div", { className: "s-flex s-items-center s-space-x-1 s-whitespace-nowrap" },
-                    flexRender(header.column.columnDef.header, header.getContext()),
-                    header.column.getCanSort() && (React.createElement(Icon, { visual: header.column.getIsSorted() === "asc"
-                            ? SvgArrowUp$1
-                            : header.column.getIsSorted() === "desc"
-                                ? SvgArrowDown$1
-                                : SvgArrowDown$1, size: "xs", className: classNames("s-ml-1", header.column.getIsSorted()
-                            ? "s-opacity-100"
-                            : "s-opacity-0") })))));
-        }))); })),
-        React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { key: row.id, onClick: row.original.onClick, moreMenuItems: row.original.moreMenuItems }, row.getVisibleCells().map(function (cell) {
-            var breakpoint = columnsBreakpoints[cell.column.id];
-            if (!windowSize.width ||
-                !shouldRenderColumn(windowSize.width, breakpoint)) {
-                return null;
-            }
-            return (React.createElement(DataTable.Cell, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())));
-        }))); }))));
+    return (React.createElement("div", { className: "s-flex s-flex-col s-gap-2" },
+        React.createElement(DataTable.Root, { className: className },
+            React.createElement(DataTable.Header, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(DataTable.Row, { key: headerGroup.id }, headerGroup.headers.map(function (header) {
+                var breakpoint = columnsBreakpoints[header.id];
+                if (!windowSize.width ||
+                    !shouldRenderColumn(windowSize.width, breakpoint)) {
+                    return null;
+                }
+                return (React.createElement(DataTable.Head, { key: header.id, onClick: header.column.getToggleSortingHandler(), className: classNames(header.column.getCanSort() ? "s-cursor-pointer" : "") },
+                    React.createElement("div", { className: "s-flex s-items-center s-space-x-1 s-whitespace-nowrap" },
+                        flexRender(header.column.columnDef.header, header.getContext()),
+                        header.column.getCanSort() && (React.createElement(Icon, { visual: header.column.getIsSorted() === "asc"
+                                ? SvgArrowUp$1
+                                : header.column.getIsSorted() === "desc"
+                                    ? SvgArrowDown$1
+                                    : SvgArrowDown$1, size: "xs", className: classNames("s-ml-1", header.column.getIsSorted()
+                                ? "s-opacity-100"
+                                : "s-opacity-0") })))));
+            }))); })),
+            React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { key: row.id, onClick: row.original.onClick, moreMenuItems: row.original.moreMenuItems }, row.getVisibleCells().map(function (cell) {
+                var breakpoint = columnsBreakpoints[cell.column.id];
+                if (!windowSize.width ||
+                    !shouldRenderColumn(windowSize.width, breakpoint)) {
+                    return null;
+                }
+                return (React.createElement(DataTable.Cell, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())));
+            }))); }))),
+        pagination && (React.createElement("div", { className: "s-p-1" },
+            React.createElement(Pagination, { pagination: table.getState().pagination, setPagination: table.setPagination, rowCount: table.getRowCount() })))));
 }
 DataTable.Root = function DataTableRoot(_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
@@ -128626,102 +128783,28 @@ Page.Fluid = function (_a) {
     return (React.createElement("div", { className: classNames("s-flex s-flex-wrap", sizing === "grow" ? "s-grow" : "", sizing === "shrink" ? "s-shrink" : "", gapSizes[gap], align === "left" ? "s-items-start" : "", align === "center" ? "s-items-center" : "", align === "right" ? "s-items-end" : "") }, children));
 };
 
-var pagesShownInControls = 7;
-function Pagination(_a) {
-    var itemsCount = _a.itemsCount, maxItemsPerPage = _a.maxItemsPerPage, onButtonClick = _a.onButtonClick, _b = _a.size, size = _b === void 0 ? "sm" : _b, _c = _a.showDetails, showDetails = _c === void 0 ? true : _c, _d = _a.showPageButtons, showPageButtons = _d === void 0 ? true : _d;
-    var numPages = Math.ceil(itemsCount / maxItemsPerPage);
-    var controlsAreHidden = Boolean(numPages <= 1);
-    var _e = __read(React.useState(1), 2), currentPage = _e[0], setCurrentPage = _e[1];
-    var firstFileOnPageIndex = currentPage * maxItemsPerPage - maxItemsPerPage + 1;
-    var lastFileOnPageIndex = itemsCount > currentPage * maxItemsPerPage
-        ? currentPage * maxItemsPerPage
-        : itemsCount;
-    var onPaginationButtonClick = React.useCallback(function (pageNb) {
-        setCurrentPage(pageNb);
-        onButtonClick(pageNb);
-    }, [onButtonClick, setCurrentPage]);
-    var pageButtons = getPageButtons(currentPage, numPages, pagesShownInControls, onPaginationButtonClick, size);
-    return (React.createElement("div", { className: classNames("s-flex s-w-full s-items-center", controlsAreHidden ? "s-justify-end" : "s-justify-between") },
-        React.createElement("div", { className: classNames("s-flex", controlsAreHidden ? "s-invisible" : "s-visible", showPageButtons ? "s-gap-0" : "s-gap-2") },
-            React.createElement(Button, { variant: "tertiary", size: size === "xs" ? "xs" : "sm", label: "previous", labelVisible: false, disabledTooltip: true, disabled: currentPage === 1 ? true : false, icon: SvgChevronLeft$1, onClick: function () {
-                    onPaginationButtonClick(currentPage - 1);
-                } }),
-            React.createElement("div", { className: classNames("s-items-center", size === "xs" ? "s-gap-3 s-px-3" : "s-gap-4 s-px-4", showPageButtons ? "s-flex" : "s-hidden") }, pageButtons),
-            React.createElement(Button, { variant: "tertiary", size: size === "xs" ? "xs" : "sm", label: "next", labelVisible: false, disabledTooltip: true, disabled: currentPage === numPages ? true : false, icon: SvgChevronRight$1, onClick: function () {
-                    onPaginationButtonClick(currentPage + 1);
-                } })),
-        React.createElement("span", { className: classNames("s-text-slate-400", size === "xs" ? "s-text-xs" : "s-text-sm", showDetails ? "s-visible" : "s-collapse") }, controlsAreHidden
-            ? "".concat(itemsCount, " items")
-            : "Showing ".concat(firstFileOnPageIndex, "-").concat(lastFileOnPageIndex, " of ").concat(itemsCount, " items"))));
-}
-function renderPageNumber(pageNumber, currentPage, onPageClick, size) {
-    return (React.createElement("button", { key: pageNumber, className: classNames("s-font-semibold s-transition-colors s-duration-100", currentPage === pageNumber ? "s-text-action-500" : "s-text-slate-400", size === "xs" ? "s-text-xs" : "s-text-sm"), onClick: function () { return onPageClick(pageNumber); } }, pageNumber));
-}
-function renderEllipses(size) {
-    return (React.createElement("span", { className: classNames("s-text-sm s-font-semibold s-text-slate-400", size === "xs" ? "s-text-xs" : "s-text-sm") }, "..."));
-}
-function getPageButtons(currentPage, totalPages, slots, onPageClick, size) {
-    var pagination = [];
-    // If total pages are less than or equal to slots, show all pages
-    if (totalPages <= slots) {
-        for (var i = 1; i <= totalPages; i++) {
-            pagination.push(renderPageNumber(i, currentPage, onPageClick, size));
-        }
-        return pagination;
-    }
-    var remainingSlots = slots - 2; // slots excluding first and last page
-    var halfSlots = Math.floor(remainingSlots / 2);
-    // Ensure current page is within bounds
-    currentPage = Math.max(1, Math.min(currentPage, totalPages));
-    pagination.push(renderPageNumber(1, currentPage, onPageClick, size)); // Always show the first page
-    // Determine the range of pages to display
-    var start, end;
-    if (currentPage <= halfSlots + 2) {
-        start = 2;
-        end = remainingSlots;
-    }
-    else if (currentPage >= totalPages - halfSlots - 1) {
-        start = totalPages - remainingSlots + 1;
-        end = totalPages - 1;
-    }
-    else {
-        start = currentPage - halfSlots + 1;
-        end = currentPage + halfSlots - 1;
-    }
-    // Add ellipsis if there is a gap between the first page and the start of the range
-    if (start > 2) {
-        pagination.push(renderEllipses(size));
-    }
-    // Add the range of pages
-    for (var i = start; i <= end; i++) {
-        pagination.push(renderPageNumber(i, currentPage, onPageClick, size));
-    }
-    // Add ellipsis if there is a gap between the end of the range and the last page
-    if (end < totalPages - 1) {
-        pagination.push(renderEllipses(size));
-    }
-    pagination.push(renderPageNumber(totalPages, currentPage, onPageClick, size)); // Always show the last page
-    return pagination;
-}
-
 function PaginatedCitationsGrid(_a) {
     var items = _a.items, _b = _a.maxItemsPerPage, maxItemsPerPage = _b === void 0 ? 9 : _b;
-    var _c = __read(React.useState(1), 2), currentPage = _c[0], setCurrentPage = _c[1];
+    var _c = __read(React.useState({
+        pageIndex: 0,
+        pageSize: maxItemsPerPage,
+    }), 2), pagination = _c[0], setPagination = _c[1];
     var cols = 3;
     var rows = Math.ceil(Math.min(maxItemsPerPage, items.length) / cols);
     if (items.length === 0) {
         return null;
     }
+    var pageIndex = pagination.pageIndex, pageSize = pagination.pageSize;
     // Calculate start index.
-    var startIndex = (currentPage - 1) * maxItemsPerPage;
+    var startIndex = pageIndex * pageSize;
     // Slice items for current page.
-    var paginatedItems = items.slice(startIndex, startIndex + maxItemsPerPage);
+    var paginatedItems = items.slice(startIndex, startIndex + pageSize);
     return (React.createElement("div", { className: "s-flex s-w-full s-flex-col" },
         React.createElement("div", { className: classNames("s-grid s-w-full s-gap-2 s-overflow-x-hidden s-py-1", "s-grid-cols-".concat(cols), "s-grid-rows-".concat(rows)) }, paginatedItems.map(function (d, idx) {
             return (React.createElement(Citation, { size: "xs", sizing: "fluid", key: idx, description: d.description, href: d.href, title: d.title, type: d.type }));
         })),
         React.createElement("div", { className: classNames("s-pt-3", items.length > maxItemsPerPage ? "s-visible" : "s-collapse") },
-            React.createElement(Pagination, { itemsCount: items.length, maxItemsPerPage: maxItemsPerPage, size: "xs", showDetails: false, showPageButtons: false, onButtonClick: function (pageNb) { return setCurrentPage(pageNb); } }))));
+            React.createElement(Pagination, { rowCount: items.length, pagination: pagination, setPagination: setPagination, size: "xs", showDetails: false, showPageButtons: false }))));
 }
 
 function Popup(_a) {
@@ -129144,6 +129227,91 @@ function ZoomableImageCitationWrapper(_a) {
                     React.createElement("img", { src: imgSrc, alt: alt }))))));
 }
 
+/**
+ * Original code from : https://www.npmjs.com/package/use-hash-param
+ * ISC License
+ */
+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.
+ */
+var useHashParam = function (key, defaultValue) {
+    var _a = __read(React.useState(function () {
+        return getHashParam(key, defaultValue);
+    }), 2), innerValue = _a[0], setInnerValue = _a[1];
+    React.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 = React.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];
+};
+
+var defaultPageSize = 25;
+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 = React.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;
+};
+
 var SvgLogoHorizontalColor = function (props) { return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 96 24" }, props),
     React__namespace.createElement("path", { fill: "#FCD34D", d: "M84 12H72v12h12V12Z" }),
     React__namespace.createElement("path", { fill: "#6EE7B7", d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Z" }),
@@ -129602,4 +129770,6 @@ exports.ZapierLogo = SvgZapier;
 exports.ZendeskLogo = SvgZendesk;
 exports.ZoomableImageCitationWrapper = ZoomableImageCitationWrapper;
 exports.avatarUtils = utils;
+exports.useHashParam = useHashParam;
+exports.usePaginationFromUrl = usePaginationFromUrl;
 //# sourceMappingURL=index.js.map