pixelize-design-library 2.2.155 → 2.2.158

package/dist/Components/KanbanBoard/AccountCard.test.js

@@ -57,7 +57,7 @@ describe("AccountCard – permissions", function () {
     it("calls onDelete when delete icon is clicked and isDeletable is true", function () {
         var onDelete = jest.fn();
         (0, react_2.render)(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { onDelete: onDelete, isDeletable: true })));
-        react_2.screen.getByLabelText("Delete").click();
+        react_2.fireEvent.click(react_2.screen.getByLabelText("Delete"));
         expect(onDelete).toHaveBeenCalledWith(mockAccount);
     });
 });

package/dist/Components/KanbanBoard/KanbanBoard.test.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
 var KanbanBoard_1 = __importDefault(require("./KanbanBoard"));
 jest.mock("../../Theme/useCustomTheme", function () { return ({
     useCustomTheme: function () { return ({
@@ -42,6 +43,33 @@ jest.mock("@hello-pangea/dnd", function () { return ({
 jest.mock("react-window", function () { return ({
     VariableSizeList: function () { return null; },
 }); });
+beforeAll(function () {
+    global.ResizeObserver = /** @class */ (function () {
+        function class_1() {
+        }
+        class_1.prototype.observe = function () { };
+        class_1.prototype.unobserve = function () { };
+        class_1.prototype.disconnect = function () { };
+        return class_1;
+    }());
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+});
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
 var sampleData = {
     col1: {
         id: "col1",
@@ -56,41 +84,41 @@ var sampleData = {
 describe("KanbanBoard – permissions", function () {
     describe("isDeletable", function () {
         it("shows card delete icons when permissions.isDeletable is true", function () {
-            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: true } }));
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: true } }));
             expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
         });
         it("hides card delete icons when permissions.isDeletable is false", function () {
-            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: false } }));
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: false } }));
             expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
         });
         it("shows card delete icons when permissions prop is omitted (default allow)", function () {
-            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData }));
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData }));
             expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
         });
     });
     describe("isCreatable", function () {
         var kanbanCreate = { isCreatable: true, label: "Create New" };
         it("shows the create button when permissions.isCreatable is true", function () {
-            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: true } }));
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: true } }));
             expect(react_2.screen.getByText("Create New")).toBeInTheDocument();
         });
         it("hides the create button when permissions.isCreatable is false", function () {
-            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: false } }));
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: false } }));
             expect(react_2.screen.queryByText("Create New")).not.toBeInTheDocument();
         });
     });
     describe("isEditable", function () {
         var kanbanEdit = { isEditable: true, label: "Edit Layout" };
         it("shows the edit button when permissions.isEditable is true", function () {
-            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: true } }));
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: true } }));
             expect(react_2.screen.getByText("Edit Layout")).toBeInTheDocument();
         });
         it("hides the edit button when permissions.isEditable is false", function () {
-            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: false } }));
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: false } }));
             expect(react_2.screen.queryByText("Edit Layout")).not.toBeInTheDocument();
         });
         it("sets isDragDisabled on cards when permissions.isEditable is false", function () {
-            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isEditable: false } }));
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isEditable: false } }));
             var disabledDraggables = react_2.screen
                 .getAllByRole("generic")
                 .filter(function (el) { return el.getAttribute("data-drag-disabled") === "true"; });

package/dist/Components/SideBar/components/OtherApps.test.js

@@ -82,24 +82,23 @@ describe("OtherApps", function () {
         renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: false, otherApps: sampleApps }));
         expect(react_2.screen.getByText("Other Apps")).toBeInTheDocument();
         expect(react_2.screen.getByText("Billing")).toBeInTheDocument();
-        expect(react_2.screen.queryByText(/Open Billing/)).not.toBeInTheDocument();
+        expect(react_2.screen.queryAllByRole("tooltip")).toHaveLength(0);
     });
     it("shows flyout with Open label on hover when collapsed", function () { return __awaiter(void 0, void 0, void 0, function () {
-        var buttons;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var buttons, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
                     renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: true, otherApps: sampleApps }));
                     buttons = react_2.screen.getAllByRole("button");
                     expect(buttons).toHaveLength(2);
                     return [4 /*yield*/, user_event_1.default.hover(buttons[0])];
                 case 1:
-                    _a.sent();
-                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
-                            expect(react_2.screen.getByText(/Open Billing/)).toBeInTheDocument();
-                        })];
+                    _b.sent();
+                    _a = expect;
+                    return [4 /*yield*/, react_2.screen.findByText("Billing app")];
                 case 2:
-                    _a.sent();
+                    _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
                     return [2 /*return*/];
             }
         });

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/Components/Table/TableSettings/ManageColumns.js

