pixelize-design-library 2.3.1-beta.2 → 2.3.1-beta.20

package/dist/Components/Table/Table.js

@@ -43,6 +43,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+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 };
 };
@@ -65,33 +74,34 @@ 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 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, _0, _1, _2, _3, _4, _5, _6, _7, _8;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _9 = _a.isCheckbox, isCheckbox = _9 === void 0 ? false : _9, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _10 = _a.noBorders, noBorders = _10 === void 0 ? false : _10, _11 = _a.isPagination, isPagination = _11 === void 0 ? true : _11, onRowClick = _a.onRowClick, selections = _a.selections, _12 = _a.isActionFreeze, isActionFreeze = _12 === void 0 ? true : _12, _13 = _a.preferences, preferences = _13 === void 0 ? {
+    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;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _13 = _a.isCheckbox, isCheckbox = _13 === void 0 ? false : _13, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _14 = _a.noBorders, noBorders = _14 === void 0 ? false : _14, _15 = _a.isPagination, isPagination = _15 === void 0 ? true : _15, onRowClick = _a.onRowClick, selections = _a.selections, _16 = _a.isActionFreeze, isActionFreeze = _16 === void 0 ? true : _16, _17 = _a.preferences, preferences = _17 === void 0 ? {
         url: "",
         token: "",
         key: "",
         name: "",
         page: "",
         orgId: "",
-    } : _13, _14 = _a.paginationMode, paginationMode = _14 === void 0 ? "client" : _14, _15 = _a.infiniteScroll, infiniteScroll = _15 === void 0 ? false : _15, hasMore = _a.hasMore, _16 = _a.isLoadingMore, isLoadingMore = _16 === void 0 ? false : _16, _17 = _a.noOfRowsPerPage, noOfRowsPerPage = _17 === void 0 ? 50 : _17, _18 = _a.totalRecords, totalRecords = _18 === void 0 ? 0 : _18, onPagination = _a.onPagination, _19 = _a.isTableSettings, isTableSettings = _19 === void 0 ? false : _19, 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, _20 = _a.density, density = _20 === void 0 ? "normal" : _20, stripe = _a.stripe, groupBy = _a.groupBy, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
+    } : _17, _18 = _a.paginationMode, paginationMode = _18 === void 0 ? "client" : _18, _19 = _a.infiniteScroll, infiniteScroll = _19 === void 0 ? false : _19, hasMore = _a.hasMore, _20 = _a.isLoadingMore, isLoadingMore = _20 === void 0 ? false : _20, _21 = _a.groupLoadMore, groupLoadMore = _21 === void 0 ? false : _21, _22 = _a.loadMoreText, loadMoreText = _22 === void 0 ? "Load more" : _22, _23 = _a.loadMorePosition, loadMorePosition = _23 === void 0 ? "top" : _23, loadMoreChunkSize = _a.loadMoreChunkSize, _24 = _a.noOfRowsPerPage, noOfRowsPerPage = _24 === void 0 ? 50 : _24, _25 = _a.totalRecords, totalRecords = _25 === void 0 ? 0 : _25, onPagination = _a.onPagination, _26 = _a.isTableSettings, isTableSettings = _26 === void 0 ? false : _26, 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, _27 = _a.density, density = _27 === void 0 ? "normal" : _27, stripe = _a.stripe, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _21 = (0, react_1.useState)({}), columnsSearch = _21[0], setColumnsSearch = _21[1];
+    var _28 = (0, react_1.useState)({}), columnsSearch = _28[0], setColumnsSearch = _28[1];
     var tableContainerRef = (0, react_1.useRef)(null);
-    var _22 = (0, react_2.useDisclosure)(), isFilterModalOpen = _22.isOpen, onFilterModalOpen = _22.onOpen, onFilterModalClose = _22.onClose;
+    var _29 = (0, react_2.useDisclosure)(), isFilterModalOpen = _29.isOpen, onFilterModalOpen = _29.onOpen, onFilterModalClose = _29.onClose;
     var filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : "sidebar";
-    var _23 = (0, react_1.useState)(500), viewportAvailableH = _23[0], setViewportAvailableH = _23[1];
+    var _30 = (0, react_1.useState)(500), viewportAvailableH = _30[0], setViewportAvailableH = _30[1];
     var isServerPagination = paginationMode === "server";
