pixelize-design-library 2.2.199 → 2.3.1-beta.10

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -71,6 +71,9 @@ var Button_1 = __importDefault(require("../Button/Button"));
 /** Narrow rail width when a column is horizontally collapsed. */
 var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
 var KANBAN_CARD_GAP = 12;
+// Top buffer above the first card so its border + hover lift aren't clipped by the
+// scroll/virtualized list's top edge.
+var KANBAN_LIST_TOP_PAD = 6;
 var KanbanRow = react_1.default.memo(function (_a) {
     var index = _a.index, style = _a.style, data = _a.data;
     var items = data.items, colId = data.colId, canDrag = data.canDrag, expanded = data.expanded, onDelete = data.onDelete, onOpen = data.onOpen, canDelete = data.canDelete, setSize = data.setSize, toggleExpand = data.toggleExpand;
@@ -79,7 +82,7 @@ var KanbanRow = react_1.default.memo(function (_a) {
         return react_1.default.createElement("div", { style: style });
     }
     return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP } },
+        react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 } },
             react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
                 react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
                     var _a;
@@ -259,13 +262,14 @@ var KanbanBoard = function (_a) {
                 return prev;
             return __assign(__assign({}, prev), (_a = {}, _a[key] = size, _a));
         });
+        // Only recompute from the row that changed downward (cheaper than resetting all).
         if (listRefs.current[colId]) {
-            listRefs.current[colId].resetAfterIndex(0);
+            listRefs.current[colId].resetAfterIndex(index);
         }
     }, []);
     var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
         var key = "".concat(colId, "-").concat(index);
-        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP;
+        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP + (index === 0 ? KANBAN_LIST_TOP_PAD : 0);
     }, [sizes]);
     // Calculate container height
     (0, react_1.useEffect)(function () {
@@ -281,8 +285,9 @@ var KanbanBoard = function (_a) {
             window.removeEventListener("resize", calculateDimensions);
         };
     }, [isBoardLoading]);
-    // toggle expand/collapse
-    var toggleExpand = function (id, colId, index) {
+    // toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
+    // every render (which would re-render every virtualized row).
+    var toggleExpand = (0, react_1.useCallback)(function (id, colId, index) {
         setExpanded(function (prev) {
             var _a;
             var newExpanded = __assign(__assign({}, prev), (_a = {}, _a[id] = !prev[id], _a));
@@ -291,9 +296,9 @@ var KanbanBoard = function (_a) {
             }
             return newExpanded;
         });
-    };
+    }, []);
     // drag handler
-    var onDragEnd = function (result) {
+    var onDragEnd = (0, react_1.useCallback)(function (result) {
         var _a, _b;
         var source = result.source, destination = result.destination, type = result.type;
         if (!destination)
@@ -344,12 +349,12 @@ var KanbanBoard = function (_a) {
                 toIndex: destination.index,
             });
         }
-    };
-    var handleColumnDelete = function (colId) {
+    }, [columns, onDrag, onColumnReorder]);
+    var handleColumnDelete = (0, react_1.useCallback)(function (colId) {
         var _a, _b;
         var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
         onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
-    };
+    }, [columns, onColumnDelete]);
     var rowBaseProps = (0, react_1.useMemo)(function () { return ({
         canDrag: canDrag,
         expanded: expanded,
@@ -359,6 +364,16 @@ var KanbanBoard = function (_a) {
         setSize: setSize,
         toggleExpand: toggleExpand,
     }); }, [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
+    // Stable per-column itemData so unrelated board re-renders (e.g. column hover)
+    // don't change the reference react-window hands to every row → no row re-renders.
+    var itemDataByCol = (0, react_1.useMemo)(function () {
+        var map = {};
+        for (var _i = 0, _a = Object.entries(columns); _i < _a.length; _i++) {
+            var _b = _a[_i], colId = _b[0], column = _b[1];
+            map[colId] = __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId });
+        }
+        return map;
+    }, [columns, rowBaseProps]);
     var renderColumnDroppable = function (colId, column, columnDragHandleProps, isColCollapsed) { return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
             var _a;
             var item = column.items[rubric.source.index];
@@ -366,89 +381,89 @@ var KanbanBoard = function (_a) {
                     return toggleExpand(item.id, colId, rubric.source.index);
                 }, isDeletable: canDelete }))));
         } }, function (provided, snapshot) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
