pixelize-design-library 2.4.2-beta.47 → 2.4.2-beta.49

package/dist/Components/SelectV2/SelectV2.d.ts

@@ -1,14 +1,7 @@
 import React from "react";
-import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+import { chipTriggerSizeStyles } from "../Common/chipTriggerSize";
 import type { SelectV2Props } from "./SelectV2Props";
-type ChipSize = "xs" | "sm";
-export declare const chipTriggerSizeStyles: (size: ControlSize, hasChips: boolean, chipSize?: ChipSize) => {
-    minH: string;
-    fontSize: string;
-    px: string;
-    h?: string;
-    py?: string;
-};
+export { chipTriggerSizeStyles };
 /** @deprecated Use `Select` with `native={false}`. See MERGE-NOTES-select-deprecation.md. */
 declare const SelectV2: React.ForwardRefExoticComponent<SelectV2Props & React.RefAttributes<HTMLDivElement>>;
 /** @deprecated Use `Select` with `native={false}`. */

package/dist/Components/SelectV2/SelectV2.js

@@ -7,16 +7,8 @@ exports.chipTriggerSizeStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Select_1 = __importDefault(require("../Select/Select"));
-const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
-const CHIP_TAG_HEIGHT_PX = { xs: 20, sm: 24 };
-const controlHeightPx = (size) => parseFloat(controlSizes_1.CONTROL_SIZES[size].height) * 16;
-const chipRowPaddingY = (size, chipSize) => `${(controlHeightPx(size) - CHIP_TAG_HEIGHT_PX[chipSize]) / 2 / 16}rem`;
-const chipTriggerSizeStyles = (size, hasChips, chipSize = "sm") => {
-    const spec = controlSizes_1.CONTROL_SIZES[size];
-    const base = { minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
-    return hasChips ? { ...base, py: chipRowPaddingY(size, chipSize) } : { ...base, h: spec.height };
-};
-exports.chipTriggerSizeStyles = chipTriggerSizeStyles;
+const chipTriggerSize_1 = require("../Common/chipTriggerSize");
+Object.defineProperty(exports, "chipTriggerSizeStyles", { enumerable: true, get: function () { return chipTriggerSize_1.chipTriggerSizeStyles; } });
 /** @deprecated Use `Select` with `native={false}`. See MERGE-NOTES-select-deprecation.md. */
 const SelectV2 = (0, react_1.forwardRef)(function SelectV2(props, ref) {
     return (0, jsx_runtime_1.jsx)(Select_1.default, { ...props, native: false, ref: ref });

package/dist/Components/Table/Table.js

@@ -83,7 +83,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
         }
         return {};
     }, [tablePreferencesData]);
-    const { tableData, isContent, isLink, headerRefs, columnWidths, handleSort, handleCheckbox, filteredData, startRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = (0, useTable_1.default)({
+    const { tableData, isContent, isLink, headerRefs, columnWidths, slotRef, slotWidth, handleSort, handleCheckbox, filteredData, searchedData, startRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = (0, useTable_1.default)({
         data,
         isPagination,
         selections,
@@ -96,6 +96,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
         isServerPagination,
         onNoOfRowsPerPageChange,
         defaultVisibleColumns,
+        columnsSearch,
     });
     // Density + grouping are managed here so the Table Settings tabs can change +
     // persist them (seeded from the prop / saved preferences when they load).
@@ -178,9 +179,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
         setGroupByState(group);
         handleColumnPreferences(cols, { density: densityState, groupBy: group !== null && group !== void 0 ? group : null });
     };
-    const _filteredData = (0, react_1.useMemo)(() => {
-        return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
-    }, [columnsSearch, filteredData]);
+    const _filteredData = filteredData;
     // --- Monday-style grouping. Active whenever the user has picked a group column
     // (in Settings > Group). When active, the numbered pager / infinite scroll are
     // hidden and the body renders colored, collapsible groups over the loaded rows.
@@ -285,7 +284,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
             : "Showing all records";
     const tablePaginationText = isServerPagination
         ? `${startRow + 1} - ${Math.min(startRow + rowsPerPage, totalRecords)} of ${totalRecords}`
-        : `${startRow + 1} - ${Math.min(startRow + rowsPerPage, tableData.length)} of ${tableData.length}`;
+        : `${startRow + 1} - ${Math.min(startRow + rowsPerPage, searchedData.length)} of ${searchedData.length}`;
     const rowHeight = (0, rowMetrics_1.rowHeightFor)(densityState);
     const headerHeight = (0, rowMetrics_1.pxOf)(variantTokens.header.height);
     const actualRows = isGrouped ? groupedSource.length : _filteredData.length;
@@ -406,7 +405,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
                                                 headerActions && ((0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection }, "actions")),
                                             ]
                                                 .filter(Boolean)
-                                                .flatMap((tool, i) => (i === 0 ? [tool] : [(0, jsx_runtime_1.jsx)(Divider_1.default, {}, `divider-${i}`), tool])), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
+                                                .flatMap((tool, i) => (i === 0 ? [tool] : [(0, jsx_runtime_1.jsx)(Divider_1.default, {}, `divider-${i}`), tool])), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
                                                                     }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.surfaceRaised, boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
                                             ...(0, scrollShadow_1.scrollShadowStyles)(theme.colors.background[50]),
