pixelize-design-library 2.2.122 → 2.2.124

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/Components/Header/Header.js +2 -1
  2. package/dist/Components/KanbanBoard/KanbanBoard.js +3 -1
  3. package/dist/Components/SideBar/SecondaryBar.d.ts +1 -12
  4. package/dist/Components/SideBar/SecondaryBar.js +49 -43
  5. package/dist/Components/SideBar/SideBar.js +55 -25
  6. package/dist/Components/SideBar/SideBarProps.d.ts +11 -0
  7. package/dist/Components/SideBar/components/MenuItemBox.js +2 -2
  8. package/dist/Components/SideBar/components/MenuPopoverContent.js +1 -1
  9. package/dist/Constants/Sidebar.d.ts +1 -0
  10. package/dist/Constants/Sidebar.js +2 -1
  11. package/package.json +1 -1
package/dist/Components/Header/Header.js CHANGED
@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = require("@chakra-ui/react");
30
+ var Sidebar_1 = require("../../Constants/Sidebar");
30
31
  var lucide_react_1 = require("lucide-react");
31
32
  var react_2 = __importStar(require("react"));
32
33
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
@@ -52,7 +53,7 @@ var Header = function (_a) {
52
53
  ? react_2.default.cloneElement(rightSlot, { closeMobileMenu: closeMobileMenu })
53
54
  : rightSlot;
54
55
  return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky" },
55
- react_2.default.createElement(react_1.Flex, { minH: 16, align: "center", mx: "auto", justifyContent: "flex-start" },
56
+ react_2.default.createElement(react_1.Flex, { h: Sidebar_1.HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start" },
56
57
  react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center" },
57
58
  react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
58
59
  react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText })),
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -55,6 +55,7 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
55
55
  var AccountCard_1 = __importDefault(require("./AccountCard"));
56
56
  var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
57
57
  var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
58
+ var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
58
59
  var KanbanBoard = function (_a) {
59
60
  var _b, _c, _d, _e, _f, _g, _h;
60
61
  var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions;
@@ -219,7 +220,8 @@ var KanbanBoard = function (_a) {
219
220
  ? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
220
221
  : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
221
222
  react_1.default.createElement(react_2.Flex, { width: "95%", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_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], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
222
- react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
223
+ react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700], noOfLines: 1 },
224
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
223
225
  canDelete && hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
224
226
  !(canDelete && hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
225
227
  react_1.default.createElement(react_2.Box, { px: 2,
package/dist/Components/SideBar/SecondaryBar.d.ts CHANGED
@@ -1,15 +1,4 @@
1
1
  import React from "react";
2
- import { MenuProps } from "./SideBarProps";
3
- type SecondaryBarProps = {
4
- items?: MenuProps[];
5
- defaultCollapsed?: boolean;
6
- collapsedWidth?: string | number;
7
- expandedWidth?: string | number;
8
- headerFontSize?: string;
9
- itemFontSize?: string;
10
- selected?: string | number | null;
11
- onItemClick?: (item: MenuProps) => void;
12
- title?: string;
13
- };
2
+ import { SecondaryBarProps } from "./SideBarProps";
14
3
  declare const SecondaryBar: React.FC<SecondaryBarProps>;
15
4
  export default SecondaryBar;
package/dist/Components/SideBar/SecondaryBar.js CHANGED
@@ -32,58 +32,64 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
32
32
  var lucide_react_1 = require("lucide-react");
33
33
  var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
34
34
  var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
35
+ var parseBadge = function (badge) {
36
+ var _a, _b, _c;
37
+ return ({
38
+ badgeVal: badge === null || badge === void 0 ? void 0 : badge.count,
39
+ colorScheme: (_a = badge === null || badge === void 0 ? void 0 : badge.color) !== null && _a !== void 0 ? _a : "teal",
40
+ radius: (_b = badge === null || badge === void 0 ? void 0 : badge.radius) !== null && _b !== void 0 ? _b : "full",
41
+ variant: (_c = badge === null || badge === void 0 ? void 0 : badge.variant) !== null && _c !== void 0 ? _c : "subtle",
42
+ });
43
+ };
44
+ var CollapsedItem = function (_a) {
45
+ var item = _a.item, isActive = _a.isActive, itemFontSize = _a.itemFontSize, onItemClick = _a.onItemClick;
46
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
47
+ var _b = parseBadge(item.badge), badgeVal = _b.badgeVal, colorScheme = _b.colorScheme, radius = _b.radius, variant = _b.variant;
48
+ return (react_1.default.createElement(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
49
+ react_1.default.createElement(react_2.PopoverTrigger, null,
50
+ react_1.default.createElement(react_2.Box, { py: "0.75rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, color: theme.colors.white, _hover: { bg: item.disabled ? "transparent" : theme.colors.primary[700] }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, bg: isActive ? theme.colors.primary[600] : "transparent" },
51
+ react_1.default.createElement(react_2.Box, { position: "relative" },
52
+ react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem" }),
53
+ badgeVal != null && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))))),
54
+ react_1.default.createElement(react_2.Portal, null,
55
+ react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none' },
56
+ react_1.default.createElement(react_2.PopoverBody, { p: "0.75rem" },
57
+ react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between" },
58
+ react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0 },
59
+ react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }),
60
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p" }, item.title)),
61
+ badgeVal != null && (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal))))))));
62
+ };
63
+ var ExpandedItem = function (_a) {
64
+ var item = _a.item, isActive = _a.isActive, itemFontSize = _a.itemFontSize, onItemClick = _a.onItemClick;
65
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
66
+ var _b = parseBadge(item.badge), badgeVal = _b.badgeVal, colorScheme = _b.colorScheme, radius = _b.radius, variant = _b.variant;
67
+ return (react_1.default.createElement(react_2.Flex, { px: "1rem", py: "0.75rem", align: "center", justify: "space-between", gap: "0.5rem", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary[600] : "transparent", _hover: { bg: item.disabled ? "transparent" : theme.colors.primary[700] }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, color: theme.colors.white, borderLeft: isActive ? "0.188rem solid ".concat(theme.colors.background[300]) : "0.188rem solid transparent" },
68
+ react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, overflow: "hidden" },
69
+ react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem", flexShrink: 0 }),
70
+ react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
71
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 600, as: "p" }, item.title))),
72
+ badgeVal != null && (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal))));
73
+ };
35
74
  var SecondaryBar = function (_a) {
36
- var _b, _c, _d;
37
- var _e = _a.items, items = _e === void 0 ? [] : _e, _f = _a.defaultCollapsed, defaultCollapsed = _f === void 0 ? true : _f, _g = _a.collapsedWidth, collapsedWidth = _g === void 0 ? "3.5rem" : _g, _h = _a.expandedWidth, expandedWidth = _h === void 0 ? "10rem" : _h, _j = _a.headerFontSize, headerFontSize = _j === void 0 ? "0.95rem" : _j, _k = _a.itemFontSize, itemFontSize = _k === void 0 ? "0.875rem" : _k, selected = _a.selected, onItemClick = _a.onItemClick, title = _a.title;
75
+ var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.defaultCollapsed, defaultCollapsed = _c === void 0 ? true : _c, _d = _a.collapsedWidth, collapsedWidth = _d === void 0 ? "3.5rem" : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? "10rem" : _e, _f = _a.headerFontSize, headerFontSize = _f === void 0 ? "0.95rem" : _f, _g = _a.itemFontSize, itemFontSize = _g === void 0 ? "0.875rem" : _g, selected = _a.selected, onItemClick = _a.onItemClick, title = _a.title;
38
76
  var theme = (0, useCustomTheme_1.useCustomTheme)();
39
- var _l = (0, react_1.useState)(defaultCollapsed), collapsed = _l[0], setCollapsed = _l[1];
77
+ var _h = (0, react_1.useState)(defaultCollapsed), collapsed = _h[0], setCollapsed = _h[1];
40
78
  var width = collapsed ? collapsedWidth : expandedWidth;
41
- var showText = !collapsed;
42
- return (react_1.default.createElement(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: (_d = (_c = (_b = theme.colors.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : theme.colors.gray[800], boxShadow: theme.shadows.md, zIndex: 1 },
79
+ return (react_1.default.createElement(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[200], boxShadow: theme.shadows.md, zIndex: 1 },
43
80
  react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0 },
44
- react_1.default.createElement(react_2.Flex, { align: "center", justify: showText ? "space-between" : "center", px: showText ? "0.75rem" : 0, h: "3.91rem", overflow: "hidden" },
45
- showText ? (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, mr: "0.5rem" },
46
- react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 700, color: theme.colors.white, as: "p" }, title !== null && title !== void 0 ? title : ""))) : null,
81
+ react_1.default.createElement(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "0.75rem", h: "4rem", overflow: "hidden" },
82
+ !collapsed && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, mr: "0.5rem" },
83
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 700, color: theme.colors.white, as: "p" }, title !== null && title !== void 0 ? title : ""))),
47
84
  react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "100%", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { return setCollapsed(function (c) { return !c; }); } }, collapsed ? (react_1.default.createElement(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right" },
48
85
  react_1.default.createElement(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.white }))) : (react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.white })))),