-        return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+        return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.75rem", background: snapshot.isDraggingOver
                 ? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
-                : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
-                ? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[300])
-                : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: "".concat(containerHeight - 60, "px"), transition: "width 0.2s ease", onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
+                : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "0.063rem ".concat(snapshot.isDraggingOver ? "dashed" : "solid", " ").concat(snapshot.isDraggingOver
+                ? (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[300]
+                : (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]), transition: "background 0.15s ease, border-color 0.15s ease, width 0.2s ease", display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
             isColCollapsed ? (react_1.default.createElement(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative" },
-                react_1.default.createElement(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], bg: (_g = colors === null || colors === void 0 ? void 0 : colors.background) === null || _g === void 0 ? void 0 : _g[100], position: "relative", zIndex: 1 },
+                react_1.default.createElement(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_g = column.color) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500], bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], position: "relative", zIndex: 1 },
                     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: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[400] }))) : null,
-                    enableColumnCollapse && (react_1.default.createElement(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], position: "relative", zIndex: 3 },
+                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[400] }))) : null,
+                    enableColumnCollapse && (react_1.default.createElement(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (_l = colors === null || colors === void 0 ? void 0 : colors.background) === null || _l === void 0 ? void 0 : _l[100], position: "relative", zIndex: 3 },
                         react_1.default.createElement(react_2.IconButton, { "aria-label": "Expand column", icon: react_1.default.createElement(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: function () { return toggleColumnCollapsed(colId); } }))),
-                    react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[700], sx: {
+                    react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[700], sx: {
                             writingMode: "vertical-rl",
                             textOrientation: "mixed",
                         }, maxH: "".concat(Math.max(120, containerHeight - 200), "px"), overflow: "hidden", lineHeight: "1.2", title: column.title }, column.title),