-    var _24 = (0, usePreferences_1.useGetPreferences)({
+    var _31 = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }), tablePreferencesData = _24.preferences, loading = _24.loading;
+    }), tablePreferencesData = _31.preferences, loading = _31.loading;
     var savePreferences = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
@@ -109,7 +119,7 @@ function Table(_a) {
         }
         return {};
     }, [tablePreferencesData]);
-    var _25 = (0, useTable_1.default)({
+    var _32 = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -123,37 +133,131 @@ function Table(_a) {
         isServerPagination: isServerPagination,
         onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
         defaultVisibleColumns: defaultVisibleColumns,
-    }), tableData = _25.tableData, isContent = _25.isContent, isLink = _25.isLink, headerRefs = _25.headerRefs, columnWidths = _25.columnWidths, handleSort = _25.handleSort, handleCheckbox = _25.handleCheckbox, filteredData = _25.filteredData, startRow = _25.startRow, endRow = _25.endRow, selection = _25.selection, columnsSort = _25.columnsSort, currentPage = _25.currentPage, pages = _25.pages, rowsPerPage = _25.rowsPerPage, handlePageSizeChange = _25.handlePageSizeChange, setCurrentPage = _25.setCurrentPage, columnsList = _25.columnsList, handleColumnPreferences = _25.handleColumnPreferences, isSelecting = _25.isSelecting;
-    // Density is managed here so the Table Settings tab can change + persist it
-    // (seeded from the prop, then from saved preferences when they load).
-    var _26 = (0, react_1.useState)(density), densityState = _26[0], setDensityState = _26[1];
+    }), tableData = _32.tableData, isContent = _32.isContent, isLink = _32.isLink, headerRefs = _32.headerRefs, columnWidths = _32.columnWidths, handleSort = _32.handleSort, handleCheckbox = _32.handleCheckbox, filteredData = _32.filteredData, startRow = _32.startRow, endRow = _32.endRow, selection = _32.selection, columnsSort = _32.columnsSort, currentPage = _32.currentPage, pages = _32.pages, rowsPerPage = _32.rowsPerPage, handlePageSizeChange = _32.handlePageSizeChange, setCurrentPage = _32.setCurrentPage, columnsList = _32.columnsList, handleColumnPreferences = _32.handleColumnPreferences, isSelecting = _32.isSelecting, selectAllRowsRef = _32.selectAllRowsRef;
+    // Density + grouping are managed here so the Table Settings tabs can change +
+    // persist them (seeded from the prop / saved preferences when they load).
+    var _33 = (0, react_1.useState)(density), densityState = _33[0], setDensityState = _33[1];
+    // Grouping is chosen by the user in Table Settings > Group and persisted to
+    // preferences (`json.groupBy`); there is no `groupBy` prop.
+    var _34 = (0, react_1.useState)(undefined), groupByState = _34[0], setGroupByState = _34[1];
+    // 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 _35 = (0, react_1.useState)([]), accumulatedRows = _35[0], setAccumulatedRows = _35[1];
+    var 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 () {
+        if (!groupLoadMore)
+            return;
+        setAccumulatedRows(function (prev) {
+            if (prev.length === 0) {
+                loadedPagesRef.current = 1;
+                return tableData.slice();
+            }
+            var accIds = new Set(prev.map(function (r) { return 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); });
+                if (newRows.length === 0)
+                    return prev; // same page re-emitted — keep waiting
+                pendingLoadMoreRef.current = false;
+                return __spreadArray(__spreadArray([], prev, true), newRows, true);
+            }
+            // 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); });
+            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 () {
+        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)(function () {
         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 () {
+        if (tablePreferences && "groupBy" in tablePreferences) {
+            var saved = tablePreferences.groupBy;
+            setGroupByState(saved === null || saved === undefined || saved === "" ? undefined : saved);
+        }
+    }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.groupBy]);
     var handleDensityChange = function (d) {
         setDensityState(d);
-        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences(__assign(__assign({}, tablePreferences), { columns: columnsList, density: d }));
+        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences(__assign(__assign({}, 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) {
+        setGroupByState(group);
+        handleColumnPreferences(cols, { density: densityState, groupBy: group !== null && group !== void 0 ? group : null });
     };
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
-    // --- Monday-style grouping (client-side). When active, pagination is hidden
-    // and the body renders colored, collapsible groups over the full dataset. ---
-    var isGrouped = !!groupBy && !isServerPagination;
+    // --- 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;
     // Infinite scroll (server mode, not grouped): load more on scroll-near-bottom.
     var 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"
+        ? hasMore
+        : isServerPagination
+            ? loadMoreBase.length < totalRecords
+            : false;
+    var 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 () {
         if (!isGrouped)
             return [];
-        return (0, table_1.searchAndSortData)((0, table_1.SortMultiColumnData)(tableData, columnsSort), columnsSearch);
-    }, [isGrouped, tableData, columnsSort, columnsSearch]);
+        var 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 () {
         if (!isGrouped)
             return undefined;
-        return (0, table_1.groupRows)(groupedSource, groupBy).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]) })); });
-    }, [isGrouped, groupedSource, groupBy, groupPalette, groupColors]);
+        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]) })); });
+    }, [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;
+    selectAllRowsRef.current = isGrouped ? groupedSource : null;
+    var headerChecked = (0, react_1.useMemo)(function () {
+        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";
+    }, [selection, selectAllRows]);
     var onPaginationRef = (0, react_1.useRef)(onPagination);
     onPaginationRef.current = onPagination;
     var prevPageRef = (0, react_1.useRef)(currentPage);
@@ -180,6 +284,35 @@ function Table(_a) {
             prevPageRef.current = currentPage;
         }
     }, [currentPage, rowsPerPage]);