49
- react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[300] }),
86
+ react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[500] }),
50
87
  react_1.default.createElement(react_2.Box, { id: "secondary-scroll-container", flex: "1", overflowY: "auto", overflowX: "hidden" }, items.map(function (item) {
51
- var _a, _b, _c, _d, _e;
88
+ var _a;
52
89
  var isActive = String(selected) === String(item.id) ||
53
90
  String(selected) === String(item.title);
54
- var isObj = typeof item.badge === "object" && item.badge !== null;
55
- var badgeVal = isObj ? item.badge.count : item.badge;
56
- var colorScheme = (_a = (isObj ? item.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
57
- var radius = (_b = (isObj ? item.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
58
- var variant = (_c = (isObj ? item.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
59
- if (!showText) {
60
- return (react_1.default.createElement(react_2.Popover, { key: String((_d = item.id) !== null && _d !== void 0 ? _d : item.title), trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
61
- react_1.default.createElement(react_2.PopoverTrigger, null,
62
- react_1.default.createElement(react_2.Box, { py: "0.625rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, color: theme.colors.white, _hover: {
63
- bg: item.disabled ? "transparent" : theme.colors.primary[700],
64
- }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); } },
65
- react_1.default.createElement(react_2.Box, { position: "relative" },
66
- react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem" }),
67
- badgeVal != null && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))))),
68
- react_1.default.createElement(react_2.Portal, null,
69
- react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white" },
70
- react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem" },
71
- react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between" },
72
- react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0 },
73
- react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }),
74
- react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p" }, item.title)),
75
- badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null))))));
76
- }
77
- return (react_1.default.createElement(react_2.Flex, { key: String((_e = item.id) !== null && _e !== void 0 ? _e : item.title), px: "1rem", py: "0.625rem", align: "center", justify: "space-between", gap: "0.5rem", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary[600] : "transparent", _hover: {
78
- bg: item.disabled ? "transparent" : theme.colors.primary[700],
79
- }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, color: theme.colors.white, borderLeft: isActive
80
- ? "0.188rem solid ".concat(theme.colors.background[300])
81
- : "0.188rem solid transparent" },
82
- react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, overflow: "hidden" },
83
- react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem", flexShrink: 0 }),
84
- react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
85
- react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 600, as: "p" }, item.title))),
86
- badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null));
91
+ var key = String((_a = item.id) !== null && _a !== void 0 ? _a : item.title);
92
+ return collapsed ? (react_1.default.createElement(CollapsedItem, { key: key, item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick })) : (react_1.default.createElement(ExpandedItem, { key: key, item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick }));
87
93
  })))));
