pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/Table/Table.js

@@ -13,12 +13,21 @@ 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 planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+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 useRowExpansion_1 = require("./hooks/useRowExpansion");
+const columnLabel_1 = require("./columnLabel");
 const table_1 = require("../../Utils/table");
 const usePreferences_1 = require("../../Hooks/usePreferences");
 const TableSettings_1 = __importDefault(require("./settings/TableSettings"));
@@ -29,24 +38,35 @@ const ActiveFilters_1 = __importDefault(require("./filters/ActiveFilters"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const lucide_react_1 = require("lucide-react");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 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 = {
+// NOTE: MOTION_EASE as framer bezier points; the motion tokens have no points form yet.
+const PANE_TRANSITION = { type: "tween", ...(0, motion_1.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. */
+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 = (0, useCustomTheme_1.useCustomTheme)();
+    const prefersReducedMotion = (0, motion_2.usePrefersReducedMotion)();
+    const clearFiltersTone = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.semantic.error, theme.colors), [theme.colors]);
+    const clearBadge = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, 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 detailIdPrefix = (0, react_1.useId)();
+    const { expandedIds, toggle: toggleDetail } = (0, useRowExpansion_1.useRowExpansion)(expandedRows, onExpandedRowsChange);
+    const rowDetail = (0, react_1.useMemo)(() => (renderRowDetail ? { render: renderRowDetail, toggle: toggleDetail, idPrefix: detailIdPrefix } : undefined), [renderRowDetail, toggleDetail, detailIdPrefix]);
     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)({
@@ -75,8 +95,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,
@@ -89,6 +108,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).
@@ -149,8 +169,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)(() => {
@@ -162,7 +183,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
     }, [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: (0, columnLabel_1.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.
@@ -170,9 +191,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.
@@ -275,13 +294,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;
@@ -308,14 +325,26 @@ 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
-    const dynamicMaxH = Math.min(500, rowsHeight);
+        rowsHeight = Math.max(rowsHeight, headerHeight + rowMetrics_1.EMPTY_STATE_HEIGHT);
+    const dynamicMaxH = Math.min(rowMetrics_1.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 = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
     (0, react_1.useEffect)(() => {
         if (!isCompactHeader) {
@@ -366,39 +395,44 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
           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.boxborder[200]}`, borderRadius: "base", 
-                // Square children poked past the rounded border, leaving a gap at each corner.
-                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.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, { "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: (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.boxborder[200]}`, 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: `${borderWidths_1.BORDER_WIDTHS.hairline} 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: 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: (0, planeStep_1.cardRule)(theme.colors), style: { height: rowMetrics_1.TOOLBAR_HEIGHT + formulaMaxH }, 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 + 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 }) })), (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: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.cardRule)(theme.colors)}`, 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: 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: (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, minH: !isTableLoading ? tableMinH : 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': {
@@ -425,5 +459,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: variantTokens.header.bg, 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.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, 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, rowDetail: rowDetail, expandedIds: expandedIds, 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: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.cardRule)(theme.colors)}`, 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 }))] }))] })] })] })] }));
 }