pixelize-design-library 2.3.6 → 2.3.8

package/dist/Components/SideBar/SideBar.js

@@ -1,165 +1,78 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Sidebar;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var Sidebar_1 = require("../../Constants/Sidebar");
-var lucide_react_1 = require("lucide-react");
-var MenuItems_1 = __importDefault(require("./components/MenuItems"));
-var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
-var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
-var SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
-var OtherApps_1 = __importDefault(require("./components/OtherApps"));
-var SidebarHeader = function (_a) {
-    var logo = _a.logo, companyName = _a.companyName, companySubtitle = _a.companySubtitle, toggle = _a.toggle, isLoading = _a.isLoading, onToggle = _a.onToggle;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Sidebar_1 = require("../../Constants/Sidebar");
+const lucide_react_1 = require("lucide-react");
+const MenuItems_1 = __importDefault(require("./components/MenuItems"));
+const defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
+const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
+const SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
+const OtherApps_1 = __importDefault(require("./components/OtherApps"));
+const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {
-        return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%" },
-            react_1.default.createElement(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, w: "100%" },
-            react_1.default.createElement(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }),
-            react_1.default.createElement(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
     }
-    var logoNode = logo ? (react_1.default.createElement(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined })) : (react_1.default.createElement(react_2.Box, { bg: theme.colors.primary[500], color: theme.colors.white, borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined },
-        react_1.default.createElement(defaultLogo_1.default, null)));
-    return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0 },
-        logoNode,
-        !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%" }, companyName !== null && companyName !== void 0 ? companyName : ""),
-            companySubtitle && (react_1.default.createElement(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", lineHeight: "1.3", isTruncated: true }, companySubtitle)))),
-        !toggle && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: onToggle, "aria-label": "Collapse sidebar", w: "22px", h: "22px", borderRadius: "5px", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s" },
-            react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.white, opacity: 0.6 })))));
-};
-var SkeletonMenuRow = function (_a) {
-    var toggle = _a.toggle;
-    return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "center", gap: 4, justifyContent: "center" },
-        react_1.default.createElement(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "center", gap: 3 },
-        react_1.default.createElement(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }),
-        react_1.default.createElement(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
+    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[500], color: theme.colors.white, borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: onToggle, "aria-label": "Collapse sidebar", w: "22px", h: "22px", borderRadius: "5px", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.white, opacity: 0.6 }) }))] }));
 };
-var AddNewButton = function (_a) {
-    var toggle = _a.toggle, onClick = _a.onClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Flex, { role: "group", alignItems: "center", gap: "9px", px: "10px", py: "7px", borderRadius: "7px", cursor: "pointer", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick },
-        react_1.default.createElement(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
-            react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[300] })),
-        !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "12.5px", color: "whiteAlpha.900", fontWeight: "medium" }, "Add New"))));
+const SkeletonMenuRow = ({ toggle }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
+const AddNewButton = ({ toggle, onClick }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "group", alignItems: "center", gap: "9px", px: "10px", py: "7px", borderRadius: "7px", cursor: "pointer", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[300] }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12.5px", color: "whiteAlpha.900", fontWeight: "medium", children: "Add New" }))] }));
 };
