npm - pixelize-design-library - Versions diffs - 2.2.154 → 2.2.157 - Mend

pixelize-design-library 2.2.154 → 2.2.157

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/useTable.js CHANGED Viewed

@@ -35,15 +35,21 @@ var useTable = function (_a) {
     var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
     var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
     var _g = (0, react_1.useState)(tableData), filteredData = _g[0], setFilteredData = _g[1];
-    var _h = (0, react_1.useState)(columns), columnsList = _h[0], setColumnsList = _h[1];
+    var _h = (0, react_1.useState)(function () {
+        return columns.map(function (col) { return (__assign({}, col)); });
+    }), columnsList = _h[0], setColumnsList = _h[1];
     (0, react_1.useEffect)(function () {
         if (tablePreferences) {
-            var columnPreference = tablePreferences.columns;
-            if (columnPreference === null || columnPreference === void 0 ? void 0 : columnPreference.length) {
-                setColumnsList(columnPreference);
+            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);
             }
         }
-    }, [tablePreferences]);
+    }, [tablePreferences, columns]);
     (0, react_1.useEffect)(function () {
         setFilteredData(tableData);
     }, [tableData]);

package/dist/Components/Table/TableSettings/ManageColumns.d.ts CHANGED Viewed

@@ -3,8 +3,10 @@ import { TableProps } from "../TableProps";
 type ManageColumnsMethods = {
     getManageColumnsData: () => TableProps["columns"];
 };
-declare const ManageColumns: ({ columns, childInputMethodsRef, }: {
+declare const ManageColumns: ({ columns, items, setItems, childInputMethodsRef, }: {
     columns: TableProps["columns"];
+    items: TableProps["columns"];
+    setItems: React.Dispatch<React.SetStateAction<TableProps["columns"]>>;
     childInputMethodsRef: React.Ref<ManageColumnsMethods>;
 }) => React.JSX.Element;
 export default ManageColumns;

package/dist/Components/Table/TableSettings/ManageColumns.js CHANGED Viewed

@@ -62,13 +62,17 @@ var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var ManageColumns = function (_a) {
-    var columns = _a.columns, childInputMethodsRef = _a.childInputMethodsRef;
+    var columns = _a.columns, items = _a.items, setItems = _a.setItems, childInputMethodsRef = _a.childInputMethodsRef;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    // ✅ keep isHidden as it is (true = hidden, false = visible)
-    var _b = (0, react_1.useState)(columns), items = _b[0], setItems = _b[1];
-    var _c = (0, react_1.useState)(""), searchTerm = _c[0], setSearchTerm = _c[1];
-    var _d = (0, react_1.useState)(null), draggedItemIndex = _d[0], setDraggedItemIndex = _d[1];
-    var _e = (0, react_1.useState)(null), error = _e[0], setError = _e[1];
+    var _b = (0, react_1.useState)(""), searchTerm = _b[0], setSearchTerm = _b[1];
+    var _c = (0, react_1.useState)(null), draggedItemIndex = _c[0], setDraggedItemIndex = _c[1];
+    var _d = (0, react_1.useState)(null), error = _d[0], setError = _d[1];
+    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 () {
@@ -89,12 +93,11 @@ var ManageColumns = function (_a) {
         setItems(newItems);
     };
     var handleDragEnd = function () { return setDraggedItemIndex(null); };
-    // ✅ Prevent unchecking last visible column
     var toggleCheckbox = function (index) {
         var newItems = __spreadArray([], items, true);
-        var visibleCount = newItems.filter(function (i) { return !i.isHidden; }).length; // count visible
-        if (!newItems[index].isHidden && visibleCount === 1) {
-            setError("At least one column must remain visible.");
+        var currentVisibleCount = newItems.filter(function (i) { return !i.isHidden; }).length;
+        if (!newItems[index].isHidden && currentVisibleCount === 2) {
+            setError("At least two columns must remain visible.");
             return;
         }
         newItems[index].isHidden = !newItems[index].isHidden;
@@ -104,28 +107,71 @@ var ManageColumns = function (_a) {
     var filteredItems = items.filter(function (item) {
         return item.label.toString().toLowerCase().includes(searchTerm.toLowerCase());
     });
-    // ✅ Select all logic
     var allChecked = items.every(function (item) { return !item.isHidden; });
     var someChecked = items.some(function (item) { return !item.isHidden; }) && !allChecked;
     var handleSelectAll = function () {
         if (allChecked) {
-            // if all visible → keep first visible, hide rest
-            setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i === 0 ? false : true })); }));
-            setError("At least one column must remain visible.");
+            setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i >= 2 ? true : false })); }));
+            setError("At least two columns must remain visible.");
         }
         else {
-            // make all visible
             setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: false })); }));
             setError(null);
         }
     };
     return (react_1.default.createElement(react_2.Box, { mt: "5" },
-        react_1.default.createElement(react_2.Input, { placeholder: "Search", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); } }),
-        !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "2" },
-            react_1.default.createElement(Checkbox_1.default, { label: "Select all", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
-        react_1.default.createElement(react_2.List, { spacing: "2", maxH: "300px", overflowY: "auto" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: "".concat(item.id, "-").concat(index), draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14, px: "2", py: "1" },
-            react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "1" }),
-            react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } }))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found"))),
-        error && (react_1.default.createElement(react_2.Text, { color: "red.500", mt: "3", fontSize: "sm" }, error))));
+        error && (react_1.default.createElement(react_2.Box, { mb: "4", p: 3, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200] },
+            react_1.default.createElement(react_2.Text, { color: theme.colors.red[600], fontSize: "sm", fontWeight: 500 }, error))),
+        react_1.default.createElement(react_2.Input, { placeholder: "Search columns...", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, size: "md", borderRadius: "md" }),
+        !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "3", bg: theme.colors.gray[100], p: 2, borderRadius: "md" },
+            react_1.default.createElement(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
+        react_1.default.createElement(react_2.List, { spacing: "2", maxH: "300px", overflowY: "auto", sx: {
+                '&::-webkit-scrollbar': {
+                    width: '3px',
+                    height: '3px',
+                },
+                '&::-webkit-scrollbar-track': {
+                    background: theme.colors.gray[100],
+                    borderRadius: '2px',
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    background: theme.colors.gray[400],
+                    borderRadius: '2px',
+                },
+                '&::-webkit-scrollbar-thumb:hover': {
+                    background: theme.colors.gray[500],
+                },
+                scrollbarWidth: 'thin',
+                scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+            } }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) {
+            var isDraggingThisItem = draggedItemIndex === index;
+            var isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
+            return (react_1.default.createElement(react_2.ListItem, { key: "".concat(item.id, "-").concat(index), draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: isDraggingThisItem
+                    ? theme.colors.primary[100]
+                    : isDropZone
+                        ? theme.colors.primary[50]
+                        : theme.colors.white, display: "flex", alignItems: "center", borderRadius: "md", border: "2px solid", borderColor: isDraggingThisItem
+                    ? theme.colors.primary[400]
+                    : isDropZone
+                        ? theme.colors.primary[300]
+                        : theme.colors.border[200], cursor: "grab", position: "relative", fontSize: 14, px: "3", py: "2", transition: "all 0.2s ease", _hover: {
+                    bg: theme.colors.gray[50],
+                    borderColor: theme.colors.primary[300],
+                    boxShadow: theme.shadows.sm,
+                }, _active: {
+                    cursor: "grabbing",
+                } },
+                react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "2", color: theme.colors.gray[400], _hover: {
+                        color: theme.colors.primary[500],
+                        bg: "transparent",
+                    } }),
+                react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } })));
+        })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center", py: 8 }, "No columns found"))),
+        react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "center", mt: "4", bg: theme.colors.gray[50], p: 3, borderRadius: "md" },
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600], fontWeight: 500 },
+                visibleCount,
+                " of ",
+                items.length,
+                " columns visible"))));
 };
 exports.default = ManageColumns;

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

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

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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/Components/Table/TableSettings/TableSettings.js CHANGED Viewed