-                    react_1.default.createElement(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[300], display: "flex", backgroundColor: (_m = colors === null || colors === void 0 ? void 0 : colors.background) === null || _m === void 0 ? void 0 : _m[100], alignItems: "center", justifyContent: "center", color: (_o = colors === null || colors === void 0 ? void 0 : colors.text) === null || _o === void 0 ? void 0 : _o[900], fontWeight: 600, fontSize: "10px" }, (_p = column === null || column === void 0 ? void 0 : column.items) === null || _p === void 0 ? void 0 : _p.length)),
-                column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_q = colors === null || colors === void 0 ? void 0 : colors.background) === null || _q === void 0 ? void 0 : _q[100], "aria-hidden": true })) : null,
-                column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_r = colors === null || colors === void 0 ? void 0 : colors.background) === null || _r === void 0 ? void 0 : _r[100], position: "relative", zIndex: 2 },
+                    react_1.default.createElement(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[300], display: "flex", backgroundColor: (_p = colors === null || colors === void 0 ? void 0 : colors.background) === null || _p === void 0 ? void 0 : _p[100], alignItems: "center", justifyContent: "center", color: (_q = colors === null || colors === void 0 ? void 0 : colors.text) === null || _q === void 0 ? void 0 : _q[900], fontWeight: 600, fontSize: "10px" }, (_r = column === null || column === void 0 ? void 0 : column.items) === null || _r === void 0 ? void 0 : _r.length)),
+                column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_s = colors === null || colors === void 0 ? void 0 : colors.background) === null || _s === void 0 ? void 0 : _s[100], "aria-hidden": true })) : null,
+                column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_t = colors === null || colors === void 0 ? void 0 : colors.background) === null || _t === void 0 ? void 0 : _t[100], position: "relative", zIndex: 2 },
                     react_1.default.createElement(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem' },
-                        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: !isColCollapsed && !!((_t = column.customNode) === null || _t === void 0 ? void 0 : _t.call(column)) ? "auto" : "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_u = column.color) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _v === void 0 ? void 0 : _v[500], background: (_w = colors === null || colors === void 0 ? void 0 : colors.background) === null || _w === void 0 ? void 0 : _w[300], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2 },
-                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", 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: (_x = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _x === void 0 ? void 0 : _x[400] }))) : null,
-                    react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: !isColCollapsed && !!((_y = column.customNode) === null || _y === void 0 ? void 0 : _y.call(column)) ? "1" : "0" },
-                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_z = colors === null || colors === void 0 ? void 0 : colors.text) === null || _z === void 0 ? void 0 : _z[700], noOfLines: 1, flex: "1", minW: 0 },
-                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
-                        !!((_0 = column.customNode) === null || _0 === void 0 ? void 0 : _0.call(column)) ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "95%", flexShrink: 0, fontSize: "xs", mb: 1, color: (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[600] }, column.customNode())) : null)),
+                        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_u = colors === null || colors === void 0 ? void 0 : colors.text) === null || _u === void 0 ? void 0 : _u[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_v = column.customNode) === null || _v === void 0 ? void 0 : _v.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_w = column.customNode) === null || _w === void 0 ? void 0 : _w.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: "0.063rem solid ".concat((_y = (_x = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _x === void 0 ? void 0 : _x[100]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[100]) },
+                react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1" },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
+                        react_1.default.createElement(react_2.Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_0 = column.color) !== null && _0 !== void 0 ? _0 : (_1 = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _1 === void 0 ? void 0 : _1[500], flexShrink: 0 }),
+                        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: (_2 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _2 === void 0 ? void 0 : _2[400] }))) : null,
+                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_3 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _3 === void 0 ? void 0 : _3[700], noOfLines: 1, minW: 0 },
+                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title))),
+                    !!((_4 = column.customNode) === null || _4 === void 0 ? void 0 : _4.call(column)) ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: (_5 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _5 === void 0 ? void 0 : _5[600] }, column.customNode())) : null),
                 react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                    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: (_2 = colors === null || colors === void 0 ? void 0 : colors.background) === null || _2 === void 0 ? void 0 : _2[100], borderColor: (_3 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _3 === void 0 ? void 0 : _3[300], display: "flex", alignItems: "center", justifyContent: "center", color: (_4 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _4 === void 0 ? void 0 : _4[900], fontWeight: 600, fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_5 = column === null || column === void 0 ? void 0 : column.items) === null || _5 === void 0 ? void 0 : _5.length),
+                    react_1.default.createElement(react_2.Badge, { minW: "1.5rem", h: "1.5rem", px: 2, borderRadius: "999px", backgroundColor: (_6 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _6 === void 0 ? void 0 : _6[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_7 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _7 === void 0 ? void 0 : _7[700], fontWeight: 600, fontSize: "0.625rem" }, (_8 = column === null || column === void 0 ? void 0 : column.items) === null || _8 === void 0 ? void 0 : _8.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); } })),
                     canDelete &&
                         hoveredColumn === colId &&
