pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Components/StatusTag/StatusTag.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tag from "../Tag/Tag.js";
+const NEUTRAL = { tone: "neutral" };
+const warned = new Set();
+const warnUnknown = (status) => {
+    if (process.env.NODE_ENV === "production" || warned.has(status))
+        return;
+    warned.add(status);
+    console.warn(`StatusTag: no appearance mapped for status "${status}"; rendering neutral.`);
+};
+/** Typed status-to-Tag wrapper: map your vocabulary to tones once, render chips or dots everywhere. */
+function StatusTag({ status, label, map, display = "chip", size = "sm", "data-testid": testId, }) {
+    const known = Object.prototype.hasOwnProperty.call(map, status);
+    if (!known)
+        warnUnknown(status);
+    const { tone, variant } = known ? map[status] : NEUTRAL;
+    return _jsx(Tag, { label: label, tone: tone, variant: variant, display: display, size: size, "data-testid": testId });
+}
+export default StatusTag;

package/dist/esm/Components/StatusTag/StatusTagProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/StickyBuyBar/StickyBuyBar.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Grid } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Check } from "lucide-react";
+import Button from "../Button/Button.js";
+import PriceBlock from "../PriceBlock/PriceBlock.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import { glassStyles } from "../MediaGallery/glass.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { MOTION_EASE, MOTION_MS, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+const DEFAULT_LABELS = {
+    region: "Buy",
+    add: "Add to bag",
+    selectOption: "Select an option",
+    notify: "Notify me",
+    added: "Added",
+    goToBag: "Go to bag",
+    buyNow: "Buy now",
+    adding: "Adding to bag",
+};
+const SLIDE_MS = 240;
+const BAR_HEIGHT = "3.25rem";
+const SLOT_MIN_WIDTH = "9.5rem";
+const RISE = "6px";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
+const pop = keyframes `0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); }`;
+const STACK_ORDER = ["add", "select-option", "notify", "added", "go-to-bag"];
+/** Bottom bar with price and one primary action whose mode, slide-in visibility and quantity stepper are all controlled. */
+const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "sticky", isLoading = false, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const glass = glassStyles(colors);
+    const stepping = mode === "stepper";
+    const active = stepping ? null : mode;
+    const text = {
+        add: copy.add,
+        "select-option": copy.selectOption,
+        notify: copy.notify,
+        added: copy.added,
+        "go-to-bag": copy.goToBag,
+    };
+    const handlers = {
+        add: onAddToBag,
+        "select-option": onSelectOption,
+        notify: onNotify,
+        added: undefined,
+        "go-to-bag": onGoToBag,
+    };
+    const tonal = mode === "notify";
+    const inert = mode === "added" || isLoading;
+    // NOTE: Button's prop type is a closed Pick, so aria-busy / aria-disabled ride in on a spread.
+    const aria = {
+        "aria-busy": isLoading ? "true" : undefined,
+        "aria-disabled": inert ? "true" : undefined,
+        "aria-label": isLoading ? copy.adding : undefined,
+    };
+    const layer = (on) => ({
+        gridArea: "1 / 1",
+        opacity: on ? 1 : 0,
+        visibility: on ? "visible" : "hidden",
+        transition: reduced ? "none" : `${transitionFor(["opacity"])}, visibility 0s linear ${on ? 0 : MOTION_MS.fast}ms`,
+    });
+    const label = (key) => {
+        const on = key === active;
+        return (_jsxs(Flex, { as: "span", "aria-hidden": on ? undefined : true, gridArea: "1 / 1", align: "center", justify: "center", gap: 1.5, opacity: on ? 1 : 0, transform: on || reduced ? "none" : `translateY(${RISE})`, transition: transitionFor(["opacity", "transform"]), sx: reducedMotionSx(), children: [key === "added" && (_jsx(Box, { as: "span", display: "inline-flex", animation: on && !reduced ? `${pop} 280ms ${MOTION_EASE} both` : undefined, sx: reducedMotionSx(), children: _jsx(Check, { size: 18, "aria-hidden": true }) })), text[key]] }, key));
+    };
+    return (_jsx(Box, { as: "section", role: "region", "aria-label": copy.region, "aria-hidden": visible ? undefined : true, position: position === "sticky" ? "sticky" : "relative", bottom: position === "sticky" ? 0 : undefined, zIndex: zIndices.sticky, px: 4, pt: 3, pb: SAFE_BOTTOM, transform: visible ? "translateY(0)" : "translateY(100%)", visibility: visible ? "visible" : "hidden", transition: reduced ? "none" : `transform ${SLIDE_MS}ms ${MOTION_EASE}, visibility 0s linear ${visible ? 0 : SLIDE_MS}ms`, "data-testid": testId, ...glass, sx: { ...glass.sx, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised }, ...reducedMotionSx() }, children: _jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(PriceBlock, { size: "sm", price: price, mrp: mrp, currency: currency, locale: locale }) }), mode === "add" && onBuyNow && (_jsx(Button, { variant: "outline", size: "lg", h: BAR_HEIGHT, onClick: onBuyNow, label: copy.buyNow })), _jsxs(Grid, { minW: SLOT_MIN_WIDTH, justifyItems: "stretch", alignItems: "center", children: [_jsx(Box, { ...layer(!stepping), "aria-hidden": stepping ? true : undefined, children: _jsx(Button, { ...aria, variant: tonal ? "ghost" : "solid", size: "lg", w: "100%", h: BAR_HEIGHT, onClick: () => {
+                                    var _a;
+                                    if (!inert)
+                                        (_a = handlers[mode]) === null || _a === void 0 ? void 0 : _a.call(handlers);
+                                }, sx: {
+                                    ...(tonal ? { bg: colors.background[100], color: colors.header[900], _hover: { bg: tonalHover(colors) } } : {}),
+                                    ...(inert ? { cursor: isLoading ? "progress" : "default", pointerEvents: isLoading ? "auto" : "none" } : {}),
+                                    display: "grid",
+                                }, children: STACK_ORDER.map(label) }) }), _jsx(Flex, { ...layer(stepping), "aria-hidden": stepping ? undefined : true, justify: "center", align: "center", h: BAR_HEIGHT, children: _jsx(QuantityStepper, { value: quantity, onValueChange: onQuantityChange, max: maxQuantity, itemLabel: itemLabel, size: "md" }) })] })] }) }));
+};
+export default StickyBuyBar;

