pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.51

package/dist/Components/Table/Table.js

@@ -10,11 +10,20 @@ const react_2 = require("@chakra-ui/react");
 const react_3 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const LeftFilterPane_1 = __importDefault(require("./filters/LeftFilterPane"));
+const variants_1 = require("./variants");
+const TableVariantContext_1 = require("./variants/TableVariantContext");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const Pagination_1 = __importDefault(require("./components/Pagination"));
 const TableHeader_1 = __importDefault(require("./components/TableHeader"));
 const TableBody_1 = __importDefault(require("./components/TableBody"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+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 rowMetrics_1 = require("./components/rowMetrics");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const scrollShadow_1 = require("../../Theme/tokens/builders/scrollShadow");
 const useTable_1 = __importDefault(require("./hooks/useTable"));
 const table_1 = require("../../Utils/table");
 const usePreferences_1 = require("../../Hooks/usePreferences");
@@ -27,22 +36,25 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const lucide_react_1 = require("lucide-react");
 const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
-function Table({ data, columns, onSelection, isLoading, isCheckbox = false, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
+/** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
+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", 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 = "classic", stripe = false, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
+    var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const clearFiltersTone = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.semantic.error, theme.colors), [theme.colors]);
+    const variantTokens = (0, react_1.useMemo)(() => variants_1.TABLE_VARIANTS[variant](theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = (0, react_1.useState)({});
     const tableContainerRef = (0, react_1.useRef)(null);
     const { isOpen: isFilterModalOpen, onOpen: onFilterModalOpen, onClose: onFilterModalClose } = (0, react_2.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 = (0, react_2.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] = (0, react_1.useState)(500);
     const isServerPagination = paginationMode === "server";
     const { preferences: tablePreferencesData, loading } = (0, usePreferences_1.useGetPreferences)({
@@ -71,8 +83,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
         }
         return {};
     }, [tablePreferencesData]);
-    const { tableData, isContent, isLink, headerRefs, columnWidths, handleSort, handleCheckbox, filteredData, startRow, endRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = (0, useTable_1.default)({
-        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, } = (0, useTable_1.default)({
         data,
         isPagination,
         selections,
@@ -85,6 +96,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
         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).
@@ -145,8 +157,9 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [rowsPerPage]);
     (0, react_1.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 rowMetrics_1.DENSITY_ROWS) {
+            setDensityState(saved);
         }
     }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density]);
     (0, react_1.useEffect)(() => {
@@ -166,9 +179,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
         setGroupByState(group);
         handleColumnPreferences(cols, { density: densityState, groupBy: group !== null && group !== void 0 ? group : null });
     };
-    const _filteredData = (0, react_1.useMemo)(() => {
-        return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
-    }, [columnsSearch, filteredData]);
+    const _filteredData = filteredData;
     // --- Monday-style grouping. Active whenever the user has picked a group column
     // (in Settings > Group). When active, the numbered pager / infinite scroll are
     // hidden and the body renders colored, collapsible groups over the loaded rows.
@@ -271,13 +282,11 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                 ? `Showing ${loadMoreBase.length} of ${totalRecords}`
                 : `Showing ${loadMoreBase.length}`
             : "Showing all records";
-    const tablePaginationText = (0, react_1.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 = (0, rowMetrics_1.rowHeightFor)(densityState);
+    const headerHeight = (0, rowMetrics_1.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;
@@ -304,11 +313,11 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
     }, [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) * rowMetrics_1.GROUP_HEADER_HEIGHT;
     if (isEmptyState)
-        rowsHeight = Math.max(rowsHeight, 200); // room for the empty state
+        rowsHeight = Math.max(rowsHeight, headerHeight + rowMetrics_1.EMPTY_STATE_HEIGHT);
     const dynamicMaxH = Math.min(500, rowsHeight);
     const fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
     const tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
@@ -357,42 +366,49 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
             return acc + (Array.isArray(items) ? items.length : 0);
         }, 0);
     }, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    return ((0, jsx_runtime_1.jsxs)(TableVariantContext_1.TableVariantProvider, { value: variantTokens, children: [(0, jsx_runtime_1.jsx)("style", { children: `
         @keyframes pixelize-table-spin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.border[500]}`, borderRadius: "base", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { 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 }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { 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: "1px solid", borderColor: theme.colors.border[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { 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 }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.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.border[500]}`, children: [filterSidebar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.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 && ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 10, strokeWidth: 3 }) }))] }) }), (0, jsx_runtime_1.jsx)(Divider_1.default, {})] })), (0, jsx_runtime_1.jsx)(TableSearch_1.default, { onSearch: onGlobalSearch }), isTableSettings && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(TableSettings_1.default, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState })] })), onRefresh && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Refresh", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.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();
+      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { 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 }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.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: rowMetrics_1.TOOLBAR_HEIGHT + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: rowMetrics_1.TOOLBAR_HEIGHT + tableMaxH, 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 }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${rowMetrics_1.TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [[
+                                                filterSidebar && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500] }) }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Clear filters", position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), 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: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 10, strokeWidth: 3 }) }))] }) }, "filter")),
+                                                isGlobalSearch && (0, jsx_runtime_1.jsx)(TableSearch_1.default, { onSearch: onGlobalSearch }, "search"),
+                                                isTableSettings && ((0, jsx_runtime_1.jsx)(TableSettings_1.default, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState }, "settings")),
+                                                onRefresh && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Refresh", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.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: (0, motion_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) })] })), headerActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection })] })), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { 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 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
+                                                            }
+                                                        }, animation: isRefreshing ? "pixelize-table-spin 1s linear infinite" : undefined, sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) }, "refresh")),
+                                                headerActions && ((0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection }, "actions")),
+                                            ]
+                                                .filter(Boolean)
+                                                .flatMap((tool, i) => (i === 0 ? [tool] : [(0, jsx_runtime_1.jsx)(Divider_1.default, {}, `divider-${i}`), tool])), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
-                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.surfaceRaised, boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                            ...(0, scrollShadow_1.scrollShadowStyles)(theme.colors.background[50]),
                                             ...(0, scrollbar_1.scrollbarStyles)(theme.colors),
                                             // Compact rows hide the horizontal bar until hover to keep the row height.
                                             '&::-webkit-scrollbar': {
@@ -419,5 +435,5 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: theme.colors.table.hover[200], children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, 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 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.border[500]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

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

@@ -1,69 +1,122 @@
 import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from "react";
 import { FilterSidebarProps } from "../FilterSidebar/FilterSidebar";
 import type { FilterValues } from "./filterTypes";
+import type { TableVariant } from "./variants/tokens";
 export type { FilterValues } from "./filterTypes";
+export type { TableVariant, TableVariantTokens } from "./variants/tokens";
 /** Dynamic row shape (cells, styles, callbacks). */
 export type DataObject = Record<string, unknown>;
+/** Row-height preset controlling row height and cell vertical padding. */
 export type TableDensity = "compact" | "normal" | "comfortable";
+/** Empty-state content shown when there are no rows; alternative to a raw ReactNode. */
 export type TableEmptyState = {
     icon?: ReactNode;
     title?: string;
     description?: string;
 };
+/** Props for the main Table component: data, columns, pagination, selection, filters, and more. */
 export type TableProps = {
+    /** Every row needs a unique `id` — selection, select-all and row keys all read `row.id`. */
     data: DataObject[];
+    /** Memoize this array: an inline one re-installs column state on every render. */
     columns: TableHeaderProps[];
+    /** Hex override per group value; wins over the auto-assigned palette color. Only visible while grouped (Settings > Group). */
     groupColors?: Record<string | number, string>;
+    /** Renders a "+ add item" control in each group's footer row; no-op in flat (ungrouped) mode. */
     onAddItem?: (groupValue: string | number) => void;
+    /** Seeds the initial row height only — Table Settings > Density (or saved preferences.density) takes over after the first change. */
     density?: TableDensity;
+    /** Visual preset. Defaults to `classic` — the table exactly as it shipped. */
+    variant?: TableVariant;
+    /** Zebra rows: every second row gets the variant's `row.stripeBg` fill. Frozen and selected cells keep their own fill. */
     stripe?: boolean;
+    /** Shown when there are no rows. An object feeds the library `EmptyState`; any other node renders as-is. */
     emptyState?: TableEmptyState | ReactNode;
+    /** Shows the toolbar's global search control. Defaults true; the search only calls `onGlobalSearch`. */
+    isGlobalSearch?: boolean;
+    /** @deprecated Dead — Table renders no export UI and never reads this; no known consumer usage. */
     handleExportChange?: (value: string) => void | undefined;
+    /** @deprecated Dead — same unwired export feature as handleExportChange/exportLabel. */
     exportOptions?: ExportOption[];
+    /** @deprecated Dead — same unwired export feature as handleExportChange/exportOptions. */
     exportLabel?: string;
+    /** Skeleton rows when data is empty, otherwise dims existing rows; also true while onRefresh runs. */
     isLoading?: boolean;
+    /** @deprecated Dead — Table never destructures it; the live prop is `isTableSettings`. */
     isVisiblity?: boolean;
+    /** Adds a row-selection checkbox column plus a select-all header. Defaults false. */
     isCheckbox?: boolean;
+    /** @deprecated Dead — the header paints the variant's `header.bg`; this value is never read. */
     headerBgColor?: string;
+    /** Fill for frozen (isFreeze) and sticky action cells. Defaults to `backgroundColor.secondary`; pass a token. */
     freezedBgColor?: string;
+    /** Ink for frozen/sticky chrome cells (checkbox, action). Defaults to `text[500]`; a hardcoded hex breaks dark mode. */
     freezedTextColor?: string;
+    /** @deprecated Dead — referenced nowhere in the Table tree; no visual effect. */
     tableBorderColor?: string;
+    /** Removes the row rules and header column dividers. */
     noBorders?: boolean;
+    /** Fires with the full selected-id list on every toggle, including select-all. */
     onSelection?: (selected: (string | number)[]) => void;
+    /** Client-side paging. Defaults true; false renders every row with no pager. */
     isPagination?: boolean;
+    /** Controlled selected row ids; a new array replaces the internal selection. */
     selections?: (string | number)[];
+    /** Fires per cell, gated on the column: a column with `node` swallows its clicks. */
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
+    /** Sticky-positions the trailing action/link column during horizontal scroll. Defaults true. */
     isActionFreeze?: boolean;
+    /** "server" skips client-side slicing entirely — the parent must supply totalRecords and drive paging via onPagination. */
     paginationMode?: "client" | "server";
     infiniteScroll?: boolean;
+    /** Gates further loads; when omitted, derived from data.length < totalRecords. */
     hasMore?: boolean;
+    /** Parent-owned: set true while the next page is fetching — blocks repeat loads and shows the spinner. */
     isLoadingMore?: boolean;
     groupLoadMore?: boolean;
+    /** Label and loading text of the grouped Load more button. Defaults "Load more". */
     loadMoreText?: string;
+    /** Where the grouped Load more button sits. Defaults "top". */
     loadMorePosition?: "top" | "bottom";
-    /** @deprecated Ignored — load more always uses the current page size (`noOfRowsPerPage`)
-     *  so page boundaries stay consistent. Kept only for backward compatibility. */
+    /** Last-resort grouped-load-more chunk size, read only when `noOfRowsPerPage` is 0 or unset. */
     loadMoreChunkSize?: number;
+    /** Page size. Defaults 50; changing it later re-syncs the internal page size. */
     noOfRowsPerPage?: number;
+    /** Ignored by client paging; server/infinite/load-more use it for counts and the default hasMore. */
     totalRecords?: number;
+    /** record is the page's last row on "next"/"last", its first row on "prev"/"first" — a cursor for server paging. */
     onPagination?: (page: number, noOfRecords: number, record: DataObject | undefined, direction: "next" | "prev" | "first" | "last") => void;
+    /** Fires when the user picks a page size; the table also resets to page 1. */
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
+    /** Page-size choices; defaults are computed from data length. Server mode hides the picker unless set. */
     paginationSelectOptions?: (number | string)[];
+    /** Explicit pixel height; overrides autoFitViewport and minVisibleRows/maxVisibleRows outright when set. */
     tableMaxHeight?: number;
+    /** Floors the auto-computed row count used for sizing only — doesn't add rows or affect pagination. */
     minVisibleRows?: number;
+    /** Caps the auto-computed row count used for sizing (paired with minVisibleRows); ignored once tableMaxHeight is set. */
     maxVisibleRows?: number;
+    /** Further clamps computed height to remaining viewport space below the table, recalculated on resize; ignored once tableMaxHeight is set. */
     autoFitViewport?: boolean;
+    /** Hides columns past this index on first render only — a saved preferences.columns list (or a Settings save) wins on every later render. */
     defaultVisibleColumns?: number;
+    /** Skeleton rows shown while loading with no data. Defaults 4, minimum 1. */
     loadingSkeletonRows?: number;
+    /** Toolbar bulk actions; only `isStatic` items show before any row is selected. */
     headerActions?: HeaderActionsProps;
+    /** Debounced 700ms; called with "" when the search box is closed. Filtering is the parent's job. */
     onGlobalSearch?: (searchVal: string) => void;
+    /** @deprecated Dead — Table.tsx never references it; never called, no known consumer usage. */
     onColumnFilter?: (filters: FilterValues) => void;
+    /** Gates the Settings gear (Density / Manage Columns / Group) — the real switch for column-visibility UI, unlike tableSettings or isVisiblity. */
     isTableSettings?: boolean;
+    /** @deprecated Dead — TableSettings receives it but never destructures it; no known consumer usage. */
     tableSettings?: {
         filters?: string[];
         filterSelected?: string[];
         onFilterSelection?: (filters: string[]) => void;
     };
+    /** filterMode defaults to "sidebar"; Clear All in "modal" mode doesn't re-apply filters (see COMPONENT-GOTCHAS.md). */
     filterSidebar?: Partial<FilterSidebarProps> & {
         isFilterSidebar?: boolean;
         handleSidebarFilterClick?: (filters: FilterValues) => void;
@@ -71,25 +124,37 @@ export type TableProps = {
         isApplyLoading?: boolean;
         filterMode?: "sidebar" | "modal";
     };
+    /** Server-persists columns/density/grouping as one JSON blob (GET on mount, POST on every Settings save). Omitting url (the default) makes it a silent no-op, not an error — the table just doesn't persist. */
     preferences?: {
+        /** Base REST endpoint for both GET and POST; empty string (the default) disables persistence entirely. */
         url: string;
+        /** Sent as a raw Authorization header value — not "Bearer "-prefixed. */
         token: string;
+        /** Distinguishes multiple saved blobs at the same url/page/name (e.g. per-view settings). */
         key?: string;
+        /** Sent alongside key/page as a query param — a server-side identifier, not rendered anywhere. */
         name?: string;
+        /** Identifies which page/screen owns this table's preferences; sent as a query param. */
         page?: string;
+        /** Scopes the preference blob per organization; sent on both GET and POST. */
         orgId?: string;
     };
+    /** Shows a Refresh button when set; may return a Promise — the table shows loading until it settles. */
     onRefresh?: () => void;
 };
+/** Config for the bulk-actions toolbar (delete/update/custom items) shown for the current selection. */
 export type HeaderActionsProps = {
+    /** Built-in "Delete" action, shown only while rows are selected and `enabled` is true. */
     isDelete?: {
         enabled?: boolean;
         onClick?: (selection: (string | number)[]) => void;
     };
+    /** Built-in "Mass Update" action, shown only while rows are selected and `enabled` is true. */
     isUpdate?: {
         enabled?: boolean;
         onClick?: (selection: (string | number)[]) => void;
     };
+    /** Custom actions; hidden until a row is selected unless `isStatic`. `customComponent` disables button semantics. */
     items?: ({
         icon?: React.ReactElement;
         name: string;
@@ -102,29 +167,45 @@ export type HeaderActionsProps = {
         type: "divider";
     })[];
 };
+/** Column definition: label, sort/search/freeze flags, and optional status or custom cell renderer. */
 export type TableHeaderProps = {
     label: string | number;
     id: string | number;
+    /** Enables the multi-column sort control; sorts client-side only — server mode never reorders rows. */
     isSort?: boolean;
+    /** @deprecated Never read — every column gets the filter popover regardless. */
     isSearch?: boolean;
+    /** Sticky-pins the column to the left during horizontal scroll. */
     isFreeze?: boolean;
+    /** Initial visibility only; defaultVisibleColumns and saved preferences override it. */
     isHidden?: boolean;
     type?: "status";
+    /** Pre-resolved tone per value — preferred over `statusColors` hex overrides. */
+    statusPalette?: Record<string, import("../../Utils/table").TablePaletteColor>;
+    /** 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", 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;
 };
+/** Horizontal alignment shared by a column's header label and its cells. */
+export type TableColumnAlign = "start" | "center" | "end";
 /** Known field data-types (open-ended via the trailing string for forward-compat). */
 export type TableColumnType = "text" | "singleline" | "multiLine" | "description" | "email" | "phone" | "website" | "number" | "integer" | "decimal" | "dropdown" | "multiSelectDropdown" | "user" | "date" | "date_time" | "time" | "not_assigned" | (string & {});
+/** One entry in the export-format dropdown, paired with `handleExportChange`. */
 export type ExportOption = {
     label: string;
     id: string;
 };
+/** Current sort direction applied to one column. */
 export type ColumnSortingProps = {
     column: string | number;
     direction: "asc" | "desc" | "none";
 };
-export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
+/** Props for the TableHeader row subcomponent: all columns, sorting, search, freeze, selection. */
+export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
     isPopoverOpen?: boolean;
@@ -133,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";
@@ -142,10 +226,14 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     columnsSearch: Record<string, string>;
     isSelecting?: boolean;
 };
+/** 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;
-    endRow: 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;
@@ -157,6 +245,7 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
     groups?: TableRenderGroup[];
     onAddItem?: (groupValue: string | number) => void;
 };
+/** One resolved group of rows with its label/accent colors, for grouped board rendering. */
 export type TableRenderGroup = {
     value: string | number;
     label: string;
@@ -168,20 +257,24 @@ export type TableRenderGroup = {
     };
     rows: DataObject[];
 };
+/** Props for one column's search/filter popover. */
 export type TableFiltersProps = {
     header: TableHeaderProps;
     setColumnsSearch: (searchVal: string) => void;
     columnsSearch: string;
     onClose: () => void;
 };
-export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "freezedBgColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
+/** Props for a single column's header cell: sorting, filtering, freeze state, width. */
+export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
     header: TableHeaderProps;
     index: number;
     columnWidths: number[];
+    slotWidth: number;
     headerRefs: MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnsSearch: Record<string, string>;
     setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;
 };
+/** Pairs a column header with its current sort state, e.g. for a sort-icon renderer. */
 export type SortingProps = {
     isSorting: ColumnSortingProps | undefined;
     header: TableHeaderProps;

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

@@ -10,6 +10,7 @@ const react_2 = __importDefault(require("react"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const styledIcon = icon ? react_2.default.cloneElement(icon, {
@@ -18,12 +19,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 ((0, jsx_runtime_1.jsxs)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.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 : (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[100]),
                 bg: colors.background[100],
             }
-            : {}, transition: "all 0.2s ease", children: [customComponent, styledIcon, " ", name] }));
+            : {}, transition: (0, motion_1.transitionFor)(["color", "background-color"], "base"), children: [customComponent, styledIcon, " ", name] }));
 };
 const HeaderActions = ({ actions, selections, }) => {
     var _a, _b, _c, _d, _e, _f;

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { TableProps } from "../TableProps";
-type PaginationProps = Pick<TableProps, "isVisiblity" | "columns" | "paginationSelectOptions"> & {
+type PaginationProps = Pick<TableProps, "paginationSelectOptions"> & {
     paginationText: string;
-    handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    handlePageSizeChange: (size: number) => void;
     rowsPerPage: number;
     currentPage: number;
     pages: number;