@@ -436,5 +435,5 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

package/dist/Components/Table/TableProps.d.ts

@@ -185,7 +185,7 @@ export type TableHeaderProps = {
     /** Legacy hex fill seed per value; used only when `statusPalette` lacks that value. */
     statusColors?: Record<string, string>;
     columnType?: TableColumnType;
-    /** Horizontal alignment for both the header label and the body cells. Defaults "start". */
+    /** Horizontal alignment for both the header label and the body cells. Defaults "start", except a full-bleed status cell, which centres until this is set. */
     align?: TableColumnAlign;
     /** Custom cell renderer; a column with `node` never fires onRowClick. */
     node?: (data: DataObject) => JSX.Element | string | number | undefined;
@@ -214,6 +214,9 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     handleHeaderClick?: (header: string, search: boolean) => void;
     headerRefs: React.MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnWidths: number[];
+    /** Measures the select-all cell so frozen columns can butt against its real width. */
+    slotRef: React.Ref<HTMLTableCellElement>;
+    slotWidth: number;
     columnsSort: ColumnSortingProps[];
     handleCheckbox: (selection: string | number) => void;
     checked: boolean | "indeterminate";
@@ -226,7 +229,11 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
 /** Props for the TableBody subcomponent; renders flat rows or grouped Monday-style board rows. */
 export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "loadingSkeletonRows" | "onRowClick" | "isActionFreeze" | "density" | "stripe" | "emptyState"> & {
     startRow: number;
+    /** Page size; a change swaps the rendered rows without moving startRow, so scroll resets. */
+    rowsPerPage: number;
     columnWidths: number[];
+    /** Rendered width of the select-all cell; frozen columns start after it. */
+    slotWidth: number;
     handleCheckbox: (selection: string | number) => void;
     selections: (string | number)[];
     isContent: boolean;
@@ -262,6 +269,7 @@ export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "noBorders"> & P
     header: TableHeaderProps;
     index: number;
     columnWidths: number[];
+    slotWidth: number;
     headerRefs: MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnsSearch: Record<string, string>;
     setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;

package/dist/Components/Table/components/Pagination.js

@@ -45,6 +45,8 @@ const useTable_1 = require("../hooks/useTable");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const lucide_react_1 = require("lucide-react");
+const STEP_SIZE = "1.5rem";
+const STEP_ICON = 16;
 const Pagination = react_1.default.memo(({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }) => {
     const computedOptions = (0, react_1.useMemo)(() => {
         if (paginationSelectOptions && paginationSelectOptions.length) {
@@ -56,10 +58,11 @@ const Pagination = react_1.default.memo(({ paginationText, handlePageSizeChange,
         return [...sizes].sort((a, b) => a - b);
     }, [paginationSelectOptions, dataLength, rowsPerPage]);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // const isLeftDisabled = currentPage === 0;
-    // const isRightDisabled = currentPage >= pages - 1;
-    const isLeftDisabled = dataLength === 0 || currentPage === 0;
-    const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": "Rows per page", onChange: (option) => option && handlePageSizeChange(Number(option.id)), value: rowsPerPage, size: "xs", width: "4.5rem", isDisabled: dataLength === 0, options: computedOptions.map((size) => ({ id: size, label: String(size) })) })), dataLength > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "First", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Previous", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}) }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Next", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Last", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, {}) }) })] }))] }));
+    const lastPage = Math.max(0, pages - 1);
+    // Stepping back is how a user escapes an empty page, so it survives an empty result.
+    const isLeftDisabled = currentPage === 0;
+    const isRightDisabled = dataLength === 0 || currentPage >= lastPage;
+    const step = (label, ariaLabel, icon, isDisabled, onClick) => ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": ariaLabel, icon: icon, variant: "ghost", size: "xs", minW: STEP_SIZE, h: STEP_SIZE, rounded: "full", color: isDisabled ? theme.colors.textMuted : theme.colors.text[500], isDisabled: isDisabled, onClick: onClick, _hover: isDisabled ? {} : { color: theme.colors.accentText } }) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", gap: "0.75rem", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": "Rows per page", onChange: (option) => option && handlePageSizeChange(Number(option.id)), value: rowsPerPage, size: "xs", width: "3.75rem", isDisabled: dataLength === 0, options: computedOptions.map((size) => ({ id: size, label: String(size) })) })), (dataLength > 0 || currentPage > 0) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.125rem", children: [step("First", "first-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage(0)), step("Previous", "previous-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage((page) => Math.max(0, page - 1))), (0, jsx_runtime_1.jsx)(react_2.Text, { px: "0.375rem", fontSize: "0.75rem", lineHeight: STEP_SIZE, whiteSpace: "nowrap", color: theme.colors.text[500], sx: { fontVariantNumeric: "tabular-nums" }, children: paginationText }), step("Next", "next-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage((page) => Math.min(lastPage, page + 1))), step("Last", "last-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage(lastPage))] }))] }));
 });
 exports.default = Pagination;

