pixelize-design-library 2.3.7 → 2.3.8

package/dist/Components/Table/Table.js

@@ -1,227 +1,138 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 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("./filters/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("./hooks/useTable"));
-var table_1 = require("../../Utils/table");
-var usePreferences_1 = require("../../Hooks/usePreferences");
-var TableSettings_1 = __importDefault(require("./settings/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("./filters/ActiveFilters"));
-var Button_1 = __importDefault(require("../Button/Button"));
-var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-var lucide_react_1 = require("lucide-react");
-var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
-function Table(_a) {
-    var _this = this;
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _17 = _a.isCheckbox, isCheckbox = _17 === void 0 ? false : _17, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _18 = _a.noBorders, noBorders = _18 === void 0 ? false : _18, _19 = _a.isPagination, isPagination = _19 === void 0 ? true : _19, onRowClick = _a.onRowClick, selections = _a.selections, _20 = _a.isActionFreeze, isActionFreeze = _20 === void 0 ? true : _20, _21 = _a.preferences, preferences = _21 === void 0 ? {
-        url: "",
-        token: "",
-        key: "",
-        name: "",
-        page: "",
-        orgId: "",
-    } : _21, _22 = _a.paginationMode, paginationMode = _22 === void 0 ? "client" : _22, _23 = _a.infiniteScroll, infiniteScroll = _23 === void 0 ? false : _23, hasMore = _a.hasMore, _24 = _a.isLoadingMore, isLoadingMore = _24 === void 0 ? false : _24, _25 = _a.groupLoadMore, groupLoadMore = _25 === void 0 ? false : _25, _26 = _a.loadMoreText, loadMoreText = _26 === void 0 ? "Load more" : _26, _27 = _a.loadMorePosition, loadMorePosition = _27 === void 0 ? "top" : _27, loadMoreChunkSize = _a.loadMoreChunkSize, _28 = _a.noOfRowsPerPage, noOfRowsPerPage = _28 === void 0 ? 50 : _28, _29 = _a.totalRecords, totalRecords = _29 === void 0 ? 0 : _29, onPagination = _a.onPagination, _30 = _a.isTableSettings, isTableSettings = _30 === void 0 ? false : _30, 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, _31 = _a.density, density = _31 === void 0 ? "normal" : _31, stripe = _a.stripe, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState, onRefresh = _a.onRefresh;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _32 = (0, react_1.useState)({}), columnsSearch = _32[0], setColumnsSearch = _32[1];
-    var tableContainerRef = (0, react_1.useRef)(null);
-    var _33 = (0, react_2.useDisclosure)(), isFilterModalOpen = _33.isOpen, onFilterModalOpen = _33.onOpen, onFilterModalClose = _33.onClose;
-    var filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : "sidebar";
-    var _34 = (0, react_1.useState)(500), viewportAvailableH = _34[0], setViewportAvailableH = _34[1];
-    var isServerPagination = paginationMode === "server";
-    var _35 = (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 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 useTable_1 = __importDefault(require("./hooks/useTable"));
+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 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 = {
+    url: "",
+    token: "",
+    key: "",
+    name: "",
+    page: "",
+    orgId: "",
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", stripe, groupColors, onAddItem, emptyState, onRefresh,
+// onColumnFilter
+ }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [columnsSearch, setColumnsSearch] = (0, react_1.useState)({});
+    const tableContainerRef = (0, react_1.useRef)(null);
+    const { isOpen: isFilterModalOpen, onOpen: onFilterModalOpen, onClose: onFilterModalClose } = (0, react_2.useDisclosure)();
+    const filterMode = (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _a !== void 0 ? _a : "sidebar";
+    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 = _35.preferences, loading = _35.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 _36 = (0, react_1.useState)(false), isRefreshing = _36[0], setIsRefreshing = _36[1];
-    var isTableLoading = (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]);
-    var tablePreferences = (0, react_1.useMemo)(function () {
+    const tablePreferences = (0, react_1.useMemo)(() => {
         if (tablePreferencesData === null || tablePreferencesData === void 0 ? void 0 : tablePreferencesData.length) {
             return tablePreferencesData[0].json;
         }
         return {};
     }, [tablePreferencesData]);
-    var _37 = (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 = _37.tableData, isContent = _37.isContent, isLink = _37.isLink, headerRefs = _37.headerRefs, columnWidths = _37.columnWidths, handleSort = _37.handleSort, handleCheckbox = _37.handleCheckbox, filteredData = _37.filteredData, startRow = _37.startRow, endRow = _37.endRow, selection = _37.selection, columnsSort = _37.columnsSort, currentPage = _37.currentPage, pages = _37.pages, rowsPerPage = _37.rowsPerPage, handlePageSizeChange = _37.handlePageSizeChange, setCurrentPage = _37.setCurrentPage, columnsList = _37.columnsList, handleColumnPreferences = _37.handleColumnPreferences, isSelecting = _37.isSelecting, selectAllRowsRef = _37.selectAllRowsRef;
+    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,
+        data,
+        isPagination,
+        selections,
+        columns,
+        onSelection,
+        tablePreferences,
+        savePreferences,
+        noOfRowsPerPage,
+        totalRecords,
+        isServerPagination,
+        onNoOfRowsPerPageChange,
+        defaultVisibleColumns,
+    });
     // Density + grouping are managed here so the Table Settings tabs can change +
     // persist them (seeded from the prop / saved preferences when they load).
-    var _38 = (0, react_1.useState)(density), densityState = _38[0], setDensityState = _38[1];
+    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.
-    var _39 = (0, react_1.useState)(undefined), groupByState = _39[0], setGroupByState = _39[1];
+    const [groupByState, setGroupByState] = (0, react_1.useState)(undefined);
     // 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.
-    var _40 = (0, react_1.useState)([]), accumulatedRows = _40[0], setAccumulatedRows = _40[1];
-    var pendingLoadMoreRef = (0, react_1.useRef)(false);
+    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.
-    var loadedPagesRef = (0, react_1.useRef)(1);
-    (0, react_1.useEffect)(function () {
+    const loadedPagesRef = (0, react_1.useRef)(1);
+    (0, react_1.useEffect)(() => {
         if (!groupLoadMore)
             return;
-        setAccumulatedRows(function (prev) {
+        setAccumulatedRows((prev) => {
             if (prev.length === 0) {
                 loadedPagesRef.current = 1;
                 return tableData.slice();
             }
-            var accIds = new Set(prev.map(function (r) { return r.id; }));
+            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.
-                var newRows = tableData.filter(function (r) { return !accIds.has(r.id); });
+                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 __spreadArray(__spreadArray([], prev, true), newRows, true);
+                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.
-            var allKnown = tableData.length > 0 && tableData.every(function (r) { return accIds.has(r.id); });
+            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();
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [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.
-    var rowsPerPageMountedRef = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(function () {
+    const rowsPerPageMountedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
         if (!rowsPerPageMountedRef.current) {
             rowsPerPageMountedRef.current = true;
             return;
@@ -229,81 +140,84 @@ function Table(_a) {
         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)(function () {
-        if (tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density)
+    }, [rowsPerPage, tableData]);
+    (0, react_1.useEffect)(() => {
+        if (tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density) {
             setDensityState(tablePreferences.density);
+        }
     }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (tablePreferences && "groupBy" in tablePreferences) {
-            var saved = tablePreferences.groupBy;
+            const saved = tablePreferences.groupBy;
             setGroupByState(saved === null || saved === undefined || saved === "" ? undefined : saved);
         }
-    }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.groupBy]);
-    var handleDensityChange = function (d) {
+    }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.groupBy, setGroupByState, tablePreferences]);
+    const handleDensityChange = (d) => {
         setDensityState(d);
-        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences(__assign(__assign({}, tablePreferences), { columns: columnsList, groupBy: groupByState !== null && groupByState !== void 0 ? groupByState : null, density: d }));
+        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences({ ...tablePreferences, columns: 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.
-    var handleSettingsSave = function (cols, group) {
+    const handleSettingsSave = (cols, group) => {
         setGroupByState(group);
         handleColumnPreferences(cols, { density: densityState, groupBy: group !== null && group !== void 0 ? group : null });
     };
-    var _filteredData = (0, react_1.useMemo)(function () {
+    const _filteredData = (0, react_1.useMemo)(() => {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, 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. ---
-    var isGrouped = !!groupByState;
+    const isGrouped = !!groupByState;
     // Infinite scroll (server mode, not grouped): load more on scroll-near-bottom.
-    var canInfinite = infiniteScroll && !isGrouped;
+    const canInfinite = infiniteScroll && !isGrouped;
     // Grouped "Load more": the accumulated pages back the grouped board so loading
     // more grows the groups instead of replacing them.
-    var loadMoreBase = isGrouped && groupLoadMore ? accumulatedRows : tableData;
-    var hasMoreEffective = typeof hasMore === "boolean"
+    const loadMoreBase = isGrouped && groupLoadMore ? accumulatedRows : tableData;
+    const hasMoreEffective = typeof hasMore === "boolean"
         ? hasMore
         : isServerPagination
             ? loadMoreBase.length < totalRecords
             : false;
-    var groupLoadMoreActive = isGrouped && groupLoadMore;
+    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.
-    var canGroupLoadMore = groupLoadMoreActive && (hasMoreEffective || isLoadingMore);
-    var groupPalette = (0, react_1.useMemo)(function () { return (0, table_1.buildTablePalette)(theme); }, [theme]);
-    var groupedSource = (0, react_1.useMemo)(function () {
+    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 [];
-        var src = groupLoadMore ? accumulatedRows : tableData;
+        const src = groupLoadMore ? accumulatedRows : tableData;
         return (0, table_1.searchAndSortData)((0, table_1.SortMultiColumnData)(src, columnsSort), columnsSearch);
     }, [isGrouped, groupLoadMore, accumulatedRows, tableData, columnsSort, columnsSearch]);
-    var renderGroups = (0, react_1.useMemo)(function () {
+    const renderGroups = (0, react_1.useMemo)(() => {
         if (!isGrouped)
             return undefined;
-        return (0, table_1.groupRows)(groupedSource, groupByState).map(function (g) { return (__assign(__assign({}, g), { color: (0, table_1.pickTableColor)(g.value, groupPalette, groupColors === null || groupColors === void 0 ? void 0 : groupColors[g.value]) })); });
+        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.
-    var selectAllRows = isGrouped ? groupedSource : tableData;
+    const selectAllRows = isGrouped ? groupedSource : tableData;
     selectAllRowsRef.current = isGrouped ? groupedSource : null;
-    var headerChecked = (0, react_1.useMemo)(function () {
+    const headerChecked = (0, react_1.useMemo)(() => {
         if (selection.length === 0)
             return false;
         if (selectAllRows.length === 0)
             return false;
-        var sel = new Set(selection);
-        return selectAllRows.every(function (r) { return sel.has(r.id); }) ? true : "indeterminate";
+        const sel = new Set(selection);
+        return selectAllRows.every((r) => sel.has(r.id)) ? true : "indeterminate";
     }, [selection, selectAllRows]);
-    var onPaginationRef = (0, react_1.useRef)(onPagination);
+    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";
             }
@@ -316,16 +230,16 @@ 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;
         }
-    }, [currentPage, rowsPerPage]);
+    }, [currentPage, rowsPerPage, tableData, pages]);
     // 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.
-    var handleGroupLoadMore = function () {
+    const handleGroupLoadMore = () => {
         var _a;
         if (isLoadingMore || isTableLoading || !hasMoreEffective)
             return;
@@ -333,83 +247,83 @@ function Table(_a) {
         // 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.
-        var chunk = rowsPerPage || loadMoreChunkSize || 20;
+        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.
-        var nextPage = loadedPagesRef.current + 1;
+        const nextPage = loadedPagesRef.current + 1;
         loadedPagesRef.current = nextPage;
-        var lastRecord = loadMoreBase.length > 0 ? loadMoreBase[loadMoreBase.length - 1] : undefined;
+        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).
-    var groupLoadMoreCaption = !groupLoadMoreActive || isTableLoading || loadMoreBase.length === 0
+    const groupLoadMoreCaption = !groupLoadMoreActive || isTableLoading || loadMoreBase.length === 0
         ? undefined
         : canGroupLoadMore
             ? totalRecords > 0
-                ? "Showing ".concat(loadMoreBase.length, " of ").concat(totalRecords)
-                : "Showing ".concat(loadMoreBase.length)
+                ? `Showing ${loadMoreBase.length} of ${totalRecords}`
+                : `Showing ${loadMoreBase.length}`
             : "Showing all records";
-    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;
+    const tablePaginationText = (0, react_1.useMemo)(() => 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, isServerPagination]);
+    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.
-    var actualRows = isGrouped ? groupedSource.length : _filteredData.length;
-    var isEmptyState = !isTableLoading && actualRows === 0;
-    var loadingRowsCount = typeof loadingSkeletonRows === "number" ? Math.max(1, loadingSkeletonRows) : 4;
-    var minRows = typeof minVisibleRows === "number"
+    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) && !isGrouped && !isEmptyState;
-    var rowsHeight = heightRowsCount * estimatedRowHeight + estimatedRowHeight;
+    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;
     if (isGrouped)
-        rowsHeight += ((_c = renderGroups === null || renderGroups === void 0 ? void 0 : renderGroups.length) !== null && _c !== void 0 ? _c : 1) * 42; // group header rows
+        rowsHeight += ((_b = renderGroups === null || renderGroups === void 0 ? void 0 : renderGroups.length) !== null && _b !== void 0 ? _b : 1) * 42; // group header rows
     if (isEmptyState)
         rowsHeight = Math.max(rowsHeight, 200); // room for the empty state
-    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;
+    const dynamicMaxH = Math.min(500, rowsHeight);
+    const fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
+    const tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
+    const isCompactHeader = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
+    const compactScrollbarPadding = isCompactRows ? 4 : 0;
     // Infinite scroll: reuse onPagination("next") when scrolled near the bottom.
-    var infiniteRef = (0, react_1.useRef)({ isLoadingMore: isLoadingMore, isTableLoading: isTableLoading, hasMore: hasMore, rowsPerPage: rowsPerPage, dataLen: tableData.length, lastRecord: tableData[tableData.length - 1], totalRecords: totalRecords, isServerPagination: isServerPagination });
-    infiniteRef.current = { isLoadingMore: isLoadingMore, isTableLoading: isTableLoading, hasMore: hasMore, rowsPerPage: rowsPerPage, dataLen: tableData.length, lastRecord: tableData[tableData.length - 1], totalRecords: totalRecords, isServerPagination: isServerPagination };
-    (0, react_1.useEffect)(function () {
+    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;
-        var el = tableContainerRef.current;
+        const el = tableContainerRef.current;
         if (!el)
             return;
-        var onScroll = function () {
+        const onScroll = () => {
             var _a;
-            var s = infiniteRef.current;
+            const s = infiniteRef.current;
             if (s.isLoadingMore || s.isTableLoading)
                 return;
-            var more = typeof s.hasMore === "boolean"
+            const more = typeof s.hasMore === "boolean"
                 ? s.hasMore
                 : s.isServerPagination
                     ? s.dataLen < s.totalRecords
@@ -417,160 +331,97 @@ function Table(_a) {
             if (!more)
                 return;
             if (el.scrollHeight - el.scrollTop - el.clientHeight < 160) {
-                var nextPage = Math.floor(s.dataLen / (s.rowsPerPage || 1)) + 1;
+                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 function () { return el.removeEventListener("scroll", onScroll); };
+        return () => el.removeEventListener("scroll", onScroll);
     }, [canInfinite]);
-    var sidebarActiveCount = (0, react_1.useMemo)(function () {
+    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_1.default.Fragment, null,
-        react_1.default.createElement("style", null, "\n        @keyframes pixelize-table-spin {\n          from { transform: rotate(0deg); }\n          to { transform: rotate(360deg); }\n        }\n      "),
-        react_1.default.createElement(react_2.Box, { bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], border: "0.063rem solid ".concat((_f = theme.colors.border) === null || _f === void 0 ? void 0 : _f[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: (_g = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _g !== void 0 ? _g : [], 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: (_h = theme.colors.border) === null || _h === void 0 ? void 0 : _h[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: (_j = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _j !== void 0 ? _j : [], 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: 3, flexWrap: "nowrap", bg: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[50], borderBottom: "0.063rem solid ".concat((_m = theme.colors.border) === null || _m === void 0 ? void 0 : _m[500]) },
-                        filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(ToolTip_1.default, { label: "Filter", placement: "top" },
-                                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 ? (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[500] : (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.text) === null || _r === void 0 ? void 0 : _r[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
-                                            color: (_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.primary) === null || _t === void 0 ? void 0 : _t[500],
-                                        } }),
-                                    sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.primary) === null || _v === void 0 ? void 0 : _v[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: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.red) === null || _x === void 0 ? void 0 : _x[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 && (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, group) { return handleSettingsSave(cols, group); }, tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState }))),
-                        onRefresh && (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(Divider_1.default, null),
-                            react_1.default.createElement(ToolTip_1.default, { label: "Refresh", placement: "top" },
-                                react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
-                                        color: theme.colors.primary[500],
-                                        transform: "scale(1.1)"
-                                    }, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
-                                        return __generator(this, function (_a) {
-                                            switch (_a.label) {
-                                                case 0:
-                                                    if (!!isRefreshing) return [3 /*break*/, 4];
-                                                    setIsRefreshing(true);
-                                                    _a.label = 1;
-                                                case 1:
-                                                    _a.trys.push([1, , 3, 4]);
-                                                    return [4 /*yield*/, onRefresh()];
-                                                case 2:
-                                                    _a.sent();
-                                                    return [3 /*break*/, 4];
-                                                case 3:
-                                                    setIsRefreshing(false);
-                                                    return [7 /*endfinally*/];
-                                                case 4: return [2 /*return*/];
-                                            }
-                                        });
-                                    }); }, style: {
-                                        animation: isRefreshing
-                                            ? "pixelize-table-spin 1s linear infinite"
-                                            : "none"
-                                    } },
-                                    react_1.default.createElement(lucide_react_1.RefreshCw, { size: 16 }))))),
-                        headerActions && (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 }))),
-                        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 },
-                            groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto" },
-                                groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_z = (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.text) === null || _z === void 0 ? void 0 : _z[500], whiteSpace: "nowrap" }, groupLoadMoreCaption)),
-                                canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))),
-                            (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (react_1.default.createElement("div", null,
-                                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) && !isGrouped && !canInfinite && 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(ToolTip_1.default, { label: "Pagination", placement: "top" },
-                                        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: (_1 = (_0 = theme.colors) === null || _0 === void 0 ? void 0 : _0.text) === null || _1 === void 0 ? void 0 : _1[500], _hover: {
-                                                color: (_3 = (_2 = theme.colors) === null || _2 === void 0 ? void 0 : _2.primary) === null || _3 === void 0 ? void 0 : _3[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%",
-                                // `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,
-                                },
-                            } },
-                            react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_6 = (_5 = (_4 = theme.colors.table) === null || _4 === void 0 ? void 0 : _4.hover) === null || _5 === void 0 ? void 0 : _5[200]) !== null && _6 !== void 0 ? _6 : (_7 = theme.colors.secondary) === null || _7 === void 0 ? void 0 : _7[50] },
-                                react_1.default.createElement(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 : (_8 = theme.colors) === null || _8 === void 0 ? void 0 : _8.gray[600], 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 })),
-                            react_1.default.createElement(react_3.Tbody, null,
-                                react_1.default.createElement(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 : (_9 = theme.colors) === null || _9 === void 0 ? void 0 : _9.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
-                        canInfinite && isLoadingMore && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2 },
-                            react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_11 = (_10 = theme.colors) === null || _10 === void 0 ? void 0 : _10.primary) === null || _11 === void 0 ? void 0 : _11[500] }),
-                            react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_13 = (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.text) === null || _13 === void 0 ? void 0 : _13[500] }, "Loading more\u2026")))),
-                    groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: "0.063rem solid ".concat((_14 = theme.colors.border) === null || _14 === void 0 ? void 0 : _14[500]) },
-                        groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_16 = (_15 = theme.colors) === null || _15 === void 0 ? void 0 : _15.text) === null || _16 === void 0 ? void 0 : _16[500] }, groupLoadMoreCaption)),
-                        canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))))))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], border: `0.063rem solid ${(_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500]}`, borderRadius: 3, 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, { 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: (_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: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_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", children: (0, jsx_runtime_1.jsx)(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 }) })), (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: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], borderBottom: `0.063rem solid ${(_l = theme.colors.border) === null || _l === void 0 ? void 0 : _l[500]}`, children: [filterSidebar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_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, _hover: {
+                                                                        color: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s[500],
+                                                                    } }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.primary) === null || _u === void 0 ? void 0 : _u[500], color: "white", 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: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.red) === null || _w === void 0 ? void 0 : _w[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.primary[500],
+                                                                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: (_y = (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.text) === null || _y === void 0 ? void 0 : _y[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, { placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Pagination", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: (_0 = (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.text) === null || _0 === void 0 ? void 0 : _0[500], _hover: {
+                                                                            color: (_2 = (_1 = theme.colors) === null || _1 === void 0 ? void 0 : _1.primary) === null || _2 === void 0 ? void 0 : _2[500]
+                                                                        } }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, overflow: "hidden", 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: {
+                                            '&::-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: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
+                                        }, children: [(0, jsx_runtime_1.jsxs)(react_3.Table, { variant: "simple", size: "sm", minW: "100%", 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: (_5 = (_4 = (_3 = theme.colors.table) === null || _3 === void 0 ? void 0 : _3.hover) === null || _4 === void 0 ? void 0 : _4[200]) !== null && _5 !== void 0 ? _5 : (_6 = theme.colors.secondary) === null || _6 === void 0 ? void 0 : _6[50], 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 : (_7 = theme.colors) === null || _7 === void 0 ? void 0 : _7.gray[600], 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 : (_8 = theme.colors) === null || _8 === void 0 ? void 0 : _8.gray[600], 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: (_10 = (_9 = theme.colors) === null || _9 === void 0 ? void 0 : _9.primary) === null || _10 === void 0 ? void 0 : _10[500] }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: (_12 = (_11 = theme.colors) === null || _11 === void 0 ? void 0 : _11.text) === null || _12 === void 0 ? void 0 : _12[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 ${(_13 = theme.colors.border) === null || _13 === void 0 ? void 0 : _13[500]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: (_15 = (_14 = theme.colors) === null || _14 === void 0 ? void 0 : _14.text) === null || _15 === void 0 ? void 0 : _15[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 }))] }))] })] })] })] }));
 }