pixelize-design-library 2.2.174 → 2.2.175

package/dist/Components/KanbanBoard/AccountCard.js

@@ -18,10 +18,10 @@ var AccountCard = function (_a) {
     var handleToggle = function () {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
     };
-    return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "0.25rem", borderWidth: "0.063rem", background: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[200], border: "0.1rem solid ".concat((_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]), p: 2, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "100px", transition: "border-color 0.15s ease", _hover: {
+    return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "0.25rem", borderWidth: "0.063rem", background: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[200], border: "0.1rem solid ".concat((_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]), p: 2, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease", _hover: {
             borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[200],
         } },
-        react_1.default.createElement(react_2.VStack, { align: "start", spacing: 2, fontSize: "0.875rem", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[700] },
+        react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0.5, fontSize: "0.875rem", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[700] },
             visibleKeys.map(function (key) { return (react_1.default.createElement(AccountRow_1.default, { key: key, label: key.replace(/\b\w/g, function (c) { return c.toUpperCase(); }), value: account[key] })); }),
             react_1.default.createElement(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true },
                 react_1.default.createElement(react_2.Text, { pt: 2 }, account.details)),

package/dist/Components/KanbanBoard/AccountRow.js

@@ -11,11 +11,11 @@ var AccountRow = function (_a) {
     var _b, _c;
     var label = _a.label, value = _a.value;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    return (react_1.default.createElement(react_2.Flex, { w: "full" },
+    return (react_1.default.createElement(react_2.Flex, { w: "full", gap: 1 },
         react_1.default.createElement(react_2.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true },
-            react_1.default.createElement(react_2.Text, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[700], w: "45%", noOfLines: 1 }, (0, functions_1.toWords)(label))),
-        react_1.default.createElement(react_2.Text, { w: "0.625rem", textAlign: "center" }, ":"),
+            react_1.default.createElement(react_2.Text, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[700], w: "30%", noOfLines: 1, fontSize: "0.75rem" }, (0, functions_1.toWords)(label))),
+        react_1.default.createElement(react_2.Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem" }, ":"),
         react_1.default.createElement(react_2.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true },
-            react_1.default.createElement(react_2.Text, { fontWeight: 600, color: (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[800], w: "calc(55% - 0.625rem)", noOfLines: 1 }, value))));
+            react_1.default.createElement(react_2.Text, { fontWeight: 600, color: (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem" }, value))));
 };
 exports.default = AccountRow;

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { KanbanBoardProps } from "./KanbanBoardProps";
-declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, enableColumnReorder, onColumnReorder, }: KanbanBoardProps) => React.JSX.Element | null;
+declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, }: KanbanBoardProps) => React.JSX.Element | null;
 export default KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -77,7 +77,7 @@ function reorderColumnEntries(entries, startIndex, endIndex) {
 }
 var KanbanBoard = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    var data = _a.data, customColumns = _a.customColumns, customizeColumn = _a.customizeColumn, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _u = _a.isLoading, isLoading = _u === void 0 ? false : _u, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems, _v = _a.enableColumnCollapse, enableColumnCollapse = _v === void 0 ? false : _v, defaultCollapsedColumns = _a.collapsedColumns, _w = _a.enableColumnReorder, enableColumnReorder = _w === void 0 ? false : _w, onColumnReorder = _a.onColumnReorder;
+    var data = _a.data, customColumns = _a.customColumns, customizeColumn = _a.customizeColumn, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _u = _a.isLoading, isLoading = _u === void 0 ? false : _u, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems, _v = _a.enableColumnCollapse, enableColumnCollapse = _v === void 0 ? false : _v, defaultCollapsedColumns = _a.collapsedColumns, onColumnCollapseChange = _a.onColumnCollapseChange, _w = _a.enableColumnReorder, enableColumnReorder = _w === void 0 ? false : _w, onColumnReorder = _a.onColumnReorder;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
     var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
@@ -103,9 +103,16 @@ var KanbanBoard = function (_a) {
     var toggleColumnCollapsed = (0, react_1.useCallback)(function (colId) {
         setCollapsedColumns(function (prev) {
             var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[colId] = !prev[colId], _a)));
+            var collapsed = !prev[colId];
+            var next = __assign(__assign({}, prev), (_a = {}, _a[colId] = collapsed, _a));
+            onColumnCollapseChange === null || onColumnCollapseChange === void 0 ? void 0 : onColumnCollapseChange({
+                colId: colId,
+                collapsed: collapsed,
+                collapsedColumns: next,
+            });
+            return next;
         });