package/dist/Components/Table/components/TableBody.d.ts

@@ -1,3 +1,4 @@
 import { TableBodyPageProps } from "../TableProps";
-declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe, accentColors, groups, onAddItem, emptyState, }: TableBodyPageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const findFirstVisibleIndex: (offsets: number[], total: number, target: number) => number;
+declare const TableBody: ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe, accentColors, groups, onAddItem, emptyState, }: TableBodyPageProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

package/dist/Components/Table/components/TableBody.js

@@ -36,6 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.findFirstVisibleIndex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = __importStar(require("react"));
@@ -56,10 +57,31 @@ const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
     : undefined;
+// Smallest index i in [0, total] where offsets[i+1] > target; offsets is sorted.
+const findFirstVisibleIndex = (offsets, total, target) => {
+    let lo = 0;
+    let hi = total;
+    while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (offsets[mid + 1] <= target) {
+            lo = mid + 1;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    return lo;
+};
+exports.findFirstVisibleIndex = findFirstVisibleIndex;
 // Monday-style status cell: the whole cell is filled with the status color and
 // the label is centered in whichever of white/black clears AA against that fill —
 // the fill can be a consumer hex we can't know in advance is light or dark.
-const StatusCell = ({ value, onSolid }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+const BLEED_JUSTIFY = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+};
+const StatusCell = ({ value, onSolid, align, }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: BLEED_JUSTIFY[align !== null && align !== void 0 ? align : "center"], w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: align !== null && align !== void 0 ? align : "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 // Studio's status cell: a contained chip on the tone's soft rung. Same tone pair
 // the group header already uses, so an override hex behaves identically in both.
 const StatusPill = ({ value, soft, ink, radius, }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
@@ -148,13 +170,13 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                         const bleedBg = statusColor === null || statusColor === void 0 ? void 0 : statusColor.soft;
                         const bleedInk = statusColor === null || statusColor === void 0 ? void 0 : statusColor.text;
                         const canHover = !isBleed && !((cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle);
-                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
+                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
                                 ? "none"
                                 : `0.063rem solid ${isFrozen || isChecked
                                     ? variant.row.frozenRuleColor
                                     : variant.row.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isBleed ? bleedInk : variant.cells.ink, "data-hoverable": canHover ? "true" : "false", _hover: variant.row.hoverScope === "row" || !canHover
                                 ? EMPTY_HOVER
-                                : hoverStyle, children: isBleed ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), onSolid: bleedInk })) : isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusPill, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), soft: statusColor.soft, ink: (0, pillInk_1.resolvePillInk)(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
+                                : hoverStyle, children: isBleed ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), onSolid: bleedInk, align: header.align })) : isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusPill, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), soft: statusColor.soft, ink: (0, pillInk_1.resolvePillInk)(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
                     }), isLink && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : restBg, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? ((0, jsx_runtime_1.jsx)(TableActions_1.default, { row: row })) : null }))] }), rowContent && isExpanded && ((0, jsx_runtime_1.jsx)(react_1.Tr, { ref: expandedRowRef, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +
@@ -169,7 +191,7 @@ const TableEmpty = ({ emptyState }) => {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyState });
     return ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { size: "sm", minH: `${rowMetrics_1.EMPTY_STATE_HEIGHT}px`, title: structured === null || structured === void 0 ? void 0 : structured.title, description: structured === null || structured === void 0 ? void 0 : structured.description, icon: icon }));
 };
-const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe = false, accentColors, groups, onAddItem, emptyState, }) => {
+const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe = false, accentColors, groups, onAddItem, emptyState, }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const variant = (0, TableVariantContext_1.useTableVariant)();
@@ -218,7 +240,15 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (!el || !(shouldVirtualize || groupVirtualize))
             return;
-        const onScroll = () => setScrollTop(el.scrollTop);
+        let rafId = null;
+        const onScroll = () => {
+            if (rafId != null)
+                return;
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                setScrollTop(el.scrollTop);
+            });
+        };
         const measure = () => setViewportH(el.clientHeight);
         measure();
         setScrollTop(el.scrollTop);
@@ -227,23 +257,30 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         return () => {
             el.removeEventListener("scroll", onScroll);
             window.removeEventListener("resize", measure);
+            if (rafId != null)
+                cancelAnimationFrame(rafId);
         };
     }, [scrollContainerRef, shouldVirtualize, groupVirtualize, data.length, groupRowCount]);
-    // New page: jump back to the top so the window recomputes from row 0.
+    // Reset only on a real page change, never merely from the virtualization
+    // threshold flipping or rows being appended (infinite scroll/load-more).
+    const sliceKey = `${startRow}|${rowsPerPage}`;
+    const prevSliceKeyRef = (0, react_2.useRef)(sliceKey);
     (0, react_2.useEffect)(() => {
-        if (!shouldVirtualize)
+        const changed = prevSliceKeyRef.current !== sliceKey;
+        prevSliceKeyRef.current = sliceKey;
+        if (!changed)
             return;
         const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (el)
             el.scrollTop = 0;
         setScrollTop(0);
-    }, [startRow, shouldVirtualize, scrollContainerRef]);
+    }, [sliceKey, scrollContainerRef]);
     const total = data.length;
     // Prefix-sum offsets using measured heights (exact for rendered rows) and
     // estimates for not-yet-measured rows (ROW_HEIGHT, + ESTIMATED_EXPAND if expanded).
     // Independent of scrollTop, so scrolling reuses it instead of rebuilding it.
     const offsets = (0, react_2.useMemo)(() => {
-        if (!shouldVirtualize)
+        if (!shouldVirtualize || groups)
             return null;
         const acc = new Array(total + 1);
         acc[0] = 0;
@@ -256,7 +293,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
             acc[i + 1] = acc[i] + h;
         }
         return acc;
-    }, [shouldVirtualize, total, data, measuredHeights, expandedRows, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
+    }, [shouldVirtualize, groups, total, data, measuredHeights, expandedRows, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
     let firstIndex = 0;
     let lastIndex = total;
     let topPad = 0;
@@ -266,9 +303,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         const totalH = offsets[total];
         const top = scrollTop - OVERSCAN * ROW_HEIGHT;
         const bottom = scrollTop + vh + OVERSCAN * ROW_HEIGHT;
-        firstIndex = 0;
-        while (firstIndex < total && offsets[firstIndex + 1] <= top)
-            firstIndex++;
+        firstIndex = (0, exports.findFirstVisibleIndex)(offsets, total, top);
         lastIndex = firstIndex;
         while (lastIndex < total && offsets[lastIndex] < bottom)
             lastIndex++;
@@ -303,9 +338,9 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         (isContent ? 1 : 0) +
         (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink]);
     const leftOffsets = (0, react_2.useMemo)(() => {
-        const checkboxOffset = isCheckbox ? rowMetrics_1.CHECKBOX_SLOT_OFFSET : 0;
+        const checkboxOffset = isCheckbox ? slotWidth : 0;
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
-    }, [columnWidths, isCheckbox]);
+    }, [columnWidths, isCheckbox, slotWidth]);
     const borderStyle = (0, react_2.useMemo)(() => noBorders ? "none" : `0.063rem solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
     // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
     // cells keep their solid color + white text instead of white-on-tint.
@@ -342,6 +377,38 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         }
         return { heights, offsets, totalH: acc };
     }, [groupItems, groupVirtualize, rowHeight]);
+    // Clamp scrollTop back when a shorter data set leaves it past the new content height.
+    (0, react_2.useEffect)(() => {
+        const totalH = shouldVirtualize && offsets ? offsets[total] : groupVirtualize && groupMetrics ? groupMetrics.totalH : null;
+        if (totalH == null)
+            return;
+        const maxScrollTop = Math.max(0, totalH - viewportH);
+        if (scrollTop > maxScrollTop) {
+            const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+            if (el)
+                el.scrollTop = maxScrollTop;
+            setScrollTop(maxScrollTop);
+        }
+    }, [shouldVirtualize, offsets, total, groupVirtualize, groupMetrics, viewportH, scrollTop, scrollContainerRef]);
+    // Prune measured heights for rows no longer in data so the map stays bounded.
+    (0, react_2.useEffect)(() => {
+        setMeasuredHeights((prev) => {
+            if (prev.size === 0)
+                return prev;
+            const ids = new Set(data.map(getRowId));
+            let changed = false;
+            const next = new Map();
+            prev.forEach((h, id) => {
+                if (ids.has(id)) {
+                    next.set(id, h);
+                }
+                else {
+                    changed = true;
+                }
+            });
+            return changed ? next : prev;
+        });
+    }, [data]);
     if (isLoading && data.length === 0) {
         return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.boxborder[200], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4, rowHeight: rowHeight }));
     }