88
94
  };
89
95
  exports.default = SecondaryBar;
package/dist/Components/SideBar/SideBar.js CHANGED
@@ -23,9 +23,55 @@ var MenuItems_1 = __importDefault(require("./components/MenuItems"));
23
23
  var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
24
24
  var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
25
25
  var SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
26
+ var SidebarHeader = function (_a) {
27
+ var logo = _a.logo, companyName = _a.companyName, toggle = _a.toggle, isLoading = _a.isLoading;
28
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
29
+ if (isLoading) {
30
+ return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
31
+ react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
32
+ react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
33
+ react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
34
+ }
35
+ if (logo) {
36
+ return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
37
+ react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
38
+ !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))));
39
+ }
40
+ return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
41
+ react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
42
+ react_1.default.createElement(defaultLogo_1.default, null)),
43
+ !toggle && (react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, lineHeight: 2, as: "p" }, companyName !== null && companyName !== void 0 ? companyName : ""))));
44
+ };
45
+ var SkeletonMenuRow = function (_a) {
46
+ var toggle = _a.toggle;
47
+ return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
48
+ react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
49
+ react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
50
+ react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
51
+ };
52
+ var AddNewButton = function (_a) {
53
+ var toggle = _a.toggle, isLoading = _a.isLoading, onClick = _a.onClick;
54
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
55
+ if (isLoading) {
56
+ return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
57
+ react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" })));
58
+ }
59
+ return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onClick },
60
+ react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
61
+ react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
62
+ react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")));
63
+ };
64
+ var CollapseButton = function (_a) {
65
+ var toggle = _a.toggle, onToggle = _a.onToggle;
66
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
67
+ return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
68
+ react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: theme.colors.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
69
+ react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse")));
70
+ };
71
+ // --- Main Sidebar component ---
26
72
  function Sidebar(_a) {
27
- var _b, _c;
28
- var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _d = _a.isDisableAddNew, isDisableAddNew = _d === void 0 ? false : _d, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
73
+ var _b;
74
+ var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
29
75
  var theme = (0, useCustomTheme_1.useCustomTheme)();
30
76
  var activeTop = menus.find(function (m) { return String(m.title) === String(activeMenu); }) ||
31
77
  menus.find(function (m) { return String(m.id) === String(activeMenu); });
@@ -33,31 +79,15 @@ function Sidebar(_a) {
33
79
  return (react_1.default.createElement(react_2.Box, { transition: "all 0.5s", position: "sticky", height: "100vh", boxShadow: theme.shadows.lg, display: "flex", background: theme.colors.sidebar.background[500] },
34
80
  react_1.default.createElement(react_2.Box, { width: toggle ? "4.688rem" : "13rem", transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between" },
35
81
  react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
36
- isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
37
- react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
38
- react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
39
- react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))) : (react_1.default.createElement(react_2.Box, null, logo ? (react_1.default.createElement(react_2.Flex, { h: "4.688rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
40
- react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
41
- !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName)))) : (react_1.default.createElement(react_2.Flex, { h: "3.91rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
42
- react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
43
- react_1.default.createElement(defaultLogo_1.default, null)),
44
- !toggle && (react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, lineHeight: 2, as: "p" }, companyName !== null && companyName !== void 0 ? companyName : "")))))),
82
+ react_1.default.createElement(SidebarHeader, { logo: logo, companyName: companyName, toggle: toggle, isLoading: isLoading }),
45
83
  react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
