pixelize-design-library 2.3.1-beta.5 → 2.3.1-beta.7

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 };
 };
@@ -131,6 +140,32 @@ function Table(_a) {
     // Grouping is chosen by the user in Table Settings > Group and persisted to
     // preferences (`json.groupBy`); there is no `groupBy` prop.
     var _35 = (0, react_1.useState)(undefined), groupByState = _35[0], setGroupByState = _35[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 _36 = (0, react_1.useState)([]), accumulatedRows = _36[0], setAccumulatedRows = _36[1];
+    var pendingLoadMoreRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        if (!groupLoadMore)
+            return;
+        if (!pendingLoadMoreRef.current) {
+            // Fresh load (initial / search / filter / sort / page-size) → reset.
+            setAccumulatedRows(tableData);
+            return;
+        }
+        // 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 actually arrives,
+        // so only consume the pending flag once genuinely new rows (by id) show up.
+        setAccumulatedRows(function (prev) {
+            var seen = new Set(prev.map(function (r) { return r.id; }));
+            var newRows = tableData.filter(function (r) { return !seen.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);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tableData, groupLoadMore]);
     (0, react_1.useEffect)(function () {
         if (tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density)
             setDensityState(tablePreferences.density);
@@ -159,19 +194,22 @@ function Table(_a) {
     var isGrouped = !!groupByState;
     // Infinite scroll (server mode, not grouped): load more on scroll-near-bottom.
     var canInfinite = infiniteScroll && !isGrouped;
-    // Grouped "Load more": chunked, button-triggered loading that merges into groups.
+    // 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
-            ? tableData.length < totalRecords
+            ? loadMoreBase.length < totalRecords
             : false;
     var canGroupLoadMore = isGrouped && groupLoadMore && hasMoreEffective;
     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;
@@ -210,11 +248,14 @@ function Table(_a) {
         if (isLoadingMore || isTableLoading || !hasMoreEffective)
             return;
         var chunk = loadMoreChunkSize !== null && loadMoreChunkSize !== void 0 ? loadMoreChunkSize : rowsPerPage;
-        var nextPage = Math.floor(tableData.length / (chunk || 1)) + 1;
-        var lastRecord = tableData.length > 0 ? tableData[tableData.length - 1] : undefined;
+        // Next page is derived from how many rows we've already accumulated, so each
+        // click advances (fixes "always fromIndex 2") and the parent can replace `data`.
+        var nextPage = Math.floor(loadMoreBase.length / (chunk || 1)) + 1;
+        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");
     };
-    var groupLoadMoreCaption = totalRecords > 0 ? "Showing ".concat(tableData.length, " of ").concat(totalRecords) : undefined;
+    var groupLoadMoreCaption = totalRecords > 0 ? "Showing ".concat(loadMoreBase.length, " of ").concat(totalRecords) : undefined;
     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]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.3.1-beta.5",
+  "version": "2.3.1-beta.7",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",