package/dist/Components/Table/components/TableHeader.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableHeaderPageProps } from "../TableProps";
-declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/Components/Table/components/TableHeader.js

@@ -13,24 +13,23 @@ const TableFilters_1 = __importDefault(require("../filters/TableFilters"));
 const lucide_react_1 = require("lucide-react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const TableVariantContext_1 = require("../variants/TableVariantContext");
-const rowMetrics_1 = require("./rowMetrics");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
-const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
+const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = (0, react_2.useState)(null);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
-                return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, header.label));
+                return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, header.label));
             }), isLink && (0, jsx_runtime_1.jsx)(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
 };
 exports.default = (0, react_2.memo)(TableHeader);
-const SelectAllCell = (0, react_2.memo)(({ freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
+const SelectAllCell = (0, react_2.memo)(({ slotRef, freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const variant = (0, TableVariantContext_1.useTableVariant)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }) }));
 });
 const ContentSpacerCell = (0, react_2.memo)(({ noBorders }) => {
     const variant = (0, TableVariantContext_1.useTableVariant)();
@@ -48,7 +47,7 @@ const SortingIcon = (0, react_2.memo)(({ label, sortState, isVisible, handleSort
             color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, variant.header.bg),
         }, children: [sortState === "none" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { size: 14 }), sortState === "asc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), sortState === "desc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 })] }));
 });
