pixelize-design-library 2.4.2-beta.46 → 2.4.2-beta.48

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/filters/CompactSelect.js

@@ -6,10 +6,13 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const optionRowSizes_1 = require("../../../Theme/tokens/primitives/optionRowSizes");
+const optionRowInk_1 = require("../../Select/optionRowInk");
 const useExclusiveOverlay_1 = require("../../../Hooks/useExclusiveOverlay");
 const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    const spec = (0, optionRowSizes_1.optionRowSpec)("xs");
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, () => setIsOpen(false));
     const openDropdown = () => {
@@ -63,15 +66,15 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
                                                 : isActive
                                                     ? rowBackgrounds.active
                                                     : theme.colors.transparent;
-                                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
+                                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
                                                     optionRefs.current[i] = el;
-                                                }, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 2, py: 1, cursor: "pointer", color: theme.colors.text[700], _hover: {
+                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), _hover: {
                                                     bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
                                                 }, bg: rowBg, onClick: () => {
                                                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
                                                     setIsOpen(false);
                                                     setQuery("");
-                                                }, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { flex: 1, minW: 0, isTruncated: true, children: opt.label }), selected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, opt.id));
                                         }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
 };
 exports.default = CompactSelect;

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,

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -18,6 +18,12 @@ export declare const Menu: {
             borderColor: string;
         };
         item: {
+            minH: string;
+            px: string;
+            py: string;
+            mx: string;
+            fontSize: string;
+            borderRadius: string;
             bg: string;
             _focus: {
                 [$itemBg.variable]: string;

package/dist/Theme/chakra/Menu.styles.js

@@ -4,7 +4,9 @@ exports.Menu = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const rowStates_1 = require("../tokens/builders/rowStates");
+const optionRowSizes_1 = require("../tokens/primitives/optionRowSizes");
 const paletteFromTheme_1 = require("./paletteFromTheme");
+const itemRowSpec = optionRowSizes_1.OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
 // NOTE: fixes Chakra's MenuList/MenuItem both hardcoding --menu-bg to white via dead _dark — item needs its own var too, or hover snaps back to white.
@@ -24,6 +26,12 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderColor: colors.boxborder[200],
         },
         item: {
+            minH: itemRowSpec.minH,
+            px: itemRowSpec.px,
+            py: itemRowSpec.py,
+            mx: itemRowSpec.mx,
+            fontSize: itemRowSpec.fontSize,
+            borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS,
             bg: "transparent",
             _focus: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
             _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },

package/dist/Theme/chakra/componentStyles.d.ts

@@ -176,6 +176,12 @@ export declare const componentStyles: {
                 borderColor: string;
             };
             item: {
+                minH: string;
+                px: string;
+                py: string;
+                mx: string;
+                fontSize: string;
+                borderRadius: string;
                 bg: string;
                 _focus: {
                     [x: string]: string;

package/dist/Theme/tokens/builders/outlineRung.d.ts

@@ -4,6 +4,8 @@ export declare const AA_NON_TEXT = 3;
 export declare const CHROME_BORDER = 1.5;
 export declare const CHROME_RULE = 1.31;
 export declare function ruleInk(hex: string, surfaces: readonly string[], target: number): string;
+export declare const STACKED_STATE_STEP = 1.08;
+export declare function tintStep(seed: string, backdrop: string, target: number): string;
 export declare function liftToContrast(hex: string, backdrop: string, target?: number): string;
 export declare function softenToContrast(hex: string, backdrop: string, target: number): string;
 export declare function withOutlineRung(palette: PaletteProps): PaletteProps;

package/dist/Theme/tokens/builders/outlineRung.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CHROME_RULE = exports.CHROME_BORDER = exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
+exports.STACKED_STATE_STEP = exports.CHROME_RULE = exports.CHROME_BORDER = exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
 exports.ruleInk = ruleInk;
+exports.tintStep = tintStep;
 exports.liftToContrast = liftToContrast;
 exports.softenToContrast = softenToContrast;
 exports.withOutlineRung = withOutlineRung;
@@ -20,6 +21,18 @@ function ruleInk(hex, surfaces, target) {
         ? softenToContrast(hex, loudest, target)
         : hex;
 }
+exports.STACKED_STATE_STEP = 1.08;
+// NOTE: walks out from the backdrop, so it settles a too-loud seed down as readily as it lifts a faint one.
+function tintStep(seed, backdrop, target) {
+    const { s } = (0, color_1.hexToHsl)(seed);
+    const away = (0, color_1.relativeLuminance)(backdrop) < 0.5 ? 1 : -1;
+    for (let l = (0, color_1.hexToHsl)(backdrop).l; l >= 0 && l <= 100; l += away) {
+        const next = (0, color_1.withLightness)(seed, l, s);
+        if ((0, color_1.contrastRatio)(next, backdrop) >= target)
+            return next;
+    }
+    return (0, color_1.withLightness)(seed, away > 0 ? 100 : 0, s);
+}
 function liftToContrast(hex, backdrop, target = exports.AA_NON_TEXT) {
     if ((0, color_1.contrastRatio)(hex, backdrop) >= target)
         return hex;