@@ -38,52 +38,86 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
+var framer_motion_1 = require("framer-motion");
 var ManageColumns_1 = __importDefault(require("./ManageColumns"));
 var Button_1 = __importDefault(require("../../Button/Button"));
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var TableFilters_1 = __importDefault(require("./TableFilters"));
+var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
 var TableSettings = function (_a) {
-    var _b, _c;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var columns = _a.columns, onSave = _a.onSave, tableSettings = _a.tableSettings;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var childInputMethodsRef = (0, react_2.useRef)({});
     var childFilterMethodsRef = (0, react_2.useRef)(null);
-    var _d = (0, react_2.useState)(false), settingsOpen = _d[0], setSettingsOpen = _d[1];
-    var _e = (0, react_2.useState)(0), selectedIndex = _e[0], setSelectedIndex = _e[1];
+    var _m = (0, react_2.useState)(false), settingsOpen = _m[0], setSettingsOpen = _m[1];
+    var _o = (0, react_2.useState)(0), selectedIndex = _o[0], setSelectedIndex = _o[1];
+    var _p = (0, react_2.useState)(columns), items = _p[0], setItems = _p[1];
     var filters = (0, react_2.useMemo)(function () {
         var _a;
         return (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters) !== null && _a !== void 0 ? _a : [];
     }, [tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters]);
     var handleSave = (0, react_2.useCallback)(function () {
-        var _a, _b, _c, _d, _e, _f, _g;
-        onSave((_c = (_b = (_a = childInputMethodsRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : []);
-        (_d = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.onFilterSelection) === null || _d === void 0 ? void 0 : _d.call(tableSettings, (_g = (_f = (_e = childFilterMethodsRef.current) === null || _e === void 0 ? void 0 : _e.getSelectedFilters) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : []);
+        var _a, _b, _c, _d;
+        onSave(items);
+        (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.onFilterSelection) === null || _a === void 0 ? void 0 : _a.call(tableSettings, (_d = (_c = (_b = childFilterMethodsRef.current) === null || _b === void 0 ? void 0 : _b.getSelectedFilters) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : []);
         setSettingsOpen(false);
-    }, [onSave, tableSettings]);
+    }, [onSave, tableSettings, items]);
+    var handleOpen = (0, react_2.useCallback)(function () {
+        setItems(columns);
+        setSettingsOpen(true);
+    }, [columns]);
     return (react_2.default.createElement(react_1.Box, null,
-        react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer" },
-            react_2.default.createElement(lucide_react_1.Settings, { onClick: function () { return setSettingsOpen(true); }, size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] })),
+        react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", _hover: { transform: "scale(1.1)" } },
+            react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] })),
         react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
             react_2.default.createElement(react_1.ModalOverlay, null),