-const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
+const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, slotWidth, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
     var _a, _b;
     const [isHovered, setIsHovered] = (0, react_2.useState)(false);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -56,7 +55,7 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbo
     const isFrozen = header.isFreeze;
     const align = (_a = header.align) !== null && _a !== void 0 ? _a : "start";
     const leftOffset = isFrozen
-        ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? rowMetrics_1.CHECKBOX_SLOT_OFFSET : 0)
+        ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? slotWidth : 0)
         : undefined;
     const isSorting = header.isSort
         ? columnsSort.find((o) => o.column === header.id)
@@ -95,7 +94,7 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbo
         isSortActive ||
         openFilterId === header.id ||
         !!columnsSearch[header.id];
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textAlign: align, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: align === "end" ? undefined : 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textAlign: align, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffset}px` : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: align === "end" ? undefined : 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
             ? "none"
             : `0.063rem solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: LABEL_JUSTIFY[align], flexDirection: align === "end" ? "row-reverse" : "row", gap: align === "end" ? 1 : undefined, alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), _focusWithin: { opacity: 1 }, children: [header.isSort && ((0, jsx_runtime_1.jsx)(SortingIcon, { label: String(header.label), sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
                                 let direction = "asc";

package/dist/Components/Table/components/rowMetrics.d.ts

@@ -6,6 +6,5 @@ export declare const DENSITY_ROWS: Record<TableDensity, {
 export declare const TOOLBAR_HEIGHT = 45;
 export declare const GROUP_HEADER_HEIGHT = 42;
 export declare const EMPTY_STATE_HEIGHT = 200;
-export declare const CHECKBOX_SLOT_OFFSET = 50;
 export declare const rowHeightFor: (density: TableDensity | undefined) => number;
 export declare const pxOf: (length: string) => number;

package/dist/Components/Table/components/rowMetrics.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pxOf = exports.rowHeightFor = exports.CHECKBOX_SLOT_OFFSET = exports.EMPTY_STATE_HEIGHT = exports.GROUP_HEADER_HEIGHT = exports.TOOLBAR_HEIGHT = exports.DENSITY_ROWS = void 0;
+exports.pxOf = exports.rowHeightFor = exports.EMPTY_STATE_HEIGHT = exports.GROUP_HEADER_HEIGHT = exports.TOOLBAR_HEIGHT = exports.DENSITY_ROWS = void 0;
 exports.DENSITY_ROWS = {
     compact: { height: 32, py: "0.125rem" },
     normal: { height: 40, py: "0.5rem" },
@@ -9,7 +9,6 @@ exports.DENSITY_ROWS = {
 exports.TOOLBAR_HEIGHT = 45;
 exports.GROUP_HEADER_HEIGHT = 42;
 exports.EMPTY_STATE_HEIGHT = 200;
-exports.CHECKBOX_SLOT_OFFSET = 50;
 const rowHeightFor = (density) => exports.DENSITY_ROWS[density !== null && density !== void 0 ? density : "normal"].height;
 exports.rowHeightFor = rowHeightFor;
 const pxOf = (length) => parseFloat(length);

package/dist/Components/Table/hooks/useTable.d.ts

@@ -12,17 +12,21 @@ type UseTableProps = {
     totalRecords: number;
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
     defaultVisibleColumns?: number;
+    columnsSearch: Record<string, string>;
 };
 export declare const DEFAULT_PAGE_SIZE = 20;
-declare const useTable: ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }: UseTableProps) => {
+declare const useTable: ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }: UseTableProps) => {
     tableData: DataObject[];
     isContent: boolean;
     isLink: boolean;
     headerRefs: import("react").MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnWidths: number[];
+    slotRef: (node: HTMLTableCellElement | null) => void;
+    slotWidth: number;
     handleSort: (field: string | number, sort: "asc" | "desc" | "none") => void;
     handleCheckbox: (id: string | number) => void;
     filteredData: DataObject[];
+    searchedData: DataObject[];
     startRow: number;
     endRow: number;
     selection: (string | number)[];

package/dist/Components/Table/hooks/useTable.js

@@ -18,10 +18,25 @@ const mergeColumnWithPreference = (pref, originalCol) => {
     }
     return next;
 };
-const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }) => {
+const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }) => {
     var _a, _b;
     const headerRefs = (0, react_1.useRef)([]);
+    const slotObserver = (0, react_1.useRef)(null);
     const [columnWidths, setColumnWidths] = (0, react_1.useState)([]);
+    const [slotWidth, setSlotWidth] = (0, react_1.useState)(0);
+    // Frozen columns butt against the select-all cell, so its width is watched, not assumed.
+    const slotRef = (0, react_1.useCallback)((node) => {
+        var _a;
+        (_a = slotObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        slotObserver.current = null;
+        if (!node) {
+            setSlotWidth(0);
+            return;
+        }
+        const observer = new ResizeObserver(() => setSlotWidth(node.offsetWidth));
+        observer.observe(node);
+        slotObserver.current = observer;
+    }, []);
     const [selection, setSelection] = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []);
     const [columnsSort, setColumnsSort] = (0, react_1.useState)([]);
     const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
@@ -83,27 +98,45 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
         if (!isServerPagination)
             setCurrentPage(0);
     }, [tableData.length, isServerPagination]);