46
84
  react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
47
- react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
48
- react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
49
- react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
50
- react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
85
+ react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading
86
+ ? Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(SkeletonMenuRow, { key: i, toggle: toggle })); })
87
+ : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
51
88
  react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
52
- !isDisableAddNew &&
53
- (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
54
- react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
55
- react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
56
- react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
57
- react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
58
- react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
59
- react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
60
- react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))),
61
- secondaryItems.length ? (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title })) : null));
89
+ !isDisableAddNew && (react_1.default.createElement(AddNewButton, { toggle: toggle, isLoading: isLoading, onClick: onAddNewClick })),
90
+ react_1.default.createElement(CollapseButton, { toggle: toggle, onToggle: changeToggle })))),
91
+ secondaryItems.length > 0 && (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title }))));
62
92
  }
63
93
  exports.default = Sidebar;
package/dist/Components/SideBar/SideBarProps.d.ts CHANGED
@@ -38,3 +38,14 @@ export type RenderMenuType = {
38
38
  selectedSubMenu?: string | null;
39
39
  selectedSecondaryItem?: string | number | null;
40
40
  };
41
+ export type SecondaryBarProps = {
42
+ items?: MenuProps[];
43
+ defaultCollapsed?: boolean;
44
+ collapsedWidth?: string | number;
45
+ expandedWidth?: string | number;
46
+ headerFontSize?: string;
47
+ itemFontSize?: string;
48
+ selected?: string | number | null;
49
+ onItemClick?: (item: MenuProps) => void;
50
+ title?: string;
51
+ };
package/dist/Components/SideBar/components/MenuItemBox.js CHANGED
@@ -86,8 +86,8 @@ var MenuItemBox = function (_a) {
86
86
  react_1.default.createElement(react_2.PopoverTrigger, null,
87
87
  react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title) }), buttonContent)),
