pixelize-design-library 2.3.9 → 2.3.11

package/.cursor/plans/current.md

@@ -1,15 +1,12 @@
-# Improve Jest coverage to 80%+
+# Fix Kanban collapsed column reset on drag
 
 ## Problem
-Global coverage ~56% statements / 47% branches — threshold is 80%.
+`collapsedColumns` is re-hydrated from stale `kanbanPreferencesJson` whenever `mergedColumns` changes (e.g. after drag when parent updates `data`).
 
-## Strategy
-1. Expand `Utils/table.test.ts` (largest uncovered file after KanbanBoard)
-2. Expand `tableNormalizeCellValue.test.ts` for object/array/React branches
-3. Add unit tests for small untested components (Select, ErrorMessage, HelperText, Divider, TableActions, TableLoading, TableGroupRow, MeasuredItem, HeaderActions, SelectTruncatedLabel)
-4. Add `usePreferences.test.ts` hook tests
-5. Expand `chartColorsFromTheme.test.ts`
-6. Re-run coverage and add targeted tests if still below 80%
+## Solution
+1. Hydrate `collapsedColumns` from preferences **once** (when prefs load and columns exist).
+2. On `mergedColumns` change, only **prune** keys for removed columns — never re-apply saved prefs.
 
-## Verification
-`npm test` — all metrics ≥ 80%
+## Files
+- `src/Components/KanbanBoard/KanbanBoard.tsx`
+- `src/Components/KanbanBoard/KanbanBoard.test.tsx`

package/dist/Components/KanbanBoard/KanbanBoard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanBoard.d.ts","sourceRoot":"","sources":["../../../src/Components/KanbanBoard/KanbanBoard.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAEL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAC;AAqH5B,QAAA,MAAM,WAAW,GAAI,0TA4BlB,gBAAgB,mDA+6BlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"KanbanBoard.d.ts","sourceRoot":"","sources":["../../../src/Components/KanbanBoard/KanbanBoard.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAEL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAC;AAqH5B,QAAA,MAAM,WAAW,GAAI,0TA4BlB,gBAAgB,mDAs9BlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -132,20 +132,37 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     const [expanded, setExpanded] = (0, react_1.useState)({});
     /** When true, column id maps to collapsed (body hidden). */
     const [collapsedColumns, setCollapsedColumns] = (0, react_1.useState)(() => ({ ...defaultCollapsedColumns }));
+    const hasHydratedCollapsedFromPrefs = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        hasHydratedCollapsedFromPrefs.current = false;
+    }, [
+        preferences.baseurl,
+        preferences.page,
+        preferences.key,
+        preferences.name,
+    ]);
     (0, react_1.useEffect)(() => {
         if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
             return;
         }
+        if (hasHydratedCollapsedFromPrefs.current) {
+            return;
+        }
+        const validIds = new Set(Object.keys(mergedColumns));
+        if (validIds.size === 0) {
+            return;
+        }
         if (!("collapsedColumns" in kanbanPreferencesJson)) {
+            hasHydratedCollapsedFromPrefs.current = true;
             return;
         }
         const saved = kanbanPreferencesJson.collapsedColumns;
         if (saved === null ||
             typeof saved !== "object" ||
             Array.isArray(saved)) {
+            hasHydratedCollapsedFromPrefs.current = true;
             return;
         }
-        const validIds = new Set(Object.keys(mergedColumns));
         const next = {};
         for (const [k, v] of Object.entries(saved)) {
             if (validIds.has(k) && typeof v === "boolean") {
@@ -156,6 +173,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
             ...defaultCollapsedColumns,
             ...next,
         });
+        hasHydratedCollapsedFromPrefs.current = true;
     }, [
         enableColumnCollapse,
         preferences.baseurl,
@@ -164,6 +182,25 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         mergedColumns,
         defaultCollapsedColumns,
     ]);
