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

package/.claude/settings.local.json

@@ -30,7 +30,11 @@
       "Bash(node -e \"const p=require.resolve\\('@chakra-ui/react'\\);console.log\\(p\\)\")",
       "Bash(sed -n '31,45p' src/Pages/table.tsx)",
       "Bash(perl -0pi -e 's/\\\\n\\\\s*content: \\\\\\(\\\\\\) => <>Hello<\\\\/>,?//' src/Pages/table.tsx)",
-      "Bash(cd /Users/mahesh/Applications/Pixelize/CRM/Micro-Components *)"
+      "Bash(cd /Users/mahesh/Applications/Pixelize/CRM/Micro-Components *)",
+      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-design-library/package.json'\\).version\\)\")",
+      "Bash(node -e \"console.log\\(JSON.stringify\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).dependencies\\)\\)\")",
+      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).version\\)\")",
+      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/node_modules/pixelize-design-library/package.json'\\).version\\)\")"
     ],
     "additionalDirectories": [
       "/private/tmp",

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/dist/Components/Table/TableProps.d.ts

@@ -108,8 +108,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;

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

@@ -151,7 +151,7 @@ var TableSettings = function (_a) {
                             react_2.default.createElement(react_1.TabPanel, { px: 0, py: 1 },
                                 react_2.default.createElement(react_1.Text, { fontSize: "12px", color: theme.colors.gray[500], mb: 2 }, "Group rows by a column. Click Save to apply."),
                                 react_2.default.createElement(react_1.Flex, { direction: "column", gap: 2 }, __spreadArray([{ id: undefined, label: "None (no grouping)" }], columns
-                                    .filter(function (c) { return !c.isHidden; })
+                                    .filter(function (c) { return !!c.columnType && !c.isHidden; })
                                     .map(function (c) { return ({ id: c.id, label: String(c.label) }); }), true).map(function (opt) {
                                     var _a, _b;
                                     var selected = selectedGroup === opt.id;

package/dist/Utils/table.d.ts

@@ -23,7 +23,12 @@ export type TableGroup = {
     label: string;
     rows: DataObject[];
 };
-/** Partition rows by a column key, preserving first-seen group order. */
+/**
+ * Partition rows by a column, preserving first-seen group order. The group key is
+ * a normalized string so object/array values (e.g. a `user` field that is an object
+ * or an array of users) group together by their readable text instead of by object
+ * identity.
+ */
 export declare function groupRows(data: DataObject[], groupBy: string | number): TableGroup[];
 export declare const calculateLeftOffset: (columns: number[], index: number) => number;
 /**

package/dist/Utils/table.js

@@ -137,14 +137,19 @@ function pickTableColor(value, palette, override) {
         return { solid: "#8B3FC8", soft: "#8B3FC822", text: "#8B3FC8" };
     return palette[hashKey(value) % palette.length];
 }
-/** Partition rows by a column key, preserving first-seen group order. */
+/**
+ * Partition rows by a column, preserving first-seen group order. The group key is
+ * a normalized string so object/array values (e.g. a `user` field that is an object
+ * or an array of users) group together by their readable text instead of by object
+ * identity.
+ */
 function groupRows(data, groupBy) {
     var order = [];
     var map = new Map();
     for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
         var row = data_1[_i];
-        var raw = row[groupBy];
-        var key = raw === undefined || raw === null || raw === "" ? "—" : raw;
+        var text = getStringValue(row[groupBy]);
+        var key = text === "" ? "—" : text;
         if (!map.has(key)) {
             map.set(key, []);
             order.push(key);
@@ -170,21 +175,49 @@ var extractTextFromReactNode = function (node) {
     }
     return "";
 };
+/** Best-effort readable text for an entity object (user/relation/option/etc.). */
+var objectToText = function (o) {
+    var _a, _b;
+    if (typeof o.label === "string" || typeof o.label === "number")
+        return String(o.label);
+    if (typeof o.name === "string" || typeof o.name === "number")
+        return String(o.name);
+    var first = (_a = o.first_name) !== null && _a !== void 0 ? _a : o.firstName;
+    var last = (_b = o.last_name) !== null && _b !== void 0 ? _b : o.lastName;
+    if (typeof first === "string" || typeof last === "string") {
+        return "".concat(first !== null && first !== void 0 ? first : "", " ").concat(last !== null && last !== void 0 ? last : "").trim();
+    }
+    if (typeof o.full_name === "string")
+        return o.full_name;
+    if (typeof o.title === "string")
+        return o.title;
+    if (typeof o.company_name === "string")
+        return o.company_name;
+    if (typeof o.email === "string")
+        return o.email;
+    if (typeof o.value === "string" || typeof o.value === "number")
+        return String(o.value);
+    return "";
+};
+/**
+ * Readable string for any cell value. Handles primitives, React elements, entity
+ * objects (e.g. `user`: `{ name }` / `{ first_name, last_name }`), and arrays of
+ * any of those (e.g. a multi-user field) by joining their texts.
+ */
 var getStringValue = function (value) {
-    if (typeof value === "string" || typeof value === "number") {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
         return String(value);
     }
     if (react_1.default.isValidElement(value)) {
         return extractTextFromReactNode(value);
     }
-    if (value && typeof value === "object") {
-        var o = value;
-        if (typeof o.label === "string" || typeof o.label === "number") {
-            return String(o.label);
-        }
-        if (typeof o.name === "string" || typeof o.name === "number") {
-            return String(o.name);
-        }
+    if (Array.isArray(value)) {
+        return value.map(getStringValue).filter(function (s) { return s !== ""; }).join(", ");
+    }
+    if (typeof value === "object") {
+        return objectToText(value);
     }
     return "";
 };
@@ -203,21 +236,8 @@ function normalizeTableCellValue(value) {
     if (react_1.default.isValidElement(value)) {
         return value;
     }
-    if (typeof value === "object") {
-        var o = value;
-        if (typeof o.label === "string" || typeof o.label === "number") {
-            return String(o.label);
-        }
-        if (typeof o.name === "string" || typeof o.name === "number") {
-            return String(o.name);
-        }
-        if (typeof o.title === "string")
-            return o.title;
-        if (typeof o.company_name === "string")
-            return o.company_name;
-        return "";
-    }
-    return String(value);
+    // Objects (relation/user) and arrays (multi-user / multi-select) → readable text.
+    return getStringValue(value);
 }
 var searchAndSortData = function (data, searchValues) {
     var filteredData = data.filter(function (item) {

package/package.json

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