-                        column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_6 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _6 === void 0 ? void 0 : _6[600], _hover: { color: (_7 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _7 === void 0 ? void 0 : _7[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
+                        column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_9 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _9 === void 0 ? void 0 : _9[600], _hover: { color: (_10 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _10 === void 0 ? void 0 : _10[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
                     !(canDelete &&
                         hoveredColumn === colId &&
                         column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })))),
-            !isColCollapsed && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
-                        overflowY: "auto",
-                        overflowX: "hidden",
-                        scrollbarWidth: "thin",
-                        scrollbarColor: "var(--chakra-colors-gray-300) transparent",
-                        "&::-webkit-scrollbar": {
-                            width: "6px !important",
-                            height: "6px !important",
-                        },
-                        "&::-webkit-scrollbar-track": {
-                            background: "gray.100",
-                            borderRadius: "3px",
-                            marginTop: "4px",
-                            marginBottom: "4px",
-                        },
-                        "&::-webkit-scrollbar-thumb": {
-                            background: "gray.300",
-                            borderRadius: "3px",
-                            border: "1px solid",
-                            borderColor: "gray.100",
-                        },
-                        "&::-webkit-scrollbar-thumb:hover": {
-                            background: "gray.400",
-                        },
-                        "&": {
-                            scrollbarGutter: "stable both-edges",
-                        },
-                        cursor: canDrag ? "grab" : "not-allowed",
-                    } },
-                    (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })),
-                    virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
-                            if (el)
-                                listRefs.current[colId] = el;
-                        }, height: containerHeight - 150, itemCount: column.items.length +
-                            (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
-                            return getItemSize(index, column.items, colId);
-                        }, width: "100%", itemData: __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId }) }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
-                        column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { paddingBottom: KANBAN_CARD_GAP } },
-                            react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
-                                var _a;
-                                return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
-                                        return toggleExpand(account.id, colId, index);
-                                    }, isDeletable: canDelete }))));
-                            }))); }),
-                        provided.placeholder)))))));
+            !isColCollapsed && (react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                    overflowY: "auto",
+                    overflowX: "hidden",
+                    scrollbarWidth: "thin",
+                    scrollbarColor: "var(--chakra-colors-gray-300) transparent",
+                    "&::-webkit-scrollbar": {
+                        width: "6px !important",
+                        height: "6px !important",
+                    },
+                    "&::-webkit-scrollbar-track": {
+                        background: "gray.100",
+                        borderRadius: "3px",
+                        marginTop: "4px",
+                        marginBottom: "4px",
+                    },
+                    "&::-webkit-scrollbar-thumb": {
+                        background: "gray.300",
+                        borderRadius: "3px",
+                        border: "1px solid",
+                        borderColor: "gray.100",
+                    },
+                    "&::-webkit-scrollbar-thumb:hover": {
+                        background: "gray.400",
+                    },
+                    "&": {
+                        scrollbarGutter: "stable both-edges",
+                    },
+                    cursor: canDrag ? "grab" : "not-allowed",
+                } },
+                (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })),
+                virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
+                        if (el)
+                            listRefs.current[colId] = el;
+                    }, height: containerHeight - 150, itemCount: column.items.length +
+                        (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
+                        return getItemSize(index, column.items, colId);
+                    }, width: "100%", itemData: itemDataByCol[colId] }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
+                    column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 } },
+                        react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
+                            var _a;
+                            return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
+                                    return toggleExpand(account.id, colId, index);
+                                }, isDeletable: canDelete }))));
+                        }))); }),
+                    provided.placeholder))))));
     })); };
     if (!canView)
         return null;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -74,13 +74,13 @@ var generateUniqueId = (function () {
     };
 })();
 function MultiSelect(_a) {
-    var _b, _c;
-    var value = _a.value, onValueChange = _a.onValueChange, _d = _a.width, width = _d === void 0 ? "100%" : _d, _e = _a.label, label = _e === void 0 ? "label" : _e, _f = _a.isRequired, isRequired = _f === void 0 ? true : _f, _g = _a.isInformation, isInformation = _g === void 0 ? false : _g, _h = _a.informationMessage, informationMessage = _h === void 0 ? "" : _h, name = _a.name, id = _a.id, _j = _a.placeholderText, placeholderText = _j === void 0 ? "Type valid email and press enter" : _j, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _k = _a.size, size = _k === void 0 ? "md" : _k, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
+    var _b, _c, _d, _e;
+    var value = _a.value, onValueChange = _a.onValueChange, _f = _a.width, width = _f === void 0 ? "100%" : _f, _g = _a.label, label = _g === void 0 ? "label" : _g, _h = _a.isRequired, isRequired = _h === void 0 ? true : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, _k = _a.informationMessage, informationMessage = _k === void 0 ? "" : _k, name = _a.name, id = _a.id, _l = _a.placeholderText, placeholderText = _l === void 0 ? "Type valid email and press enter" : _l, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _m = _a.size, size = _m === void 0 ? "md" : _m, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
     var options = value;
-    var _l = (0, react_1.useState)(""), inputValue = _l[0], setInputValue = _l[1];
-    var _m = (0, react_1.useState)(""), localError = _m[0], setLocalError = _m[1];
+    var _o = (0, react_1.useState)(""), inputValue = _o[0], setInputValue = _o[1];
+    var _p = (0, react_1.useState)(""), localError = _p[0], setLocalError = _p[1];
     var inputRef = (0, react_1.useRef)(null);
     var handleInputChange = (0, react_1.useCallback)(function (e) {
         setInputValue(e.target.value);
@@ -112,16 +112,15 @@ function MultiSelect(_a) {
     }, [options, onValueChange]);
     return (react_1.default.createElement(react_2.Box, { width: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "1px solid", borderColor: error || localError
-                ? theme.colors.red[500]
-                : theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: s.minH, _focusWithin: {
+        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "0.063rem solid", borderColor: error || localError
+                ? theme.colors.semantic.error[500]
+                : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.5rem", bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
                 borderColor: error || localError
-                    ? theme.colors.red[500]
+                    ? theme.colors.semantic.error[500]
                     : theme.colors.primary[500],
-                boxShadow: "0 0 0 0.125rem" +
-                    (error || localError
-                        ? (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error
-                        : (_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary),
+                boxShadow: "0 0 0 0.125rem ".concat(error || localError
+                    ? (_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error
+                    : (_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary),
             } },
             options.map(function (option) { return (react_1.default.createElement(Tag_1.default, { key: option.id, size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: function () { return handleRemove(option); }, icon: lucide_react_1.X })); }),
             react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: __assign({ backgroundColor: "transparent" }, inputStyle), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })),

package/dist/Components/NavigationBar/NavigationBar.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NavbarProps } from "./NavigationBarProps";
-export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, }: NavbarProps): React.JSX.Element;
+export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, }: NavbarProps): React.JSX.Element;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -10,48 +21,64 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 function NavBar(_a) {
     var _b, _c, _d, _e;
-    var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText, sideBarToggole = _a.sideBarToggole, onSideBarToggole = _a.onSideBarToggole;
+    var userAvathar = _a.userAvathar, userName = _a.userName, userRole = _a.userRole, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText, sideBarToggole = _a.sideBarToggole, onSideBarToggole = _a.onSideBarToggole;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
+    // Shared rounded pill affordance for the bar's icon controls.
+    var iconButtonStyle = {
+        w: "1.75rem",
+        h: "1.75rem",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "md",
+        cursor: "pointer",
+        transition: "background 0.15s",
+        _hover: { bg: "blackAlpha.50" },
+    };
+    // Light elevated pill item.
+    var menuItemStyle = {
+        bg: "transparent",
+        borderRadius: "7px",
+        mx: "0.375rem",
+        px: "0.625rem",
+        py: "0.5rem",
+        fontWeight: 500,
+        fontSize: "13px",
+        color: "gray.700",
+        gap: theme.space["2"],
+        transition: "background 0.12s",
+        _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+        _focus: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+        _active: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+    };
+    return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100" },
         react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
             react_1.default.createElement(react_2.Box, { display: "flex", gap: 1.5, alignItems: "center" },
-                react_1.default.createElement(react_2.Box, { onClick: function () { return onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(); }, display: { base: "block", lg: "none", xl: "none", md: "none" } }, sideBarToggole ? (react_1.default.createElement(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : (react_1.default.createElement(lucide_react_1.PanelRightClose, { size: "1.25rem" }))),
-                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, { width: "1.5rem", height: "1.5rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } },
+                react_1.default.createElement(react_2.Box, __assign({ onClick: function () { return onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(); }, display: { base: "flex", lg: "none", xl: "none", md: "none" } }, iconButtonStyle), sideBarToggole ? (react_1.default.createElement(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : (react_1.default.createElement(lucide_react_1.PanelRightClose, { size: "1.25rem" }))),
+                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, __assign({}, iconButtonStyle, { display: "flex", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } }),
                     react_1.default.createElement(lucide_react_1.CircleArrowLeft, { 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] }))),
                 (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
-            react_1.default.createElement(react_2.Flex, null,
-                react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 7 },
+            react_1.default.createElement(react_2.Flex, { minW: 0, flexShrink: 1 },
+                react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0 },
+                    moreIcon && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", minW: 0 }, moreIcon)),
                     react_1.default.createElement(react_2.Menu, null,
-                        react_1.default.createElement(react_2.Box, { cursor: "pointer" }, moreIcon),
-                        react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
+                        react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0 },
                             react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
-                        react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0 },
+                        react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: "gray.700", overflow: "hidden" },
                             react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", maxH: "90vh" },
-                                react_1.default.createElement(react_2.Center, { py: 4 },
+                                react_1.default.createElement(react_2.Center, { pt: 4, pb: 2 },
                                     react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
-                                react_1.default.createElement(react_2.Center, null,
-                                    react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
-                                react_1.default.createElement(react_2.MenuDivider, null),
+                                react_1.default.createElement(react_2.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4 },
+                                    react_1.default.createElement(react_2.Text, { fontWeight: 600, fontSize: "14px", color: "gray.800", isTruncated: true, maxW: "100%" }, userName),
+                                    userRole && (react_1.default.createElement(react_2.Text, { fontSize: "11px", color: "gray.500", isTruncated: true, maxW: "100%" }, userRole))),
+                                react_1.default.createElement(react_2.MenuDivider, { borderColor: "blackAlpha.100" }),
                                 react_1.default.createElement(react_2.Box, { flex: 1, overflowY: "auto" }, navMenu === null || navMenu === void 0 ? void 0 : navMenu.map(function (menu, idx) {
                                     var _a, _b, _c;
-                                    return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: "".concat(String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx), "-").concat(idx), sx: {
-                                            fontWeight: 500,
-                                            gap: theme.space["2"],
-                                        }, _focus: {
-                                            backgroundColor: "transparent",
-                                        }, _hover: {
-                                            backgroundColor: theme.colors.primary["50"],
-                                        } },
-                                        menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
+                                    return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: "".concat(String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx), "-").concat(idx), sx: menuItemStyle },
+                                        menu.icon && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } } }, menu === null || menu === void 0 ? void 0 : menu.icon)),
                                         react_1.default.createElement(react_2.Box, null, menu.title)));
                                 })),
-                                react_1.default.createElement(react_2.MenuDivider, null),
-                                react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
-                                        fontWeight: 500,
-                                        gap: theme.space["2"],
-                                    }, _hover: {
-                                        backgroundColor: theme.colors.primary["50"],
-                                    } },
-                                    react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
+                                react_1.default.createElement(react_2.MenuDivider, { borderColor: "blackAlpha.100" }),
+                                react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: __assign(__assign({}, menuItemStyle), { color: "red.500", _hover: { bg: "red.50", color: "red.600" }, _focus: { bg: "red.50", color: "red.600" }, _active: { bg: "red.50", color: "red.600" } }) },
+                                    react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center" }, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
                                     react_1.default.createElement(react_2.Box, null, logoutText))))))))));
 }

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -1,6 +1,7 @@
 export type NavbarProps = {
     userAvathar: string;
     userName: string;
+    userRole?: string;
     navMenu: MenuProps[];
     moreIcon?: any;
     handleNavOnClick: (url: string) => void;