pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/Table/Table.js

@@ -1,128 +1,250 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Table;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var react_3 = require("@chakra-ui/react");
-var framer_motion_1 = require("framer-motion");
-var LeftFilterPane_1 = __importDefault(require("./LeftFilterPane"));
-var Pagination_1 = __importDefault(require("./Components/Pagination"));
-var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
-var TableBody_1 = __importDefault(require("./Components/TableBody"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var useTable_1 = __importDefault(require("./Components/useTable"));
-var table_1 = require("../../Utils/table");
-var usePreferences_1 = require("../../Hooks/usePreferences");
-var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
-var HeaderActions_1 = __importDefault(require("./Components/HeaderActions"));
-var Divider_1 = __importDefault(require("../Divider/Divider"));
-var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
-var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
-var lucide_react_1 = require("lucide-react");
-var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
-function Table(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _0 = _a.isCheckbox, isCheckbox = _0 === void 0 ? false : _0, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _1 = _a.noBorders, noBorders = _1 === void 0 ? false : _1, _2 = _a.isPagination, isPagination = _2 === void 0 ? true : _2, onRowClick = _a.onRowClick, selections = _a.selections, _3 = _a.isActionFreeze, isActionFreeze = _3 === void 0 ? true : _3, _4 = _a.preferences, preferences = _4 === void 0 ? {
-        url: "",
-        token: "",
-        key: "",
-        name: "",
-        page: "",
-        orgId: "",
-    } : _4, _5 = _a.paginationMode, paginationMode = _5 === void 0 ? "client" : _5, _6 = _a.noOfRowsPerPage, noOfRowsPerPage = _6 === void 0 ? 50 : _6, _7 = _a.totalRecords, totalRecords = _7 === void 0 ? 0 : _7, onPagination = _a.onPagination, _8 = _a.isTableSettings, isTableSettings = _8 === void 0 ? false : _8, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _9 = (0, react_1.useState)({}), columnsSearch = _9[0], setColumnsSearch = _9[1];
-    var tableContainerRef = (0, react_1.useRef)(null);
-    var _10 = (0, react_2.useDisclosure)(), isFilterModalOpen = _10.isOpen, onFilterModalOpen = _10.onOpen, onFilterModalClose = _10.onClose;
-    var filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : "sidebar";
-    var _11 = (0, react_1.useState)(500), viewportAvailableH = _11[0], setViewportAvailableH = _11[1];
-    var isServerPagination = paginationMode === "server";
-    var _12 = (0, usePreferences_1.useGetPreferences)({
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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 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"));
+const HeaderActions_1 = __importDefault(require("./components/HeaderActions"));
+const Divider_1 = __importDefault(require("../Divider/Divider"));
+const TableSearch_1 = __importDefault(require("./components/TableSearch"));
+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);
+// 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 = "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)();
+    // 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)({
         baseUrl: preferences.url,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }), tablePreferencesData = _12.preferences, loading = _12.loading;
-    var savePreferences = (0, usePreferences_1.useSavePreferences)({
+    });
+    const { savePreferences } = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }).savePreferences;
-    var isTableLoading = (0, react_1.useMemo)(function () {
-        return loading || isLoading;
-    }, [loading, isLoading]);
-    var tablePreferences = (0, react_1.useMemo)(function () {
+    });
+    const [isRefreshing, setIsRefreshing] = (0, react_1.useState)(false);
+    const isTableLoading = (0, react_1.useMemo)(() => {
+        return loading || isLoading || isRefreshing;
+    }, [loading, isLoading, isRefreshing]);
+    const tablePreferences = (0, react_1.useMemo)(() => {
         if (tablePreferencesData === null || tablePreferencesData === void 0 ? void 0 : tablePreferencesData.length) {
             return tablePreferencesData[0].json;
         }
         return {};
     }, [tablePreferencesData]);
