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

package/dist/Components/Table/Table.js

@@ -131,6 +131,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) {
+            pendingLoadMoreRef.current = false;
+            setAccumulatedRows(function (prev) {
+                var seen = new Set(prev.map(function (r) { return r.id; }));
+                var merged = prev.slice();
+                for (var _i = 0, tableData_1 = tableData; _i < tableData_1.length; _i++) {
+                    var r = tableData_1[_i];
+                    if (!seen.has(r.id))
+                        merged.push(r);
+                }
+                return merged;
+            });
+        }
+        else {
+            setAccumulatedRows(tableData);
+        }
+        // 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 +185,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 +239,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.6",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",