+    (0, react_1.useEffect)(() => {
+        if (!enableColumnCollapse) {
+            return;
+        }
+        const validIds = new Set(Object.keys(mergedColumns));
+        setCollapsedColumns((prev) => {
+            const hasStale = Object.keys(prev).some((k) => !validIds.has(k));
+            if (!hasStale) {
+                return prev;
+            }
+            const pruned = {};
+            for (const [k, v] of Object.entries(prev)) {
+                if (validIds.has(k)) {
+                    pruned[k] = v;
+                }
+            }
+            return pruned;
+        });
+    }, [mergedColumns, enableColumnCollapse]);
     const toggleColumnCollapsed = (0, react_1.useCallback)((colId) => {
         setCollapsedColumns((prev) => {
             const collapsed = !prev[colId];

package/dist/Components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/Components/Table/Table.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkC,UAAU,EAAE,MAAM,cAAc,CAAC;AAuB1E,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,UAAkB,EAClB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,SAAiB,EACjB,YAAmB,EACnB,UAAU,EACV,UAAU,EACV,cAAqB,EACrB,WAOC,EACD,cAAyB,EACzB,cAAsB,EACtB,OAAO,EACP,aAAqB,EACrB,aAAqB,EACrB,YAA0B,EAC1B,gBAAwB,EACxB,iBAAiB,EACjB,eAAoB,EACpB,YAAgB,EAChB,YAAY,EACZ,eAAuB,EACvB,aAAa,EACb,cAAc,EACd,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,OAAkB,EAClB,MAAM,EACN,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,GAEV,EAAE,UAAU,2CA0vBZ"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/Components/Table/Table.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkC,UAAU,EAAE,MAAM,cAAc,CAAC;AAuB1E,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,UAAkB,EAClB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,SAAiB,EACjB,YAAmB,EACnB,UAAU,EACV,UAAU,EACV,cAAqB,EACrB,WAOC,EACD,cAAyB,EACzB,cAAsB,EACtB,OAAO,EACP,aAAqB,EACrB,aAAqB,EACrB,YAA0B,EAC1B,gBAAwB,EACxB,iBAAiB,EACjB,eAAoB,EACpB,YAAgB,EAChB,YAAY,EACZ,eAAuB,EACvB,aAAa,EACb,cAAc,EACd,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,OAAkB,EAClB,MAAM,EACN,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,GAEV,EAAE,UAAU,2CAuwBZ"}

package/dist/Components/Table/Table.js

@@ -91,6 +91,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
     // Grouping is chosen by the user in Table Settings > Group and persisted to
     // preferences (`json.groupBy`); there is no `groupBy` prop.
     const [groupByState, setGroupByState] = (0, react_1.useState)(undefined);
+    const [isPaginationPopoverOpen, setIsPaginationPopoverOpen] = (0, react_1.useState)(false);
     // 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.
@@ -311,6 +312,11 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
     const fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
     const tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
     const isCompactHeader = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
+    (0, react_1.useEffect)(() => {
+        if (!isCompactHeader) {
+            setIsPaginationPopoverOpen(false);
+        }
+    }, [isCompactHeader]);
     const compactScrollbarPadding = isCompactRows ? 4 : 0;
     // Infinite scroll: reuse onPagination("next") when scrolled near the bottom.
     const infiniteRef = (0, react_1.useRef)({ isLoadingMore, isTableLoading, hasMore, rowsPerPage, dataLen: tableData.length, lastRecord: tableData[tableData.length - 1], totalRecords, isServerPagination });
@@ -383,9 +389,9 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                                 animation: isRefreshing
                                                                     ? "pixelize-table-spin 1s linear infinite"
                                                                     : "none"
-                                                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) })] })), headerActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection })] })), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: (_y = (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.text) === null || _y === void 0 ? void 0 : _y[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Pagination", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: (_0 = (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.text) === null || _0 === void 0 ? void 0 : _0[500], _hover: {
-                                                                            color: (_2 = (_1 = theme.colors) === null || _1 === void 0 ? void 0 : _1.primary) === null || _2 === void 0 ? void 0 : _2[500]
-                                                                        } }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) })] })), headerActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection })] })), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: (_y = (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.text) === null || _y === void 0 ? void 0 : _y[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: (_0 = (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.text) === null || _0 === void 0 ? void 0 : _0[500], _hover: {
+                                                                        color: (_2 = (_1 = theme.colors) === null || _1 === void 0 ? void 0 : _1.primary) === null || _2 === void 0 ? void 0 : _2[500],
+                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: "white", boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
                                             '&::-webkit-scrollbar': {
                                                 width: '6px',
                                                 height: isCompactRows ? '0px' : '6px',

package/package.json

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

package/.claude/settings.local.json

@@ -1,51 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(git ls-tree *)",
-      "Bash(npx --no-install tsc --noEmit)",
-      "Bash(git fsck *)",
-      "Bash(npx tsc *)",
-      "Bash(curl -s http://localhost:5174/ -o /dev/null -w \"HTTP %{http_code}\\\\n\")",
-      "Bash(curl -s \"http://localhost:5174/src/Components/Table/Components/TableBody.tsx\" -o /dev/null -w \"transform TableBody: HTTP %{http_code}\\\\n\")",
-      "Read(//private/tmp/**)",
-      "Bash(npx jest *)",
-      "Bash(pkill -f \"vite\")",
-      "Bash(grep -rln -E \"import\\\\s+\\\\w+\\\\s*\\(,\\\\s*\\\\{[^}]*\\\\}\\)?\\\\s*from\\\\s+['\\\\\"]pixelize-design-library['\\\\\"]\" src)",
-      "Bash(ps -p 44521 60411 -o pid,command)",
-      "Bash(node -e \"const p=require\\('./package.json'\\); console.log\\(JSON.stringify\\(p.scripts,null,2\\)\\)\")",
-      "Bash(echo \"=== total errors: $\\(npx tsc --noEmit -p tsconfig.json 2>&1)",
-      "Bash(echo \"=== total: $\\(npx tsc --noEmit -p tsconfig.json 2>&1)",
-      "Bash(echo \"exit=$?\")",
-      "Read(//tmp/**)",
-      "Bash(git mv *)",
-      "Bash(git rm *)",
-      "Bash(node -e \"console.log\\(require\\('@emotion/react/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('jodit-react', require\\('jodit-react/package.json'\\).version\\); try{console.log\\('jodit', require\\('jodit/package.json'\\).version\\)}catch\\(e\\){}\")",
-      "Bash(node -e \"console.log\\('playwright', require\\('playwright/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('puppeteer', require\\('puppeteer/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('ws', require\\('ws/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('node', process.version\\)\")",
-      "Bash(grep -E \"\\\\.tsx?$\")",
-      "Bash(node -e \"console.log\\(require.resolve\\('@chakra-ui/styled-system'\\)\\)\")",
-      "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(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\\)\")",
-      "Bash(echo \"tsc exit code: $?\")",
-      "Bash(./node_modules/.bin/tsc --noEmit --skipLibCheck)",
-      "Bash(./node_modules/.bin/tsc --noEmit)",
-      "Bash(echo \"tsc exit: $?\")",
-      "Bash(echo \"local tsc exit: $?\")",
-      "Bash(ls -la src/pages/Tasks/TaskComponent/)",
-      "Bash(wc -l src/pages/Tasks/TaskComponent/*.tsx)"
-    ],
-    "additionalDirectories": [
-      "/private/tmp",
-      "/tmp"
-    ]
-  }
-}