+    // 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 () {
+        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.
+        var 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;
+        loadedPagesRef.current = nextPage;
+        var 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
+        ? undefined
+        : canGroupLoadMore
+            ? totalRecords > 0
+                ? "Showing ".concat(loadMoreBase.length, " of ").concat(totalRecords)
+                : "Showing ".concat(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]);
@@ -292,17 +425,20 @@ function Table(_a) {
                     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) { return handleColumnPreferences(cols); }, tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange }))),
+                        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 }))),
                     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: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[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(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) && !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(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[500] }) })),
+                                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: (_z = (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.text) === null || _z === void 0 ? void 0 : _z[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 }))))))),
@@ -349,15 +485,14 @@ function Table(_a) {
                                 zIndex: 999,
                             },
                         } },
-                        react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_0 = (_z = (_y = theme.colors.table) === null || _y === void 0 ? void 0 : _y.hover) === null || _z === void 0 ? void 0 : _z[200]) !== null && _0 !== void 0 ? _0 : (_1 = theme.colors.secondary) === null || _1 === void 0 ? void 0 : _1[50] },
-                            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 : (_2 = theme.colors) === null || _2 === void 0 ? void 0 : _2.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_3 = theme.colors) === null || _3 === void 0 ? void 0 : _3.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.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_2 = (_1 = (_0 = theme.colors.table) === null || _0 === void 0 ? void 0 : _0.hover) === null || _1 === void 0 ? void 0 : _1[200]) !== null && _2 !== void 0 ? _2 : (_3 = theme.colors.secondary) === null || _3 === void 0 ? void 0 : _3[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 : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.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 : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
+                            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 : (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.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: (_6 = (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.primary) === null || _6 === void 0 ? void 0 : _6[500] }),
-                        react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_8 = (_7 = theme.colors) === null || _7 === void 0 ? void 0 : _7.text) === null || _8 === void 0 ? void 0 : _8[500] }, "Loading more\u2026"))))))));
+                        react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_7 = (_6 = theme.colors) === null || _6 === void 0 ? void 0 : _6.primary) === null || _7 === void 0 ? void 0 : _7[500] }),
+                        react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_9 = (_8 = theme.colors) === null || _8 === void 0 ? void 0 : _8.text) === null || _9 === void 0 ? void 0 : _9[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((_10 = theme.colors.border) === null || _10 === void 0 ? void 0 : _10[500]) },
+                    groupLoadMoreCaption && (react_1.default.createElement(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] }, groupLoadMoreCaption)),
+                    canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))))))));
 }

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