package/dist/esm/Components/StickyBuyBar/StickyBuyBarProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/StockStatus/StockStatus.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const TEXT_SIZE = { sm: "xs", md: "sm" };
+const DOT_PX = { sm: 6, md: 8 };
+const defaultMessage = (status, count) => {
+    switch (status) {
+        case "in-stock":
+            return "In stock";
+        case "low-stock":
+            return count !== undefined ? `Only ${count} left` : "Low stock";
+        case "out-of-stock":
+            return "Out of stock";
+        case "backorder":
+            return "Available on backorder";
+    }
+};
+/** Availability dot + label for a `StockState`; colour comes from `semanticText`, meaning from the words. */
+const StockStatus = ({ status, count, message, size = "md", "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    const ink = {
+        "in-stock": colors.semanticText.success,
+        "low-stock": colors.semanticText.warning,
+        "out-of-stock": colors.textMuted,
+        backorder: colors.semanticText.info,
+    };
+    return (_jsxs(Flex, { as: "span", display: "inline-flex", align: "center", gap: 1.5, "data-status": status, "data-testid": testId, color: ink[status], children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${DOT_PX[size]}px`, flexShrink: 0, borderRadius: "full", bg: "currentColor" }), _jsx(Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, lineHeight: 1.4, children: message !== null && message !== void 0 ? message : defaultMessage(status, count) })] }));
+};
+export default StockStatus;

package/dist/esm/Components/StockStatus/StockStatusProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Switch/Switch.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Flex, Text } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }) {
-    const theme = useCustomTheme();
-    // Read the palette directly: it is already swapped for the active mode, so pairing the rungs
-    // through useColorModeValue would adapt twice and pick a LIGHT rung on the dark canvas.
-    const highlightBg = theme.colors.primary[50];
-    const borderColor = theme.colors.gray[100];
-    return (_jsxs(Box, { bg: theme.colors.background[50], border: "0.063rem solid", borderColor: borderColor, borderRadius: "1.25rem", p: "0.063rem", w: "12.5rem", position: "relative", children: [_jsx(Box, { position: "absolute", top: 0, bottom: 0, w: "50%", bg: highlightBg, border: `0.063rem solid ${theme.colors.primary[500]}`, borderRadius: "1rem", transition: "transform 0.3s ease", transform: switchActive === "left" ? "translateX(0%)" : "translateX(100%)" }), _jsxs(Flex, { as: "ul", listStyleType: "none", m: 0, p: "0.063rem", zIndex: 1, position: "relative", children: [_jsxs(Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "left" ? 600 : 400, color: theme.colors.text[900], zIndex: 1, onClick: () => onSwitchToggle("left"), children: [leftIcon, _jsx(Text, { ml: leftIcon ? 1 : 0, children: leftText })] }), _jsxs(Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "right" ? 600 : 400, color: theme.colors.text[900], zIndex: 1, onClick: () => onSwitchToggle("right"), children: [rightIcon, _jsx(Text, { ml: rightIcon ? 1 : 0, children: rightText })] })] })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import SegmentedControl from "../SegmentedControl/SegmentedControl.js";
+/** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
+export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }) {
+    const options = [
+        { value: "left", label: leftText, icon: leftIcon },
+        { value: "right", label: rightText, icon: rightIcon },
+    ];
+    // Unlabelled segments have nothing to size to, so the 12.5rem floor only overflowed its cell.
+    const hasLabels = Boolean(leftText || rightText);
+    return (_jsx(Box, { w: "fit-content", maxW: "100%", minW: hasLabels ? "12.5rem" : undefined, children: _jsx(SegmentedControl, { options: options, value: switchActive, onChange: onSwitchToggle, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
 }

package/dist/esm/Components/Table/Table.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Box, TableContainer, Flex, Spinner, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, useBreakpointValue, IconButton, Modal, ModalOverlay, ModalContent, ModalBody, ModalCloseButton, useDisclosure } from "@chakra-ui/react";
 import { Table as ChakraTable, Tbody, Thead, Icon } from "@chakra-ui/react";
 import { motion } from "framer-motion";
@@ -7,40 +7,60 @@ import LeftFilterPane from "./filters/LeftFilterPane.js";
 import { TABLE_VARIANTS } from "./variants/index.js";
 import { TableVariantProvider } from "./variants/TableVariantContext.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import Pagination from "./components/Pagination.js";
 import TableHeader from "./components/TableHeader.js";
 import TableBody from "./components/TableBody.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { motionTransition, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT, MAX_TABLE_HEIGHT, TOOLBAR_HEIGHT, pxOf, rowHeightFor } from "./components/rowMetrics.js";
 import { scrollbarStyles, SCROLLBAR_WIDTH } from "../../Theme/tokens/builders/scrollbar.js";
+import { scrollShadowStyles } from "../../Theme/tokens/builders/scrollShadow.js";
 import useTable from "./hooks/useTable.js";
+import { useRowExpansion } from "./hooks/useRowExpansion.js";
+import { toSavedColumns } from "./columnLabel.js";
 import { searchAndSortData, SortMultiColumnData, groupRows, buildTablePalette, pickTableColor } from "../../Utils/table.js";
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
 import TableSettings from "./settings/TableSettings.js";
 import HeaderActions from "./components/HeaderActions.js";
-import VeritcalDivider from "../Divider/Divider.js";
+import VerticalDivider from "../Divider/Divider.js";
 import TableSearch from "./components/TableSearch.js";
 import ActiveFilters from "./filters/ActiveFilters.js";
 import Button from "../Button/Button.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { Filter, EllipsisVertical, X, RefreshCw } from "lucide-react";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 const MotionBox = motion(Box);
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox = false, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
+// NOTE: MOTION_EASE as framer bezier points; the motion tokens have no points form yet.
+const PANE_TRANSITION = { type: "tween", ...motionTransition("base") };
+const PANE_TRANSITION_INSTANT = { ...PANE_TRANSITION, duration: 0 };
+/** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox = false, freezedBgColor, freezedTextColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
     url: "",
     token: "",
     key: "",
     name: "",
     page: "",
     orgId: "",
-}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe, groupColors, onAddItem, emptyState, onRefresh,
-// onColumnFilter
- }) {
-    var _a, _b, _c, _d;
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "studio", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
+    var _a, _b, _c, _d, _e;
     const theme = useCustomTheme();
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const clearFiltersTone = useMemo(() => resolveFilledSurface(theme.colors.semantic.error, theme.colors), [theme.colors]);
+    const clearBadge = useMemo(() => resolveFilledSurface(theme.colors.primary, theme.colors), [theme.colors]);
     const variantTokens = useMemo(() => TABLE_VARIANTS[variant](theme.colors, isDarkCanvas(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = useState({});
+    const detailIdPrefix = useId();
+    const { expandedIds, toggle: toggleDetail } = useRowExpansion(expandedRows, onExpandedRowsChange);
+    const rowDetail = useMemo(() => (renderRowDetail ? { render: renderRowDetail, toggle: toggleDetail, idPrefix: detailIdPrefix } : undefined), [renderRowDetail, toggleDetail, detailIdPrefix]);
     const tableContainerRef = useRef(null);
     const { isOpen: isFilterModalOpen, onOpen: onFilterModalOpen, onClose: onFilterModalClose } = useDisclosure();
-    const filterMode = (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _a !== void 0 ? _a : "sidebar";
+    // Below `md` the sidebar has no room — default to the modal, unless the consumer picked a mode.
+    const isBelowMdFilter = (_a = useBreakpointValue({ base: true, md: false }, { ssr: false })) !== null && _a !== void 0 ? _a : false;
+    const filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : (isBelowMdFilter ? "modal" : "sidebar");
     const [viewportAvailableH, setViewportAvailableH] = useState(500);
     const isServerPagination = paginationMode === "server";
     const { preferences: tablePreferencesData, loading } = useGetPreferences({
@@ -69,8 +89,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
         }
         return {};
     }, [tablePreferencesData]);
-    const { tableData, isContent, isLink, headerRefs, columnWidths, handleSort, handleCheckbox, filteredData, startRow, endRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = useTable({
-        tableBorderColor,
+    const { tableData, isContent, isLink, headerRefs, columnWidths, slotRef, slotWidth, handleSort, handleCheckbox, filteredData, searchedData, startRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = useTable({
         data,
         isPagination,
         selections,
@@ -83,6 +102,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
         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).
@@ -143,8 +163,9 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [rowsPerPage]);
     useEffect(() => {
-        if (tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density) {
-            setDensityState(tablePreferences.density);
+        const saved = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density;
+        if (typeof saved === "string" && saved in DENSITY_ROWS) {
+            setDensityState(saved);
         }
     }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density]);
     useEffect(() => {
@@ -156,7 +177,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
     }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.groupBy]);
     const handleDensityChange = (d) => {
         setDensityState(d);
-        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences({ ...tablePreferences, columns: columnsList, groupBy: groupByState !== null && groupByState !== void 0 ? groupByState : null, density: d });
+        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences({ ...tablePreferences, columns: toSavedColumns(columnsList), groupBy: groupByState !== null && groupByState !== void 0 ? groupByState : null, density: d });
     };
     // Settings "Save": persist columns + group (+ current density) in ONE write so
     // they don't clobber each other, and apply them locally.
@@ -164,9 +185,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
         setGroupByState(group);
         handleColumnPreferences(cols, { density: densityState, groupBy: group !== null && group !== void 0 ? group : null });
     };
-    const _filteredData = useMemo(() => {
-        return 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.
@@ -269,13 +288,11 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                 ? `Showing ${loadMoreBase.length} of ${totalRecords}`
                 : `Showing ${loadMoreBase.length}`
             : "Showing all records";
-    const tablePaginationText = useMemo(() => isServerPagination
+    const tablePaginationText = isServerPagination
         ? `${startRow + 1} - ${Math.min(startRow + rowsPerPage, totalRecords)} of ${totalRecords}`
-        : `${startRow + 1} - ${endRow > tableData.length ? tableData.length : endRow} of ${tableData.length}`, [startRow, rowsPerPage, totalRecords, endRow, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    const controlsHeight = 45;
-    const estimatedRowHeight = 45;
-    // In grouped mode the rendered rows come from the full grouped source, not the
-    // paged slice — base the height on that so a 1-result search isn't clipped.
+        : `${startRow + 1} - ${Math.min(startRow + rowsPerPage, searchedData.length)} of ${searchedData.length}`;
+    const rowHeight = rowHeightFor(densityState);
+    const headerHeight = pxOf(variantTokens.header.height);
     const actualRows = isGrouped ? groupedSource.length : _filteredData.length;
     const isEmptyState = !isTableLoading && actualRows === 0;
     const loadingRowsCount = typeof loadingSkeletonRows === "number" ? Math.max(1, loadingSkeletonRows) : 4;
@@ -302,14 +319,26 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
     }, [autoFitViewport]);
     const heightRowsCount = isTableLoading ? loadingRowsCount : visibleRowsCount;
     const isCompactRows = heightRowsCount <= 1 && !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) && !isGrouped && !isEmptyState;
-    let rowsHeight = heightRowsCount * estimatedRowHeight + estimatedRowHeight;
+    let rowsHeight = heightRowsCount * rowHeight + headerHeight;
     if (isGrouped)
-        rowsHeight += ((_b = renderGroups === null || renderGroups === void 0 ? void 0 : renderGroups.length) !== null && _b !== void 0 ? _b : 1) * 42; // group header rows
+        rowsHeight += ((_c = renderGroups === null || renderGroups === void 0 ? void 0 : renderGroups.length) !== null && _c !== void 0 ? _c : 1) * GROUP_HEADER_HEIGHT;
     if (isEmptyState)
-        rowsHeight = Math.max(rowsHeight, 200); // room for the empty state
-    const dynamicMaxH = Math.min(500, rowsHeight);
+        rowsHeight = Math.max(rowsHeight, headerHeight + EMPTY_STATE_HEIGHT);
+    const dynamicMaxH = Math.min(MAX_TABLE_HEIGHT, rowsHeight);
     const fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
-    const tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
+    const formulaMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
+    // NOTE: wrapped cell content can exceed the per-row estimate; when the row count is
+    // within the display cap (explicit maxVisibleRows, else the default 10), size naturally
+    // instead of clipping. `visibleRowsCount` isn't used here — minRows defaults to
+    // actualRows, which would make this true for any row count.
+    const rawMaxRows = typeof maxVisibleRows === "number" ? maxVisibleRows : (actualRows === 0 ? 1 : 10);
+    const showsAllRows = actualRows <= rawMaxRows;
+    const useNaturalHeight = typeof tableMaxHeight !== "number" && showsAllRows && !isTableLoading && !canInfinite &&
+        !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar);
+    const tableMinH = useNaturalHeight ? formulaMaxH : undefined;
+    const tableMaxH = useNaturalHeight
+        ? (autoFitViewport ? viewportAvailableH : undefined)
+        : formulaMaxH;
     const isCompactHeader = useBreakpointValue({ base: true, md: true, lg: false });
     useEffect(() => {
         if (!isCompactHeader) {
@@ -360,39 +389,44 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "base", 
-                // Square children poked past the rounded border, leaving a gap at each corner.
-                overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_c = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _c !== void 0 ? _c : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { "data-testid": "filter-sidebar-pane", initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: theme.colors.boxborder[200], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: controlsHeight + tableMaxH, theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [filterSidebar && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Icon, { as: Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
-                                                                        color: theme.colors.accentText,
-                                                                    } }), sidebarActiveCount > 0 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[500], color: theme.colors.onPrimary, borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
-                                                                        var _a;
-                                                                        e.stopPropagation();
-                                                                        if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
-                                                                            filterSidebar.onClearAllHandler();
-                                                                        }
-                                                                        else {
-                                                                            (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
-                                                                        }
-                                                                    }, _hover: { bg: theme.colors.red[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, children: _jsx(X, { size: 10, strokeWidth: 3 }) }))] }) }), _jsx(VeritcalDivider, {})] })), _jsx(TableSearch, { onSearch: onGlobalSearch }), isTableSettings && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(TableSettings, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState })] })), onRefresh && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(ToolTip, { label: "Refresh", placement: "top", children: _jsx(Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
-                                                                color: theme.colors.accentText,
-                                                                transform: "scale(1.1)"
-                                                            }, onClick: async () => {
-                                                                if (!isRefreshing) {
-                                                                    setIsRefreshing(true);
-                                                                    try {
-                                                                        await onRefresh();
+      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { "data-testid": "filter-sidebar-pane", initial: false, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: prefersReducedMotion ? PANE_TRANSITION_INSTANT : PANE_TRANSITION, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: cardRule(theme.colors), style: { height: TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: TOOLBAR_HEIGHT + formulaMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `${BORDER_WIDTHS.hairline} solid ${cardRule(theme.colors)}`, children: [[
+                                                filterSidebar && (_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Box, { as: "button", type: "button", "aria-label": "Filter", "aria-haspopup": filterMode === "modal" ? "dialog" : undefined, "aria-expanded": filterMode === "modal"
+                                                                    ? isFilterModalOpen
+                                                                    : !!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, bg: "transparent", border: "none", borderRadius: "md", cursor: "pointer", onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
+                                                                    color: theme.colors.accentText,
+                                                                }, sx: focusVisibleStyles(theme.colors), children: _jsx(Icon, { as: Filter, transform: "scaleX(-1)", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500] }) }), sidebarActiveCount > 0 && (_jsx(Box, { as: "button", type: "button", "aria-label": "Clear filters", position: "absolute", top: "-6px", right: "-10px", bg: clearBadge.fill, color: clearBadge.color, border: "none", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
+                                                                    var _a;
+                                                                    e.stopPropagation();
+                                                                    if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
+                                                                        filterSidebar.onClearAllHandler();
                                                                     }
-                                                                    finally {
-                                                                        setIsRefreshing(false);
+                                                                    else {
+                                                                        (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
                                                                     }
+                                                                }, _hover: { bg: clearFiltersTone.hoverFill, color: clearFiltersTone.hoverColor }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, sx: focusVisibleStyles(theme.colors), children: _jsx(X, { size: 10, strokeWidth: 3 }) }))] }) }, "filter")),
+                                                isGlobalSearch && _jsx(TableSearch, { onSearch: onGlobalSearch }, "search"),
+                                                isTableSettings && (_jsx(TableSettings, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState }, "settings")),
+                                                onRefresh && (_jsx(ToolTip, { label: "Refresh", placement: "top", children: _jsx(Box, { as: "button", type: "button", "aria-label": "Refresh", "aria-busy": isRefreshing, display: "flex", justifyContent: "flex-end", cursor: "pointer", bg: "transparent", border: "none", p: 0, transition: transitionFor(["color", "transform"], "base"), color: theme.colors.text[500], _hover: {
+                                                            color: theme.colors.accentText,
+                                                            transform: "scale(1.1)",
+                                                        }, onClick: async () => {
+                                                            if (!isRefreshing) {
+                                                                setIsRefreshing(true);
+                                                                try {
+                                                                    await onRefresh();
+                                                                }
+                                                                finally {
+                                                                    setIsRefreshing(false);
                                                                 }
-                                                            }, style: {
-                                                                animation: isRefreshing
-                                                                    ? "pixelize-table-spin 1s linear infinite"
-                                                                    : "none"
-                                                            }, children: _jsx(RefreshCw, { size: 16 }) }) })] })), headerActions && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(HeaderActions, { actions: headerActions, selections: selection })] })), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
+                                                            }
+                                                        }, animation: isRefreshing ? "pixelize-table-spin 1s linear infinite" : undefined, sx: reducedMotionSx(), children: _jsx(RefreshCw, { size: 16 }) }) }, "refresh")),
+                                                headerActions && (_jsx(HeaderActions, { actions: headerActions, selections: selection }, "actions")),
+                                            ]
+                                                .filter(Boolean)
+                                                .flatMap((tool, i) => (i === 0 ? [tool] : [_jsx(VerticalDivider, {}, `divider-${i}`), tool])), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
-                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.surfaceRaised, boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, minH: !isTableLoading ? tableMinH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                            ...scrollShadowStyles(theme.colors.background[50]),
                                             ...scrollbarStyles(theme.colors),
                                             // Compact rows hide the horizontal bar until hover to keep the row height.
                                             '&::-webkit-scrollbar': {
@@ -419,5 +453,5 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, 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 }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, 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 && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { 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, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { 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, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `${BORDER_WIDTHS.hairline} solid ${cardRule(theme.colors)}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

package/dist/esm/Components/Table/columnLabel.js

@@ -0,0 +1,21 @@
+import { isValidElement } from "react";
+export const isPrimitiveLabel = (label) => typeof label === "string" || typeof label === "number";
+const textOf = (node) => {
+    if (isPrimitiveLabel(node))
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(textOf).join("");
+    if (isValidElement(node))
+        return textOf(node.props.children);
+    return "";
+};
+/** Plain-text name of a column, for every place a node cannot go: aria-labels, settings, chips, saved preferences. */
+export const columnLabelText = (column) => {
+    if (isPrimitiveLabel(column.label))
+        return String(column.label);
+    if (column.labelText)
+        return column.labelText;
+    return textOf(column.label).replace(/\s+/g, " ").trim() || String(column.id);
+};
+/** Columns as they may be POSTed: a node label is swapped for its text, since elements are not JSON. */
+export const toSavedColumns = (columns) => columns.map((column) => isPrimitiveLabel(column.label) ? column : { ...column, label: columnLabelText(column) });

package/dist/esm/Components/Table/components/HeaderActions.js

@@ -4,7 +4,10 @@ import { SquarePen, Trash2 } from "lucide-react";
 import React from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
-import VeritcalDivider from "../../Divider/Divider.js";
+import VerticalDivider from "../../Divider/Divider.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { bandOn } from "../../../Theme/tokens/builders/planeStep.js";
+const hoverFill = (colors) => bandOn(colors.background[100], colors.background[50]);
 const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
     const { colors } = useCustomTheme();
     const styledIcon = icon ? React.cloneElement(icon, {
@@ -13,12 +16,12 @@ const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hov
     }) : null;
     // A `customComponent` may itself be focusable, and a button must never wrap one.
     const isButton = !!onClick && !customComponent;
-    return (_jsxs(Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: colors.text[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
+    return (_jsxs(Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: colors.text[500], px: 2, py: 1, borderRadius: "lg", _hover: isHoverEnabled
             ? {
-                color: hoverColor ? hoverColor : accentTextOnCanvas(colors.primary, colors.background[100]),
-                bg: colors.background[100],
+                color: hoverColor ? hoverColor : accentTextOnCanvas(colors.primary, hoverFill(colors)),
+                bg: hoverFill(colors),
             }
-            : {}, transition: "all 0.2s ease", children: [customComponent, styledIcon, " ", name] }));
+            : {}, transition: transitionFor(["color", "background-color"], "base"), children: [customComponent, styledIcon, " ", name] }));
 };
 const HeaderActions = ({ actions, selections, }) => {
     var _a, _b, _c, _d, _e, _f;
@@ -32,9 +35,9 @@ const HeaderActions = ({ actions, selections, }) => {
                     return (_jsx(ListItem, { ...actionItem, selections: selections }, `static-${index}`));
                 }
                 return null;
-            }), hasSelections && (_jsxs(_Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && (_jsx(ListItem, { icon: _jsx(Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && (_jsx(ListItem, { icon: _jsx(SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: accentTextOnCanvas(colors.primary, colors.background[100]) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
+            }), hasSelections && (_jsxs(_Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && (_jsx(ListItem, { icon: _jsx(Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && (_jsx(ListItem, { icon: _jsx(SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: accentTextOnCanvas(colors.primary, hoverFill(colors)) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
                         if ("type" in item && item.type === "divider") {
-                            return _jsx(VeritcalDivider, {}, index);
+                            return _jsx(VerticalDivider, {}, index);
                         }
                         const actionItem = item;
                         if (!actionItem.isStatic) {

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

@@ -1,19 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from "react";
-import { Flex, IconButton, Select, Text } from "@chakra-ui/react";
+import { Flex, IconButton, Text } from "@chakra-ui/react";
 import { pageSizeCalculation } from "../../../Utils/table.js";
+import Select from "../../Select/Select.js";
+import { DEFAULT_PAGE_SIZE } from "../hooks/useTable.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react";
+const STEP_SIZE = "1.5rem";
+const STEP_ICON = 16;
 const Pagination = React.memo(({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }) => {
-    const computedOptions = useMemo(() => paginationSelectOptions && paginationSelectOptions.length
-        ? paginationSelectOptions
-        : pageSizeCalculation(dataLength), [paginationSelectOptions, dataLength]);
+    const computedOptions = useMemo(() => {
+        if (paginationSelectOptions && paginationSelectOptions.length) {
+            return paginationSelectOptions;
+        }
+        const sizes = new Set(pageSizeCalculation(dataLength));
+        sizes.add(DEFAULT_PAGE_SIZE);
+        sizes.add(rowsPerPage);
+        return [...sizes].sort((a, b) => a - b);
+    }, [paginationSelectOptions, dataLength, rowsPerPage]);
     const theme = useCustomTheme();
-    // const isLeftDisabled = currentPage === 0;
-    // const isRightDisabled = currentPage >= pages - 1;
-    const isLeftDisabled = dataLength === 0 || currentPage === 0;
-    const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
-    return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsxs(Select, { "aria-label": "Rows per page", onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? _jsx("option", { value: 0 }) : null, computedOptions.map((size, index) => (_jsx("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(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: _jsx(ChevronsLeft, {}) }) }), _jsx(ToolTip, { label: "Previous", placement: "top", children: _jsx(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: _jsx(ChevronLeft, {}) }) }), _jsx(Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), _jsx(ToolTip, { label: "Next", placement: "top", children: _jsx(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: _jsx(ChevronRight, {}) }) }), _jsx(ToolTip, { label: "Last", placement: "top", children: _jsx(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: _jsx(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) => (_jsx(ToolTip, { label: label, placement: "top", children: _jsx(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 (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", gap: "0.75rem", children: [(!isServerPagination || paginationSelectOptions) && (_jsx(Select, { 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) && (_jsxs(Flex, { align: "center", gap: "0.125rem", children: [step("First", "first-page", _jsx(ChevronsLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage(0)), step("Previous", "previous-page", _jsx(ChevronLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage((page) => Math.max(0, page - 1))), _jsx(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", _jsx(ChevronRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage((page) => Math.min(lastPage, page + 1))), step("Last", "last-page", _jsx(ChevronsRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage(lastPage))] }))] }));
 });
 export default Pagination;