-            react_2.default.createElement(react_1.ModalContent, { minW: "700px", minH: "600px" },
-                react_2.default.createElement(react_1.ModalHeader, null, "Table Settings"),
+            react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "2px 3px", minW: "700px", minH: "600px", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50] },
+                react_2.default.createElement(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.border) === null || _g === void 0 ? void 0 : _g[200], pb: 3 },
+                    react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "lg" }, "Table Settings")),
                 react_2.default.createElement(react_1.ModalCloseButton, null),
-                react_2.default.createElement(react_1.ModalBody, null,
+                react_2.default.createElement(react_1.ModalBody, { py: 4 },
                     react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, orientation: "vertical", variant: "unstyled" },
-                        react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content", borderRight: "1px solid", borderColor: "gray.200" },
+                        react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content", borderRight: "1px solid", borderColor: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.border) === null || _j === void 0 ? void 0 : _j[200], pr: 2 },
                             filters && filters.length > 0 && (react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
                                     borderLeft: "2px solid ".concat(theme.colors.primary[600]),
-                                }, fontSize: "14px", justifyContent: "flex-start" }, "Filters")),
+                                    bg: theme.colors.primary[50],
+                                    fontWeight: 600,
+                                }, _hover: {
+                                    bg: theme.colors.gray[100],
+                                }, fontSize: "14px", justifyContent: "flex-start", py: 2, borderRadius: "md", mb: 1 }, "Filters")),
                             react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
                                     borderLeft: "2px solid ".concat(theme.colors.primary[600]),
-                                }, fontSize: "14px", justifyContent: "flex-start" }, "Manage columns")),
-                        react_2.default.createElement(react_1.TabPanels, { pl: 4, maxH: "450px", overflowY: "auto", backgroundColor: theme.colors.gray[50] },
+                                    bg: theme.colors.primary[50],
+                                    fontWeight: 600,
+                                }, _hover: {
+                                    bg: theme.colors.gray[100],
+                                }, fontSize: "14px", justifyContent: "flex-start", py: 2, borderRadius: "md", mb: 1 }, "Manage columns")),
+                        react_2.default.createElement(react_1.TabPanels, { pl: 4, maxH: "450px", overflowY: "auto", backgroundColor: theme.colors.gray[50], borderRadius: "md", sx: {
+                                '&::-webkit-scrollbar': {
+                                    width: '3px',
+                                    height: '3px',
+                                },
+                                '&::-webkit-scrollbar-track': {
+                                    background: theme.colors.gray[100],
+                                    borderRadius: '2px',
+                                },
+                                '&::-webkit-scrollbar-thumb': {
+                                    background: theme.colors.gray[400],
+                                    borderRadius: '2px',
+                                },
+                                '&::-webkit-scrollbar-thumb:hover': {
+                                    background: theme.colors.gray[500],
+                                },
+                                scrollbarWidth: 'thin',
+                                scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+                            } },
                             filters.length > 0 && (react_2.default.createElement(react_1.TabPanel, null,
                                 react_2.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childFilterMethodsRef, filterSelected: tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filterSelected }))),
                             react_2.default.createElement(react_1.TabPanel, null,
-                                react_2.default.createElement(ManageColumns_1.default, { columns: columns, childInputMethodsRef: childInputMethodsRef }))))),
-                react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem" },
+                                react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))))),
+                react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.border) === null || _l === void 0 ? void 0 : _l[200], pt: 3 },
                     react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "gray" }),
                     react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.154",
+  "version": "2.2.157",
   "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)"