-var deriveInitials = function (user) {
+const deriveInitials = (user) => {
     if (user.initials)
         return user.initials;
-    var parts = user.name.trim().split(/\s+/).filter(Boolean);
+    const parts = user.name.trim().split(/\s+/).filter(Boolean);
     if (parts.length === 0)
         return "";
     if (parts.length === 1)
         return parts[0].slice(0, 2).toUpperCase();
     return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 };
-var UserFooter = function (_a) {
-    var user = _a.user, toggle = _a.toggle;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var avatar = user.avatarUrl ? (react_1.default.createElement(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : (react_1.default.createElement(react_2.Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: theme.colors.primary[300], display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px", fontWeight: 600, flexShrink: 0 }, deriveInitials(user)));
-    return (react_1.default.createElement(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", flexShrink: 0 },
-        react_1.default.createElement(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: "8px", px: "8px", py: "6px", w: "100%", borderRadius: "7px", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s" },
-            avatar,
-            !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, textAlign: "left" },
-                react_1.default.createElement(react_2.Text, { fontSize: "11.5px", fontWeight: 500, color: "whiteAlpha.800", isTruncated: true }, user.name),
-                user.role && (react_1.default.createElement(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", isTruncated: true }, user.role)))),
-            !toggle && react_1.default.createElement(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.white, opacity: 0.3 }))));
+const UserFooter = ({ user, toggle }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: theme.colors.primary[300], display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px", fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: "8px", px: "8px", py: "6px", w: "100%", borderRadius: "7px", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s", children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", fontWeight: 500, color: "whiteAlpha.800", isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.white, opacity: 0.3 })] }) }));
 };
-var CollapseButton = function (_a) {
-    var toggle = _a.toggle, onToggle = _a.onToggle;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "6px", flexShrink: 0 },
-        react_1.default.createElement(react_2.Flex, { alignItems: "center", justifyContent: "center", gap: "7px", px: "8px", py: "5px", borderRadius: "6px", cursor: "pointer", w: toggle ? "auto" : "100%", mx: toggle ? "auto" : 0, bg: "whiteAlpha.100", onClick: onToggle, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s" },
-            toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 14, color: theme.colors.white, opacity: 0.6 })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 14, color: theme.colors.white, opacity: 0.6 })),
-            !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "11.5px", color: "whiteAlpha.700", fontWeight: "medium" }, "Collapse")))));
+const CollapseButton = ({ toggle, onToggle }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", justifyContent: "center", gap: "7px", px: "8px", py: "5px", borderRadius: "6px", cursor: "pointer", w: toggle ? "auto" : "100%", mx: toggle ? "auto" : 0, bg: "whiteAlpha.100", onClick: onToggle, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: [toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: theme.colors.white, opacity: 0.6 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: theme.colors.white, opacity: 0.6 })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", color: "whiteAlpha.700", fontWeight: "medium", children: "Collapse" }))] }) }));
 };
 // --- Main Sidebar component ---