@@ -70,6 +70,9 @@ var ManageColumns = function (_a) {
     var visibleCount = (0, react_1.useMemo)(function () {
         return items.filter(function (i) { return !i.isHidden; }).length;
     }, [items]);
+    (0, react_1.useEffect)(function () {
+        setItems(columns);
+    }, [columns]);
     (0, react_1.useImperativeHandle)(childInputMethodsRef, function () {
         return {
             getManageColumnsData: function () {

package/dist/Components/Table/TableSettings/ManageColumns.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/Table/TableSettings/ManageColumns.test.js

@@ -0,0 +1,146 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var ManageColumns_1 = __importDefault(require("./ManageColumns"));
+jest.mock("../../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            gray: {
+                50: "#fafafa",
+                100: "#f5f5f5",
+                200: "#eee",
+                400: "#ccc",
+                500: "#999",
+                600: "#666",
+            },
+            primary: {
+                50: "#eef",
+                100: "#ddf",
+                300: "#99c",
+                400: "#66a",
+                500: "#338",
+            },
+            red: { 50: "#fee", 200: "#fcc", 600: "#c00" },
+            border: { 200: "#e2e8f0" },
+            white: "#fff",
+        },
+        shadows: { sm: "0 1px 2px rgba(0,0,0,0.05)" },
+    }); },
+}); });
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+function ManageColumnsHarness(_a) {
+    var columns = _a.columns, childRef = _a.childRef;
+    var _b = (0, react_1.useState)(columns), items = _b[0], setItems = _b[1];
+    return (react_1.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childRef }));
+}
+describe("ManageColumns", function () {
+    it("syncs local column state when the columns prop changes", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var childRef, columnsA, columnsB, rerender;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    childRef = (0, react_1.createRef)();
+                    columnsA = [
+                        { id: "a", label: "Alpha", isHidden: false },
+                        { id: "b", label: "Beta", isHidden: true },
+                    ];
+                    columnsB = [
+                        { id: "a", label: "Alpha", isHidden: true },
+                        { id: "b", label: "Beta", isHidden: false },
+                    ];
+                    rerender = renderWithChakra(react_1.default.createElement(ManageColumnsHarness, { columns: columnsA, childRef: childRef })).rerender;
+                    expect(react_2.screen.getByRole("checkbox", { name: "Alpha" })).toBeChecked();
+                    expect(react_2.screen.getByRole("checkbox", { name: "Beta" })).not.toBeChecked();
+                    expect((_a = childRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData()).toEqual(columnsA);
+                    rerender(react_1.default.createElement(react_3.ChakraProvider, null,
+                        react_1.default.createElement(ManageColumnsHarness, { columns: columnsB, childRef: childRef })));
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(react_2.screen.getByRole("checkbox", { name: "Alpha" })).not.toBeChecked();
+                            expect(react_2.screen.getByRole("checkbox", { name: "Beta" })).toBeChecked();
+                        })];
+                case 1:
+                    _c.sent();
+                    expect((_b = childRef.current) === null || _b === void 0 ? void 0 : _b.getManageColumnsData()).toEqual(columnsB);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -51,6 +51,9 @@ var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableFilters = function (_a) {
     var filters = _a.filters, childFilterMethodsRef = _a.childFilterMethodsRef, filterSelected = _a.filterSelected;
     var _b = (0, react_2.useState)(filterSelected !== null && filterSelected !== void 0 ? filterSelected : []), selectedFilters = _b[0], setSelectedFilters = _b[1];
+    (0, react_2.useEffect)(function () {
+        setSelectedFilters(filterSelected !== null && filterSelected !== void 0 ? filterSelected : []);
+    }, [filterSelected]);
     (0, react_2.useImperativeHandle)(childFilterMethodsRef, function () {
         return {
             getSelectedFilters: function () {

package/dist/Components/Table/TableSettings/TableFilters.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/Table/TableSettings/TableFilters.test.js

@@ -0,0 +1,109 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var TableFilters_1 = __importDefault(require("./TableFilters"));
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("TableFilters", function () {
+    it("syncs selected filters when filterSelected prop changes", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var childRef, filters, rerender;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    childRef = (0, react_1.createRef)();
+                    filters = ["Status: Open", "Status: Closed"];
+                    rerender = renderWithChakra(react_1.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childRef, filterSelected: ["Status: Open"] })).rerender;
+                    expect(react_2.screen.getByRole("checkbox", { name: "Status: Open" })).toBeChecked();
+                    expect(react_2.screen.getByRole("checkbox", { name: "Status: Closed" })).not.toBeChecked();
+                    expect((_a = childRef.current) === null || _a === void 0 ? void 0 : _a.getSelectedFilters()).toEqual(["Status: Open"]);
+                    rerender(react_1.default.createElement(react_3.ChakraProvider, null,
+                        react_1.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childRef, filterSelected: ["Status: Closed"] })));
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(react_2.screen.getByRole("checkbox", { name: "Status: Open" })).not.toBeChecked();
+                            expect(react_2.screen.getByRole("checkbox", { name: "Status: Closed" })).toBeChecked();
+                        })];
+                case 1:
+                    _c.sent();
+                    expect((_b = childRef.current) === null || _b === void 0 ? void 0 : _b.getSelectedFilters()).toEqual(["Status: Closed"]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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.155",
+  "version": "2.2.158",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -42,6 +42,9 @@
     "moduleNameMapper": {
       "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
     },
+    "testPathIgnorePatterns": [
+      "<rootDir>/dist/"
+    ],
     "testMatch": [
       "**/__tests__/**/*.[jt]s?(x)",
       "**/?(*.)+(spec|test).[jt]s?(x)"