-    var _13 = (0, useTable_1.default)({
-        tableBorderColor: tableBorderColor,
-        data: data,
-        isPagination: isPagination,
-        selections: selections,
-        columns: columns,
-        onSelection: onSelection,
-        tablePreferences: tablePreferences,
-        savePreferences: savePreferences,
-        noOfRowsPerPage: noOfRowsPerPage,
-        totalRecords: totalRecords,
-        isServerPagination: isServerPagination,
-        onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
-        defaultVisibleColumns: defaultVisibleColumns,
-    }), tableData = _13.tableData, isContent = _13.isContent, isLink = _13.isLink, headerRefs = _13.headerRefs, columnWidths = _13.columnWidths, handleSort = _13.handleSort, handleCheckbox = _13.handleCheckbox, filteredData = _13.filteredData, startRow = _13.startRow, endRow = _13.endRow, selection = _13.selection, columnsSort = _13.columnsSort, currentPage = _13.currentPage, pages = _13.pages, rowsPerPage = _13.rowsPerPage, handlePageSizeChange = _13.handlePageSizeChange, setCurrentPage = _13.setCurrentPage, columnsList = _13.columnsList, handleColumnPreferences = _13.handleColumnPreferences, isSelecting = _13.isSelecting;
-    var _filteredData = (0, react_1.useMemo)(function () {
-        return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
-    }, [columnsSearch, filteredData]);
-    var onPaginationRef = (0, react_1.useRef)(onPagination);
+    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,
+        columns,
+        onSelection,
+        tablePreferences,
+        savePreferences,
+        noOfRowsPerPage,
+        totalRecords,
+        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).
+    const [densityState, setDensityState] = (0, react_1.useState)(density);
+    // Grouping is chosen by the user in Table Settings > Group and persisted to
+    // preferences (`json.groupBy`); there is no `groupBy` prop.
+    const [groupByState, setGroupByState] = (0, react_1.useState)(undefined);
+    const [isPaginationPopoverOpen, setIsPaginationPopoverOpen] = (0, react_1.useState)(false);
+    // Grouped "Load more" accumulates pages here so loading more ADDS rows to the
+    // groups (server pagination replaces `data` each fetch). Reset on fresh loads
+    // (search / filter / sort / page-size). Only used in grouped + groupLoadMore mode.
+    const [accumulatedRows, setAccumulatedRows] = (0, react_1.useState)([]);
+    const pendingLoadMoreRef = (0, react_1.useRef)(false);
+    // Pages loaded so far (1 = the initial page). The next page is derived from this
+    // counter — NOT from the deduped row count — so overlapping rows across pages
+    // (e.g. pinned rows that repeat on every page) don't stall the page index.
+    const loadedPagesRef = (0, react_1.useRef)(1);
+    (0, react_1.useEffect)(() => {
+        if (!groupLoadMore)
+            return;
+        setAccumulatedRows((prev) => {
+            if (prev.length === 0) {
+                loadedPagesRef.current = 1;
+                return tableData.slice();
+            }
+            const accIds = new Set(prev.map((r) => r.id));
+            if (pendingLoadMoreRef.current) {
+                // A "Load more" is in flight. The parent may re-emit the SAME page (new
+                // array reference) on intermediate re-renders before the next page arrives,
+                // so only append + consume the flag once genuinely new rows show up.
+                const newRows = tableData.filter((r) => !accIds.has(r.id));
+                if (newRows.length === 0)
+                    return prev; // same page re-emitted — keep waiting
+                pendingLoadMoreRef.current = false;
+                return [...prev, ...newRows];
+            }
+            // Not a load-more: a re-emit of already-loaded rows keeps the accumulation
+            // (the parent re-renders the current page often). Genuinely new rows
+            // (search / filter / sort / page-size / reload) reset it.
+            const allKnown = tableData.length > 0 && tableData.every((r) => accIds.has(r.id));
+            if (allKnown)
+                return prev;
+            loadedPagesRef.current = 1; // fresh data set
+            return tableData.slice();
+        });
+    }, [tableData, groupLoadMore]);
+    // Page-size change restarts the accumulation (the page boundaries change), so the
+    // next "Load more" requests page 2 of the NEW size, not a stale page index.
+    const rowsPerPageMountedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!rowsPerPageMountedRef.current) {
+            rowsPerPageMountedRef.current = true;
+            return;
+        }
+        pendingLoadMoreRef.current = false;
+        loadedPagesRef.current = 1;
+        setAccumulatedRows(tableData); // current page at the new size (not empty)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowsPerPage]);
+    (0, react_1.useEffect)(() => {
+        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)(() => {
+        if (tablePreferences && "groupBy" in tablePreferences) {
+            const saved = tablePreferences.groupBy;
+            setGroupByState(saved === null || saved === undefined || saved === "" ? undefined : saved);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.groupBy]);
+    const handleDensityChange = (d) => {
+        setDensityState(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.
+    const handleSettingsSave = (cols, group) => {
+        setGroupByState(group);
+        handleColumnPreferences(cols, { density: densityState, groupBy: group !== null && group !== void 0 ? group : null });
+    };
+    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.
+    // `groupLoadMore` adds a "Load more" button on top to fetch more into the groups. ---
+    const isGrouped = !!groupByState;
+    // Infinite scroll (server mode, not grouped): load more on scroll-near-bottom.
+    const canInfinite = infiniteScroll && !isGrouped;
+    // Grouped "Load more": the accumulated pages back the grouped board so loading
+    // more grows the groups instead of replacing them.
+    const loadMoreBase = isGrouped && groupLoadMore ? accumulatedRows : tableData;
+    const hasMoreEffective = typeof hasMore === "boolean"
+        ? hasMore
+        : isServerPagination
+            ? loadMoreBase.length < totalRecords
+            : false;
+    const groupLoadMoreActive = isGrouped && groupLoadMore;
+    // Keep the button while a load is in flight (so a transient empty `data` during
+    // fetching doesn't make it flicker); hide it once loading settles with no more.
+    const canGroupLoadMore = groupLoadMoreActive && (hasMoreEffective || isLoadingMore);
+    const groupPalette = (0, react_1.useMemo)(() => (0, table_1.buildTablePalette)(theme), [theme]);
+    const groupedSource = (0, react_1.useMemo)(() => {
+        if (!isGrouped)
+            return [];
+        const src = groupLoadMore ? accumulatedRows : tableData;
+        return (0, table_1.searchAndSortData)((0, table_1.SortMultiColumnData)(src, columnsSort), columnsSearch);
+    }, [isGrouped, groupLoadMore, accumulatedRows, tableData, columnsSort, columnsSearch]);
+    const renderGroups = (0, react_1.useMemo)(() => {
+        if (!isGrouped)
+            return undefined;
+        return (0, table_1.groupRows)(groupedSource, groupByState).map((g) => ({
+            ...g,
+            color: (0, table_1.pickTableColor)(g.value, groupPalette, groupColors === null || groupColors === void 0 ? void 0 : groupColors[g.value]),
+        }));
+    }, [isGrouped, groupedSource, groupByState, groupPalette, groupColors]);
+    // "Select all" + header checkbox operate on the rows actually rendered: the
+    // accumulated grouped source when grouped, otherwise the table data.
+    const selectAllRows = isGrouped ? groupedSource : tableData;
+    selectAllRowsRef.current = isGrouped ? groupedSource : null;
+    const headerChecked = (0, react_1.useMemo)(() => {
+        if (selection.length === 0)
+            return false;
+        if (selectAllRows.length === 0)
+            return false;
+        const sel = new Set(selection);
+        return selectAllRows.every((r) => sel.has(r.id)) ? true : "indeterminate";
+    }, [selection, selectAllRows]);
+    const onPaginationRef = (0, react_1.useRef)(onPagination);
     onPaginationRef.current = onPagination;
-    var prevPageRef = (0, react_1.useRef)(currentPage);
-    (0, react_1.useEffect)(function () {
+    const prevPageRef = (0, react_1.useRef)(currentPage);
+    (0, react_1.useEffect)(() => {
         if (onPaginationRef.current) {
-            var prevPage = prevPageRef.current;
-            var direction = void 0;
+            const prevPage = prevPageRef.current;
+            let direction;
             if (currentPage === 0) {
                 direction = "first";
             }
@@ -135,148 +257,207 @@ function Table(_a) {
             else {
                 direction = "prev";
             }
-            var record = direction === "next" || direction === "last"
+            const record = direction === "next" || direction === "last"
                 ? (tableData.length > 0 ? tableData[tableData.length - 1] : undefined)
                 : (tableData.length > 0 ? tableData[0] : undefined);
             onPaginationRef.current(currentPage + 1, rowsPerPage, record, direction);
             prevPageRef.current = currentPage;
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentPage, rowsPerPage]);
-    var tablePaginationText = (0, react_1.useMemo)(function () { return isServerPagination
-        ? "".concat(startRow + 1, " - ").concat(Math.min(startRow + rowsPerPage, totalRecords), " of ").concat(totalRecords)
-        : "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(tableData.length); }, [startRow, rowsPerPage, totalRecords, endRow, tableData.length]);
-    var controlsHeight = 45;
-    var estimatedRowHeight = 45;
-    var actualRows = _filteredData.length;
-    var loadingRowsCount = typeof loadingSkeletonRows === "number" ? Math.max(1, loadingSkeletonRows) : 4;
-    var minRows = typeof minVisibleRows === "number"
+    // Grouped "Load more": request the next chunk; parent appends it to `data` and
+    // the table re-groups so new rows land in their respective groups.
+    const handleGroupLoadMore = () => {
+        var _a;
+        if (isLoadingMore || isTableLoading || !hasMoreEffective)
+            return;
+        // Must request the SAME page size the data was loaded with — a page-count model
+        // breaks if pages have different sizes (e.g. page size 100 but a 20-row chunk
+        // re-requests already-loaded records). `loadMoreChunkSize` is only a last-resort
+        // fallback and is otherwise ignored.
+        const chunk = rowsPerPage || loadMoreChunkSize || 20;
+        // Advance by page COUNT (not by deduped row count) so overlapping/pinned rows
+        // across pages don't keep us stuck on the same page.
+        const nextPage = loadedPagesRef.current + 1;
+        loadedPagesRef.current = nextPage;
+        const lastRecord = loadMoreBase.length > 0 ? loadMoreBase[loadMoreBase.length - 1] : undefined;
+        pendingLoadMoreRef.current = true;
+        (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, nextPage, chunk, lastRecord, "next");
+    };
+    // While more can load → live count; once everything's loaded → "Showing all
+    // records" (the running total isn't shown because de-duped/server totals can
+    // disagree, e.g. "250 of 250" would be misleading).
+    const groupLoadMoreCaption = !groupLoadMoreActive || isTableLoading || loadMoreBase.length === 0
+        ? undefined
+        : canGroupLoadMore
+            ? totalRecords > 0
+                ? `Showing ${loadMoreBase.length} of ${totalRecords}`
+                : `Showing ${loadMoreBase.length}`
+            : "Showing all records";
+    const tablePaginationText = isServerPagination
+        ? `${startRow + 1} - ${Math.min(startRow + rowsPerPage, totalRecords)} of ${totalRecords}`
+        : `${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;
+    const minRows = typeof minVisibleRows === "number"
         ? Math.max(0, minVisibleRows)
         : (actualRows === 0
             ? 1
             : ((filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 5 : actualRows));
-    var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : (actualRows === 0 ? 1 : 10);
-    var visibleRowsCount = Math.max(minRows, Math.min(actualRows, maxRows));
-    (0, react_1.useEffect)(function () {
+    const maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : (actualRows === 0 ? 1 : 10);
+    const visibleRowsCount = Math.max(minRows, Math.min(actualRows, maxRows));
+    (0, react_1.useEffect)(() => {
         if (!autoFitViewport)
             return;
-        var compute = function () {
+        const compute = () => {
             if (tableContainerRef.current) {
-                var rect = tableContainerRef.current.getBoundingClientRect();
-                var available = Math.max(200, window.innerHeight - rect.top - 16);
+                const rect = tableContainerRef.current.getBoundingClientRect();
+                const available = Math.max(200, window.innerHeight - rect.top - 16);
                 setViewportAvailableH(available);
             }
         };
         compute();
         window.addEventListener("resize", compute);
-        return function () { return window.removeEventListener("resize", compute); };
+        return () => window.removeEventListener("resize", compute);
     }, [autoFitViewport]);
-    var heightRowsCount = isTableLoading ? loadingRowsCount : visibleRowsCount;
-    var isCompactRows = heightRowsCount <= 1 && !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar);
-    var rowsHeight = (heightRowsCount * estimatedRowHeight) + estimatedRowHeight;
-    var dynamicMaxH = Math.min(500, rowsHeight);
-    var fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
-    var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
-    var isCompactHeader = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
-    var compactScrollbarPadding = isCompactRows ? 4 : 0;
-    var sidebarActiveCount = (0, react_1.useMemo)(function () {
+    const heightRowsCount = isTableLoading ? loadingRowsCount : visibleRowsCount;
+    const isCompactRows = heightRowsCount <= 1 && !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) && !isGrouped && !isEmptyState;
+    let rowsHeight = heightRowsCount * rowHeight + headerHeight;
+    if (isGrouped)
+        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, 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 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) {
+            setIsPaginationPopoverOpen(false);
+        }
+    }, [isCompactHeader]);
+    const compactScrollbarPadding = isCompactRows ? 4 : 0;
+    // Infinite scroll: reuse onPagination("next") when scrolled near the bottom.
+    const infiniteRef = (0, react_1.useRef)({ isLoadingMore, isTableLoading, hasMore, rowsPerPage, dataLen: tableData.length, lastRecord: tableData[tableData.length - 1], totalRecords, isServerPagination });
+    infiniteRef.current = { isLoadingMore, isTableLoading, hasMore, rowsPerPage, dataLen: tableData.length, lastRecord: tableData[tableData.length - 1], totalRecords, isServerPagination };
+    (0, react_1.useEffect)(() => {
+        if (!canInfinite)
+            return;
+        const el = tableContainerRef.current;
+        if (!el)
+            return;
+        const onScroll = () => {
+            var _a;
+            const s = infiniteRef.current;
+            if (s.isLoadingMore || s.isTableLoading)
+                return;
+            const more = typeof s.hasMore === "boolean"
+                ? s.hasMore
+                : s.isServerPagination
+                    ? s.dataLen < s.totalRecords
+                    : false;
+            if (!more)
+                return;
+            if (el.scrollHeight - el.scrollTop - el.clientHeight < 160) {
+                const nextPage = Math.floor(s.dataLen / (s.rowsPerPage || 1)) + 1;
+                (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, nextPage, s.rowsPerPage, s.lastRecord, "next");
+            }
+        };
+        el.addEventListener("scroll", onScroll, { passive: true });
+        return () => el.removeEventListener("scroll", onScroll);
+    }, [canInfinite]);
+    const sidebarActiveCount = (0, react_1.useMemo)(() => {
         if (!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected))
             return 0;
-        return Object.entries(filterSidebar.selected).reduce(function (acc, _a) {
-            var key = _a[0], items = _a[1];
+        return Object.entries(filterSidebar.selected).reduce((acc, [key, items]) => {
             if (key === "search")
                 return acc; // Don't count search in active filter count
             return acc + (Array.isArray(items) ? items.length : 0);
         }, 0);
     }, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
-    return (react_1.default.createElement(react_2.Box, { bg: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], border: "0.063rem solid ".concat((_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500]), borderRadius: 3 },
-        filterSidebar && filterMode === "modal" && (react_1.default.createElement(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside" },
-            react_1.default.createElement(react_2.ModalOverlay, null),
-            react_1.default.createElement(react_2.ModalContent, { my: 0, top: "10%", position: "fixed", left: "auto", right: "auto" },
-                react_1.default.createElement(react_2.ModalCloseButton, { size: "sm" }),
-                react_1.default.createElement(react_2.ModalBody, { p: 0 },
-                    react_1.default.createElement(LeftFilterPane_1.default, { theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: function (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: function () { 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 }))))),
-        react_1.default.createElement(react_2.Flex, { align: "start" },
-            filterMode === "sidebar" && (react_1.default.createElement(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: (_g = theme.colors.border) === null || _g === void 0 ? void 0 : _g[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto" },
-                react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_h = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _h !== void 0 ? _h : [], 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 }))),
-            react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 2, flexWrap: "nowrap", bg: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], borderBottom: "0.063rem solid ".concat((_l = theme.colors.border) === null || _l === void 0 ? void 0 : _l[500]) },
-                    filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
-                            react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.primary) === null || _o === void 0 ? void 0 : _o[500] : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.text) === null || _q === void 0 ? void 0 : _q[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
-                            sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (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: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.red) === null || _u === void 0 ? void 0 : _u[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
-                                react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 })))),
-                        react_1.default.createElement(Divider_1.default, null))),
-                    react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
-                    isTableSettings && tableData.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(Divider_1.default, null),
-                        react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings }))),
-                    selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(Divider_1.default, null),
-                        react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
-                    react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
-                    react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
-                        (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 0 auto" },
-                            react_1.default.createElement(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) && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
-                            react_1.default.createElement(react_2.PopoverTrigger, null,
-                                react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.text) === null || _w === void 0 ? void 0 : _w[500] }) })),
-                            react_1.default.createElement(react_2.PopoverContent, { maxW: "22rem", p: 2, overflow: "hidden" },
-                                react_1.default.createElement(react_2.PopoverBody, { p: 0 },
-                                    react_1.default.createElement(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 }))))))),
-                react_1.default.createElement(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: {
-                        '&::-webkit-scrollbar': {
-                            width: '6px',
-                            height: isCompactRows ? '0px' : '6px',
-                        },
-                        '&:hover::-webkit-scrollbar': {
-                            height: '6px',
-                        },
-                        '&::-webkit-scrollbar-track': {
-                            background: theme.colors.gray[100],
-                            borderRadius: '3px',
-                        },
-                        '&::-webkit-scrollbar-thumb': {
-                            background: theme.colors.gray[400],
-                            borderRadius: '3px',
-                        },
-                        '&::-webkit-scrollbar-thumb:hover': {
-                            background: theme.colors.gray[500],
-                        },
-                        scrollbarWidth: isCompactRows ? 'none' : 'thin',
-                        '&:hover': {
-                            scrollbarWidth: 'thin',
-                        },
-                        scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
-                    } },
-                    react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", minW: "100%", className: "table_wrapper", sx: {
-                            width: "100%",
-                            borderCollapse: "collapse",
-                            "th .resize-handle": {
-                                position: "absolute",
-                                top: 0,
-                                right: 0,
-                                width: "8px",
-                                height: "100%",
-                                cursor: "col-resize",
-                                backgroundColor: "transparent",
-                                zIndex: 999,
-                            },
-                        } },
-                        react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4 },
-                            react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
-                                    ? true
-                                    : selection.length === 0
-                                        ? false
-                                        : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
-                        react_1.default.createElement(react_3.Tbody, null,
-                            react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
+    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: `${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();
+                                                                    }
+                                                                    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);
+                                                                }
+                                                            }
+                                                        }, 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.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': {
+                                                width: scrollbar_1.SCROLLBAR_WIDTH,
+                                                height: isCompactRows ? '0px' : scrollbar_1.SCROLLBAR_WIDTH,
+                                            },
+                                            '&:hover::-webkit-scrollbar': { height: scrollbar_1.SCROLLBAR_WIDTH },
+                                            scrollbarWidth: isCompactRows ? 'none' : 'thin',
+                                            '&:hover': { scrollbarWidth: 'thin' },
+                                        }, children: [(0, jsx_runtime_1.jsxs)(react_3.Table, { variant: "simple", size: "sm", minW: "100%", role: "grid", "aria-rowcount": isGrouped ? undefined : _filteredData.length + 1, className: "table_wrapper", sx: {
+                                                    width: "100%",
+                                                    // `separate` (not `collapse`) so sticky header cells paint an opaque
+                                                    // background over their borders — collapsed borders bleed scrolling
+                                                    // content through the seams.
+                                                    borderCollapse: "separate",
+                                                    borderSpacing: 0,
+                                                    "th .resize-handle": {
+                                                        position: "absolute",
+                                                        top: 0,
+                                                        right: 0,
+                                                        width: "8px",
+                                                        height: "100%",
+                                                        cursor: "col-resize",
+                                                        backgroundColor: "transparent",
+                                                        zIndex: 999,
+                                                    },
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, 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 }))] }))] })] })] })] }));
 }