@@ -9,7 +9,6 @@ export type TableEmptyState = {
 export type TableProps = {
     data: DataObject[];
     columns: TableHeaderProps[];
-    groupBy?: string | number;
     groupColors?: Record<string | number, string>;
     onAddItem?: (groupValue: string | number) => void;
     density?: TableDensity;
@@ -36,6 +35,12 @@ export type TableProps = {
     infiniteScroll?: boolean;
     hasMore?: boolean;
     isLoadingMore?: boolean;
+    groupLoadMore?: boolean;
+    loadMoreText?: string;
+    loadMorePosition?: "top" | "bottom";
+    /** @deprecated Ignored — load more always uses the current page size (`noOfRowsPerPage`)
+     *  so page boundaries stay consistent. Kept only for backward compatibility. */
+    loadMoreChunkSize?: number;
     noOfRowsPerPage?: number;
     totalRecords?: number;
     onPagination?: (page: number, noOfRecords: number, record: DataObject | undefined, direction: "next" | "prev" | "first" | "last") => void;
@@ -105,8 +110,11 @@ export type TableHeaderProps = {
     isHidden?: boolean;
     type?: "status";
     statusColors?: Record<string, string>;
+    columnType?: TableColumnType;
     node?: (data: DataObject) => JSX.Element | string | number | undefined;
 };
+/** Known field data-types (open-ended via the trailing string for forward-compat). */
+export type TableColumnType = "text" | "singleline" | "multiLine" | "description" | "email" | "phone" | "website" | "number" | "integer" | "decimal" | "dropdown" | "multiSelectDropdown" | "user" | "date" | "date_time" | "time" | "not_assigned" | (string & {});
 export type ExportOption = {
     label: string;
     id: string;
@@ -115,7 +123,7 @@ export type ColumnSortingProps = {
     column: string | number;
     direction: "asc" | "desc" | "none";
 };
-export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
+export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
     isPopoverOpen?: boolean;
@@ -164,7 +172,7 @@ export type TableFiltersProps = {
     columnsSearch: string;
     onClose: () => void;
 };
-export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
+export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "freezedBgColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
     header: TableHeaderProps;
     index: number;
     columnWidths: number[];

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

@@ -49,7 +49,7 @@ var Pagination = react_1.default.memo(function (_a) {
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
     var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
     return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap" },
-        (!isServerPagination || paginationSelectOptions) && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
+        (!isServerPagination || paginationSelectOptions) && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: "auto", minW: "4.5rem", isDisabled: dataLength === 0 },
             !paginationSelectOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
             computedOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, String(size))); }))),
         dataLength > 0 && (react_1.default.createElement(react_2.Flex, { w: "100%" },

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

@@ -6,7 +6,7 @@ type TableRowActions = {
     actions?: () => ReactNode;
     [key: string]: any;
 };
-declare const TableActions: ({ row }: {
+declare const TableActions: React.MemoExoticComponent<({ row }: {
     row?: TableRowActions;
-}) => React.JSX.Element | null;
+}) => React.JSX.Element | null>;
 export default TableActions;

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

@@ -37,7 +37,7 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var TableActions = function (_a) {
+var TableActions = react_1.default.memo(function (_a) {
     var _b, _c, _d;
     var row = _a.row;
     var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
@@ -76,7 +76,7 @@ var TableActions = function (_a) {
         react_1.default.createElement("div", { ref: ref },
             react_1.default.createElement(react_2.PopoverTrigger, null,
                 react_1.default.createElement(react_2.IconButton, { "aria-label": "Actions", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: function () { return (isOpen ? handleClose() : handleOpen()); } })),
-            react_1.default.createElement(react_2.Portal, null,
+            isOpen && (react_1.default.createElement(react_2.Portal, null,
                 react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999 },
                     react_1.default.createElement(react_2.PopoverBody, { p: 0, m: 0 },
                         react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0 },
@@ -102,6 +102,7 @@ var TableActions = function (_a) {
                                 react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
                                 " Delete")),
                             row.actions && ((_d = row === null || row === void 0 ? void 0 : row.actions) === null || _d === void 0 ? void 0 : _d.call(row)),
-                            !row.onLink && !row.onEdit && !row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center" }, "No actions")))))))));
-};
+                            !row.onLink && !row.onEdit && !row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center" }, "No actions"))))))))));
+});
+TableActions.displayName = "TableActions";
 exports.default = TableActions;