+    const hasColumnSearch = (0, react_1.useMemo)(() => Object.values(columnsSearch).some((value) => value.trim() !== ""), [columnsSearch]);
+    // Column search runs before the page slice, or it would only ever see one page.
+    const searchedData = (0, react_1.useMemo)(() => (hasColumnSearch ? (0, table_1.searchAndSortData)(tableData, columnsSearch) : tableData), [hasColumnSearch, columnsSearch, tableData]);
     const pages = (0, react_1.useMemo)(() => {
         if (isServerPagination) {
             return Math.ceil(totalRecords / (rowsPerPage || 1));
         }
-        return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
+        return isPagination ? Math.ceil(searchedData.length / rowsPerPage) : 0;
     }, [
         isPagination,
         rowsPerPage,
-        tableData.length,
+        searchedData.length,
         totalRecords,
         isServerPagination,
     ]);
     const startRow = (0, react_1.useMemo)(() => (!isPagination ? 0 : currentPage * rowsPerPage), [currentPage, isPagination, rowsPerPage]);
-    const endRow = (0, react_1.useMemo)(() => (!isPagination ? tableData.length : startRow + rowsPerPage), [isPagination, rowsPerPage, startRow, tableData.length]);
+    const endRow = (0, react_1.useMemo)(() => (!isPagination ? searchedData.length : startRow + rowsPerPage), [isPagination, rowsPerPage, startRow, searchedData.length]);
     const filteredData = (0, react_1.useMemo)(() => {
         if (isServerPagination) {
-            return tableData;
+            return searchedData;
         }
-        const sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
+        const sortedData = (0, table_1.SortMultiColumnData)(searchedData, columnsSort);
         return sortedData.slice(startRow, endRow);
-    }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
+    }, [columnsSort, startRow, endRow, searchedData, isServerPagination]);
+    const searchKey = (0, react_1.useMemo)(() => JSON.stringify(columnsSearch), [columnsSearch]);
+    const prevSearchKey = (0, react_1.useRef)(searchKey);
+    (0, react_1.useEffect)(() => {
+        if (prevSearchKey.current === searchKey)
+            return;
+        prevSearchKey.current = searchKey;
+        setCurrentPage(0);
+    }, [searchKey]);
+    // A narrower result set can strand the user on a page that no longer exists.
+    (0, react_1.useEffect)(() => {
+        if (isServerPagination || !isPagination)
+            return;
+        const lastPage = Math.max(0, pages - 1);
+        setCurrentPage((page) => Math.min(page, lastPage));
+    }, [pages, isServerPagination, isPagination]);
     const handlePageSizeChange = (size) => {
         const value = Number(size);
         setRowsPerPage(value !== 0 ? value : defaultPageSize);
@@ -198,9 +231,12 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
         isLink,
         headerRefs,
         columnWidths,
+        slotRef,
+        slotWidth,
         handleSort,
         handleCheckbox,
         filteredData,
+        searchedData,
         startRow,
         endRow,
         selection,