-    }, []);
+    }, [onColumnCollapseChange]);
     /** Rotated collapsed summaries paint outside layout; reserve space so they are not clipped under the rail header. */
     var COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
     // ref for lists
@@ -269,7 +276,7 @@ var KanbanBoard = function (_a) {
                         react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "95%", h: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_t = column.color) !== null && _t !== void 0 ? _t : (_u = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _u === void 0 ? void 0 : _u[500], background: (_v = colors === null || colors === void 0 ? void 0 : colors.background) === null || _v === void 0 ? void 0 : _v[300], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2 },
                 enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
                     react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_w = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _w === void 0 ? void 0 : _w[400] }))) : null,
-                react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "1rem", color: (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[700], noOfLines: 1, flex: "1", minW: 0 },
+                react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[700], noOfLines: 1, flex: "1", minW: 0 },
                     react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
                 react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, borderRadius: "999px", border: "1px solid", backgroundColor: (_y = colors === null || colors === void 0 ? void 0 : colors.background) === null || _y === void 0 ? void 0 : _y[100], borderColor: (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[300], display: "flex", alignItems: "center", justifyContent: "center", color: (_0 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _0 === void 0 ? void 0 : _0[900], fontWeight: 600, fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_1 = column === null || column === void 0 ? void 0 : column.items) === null || _1 === void 0 ? void 0 : _1.length),
                 enableColumnCollapse && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Collapse column", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: function () { return toggleColumnCollapsed(colId); } })),

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

@@ -163,5 +163,23 @@ describe("KanbanBoard – permissions", function () {
             expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
             expect(react_2.screen.getByLabelText("Expand column")).toBeInTheDocument();
         });
+        it("calls onColumnCollapseChange when collapsing and expanding", function () {
+            var onColumnCollapseChange = jest.fn();
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, enableColumnCollapse: true, onColumnCollapseChange: onColumnCollapseChange }));
+            react_2.fireEvent.click(react_2.screen.getAllByLabelText("Collapse column")[0]);
+            expect(onColumnCollapseChange).toHaveBeenCalledTimes(1);
+            expect(onColumnCollapseChange).toHaveBeenLastCalledWith({
+                colId: "col1",
+                collapsed: true,
+                collapsedColumns: { col1: true },
+            });
+            react_2.fireEvent.click(react_2.screen.getByLabelText("Expand column"));
+            expect(onColumnCollapseChange).toHaveBeenCalledTimes(2);
+            expect(onColumnCollapseChange).toHaveBeenLastCalledWith({
+                colId: "col1",
+                collapsed: false,
+                collapsedColumns: { col1: false },
+            });
+        });
     });
 });

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

@@ -18,6 +18,14 @@ export type ColumnType = {
     /** Column-level slot (e.g. totals). Only in the collapsed narrow rail; rotated 270° along the column. */
     customNode?: () => ReactNode;
 };
+/** Fired after a column rail is collapsed or expanded via the board UI. */
+export type ColumnCollapseChangePayload = {
+    colId: string;
+    /** True when the column is in the narrow collapsed rail. */
+    collapsed: boolean;
+    /** Full collapsed map for all columns (same shape as `collapsedColumns` initial prop). */
+    collapsedColumns: Record<string, boolean>;
+};
 export type KanbanBoardProps = {
     data: Record<string, ColumnType>;
     customColumns?: Record<string, ColumnType>;
@@ -77,6 +85,8 @@ export type KanbanBoardProps = {
      * Only read on first mount; remount the board or toggle in UI to change afterward.
      */
     collapsedColumns?: Record<string, boolean>;
+    /** Called when the user collapses or expands a column (after internal state updates). */
+    onColumnCollapseChange?: (payload: ColumnCollapseChangePayload) => void;
     /** When true, columns can be reordered via the header grip handle. */
     enableColumnReorder?: boolean;
     /** Called after column order changes (same shape as `data` keys order). */

package/package.json

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