pixelize-design-library 2.2.157 → 2.2.158

package/dist/Components/Table/Components/TableBody.js

@@ -137,7 +137,7 @@ var TableBody = function (_a) {
                             : {
                                 backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
                             } },
-                        react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, header.node ? header.node(row) : row[header.id])));
+                        react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]))));
                 }),
                 isLink && react_2.default.createElement(RenderView, { row: row })),
             row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,

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

@@ -24,6 +24,19 @@ var react_1 = require("react");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var table_1 = require("../../../Utils/table");
 var defaultPageSize = 50;
+var mergeColumnWithPreference = function (originalCol, pref) {
+    if (!pref || typeof pref !== "object") {
+        return __assign({}, originalCol);
+    }
+    var next = __assign({}, originalCol);
+    if (typeof pref.isHidden === "boolean") {
+        next.isHidden = pref.isHidden;
+    }
+    if (typeof pref.label === "string" || typeof pref.label === "number") {
+        next.label = pref.label;
+    }
+    return next;
+};
 var useTable = function (_a) {
     var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -39,15 +52,18 @@ var useTable = function (_a) {
         return columns.map(function (col) { return (__assign({}, col)); });
     }), columnsList = _h[0], setColumnsList = _h[1];
     (0, react_1.useEffect)(function () {
-        if (tablePreferences) {
-            var columnPreference_1 = tablePreferences.columns;
-            if (columnPreference_1 === null || columnPreference_1 === void 0 ? void 0 : columnPreference_1.length) {
-                var mergedColumns = columns.map(function (originalCol) {
-                    var prefCol = columnPreference_1.find(function (c) { return c.id === originalCol.id; });
-                    return prefCol ? __assign(__assign({}, originalCol), prefCol) : __assign({}, originalCol);
-                });
-                setColumnsList(mergedColumns);
-            }
+        var columnPreference = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns;
+        if (Array.isArray(columnPreference) && columnPreference.length > 0) {
+            var mergedColumns = columns.map(function (originalCol) {
+                var prefCol = columnPreference.find(function (c) { return c.id === originalCol.id; });
+                return prefCol
+                    ? mergeColumnWithPreference(originalCol, prefCol)
+                    : __assign({}, originalCol);
+            });
+            setColumnsList(mergedColumns);
+        }
+        else {
+            setColumnsList(columns.map(function (col) { return (__assign({}, col)); }));
         }
     }, [tablePreferences, columns]);
     (0, react_1.useEffect)(function () {

package/dist/Utils/table.d.ts

@@ -1,9 +1,15 @@
+import React from "react";
 import { DataObject, TableHeaderProps } from "../Components/Table/TableProps";
 export declare function SortMultiColumnData(data: Record<string, string | number>[], sortConfig: {
     column: string | number;
     direction: string;
 }[]): Record<string, string | number>[];
 export declare const calculateLeftOffset: (columns: number[], index: number) => number;
+/**
+ * When a column has no `node`, raw cell values are rendered; plain objects
+ * (e.g. relation/user fields) must not be passed as React children.
+ */
+export declare function normalizeTableCellValue(value: unknown): React.ReactNode;
 export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
 export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
 export declare function useDebounce<T extends (...args: any[]) => void>(callback: T, delay: number): (...args: Parameters<T>) => void;

package/dist/Utils/table.js

@@ -44,6 +44,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellCalculation = exports.pageSizeCalculation = exports.searchAndSortData = exports.calculateLeftOffset = void 0;
 exports.SortMultiColumnData = SortMultiColumnData;
+exports.normalizeTableCellValue = normalizeTableCellValue;
 exports.debounce = debounce;
 exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
@@ -93,8 +94,48 @@ var getStringValue = function (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);
+        }
+    }
     return "";
 };
+/**
+ * When a column has no `node`, raw cell values are rendered; plain objects
+ * (e.g. relation/user fields) must not be passed as React children.
+ */
+function normalizeTableCellValue(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean") {
+        return 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);
+}
 var searchAndSortData = function (data, searchValues) {
     var filteredData = data.filter(function (item) {
         return Object.keys(searchValues).every(function (key) {

package/dist/Utils/tableNormalizeCellValue.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Utils/tableNormalizeCellValue.test.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var table_1 = require("./table");
+describe("normalizeTableCellValue", function () {
+    it("returns primitives as-is (string/number/boolean)", function () {
+        expect((0, table_1.normalizeTableCellValue)("x")).toBe("x");
+        expect((0, table_1.normalizeTableCellValue)(42)).toBe(42);
+        expect((0, table_1.normalizeTableCellValue)(false)).toBe(false);
+    });
+    it("returns empty string for null and undefined", function () {
+        expect((0, table_1.normalizeTableCellValue)(null)).toBe("");
+        expect((0, table_1.normalizeTableCellValue)(undefined)).toBe("");
+    });
+    it("returns React elements unchanged", function () {
+        var el = react_1.default.createElement("span", null, "hi");
+        expect((0, table_1.normalizeTableCellValue)(el)).toBe(el);
+    });
+    it("uses label or name on plain objects (relation fields)", function () {
+        expect((0, table_1.normalizeTableCellValue)({
+            id: 1,
+            label: "Owner Name",
+            email: "a@b.com",
+            role: "admin",
+            company_name: "Acme",
+        })).toBe("Owner Name");
+        expect((0, table_1.normalizeTableCellValue)({ id: 2, name: "Jane", email: "j@b.com" })).toBe("Jane");
+    });
+    it("returns company_name when label/name missing", function () {
+        expect((0, table_1.normalizeTableCellValue)({
+            id: 3,
+            company_name: "Solo Co",
+        })).toBe("Solo Co");
+    });
+    it("returns empty string for unrecognized objects", function () {
+        expect((0, table_1.normalizeTableCellValue)({ a: 1, b: 2 })).toBe("");
+    });
+});

package/package.json

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