pixelize-design-library 2.3.9 → 2.3.10

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.10",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",