88
88
  react_1.default.createElement(react_2.Portal, null,
89
- react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
90
- react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem", color: "white" },
89
+ react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
90
+ react_1.default.createElement(react_2.PopoverBody, { p: "0.625rem", color: "white" },
91
91
  react_1.default.createElement(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }))))));
92
92
  }
93
93
  return (react_1.default.createElement(react_1.default.Fragment, null,
package/dist/Components/SideBar/components/MenuPopoverContent.js CHANGED
@@ -32,7 +32,7 @@ var MenuPopoverContent = function (_a) {
32
32
  locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })), subMenu === null || subMenu === void 0 ? void 0 :
33
33
  subMenu.map(function (sub) {
34
34
  var isSubActive = activeMenu === sub.id;
35
- return (react_1.default.createElement(react_2.Flex, { key: sub.id || sub.title, onClick: function () { return !sub.disabled && (handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub)); }, px: "1rem", py: "0.5rem", align: "center", justify: "space-between", gap: "0.75rem", _hover: {
35
+ return (react_1.default.createElement(react_2.Flex, { key: sub.id || sub.title, onClick: function () { return !sub.disabled && (handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub)); }, px: "1rem", py: "0.7rem", align: "center", justify: "space-between", gap: "0.75rem", _hover: {
36
36
  bg: !sub.disabled ? theme.colors.primary[500] : "transparent",
37
37
  cursor: !sub.disabled ? "pointer" : "not-allowed",
38
38
  }, bg: isAnySubActive ? theme.colors.primary[500] : theme.colors.primary[700], borderLeft: isSubActive
package/dist/Constants/Sidebar.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export declare const HEADER_HEIGHT = "4.3rem";
1
2
  export declare const FlexCss: {
2
3
  "&::-webkit-scrollbar": {
3
4
  width: string;
package/dist/Constants/Sidebar.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.cssForScrollBar = exports.FlexCss = void 0;
3
+ exports.cssForScrollBar = exports.FlexCss = exports.HEADER_HEIGHT = void 0;
4
+ exports.HEADER_HEIGHT = "4.3rem";
4
5
  exports.FlexCss = {
5
6
  "&::-webkit-scrollbar": {
6
7
  width: "0.188rem",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.122",
3
+ "version": "2.2.124",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",