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

package/dist/Components/Table/Table.js

@@ -145,24 +145,46 @@ function Table(_a) {
     // (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);
+    // 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;
-        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.
+        // eslint-disable-next-line no-console
+        console.log("[Table][loadMore] data change", {
+            incoming: tableData.length,
+            incomingIds: tableData.slice(0, 50).map(function (r) { return r.id; }),
+            accumulated: accumulatedRows.length,
+            newRows: tableData.filter(function (r) { return !new Set(accumulatedRows.map(function (a) { return a.id; })).has(r.id); }).length,
+            pending: pendingLoadMoreRef.current,
+            loadedPages: loadedPagesRef.current,
+        });
         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);
+            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]);
@@ -180,9 +202,11 @@ function Table(_a) {
         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 }));
     };
-    var handleGroupByChange = function (value) {
-        setGroupByState(value);
-        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences(__assign(__assign({}, tablePreferences), { columns: columnsList, density: densityState, groupBy: value !== null && value !== void 0 ? value : null }));
+    // 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);
@@ -248,11 +272,19 @@ function Table(_a) {
         if (isLoadingMore || isTableLoading || !hasMoreEffective)
             return;
         var chunk = loadMoreChunkSize !== null && loadMoreChunkSize !== void 0 ? loadMoreChunkSize : rowsPerPage;
-        // 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;
+        // 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;
+        // eslint-disable-next-line no-console
+        console.log("[Table][loadMore] click → request page", nextPage, {
+            chunk: chunk,
+            accumulated: loadMoreBase.length,
+            totalRecords: totalRecords,
+            hasMore: hasMoreEffective,
+        });
         (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, nextPage, chunk, lastRecord, "next");
     };
     var groupLoadMoreCaption = totalRecords > 0 ? "Showing ".concat(loadMoreBase.length, " of ").concat(totalRecords) : undefined;
@@ -368,7 +400,7 @@ 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, groupBy: groupByState, onGroupByChange: handleGroupByChange }))),
+                        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 }))),

package/dist/Components/Table/hooks/useTable.d.ts

@@ -41,7 +41,7 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
     rowsPerPage: number;
     setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
     columnsList: TableHeaderProps[];
-    handleColumnPreferences: (columns: any) => void;
+    handleColumnPreferences: (columns: any, extra?: Record<string, any>) => void;
     isSelecting: boolean;
 };
 export default useTable;

package/dist/Components/Table/hooks/useTable.js

@@ -187,10 +187,11 @@ var useTable = function (_a) {
             (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
         }
     }, [tableData]);
-    var handleColumnPreferences = function (columns) {
+    var handleColumnPreferences = function (columns, extra) {
+        if (extra === void 0) { extra = {}; }
         setColumnsList(columns);
         savePreferences &&
-            savePreferences(__assign(__assign({}, tablePreferences), { columns: columns }));
+            savePreferences(__assign(__assign(__assign({}, tablePreferences), { columns: columns }), extra));
     };
     return {
         tableData: tableData,

package/dist/Components/Table/settings/TableSettings.d.ts

@@ -1,12 +1,11 @@
 import React from "react";
 import { TableDensity, TableProps } from "../TableProps";
-declare const TableSettings: ({ columns, onSave, density, onDensityChange, groupBy, onGroupByChange, }: {
+declare const TableSettings: ({ columns, onSave, density, onDensityChange, groupBy, }: {
     columns: TableProps["columns"];
-    onSave: (updatedColumns: TableProps["columns"]) => void;
+    onSave: (updatedColumns: TableProps["columns"], groupBy: string | number | undefined) => void;
     tableSettings?: TableProps["tableSettings"];
     density?: TableDensity;
     onDensityChange?: (d: TableDensity) => void;
     groupBy?: string | number;
-    onGroupByChange?: (value: string | number | undefined) => void;
 }) => React.JSX.Element;
 export default TableSettings;

package/dist/Components/Table/settings/TableSettings.js

@@ -71,7 +71,7 @@ var DENSITY_OPTIONS = [
 ];
 var TableSettings = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var columns = _a.columns, onSave = _a.onSave, _p = _a.density, density = _p === void 0 ? "normal" : _p, onDensityChange = _a.onDensityChange, groupBy = _a.groupBy, onGroupByChange = _a.onGroupByChange;
+    var columns = _a.columns, onSave = _a.onSave, _p = _a.density, density = _p === void 0 ? "normal" : _p, onDensityChange = _a.onDensityChange, groupBy = _a.groupBy;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var childInputMethodsRef = (0, react_2.useRef)({});
     var _q = (0, react_2.useState)(false), settingsOpen = _q[0], setSettingsOpen = _q[1];
@@ -80,10 +80,9 @@ var TableSettings = function (_a) {
     // Group selection is applied on Save (not live), per "click Apply to group".
     var _t = (0, react_2.useState)(groupBy), selectedGroup = _t[0], setSelectedGroup = _t[1];
     var handleSave = (0, react_2.useCallback)(function () {
-        onSave(items);
-        onGroupByChange === null || onGroupByChange === void 0 ? void 0 : onGroupByChange(selectedGroup);
+        onSave(items, selectedGroup);
         setSettingsOpen(false);
-    }, [onSave, items, onGroupByChange, selectedGroup]);
+    }, [onSave, items, selectedGroup]);
     var handleOpen = (0, react_2.useCallback)(function () {
         setItems(columns);
         setSelectedGroup(groupBy);

package/package.json

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