-function Sidebar(_a) {
-    var _b;
-    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, companySubtitle = _a.companySubtitle, user = _a.user, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines, _d = _a.open, open = _d === void 0 ? true : _d, otherApps = _a.otherApps;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, }) {
+    var _a;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Refs let the effects read the latest values without adding them to dep arrays,
     // which would cause infinite toggle loops since changeToggle flips state.
-    var toggleRef = (0, react_1.useRef)(toggle);
+    const toggleRef = (0, react_1.useRef)(toggle);
     toggleRef.current = toggle;
-    var changeToggleRef = (0, react_1.useRef)(changeToggle);
+    const changeToggleRef = (0, react_1.useRef)(changeToggle);
     changeToggleRef.current = changeToggle;
-    var activeTop = menus.find(function (m) { return String(m.title) === String(activeMenu); }) ||
-        menus.find(function (m) { return String(m.id) === String(activeMenu); });
-    var secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
+    const activeTop = menus.find((m) => String(m.title) === String(activeMenu)) ||
+        menus.find((m) => String(m.id) === String(activeMenu));
+    const secondaryItems = (_a = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _a !== void 0 ? _a : [];
     // Sync toggle with external `open` prop.
     // `open=false` → collapsed (toggle=true); `open=true` → expanded (toggle=false).
-    (0, react_1.useEffect)(function () {
-        var shouldBeCollapsed = !open;
+    (0, react_1.useEffect)(() => {
+        const shouldBeCollapsed = !open;
         if (shouldBeCollapsed !== toggleRef.current) {
             changeToggleRef.current();
         }
     }, [open]);
     // Auto-collapse the main sidebar whenever a secondary panel is active.
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (secondaryItems.length > 0 && !toggleRef.current) {
             changeToggleRef.current();
         }
-    }, [secondaryItems.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    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], borderRight: "1px solid", borderColor: "whiteAlpha.100" },
-        react_1.default.createElement(react_2.Box, { width: toggle ? "4.688rem" : "13rem", transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between" },
-            react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", h: "100vh" },
-                react_1.default.createElement(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: toggle, isLoading: isLoading, onToggle: changeToggle }),
-                react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(SkeletonMenuRow, { key: i, toggle: toggle })); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
-                react_1.default.createElement(react_2.Box, { flexShrink: 0 },
-                    !isDisableAddNew && (react_1.default.createElement(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px" },
-                        react_1.default.createElement(AddNewButton, { toggle: toggle, onClick: onAddNewClick }))),
-                    react_1.default.createElement(OtherApps_1.default, { toggle: toggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }),
-                    user && react_1.default.createElement(UserFooter, { user: user, toggle: toggle }),
-                    react_1.default.createElement(CollapseButton, { toggle: toggle, onToggle: changeToggle })))),
-        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, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon }))));
+    }, [secondaryItems.length]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { transition: "all 0.5s", position: "sticky", height: "100vh", boxShadow: theme.shadows.lg, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { width: toggle ? "4.688rem" : "13rem", transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", h: "100vh", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: toggle, isLoading: isLoading, onToggle: changeToggle }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: { ...Sidebar_1.FlexCss, transition: "all 0.3s ease" }, children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => ((0, jsx_runtime_1.jsx)(SkeletonMenuRow, { toggle: toggle }, i)))) : ((0, jsx_runtime_1.jsx)(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (() => { }), toggle: toggle, selectedSubMenu: selectedSubMenu })) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flexShrink: 0, children: [!isDisableAddNew && ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", children: (0, jsx_runtime_1.jsx)(AddNewButton, { toggle: toggle, onClick: onAddNewClick }) })), (0, jsx_runtime_1.jsx)(OtherApps_1.default, { toggle: toggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && (0, jsx_runtime_1.jsx)(UserFooter, { user: user, toggle: toggle }), (0, jsx_runtime_1.jsx)(CollapseButton, { toggle: toggle, onToggle: changeToggle })] })] }) }), secondaryItems.length > 0 && ((0, jsx_runtime_1.jsx)(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, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon }))] }));
 }

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -1,3 +1,4 @@
+import type { ElementType } from "react";
 export type SidebarUser = {
     name: string;
     role?: string;
@@ -28,7 +29,7 @@ export type SidebarProps = {
 export type MenuProps = {
     id: string | number;
     title: string;
-    icon?: any;
+    icon?: ElementType;
     url: string;
     disabled?: boolean;
     locked?: boolean;
@@ -60,7 +61,7 @@ export type SecondaryBarProps = {
     selected?: string | number | null;
     onItemClick?: (item: MenuProps) => void;
     title?: string;
-    icon?: any;
+    icon?: ElementType;
 };
 export type OtherAppsProps = {
     toggle: boolean;
@@ -72,3 +73,4 @@ export type OtherAppsProps = {
         icon?: React.ReactNode;
     }[];
 };
+//# sourceMappingURL=SideBarProps.d.ts.map

package/dist/Components/SideBar/SideBarProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarProps.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SideBarProps.tsx"],"names":[],"mappings":"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"}

package/dist/Components/SideBar/Sidebar.stories.d.ts

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=Sidebar.stories.d.ts.map

package/dist/Components/SideBar/Sidebar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/Sidebar.stories.tsx"],"names":[],"mappings":"AA+EA,OAAO,EAAE,CAAC"}

package/dist/Components/SideBar/components/MenuItemBox.d.ts

@@ -11,3 +11,4 @@ interface Props {
 }
 declare const MenuItemBox: React.FC<Props>;
 export default MenuItemBox;
+//# sourceMappingURL=MenuItemBox.d.ts.map

package/dist/Components/SideBar/components/MenuItemBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemBox.d.ts","sourceRoot":"","sources":["../../../../src/Components/SideBar/components/MenuItemBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAO5C,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqShC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/SideBar/components/MenuItemBox.js

@@ -1,42 +1,33 @@
 "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 };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var TextTruncation_1 = __importDefault(require("./TextTruncation"));
-var MenuItemBox = function (_a) {
-    var _b, _c, _d, _e;
-    var menu = _a.menu, activeMenu = _a.activeMenu, toggle = _a.toggle, handleClick = _a.handleClick, isOpen = _a.isOpen, onToggle = _a.onToggle;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var title = menu.title, icon = menu.icon, disabled = menu.disabled, locked = menu.locked, badge = menu.badge, subMenu = menu.subMenu;
-    var hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
-    var isBadgeObj = typeof badge === "object" && badge !== null;
-    var badgeValue = isBadgeObj ? badge.count : badge;
-    var hasSubmenuBadge = (_b = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) {
-        var isObj = typeof sub.badge === "object" && sub.badge !== null;
-        var value = isObj ? sub.badge.count : sub.badge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const TextTruncation_1 = __importDefault(require("./TextTruncation"));
+const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, }) => {
+    var _a, _b, _c, _d, _e;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { title, icon, disabled, locked, badge, subMenu } = menu;
+    const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    const badgeConfig = typeof badge === "object" && badge !== null ? badge : null;
+    const badgeValue = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+    const hasSubmenuBadge = (_b = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => {
+        var _a;
+        const subCfg = typeof sub.badge === "object" && sub.badge !== null
+            ? sub.badge
+            : null;
+        const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
         return value != null;
     })) !== null && _b !== void 0 ? _b : false;
-    var isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) { return sub.id === activeMenu; });
-    var isParentActive = activeMenu === menu.id;
-    var isAnyActive = isParentActive || isChildActive;
-    var handleToggleSubMenu = function (e) {
+    const isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => sub.id === activeMenu);
+    const isParentActive = activeMenu === menu.id;
+    const isAnyActive = isParentActive || isChildActive;
+    const handleToggleSubMenu = (e) => {
         if (!disabled && hasSubMenu) {
             onToggle === null || onToggle === void 0 ? void 0 : onToggle(menu, e === null || e === void 0 ? void 0 : e.clientY);
             return;
@@ -46,7 +37,7 @@ var MenuItemBox = function (_a) {
     };
     // Pill-style nav item. Active items use a translucent-purple fill + a left
     // accent bar; idle items rely on a subtle white-overlay hover.
-    var commonStyles = {
+    const commonStyles = {
         role: "group",
         w: "100%",
         borderRadius: "7px",
@@ -68,59 +59,45 @@ var MenuItemBox = function (_a) {
         opacity: disabled ? 0.6 : 1,
         transition: "background 0.12s",
     };
-    var buttonContent = (react_1.default.createElement(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between" },
-        react_1.default.createElement(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden" },
-            react_1.default.createElement(react_2.Box, { position: "relative", display: "flex", alignItems: "center" },
-                react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1rem", verticalAlign: "middle", color: isAnyActive ? theme.colors.primary[300] : "whiteAlpha.800", _groupHover: isAnyActive ? undefined : { color: "white" }, transition: "color 0.12s" }),
-                toggle && (badgeValue != null || hasSubmenuBadge) && (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] }))),
-            !toggle && (react_1.default.createElement(TextTruncation_1.default, { open: isOpen, fontSize: "13px", lineHeight: "1", flex: "1", color: isAnyActive ? theme.colors.primary[100] : "whiteAlpha.900", fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: "white" } }, title))),
-        !toggle && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.375rem" },
-            (function () {
-                var _a, _b, _c;
-                var value = badgeValue;
-                var colorScheme = (_a = (isBadgeObj ? badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
-                var radius = (_b = (isBadgeObj ? badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
-                var variant = (_c = (isBadgeObj ? badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
-                return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
-            })(),
-            locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" }),
-            hasSubMenu && (react_1.default.createElement(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", color: "whiteAlpha.400", onClick: function (e) {
-                    e.stopPropagation();
-                    handleToggleSubMenu(e);
-                } }))))));
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "1rem", verticalAlign: "middle", color: isAnyActive ? theme.colors.primary[300] : "whiteAlpha.800", _groupHover: isAnyActive ? undefined : { color: "white" }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
+                    // open={isOpen}
+                    , { 
+                        // open={isOpen}
+                        fontSize: "13px", lineHeight: "1", flex: "1", color: isAnyActive ? theme.colors.primary[100] : "whiteAlpha.900", fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: "white" }, children: title }))] }), !toggle && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "0.375rem", children: [(() => {
+                        var _a, _b, _c;
+                        const value = badgeValue;
+                        const colorScheme = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.color) !== null && _a !== void 0 ? _a : "teal";
+                        const radius = (_b = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.radius) !== null && _b !== void 0 ? _b : "full";
+                        const variant = (_c = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.variant) !== null && _c !== void 0 ? _c : "subtle";
+                        return value != null ? ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                    })(), locked && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", color: "whiteAlpha.400", onClick: (e) => {
+                            e.stopPropagation();
+                            handleToggleSubMenu(e);
+                        } }))] }))] }));
     if (toggle) {
         // Collapsed sidebar: show Popover
-        return (react_1.default.createElement(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
-            react_1.default.createElement(react_2.PopoverTrigger, null,
-                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)),
-            react_1.default.createElement(react_2.Portal, null,
-                react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
-                    react_1.default.createElement(react_2.PopoverBody, { p: "0.625rem", color: "white" },
-                        react_1.default.createElement(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }))))));
+        return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { ...commonStyles, onClick: (e) => handleToggleSubMenu(e), "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), (0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: "0.625rem", color: "white", children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title) }), buttonContent),
-        hasSubMenu && (react_1.default.createElement(react_2.Collapse, { in: isOpen, animateOpacity: true },
-            react_1.default.createElement(react_2.Box, { "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
-                    transition: "opacity 0.28s ease, transform 0.28s ease",
-                    opacity: isOpen ? 1 : 0,
-                    transform: isOpen ? "translateY(0)" : "translateY(-6px)",
-                } }, subMenu.map(function (sub, sIdx) {
-                var _a, _b;
-                var isSubActive = activeMenu === sub.id;
-                return (react_1.default.createElement(react_2.Box, { key: "".concat(String((_b = (_a = sub.id) !== null && _a !== void 0 ? _a : sub.title) !== null && _b !== void 0 ? _b : sIdx), "-").concat(sIdx), role: "group", py: "5px", pl: "30px", pr: "10px", borderRadius: "6px", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: function () { return !sub.disabled && (handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub)); }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", transition: "background 0.12s" },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1" },
-                        sub.icon ? (react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? theme.colors.primary[300] : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" })) : (react_1.default.createElement(react_2.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? theme.colors.primary[300] : "whiteAlpha.500", _groupHover: isSubActive ? undefined : { bg: "whiteAlpha.700" }, transition: "background 0.12s" })),
-                        react_1.default.createElement(TextTruncation_1.default, { fontSize: "12px", fontWeight: isSubActive ? 600 : 500, lineHeight: "1", open: isOpen, color: isSubActive ? "whiteAlpha.900" : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" } }, sub.title)),
-                    sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })) : (function () {
-                        var _a, _b, _c;
-                        var isObj = typeof sub.badge === "object" && sub.badge !== null;
-                        var value = isObj ? sub.badge.count : sub.badge;
-                        var colorScheme = (_a = (isObj ? sub.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
-                        var radius = (_b = (isObj ? sub.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
-                        var variant = (_c = (isObj ? sub.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
-                        return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
-                    })()));
-            }))))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { ...commonStyles, onClick: (e) => handleToggleSubMenu(e), "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
+                        transition: "opacity 0.28s ease, transform 0.28s ease",
+                        opacity: isOpen ? 1 : 0,
+                        transform: isOpen ? "translateY(0)" : "translateY(-6px)",
+                    }, children: subMenu.map((sub, sIdx) => {
+                        var _a, _b;
+                        const isSubActive = activeMenu === sub.id;
+                        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { role: "group", py: "5px", pl: "30px", pr: "10px", borderRadius: "6px", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: () => !sub.disabled && (handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub)), display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? theme.colors.primary[300] : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? theme.colors.primary[300] : "whiteAlpha.500", _groupHover: isSubActive ? undefined : { bg: "whiteAlpha.700" }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: "12px", fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
+                                            // open={isOpen}
+                                            color: isSubActive ? "whiteAlpha.900" : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })) : (() => {
+                                    var _a, _b, _c, _d;
+                                    const subCfg = typeof sub.badge === "object" && sub.badge !== null
+                                        ? sub.badge
+                                        : null;
+                                    const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+                                    const colorScheme = (_b = subCfg === null || subCfg === void 0 ? void 0 : subCfg.color) !== null && _b !== void 0 ? _b : "teal";
+                                    const radius = (_c = subCfg === null || subCfg === void 0 ? void 0 : subCfg.radius) !== null && _c !== void 0 ? _c : "full";
+                                    const variant = (_d = subCfg === null || subCfg === void 0 ? void 0 : subCfg.variant) !== null && _d !== void 0 ? _d : "subtle";
+                                    return value != null ? ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                                })()] }, `${String((_b = (_a = sub.id) !== null && _a !== void 0 ? _a : sub.title) !== null && _b !== void 0 ? _b : sIdx)}-${sIdx}`));
+                    }) }) }))] }));
 };
 exports.default = MenuItemBox;

package/dist/Components/SideBar/components/MenuItems.d.ts

@@ -2,3 +2,4 @@ import React from "react";
 import { RenderMenuType } from "../SideBarProps";
 declare const MenuItems: React.FC<RenderMenuType>;
 export default MenuItems;
+//# sourceMappingURL=MenuItems.d.ts.map

package/dist/Components/SideBar/components/MenuItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItems.d.ts","sourceRoot":"","sources":["../../../../src/Components/SideBar/components/MenuItems.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAa,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG5D,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6JvC,CAAC;AAEF,eAAe,SAAS,CAAC"}