@ck-ui/component-library 2.0.2 → 2.0.3

package/dist/components/Sidebar/Sidebar.js

@@ -1,28 +1,28 @@
-import { jsxs as N, jsx as e } from "react/jsx-runtime";
-import { useState as T, useMemo as b } from "react";
-import { CHAT_BOT_KEY as A } from "./Sidebar.constants.js";
-import { useModuleSwitch as H } from "./hooks/useModuleSwitch.js";
-import { MenuRenderer as I } from "./components/MenuRenderer/index.js";
-import { ExploreSection as K } from "./components/ExploreSection/index.js";
-import { ModuleSwitchButton as R } from "./components/ModuleSwitchButton/index.js";
-import { ContactUsButton as U } from "./components/ContactUsButton/index.js";
-import { GptCardWrapper as V } from "./components/GptCard/index.js";
-import { Loader as W } from "../Loader/index.js";
-import '../../assets/Sidebar-D5jVJ-ln.css';const Y = "_collapseMenu_drvuf_27", o = {
+import { jsxs as H, jsx as e } from "react/jsx-runtime";
+import { useState as I, useMemo as b } from "react";
+import { CHAT_BOT_KEY as K } from "./Sidebar.constants.js";
+import { useModuleSwitch as R } from "./hooks/useModuleSwitch.js";
+import { MenuRenderer as U } from "./components/MenuRenderer/index.js";
+import { ExploreSection as V } from "./components/ExploreSection/index.js";
+import { ModuleSwitchButton as W } from "./components/ModuleSwitchButton/index.js";
+import { ContactUsButton as Y } from "./components/ContactUsButton/index.js";
+import { GptCardWrapper as q } from "./components/GptCard/index.js";
+import { Loader as z } from "../Loader/index.js";
+import '../../assets/Sidebar-D5jVJ-ln.css';const D = "_collapseMenu_drvuf_27", o = {
   "custom-sidebar": "_custom-sidebar_drvuf_1",
   "sidebar-V2": "_sidebar-V2_drvuf_12",
   "no-chatbot-padding": "_no-chatbot-padding_drvuf_23",
-  collapseMenu: Y,
+  collapseMenu: D,
   "sidebar-list-wrapper": "_sidebar-list-wrapper_drvuf_31",
   "chatbot-open": "_chatbot-open_drvuf_36",
   "chatbot-collapse": "_chatbot-collapse_drvuf_43"
 };
-function q({
+function F({
   menuItems: d,
   currentPath: c,
   collapsed: t,
   multicloudExploreList: r,
-  moduleList: a,
+  moduleList: n,
   currentModuleId: h,
   userType: f,
   gptCardEnabled: m = !1,
@@ -37,50 +37,56 @@ function q({
   hidden: C = !1,
   className: B,
   renderFooter: j,
-  renderHeader: y
+  renderHeader: y,
+  showChildIcons: G = !1,
+  maxOpenParents: O,
+  maxOpenChildren: k
 }) {
-  const [_, G] = T(!0), { handleModuleSwitch: O } = H({ onModuleSwitch: g }), i = b(
+  const [_, x] = I(!0), { handleModuleSwitch: N } = R({ onModuleSwitch: g }), i = b(
     () => d.filter((p) => Object.keys(p).length > 0),
     [d]
-  ), n = b(
-    () => i.find((p) => p.key === A),
+  ), a = b(
+    () => i.find((p) => p.key === K),
     [i]
-  ), k = () => n && !t && m ? _ ? o["chatbot-open"] : o["chatbot-collapse"] : "";
+  ), T = () => a && !t && m ? _ ? o["chatbot-open"] : o["chatbot-collapse"] : "";
   if (C) return null;
-  const x = [
+  const A = [
     o["custom-sidebar"],
     o["sidebar-V2"],
     t ? o.collapseMenu : "",
-    k(),
-    n && !t ? "" : o["no-chatbot-padding"],
+    T(),
+    a && !t ? "" : o["no-chatbot-padding"],
     B || ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ N("div", { className: x, "data-testid": "sidebar", children: [
-    s && /* @__PURE__ */ e(W, { popup: !0 }),
+  return /* @__PURE__ */ H("div", { className: A, "data-testid": "sidebar", children: [
+    s && /* @__PURE__ */ e(z, { popup: !0 }),
     y?.(),
-    a && a.length > 0 && /* @__PURE__ */ e(
-      R,
+    n && n.length > 0 && /* @__PURE__ */ e(
+      W,
       {
-        modules: a,
+        modules: n,
         collapsed: t,
         currentModuleId: h,
         userType: f,
-        onModuleSwitch: O
+        onModuleSwitch: N
       }
     ),
     /* @__PURE__ */ e("div", { className: o["sidebar-list-wrapper"], children: /* @__PURE__ */ e(
-      I,
+      U,
       {
         menuItems: i,
         currentPath: c,
         collapsed: t,
         multicloudExploreList: r,
         onNavigate: u,
-        onMenuItemClick: w
+        onMenuItemClick: w,
+        showChildIcons: G,
+        maxOpenParents: O,
+        maxOpenChildren: k
       }
     ) }),
     r && r.length > 0 && /* @__PURE__ */ e(
-      K,
+      V,
       {
         exploreList: r,
         collapsed: t,
@@ -88,21 +94,21 @@ function q({
         cloudProviderIcons: M
       }
     ),
-    !s && m && n && /* @__PURE__ */ e(
-      V,
+    !s && m && a && /* @__PURE__ */ e(
+      q,
       {
-        item: n,
+        item: a,
         collapsed: t,
         currentPath: c,
         onNavigate: u,
         open: _,
-        onToggle: G,
+        onToggle: x,
         renderGptCard: l
       }
     ),
     j?.(),
     !s && /* @__PURE__ */ e(
-      U,
+      Y,
       {
         collapsed: t,
         contactUsUrl: S,
@@ -111,8 +117,8 @@ function q({
     )
   ] });
 }
-q.displayName = "Sidebar";
+F.displayName = "Sidebar";
 export {
-  q as Sidebar,
-  q as default
+  F as Sidebar,
+  F as default
 };

package/dist/components/Sidebar/components/CollapsedTooltip/index.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
-import "../../../../styles.module-V3iL6ubH.js";
-import { C as m } from "../../../../index-DKHB_5Ee.js";
+import "../../../../styles.module-xqgv3wwP.js";
+import { C as m } from "../../../../index-CSxlVCTW.js";
 export {
   m as CollapsedTooltip
 };

package/dist/components/Sidebar/components/MenuItemWrapper/index.js

@@ -1,34 +1,35 @@
 import { jsxs as u, jsx as r } from "react/jsx-runtime";
 import { IconRenderer as f } from "../IconRenderer/index.js";
-import { addBreakOpportunities as N } from "../../Sidebar.utils.js";
-import { s as e } from "../../../../styles.module-V3iL6ubH.js";
+import { addBreakOpportunities as h } from "../../Sidebar.utils.js";
+import { s as e } from "../../../../styles.module-xqgv3wwP.js";
 function $({
   item: n,
-  active: s,
-  collapsed: i,
-  icon: c = !0,
-  level: t = 0,
+  active: o,
+  collapsed: c,
+  icon: d = !0,
+  level: s = 0,
   onNavigate: m,
-  onMenuItemClick: d
+  onMenuItemClick: p
 }) {
-  const a = () => {
-    n.url && m(n.url), d?.(n);
-  }, p = t > 0 && s, l = t > 0 ? 15 + (t - 1) * 16 : 0;
+  const t = () => {
+    n.url && m(n.url), p?.(n);
+  }, i = s > 0, l = i && o;
   return /* @__PURE__ */ u(
     "div",
     {
-      className: `${e["sidebar-menu-item"]} ${e["leaf-item"]} ${s ? e.active : ""}`,
-      onClick: a,
-      onKeyDown: (o) => {
-        (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a());
+      className: `${e["sidebar-menu-item"]} ${e["leaf-item"]} ${o ? e.active : ""} ${i ? e.nested : ""}`,
+      style: s > 1 ? { paddingLeft: `${12 + (s - 1) * 14}px` } : void 0,
+      onClick: t,
+      onKeyDown: (a) => {
+        (a.key === "Enter" || a.key === " ") && (a.preventDefault(), t());
       },
       role: "menuitem",
       tabIndex: 0,
-      "aria-current": s ? "page" : void 0,
+      "aria-current": o ? "page" : void 0,
       children: [
-        p && /* @__PURE__ */ r("span", { className: e["active-indicator"], style: { left: `-${l}px` } }),
-        c && /* @__PURE__ */ r("span", { className: e["menu-icon"], children: /* @__PURE__ */ r(f, { icon: n.icon }) }),
-        !i && /* @__PURE__ */ r("span", { className: e["menu-content"], children: N(n.name) })
+        l && /* @__PURE__ */ r("span", { className: e["active-indicator"] }),
+        d && /* @__PURE__ */ r("span", { className: e["menu-icon"], children: /* @__PURE__ */ r(f, { icon: n.icon }) }),
+        !c && /* @__PURE__ */ r("span", { className: e["menu-content"], children: h(n.name) })
       ]
     }
   );

package/dist/components/Sidebar/components/MenuRenderer/CollapsedMenu.js

@@ -1,9 +1,9 @@
 import { jsx as r, jsxs as c, Fragment as N } from "react/jsx-runtime";
 import { useCallback as h } from "react";
-import { C as m, p as n } from "../../../../index-DKHB_5Ee.js";
+import { C as m, p as n } from "../../../../index-CSxlVCTW.js";
 import { IconRenderer as t } from "../IconRenderer/index.js";
 import { addBreakOpportunities as u } from "../../Sidebar.utils.js";
-import { s as v } from "../../../../styles.module-V3iL6ubH.js";
+import { s as v } from "../../../../styles.module-xqgv3wwP.js";
 function $({ menuItems: f, isActive: l, isTreeActive: d, onNavigate: a, onMenuItemClick: s }) {
   const b = h((e, i) => {
     const o = e.dashboardServices && e.dashboardServices.length > 0, p = d(e);

package/dist/components/Sidebar/components/MenuRenderer/ExpandedMenu.d.ts

@@ -6,7 +6,13 @@ interface ExpandedMenuProps {
     isTreeActive: (item: MenuItem) => boolean;
     onNavigate: (path: string) => void;
     onMenuItemClick?: (item: MenuItem) => void;
+    /** Whether to show icons on child (nested) menu items. Defaults to true. */
+    showChildIcons?: boolean;
+    /** Max parent-level items that can be expanded simultaneously. Undefined = unlimited. */
+    maxOpenParents?: number;
+    /** Max child-level items (within a parent) that can be expanded simultaneously. Undefined = unlimited. */
+    maxOpenChildren?: number;
 }
-export declare function ExpandedMenu({ menuItems, currentPath, isActive, isTreeActive, onNavigate, onMenuItemClick }: ExpandedMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExpandedMenu({ menuItems, currentPath, isActive, isTreeActive, onNavigate, onMenuItemClick, showChildIcons, maxOpenParents, maxOpenChildren, }: ExpandedMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ExpandedMenu.d.ts.map

package/dist/components/Sidebar/components/MenuRenderer/ExpandedMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandedMenu.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Sidebar/components/MenuRenderer/ExpandedMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK/D,UAAU,iBAAiB;IACzB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IAC1C,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,EAAE,iBAAiB,2CAkD9H"}
+{"version":3,"file":"ExpandedMenu.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Sidebar/components/MenuRenderer/ExpandedMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK/D,UAAU,iBAAiB;IACzB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IAC1C,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3C,4EAA4E;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yFAAyF;IACzF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0GAA0G;IAC1G,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,eAAe,EACf,cAAqB,EACrB,cAAc,EACd,eAAe,GAChB,EAAE,iBAAiB,2CA4DnB"}

package/dist/components/Sidebar/components/MenuRenderer/ExpandedMenu.js

@@ -1,42 +1,59 @@
-import { jsx as n, Fragment as x } from "react/jsx-runtime";
-import { useMemo as v, useCallback as L } from "react";
-import { MenuItemWrapper as W } from "../MenuItemWrapper/index.js";
-import { SubMenuWrapper as y } from "../SubMenuWrapper/index.js";
-import { useMenuState as C } from "../../hooks/useMenuState.js";
-function m({ menuItems: e, currentPath: u, isActive: a, isTreeActive: s, onNavigate: d, onMenuItemClick: p }) {
-  const { openByLevel: c, toggleMenu: t } = C({ menuItems: e, currentPath: u }), h = v(
-    () => e.filter((r) => r.dashboardServices && r.dashboardServices.length > 0),
-    [e]
-  ), l = L((r, o = 0) => {
-    const g = r.dashboardServices && r.dashboardServices.length > 0, f = `${o}-${r.name}`, S = !!c[f], b = s(r), i = o === 0 && h.length === 1;
-    return g ? /* @__PURE__ */ n(
-      y,
+import { jsx as e, Fragment as y } from "react/jsx-runtime";
+import { useMemo as E, useCallback as T } from "react";
+import { MenuItemWrapper as $ } from "../MenuItemWrapper/index.js";
+import { SubMenuWrapper as j } from "../SubMenuWrapper/index.js";
+import { useMenuState as k } from "../../hooks/useMenuState.js";
+function O({
+  menuItems: n,
+  currentPath: g,
+  isActive: a,
+  isTreeActive: s,
+  onNavigate: c,
+  onMenuItemClick: d,
+  showChildIcons: p = !0,
+  maxOpenParents: b,
+  maxOpenChildren: i
+}) {
+  const { openByLevel: t, toggleMenu: h } = k({
+    menuItems: n,
+    currentPath: g,
+    maxOpenParents: b,
+    maxOpenChildren: i
+  }), u = E(
+    () => n.filter((r) => r.dashboardServices && r.dashboardServices.length > 0),
+    [n]
+  ), f = T((r, o = 0) => {
+    const M = r.dashboardServices && r.dashboardServices.length > 0, l = `${o}-${r.name}`, x = !!t[l], L = s(r), W = o === 0 && u.length === 1, S = o === 0 ? !0 : p;
+    return M ? /* @__PURE__ */ e(
+      j,
       {
         item: r,
-        isOpen: S,
-        active: b,
+        isOpen: x,
+        active: L,
         collapsed: !1,
         level: o,
-        isSingleTopLevel: i,
-        onToggle: () => t(f, o, r),
-        children: r.dashboardServices.map((M) => l(M, o + 1))
+        isSingleTopLevel: W,
+        showIcon: S,
+        onToggle: () => h(l, o, r),
+        children: r.dashboardServices.map((v) => f(v, o + 1))
       },
       r.name
-    ) : /* @__PURE__ */ n(
-      W,
+    ) : /* @__PURE__ */ e(
+      $,
       {
         item: r,
         active: a(r),
         collapsed: !1,
+        icon: S,
         level: o,
-        onNavigate: d,
-        onMenuItemClick: p
+        onNavigate: c,
+        onMenuItemClick: d
       },
       r.name
     );
-  }, [c, a, s, t, d, p, h]);
-  return /* @__PURE__ */ n(x, { children: e.map((r) => l(r, 0)) });
+  }, [t, a, s, h, c, d, u, p]);
+  return /* @__PURE__ */ e(y, { children: n.map((r) => f(r, 0)) });
 }
 export {
-  m as ExpandedMenu
+  O as ExpandedMenu
 };

package/dist/components/Sidebar/components/MenuRenderer/index.d.ts

@@ -6,7 +6,10 @@ interface MenuRendererProps {
     multicloudExploreList?: unknown[];
     onNavigate: (path: string) => void;
     onMenuItemClick?: (item: MenuItem) => void;
+    showChildIcons?: boolean;
+    maxOpenParents?: number;
+    maxOpenChildren?: number;
 }
-export declare function MenuRenderer({ menuItems, currentPath, collapsed, multicloudExploreList, onNavigate, onMenuItemClick }: MenuRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuRenderer({ menuItems, currentPath, collapsed, multicloudExploreList, onNavigate, onMenuItemClick, showChildIcons, maxOpenParents, maxOpenChildren }: MenuRendererProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Sidebar/components/MenuRenderer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Sidebar/components/MenuRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAQ/D,UAAU,iBAAiB;IACzB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,EAAE,CAAC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,EAAE,iBAAiB,2CAwCxI"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Sidebar/components/MenuRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAQ/D,UAAU,iBAAiB;IACzB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,EAAE,CAAC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,cAAqB,EAAE,cAAc,EAAE,eAAe,EAAE,EAAE,iBAAiB,2CAwChM"}

package/dist/components/Sidebar/components/MenuRenderer/index.js

@@ -1,29 +1,29 @@
-import { jsx as e, jsxs as _, Fragment as h } from "react/jsx-runtime";
-import { useActiveDetection as v } from "../../hooks/useActiveDetection.js";
-import { SectionLabel as y } from "../SectionLabel/index.js";
-import { MULTICLOUD_VIEW_KEY as S, CHAT_BOT_KEY as A } from "../../Sidebar.constants.js";
-import { CollapsedMenu as f } from "./CollapsedMenu.js";
-import { ExpandedMenu as a } from "./ExpandedMenu.js";
-import '../../../../assets/index-C6j9Ze5V.css';const p = {
+import { jsx as e, jsxs as v, Fragment as A } from "react/jsx-runtime";
+import { useActiveDetection as D } from "../../hooks/useActiveDetection.js";
+import { SectionLabel as T } from "../SectionLabel/index.js";
+import { MULTICLOUD_VIEW_KEY as j, CHAT_BOT_KEY as K } from "../../Sidebar.constants.js";
+import { CollapsedMenu as c } from "./CollapsedMenu.js";
+import { ExpandedMenu as _ } from "./ExpandedMenu.js";
+import '../../../../assets/index-C6j9Ze5V.css';const E = {
   "menu-renderer": "_menu-renderer_w3wyj_1"
 };
-function K({ menuItems: r, currentPath: l, collapsed: t, multicloudExploreList: u, onNavigate: i, onMenuItemClick: n }) {
-  const { isActive: m, isTreeActive: s } = v({ currentPath: l, allItems: r });
-  if (u && u.length > 0 && r.length > 0) {
-    const o = r.filter((d) => d.key === S), b = r.filter((d) => d.key !== S);
-    return /* @__PURE__ */ e("nav", { className: p["menu-renderer"], role: "menu", "aria-label": "Sidebar navigation", children: t ? /* @__PURE__ */ _(h, { children: [
-      /* @__PURE__ */ e(f, { menuItems: o, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: n }),
-      /* @__PURE__ */ e(y, { label: "Services", collapsed: t }),
-      /* @__PURE__ */ e(f, { menuItems: b, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: n })
-    ] }) : /* @__PURE__ */ _(h, { children: [
-      /* @__PURE__ */ e(a, { menuItems: o, currentPath: l, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: n }),
-      /* @__PURE__ */ e(y, { label: "Services", collapsed: t }),
-      /* @__PURE__ */ e(a, { menuItems: b, currentPath: l, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: n })
+function R({ menuItems: r, currentPath: n, collapsed: l, multicloudExploreList: a, onNavigate: i, onMenuItemClick: t, showChildIcons: u = !0, maxOpenParents: o, maxOpenChildren: d }) {
+  const { isActive: m, isTreeActive: s } = D({ currentPath: n, allItems: r });
+  if (a && a.length > 0 && r.length > 0) {
+    const f = r.filter((b) => b.key === j), S = r.filter((b) => b.key !== j);
+    return /* @__PURE__ */ e("nav", { className: E["menu-renderer"], role: "menu", "aria-label": "Sidebar navigation", children: l ? /* @__PURE__ */ v(A, { children: [
+      /* @__PURE__ */ e(c, { menuItems: f, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: t }),
+      /* @__PURE__ */ e(T, { label: "Services", collapsed: l }),
+      /* @__PURE__ */ e(c, { menuItems: S, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: t })
+    ] }) : /* @__PURE__ */ v(A, { children: [
+      /* @__PURE__ */ e(_, { menuItems: f, currentPath: n, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: t, showChildIcons: u, maxOpenParents: o, maxOpenChildren: d }),
+      /* @__PURE__ */ e(T, { label: "Services", collapsed: l }),
+      /* @__PURE__ */ e(_, { menuItems: S, currentPath: n, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: t, showChildIcons: u, maxOpenParents: o, maxOpenChildren: d })
     ] }) });
   }
-  const c = t ? r : r.filter((o) => o.key !== A);
-  return /* @__PURE__ */ e("nav", { className: p["menu-renderer"], role: "menu", "aria-label": "Sidebar navigation", children: t ? /* @__PURE__ */ e(f, { menuItems: c, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: n }) : /* @__PURE__ */ e(a, { menuItems: c, currentPath: l, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: n }) });
+  const y = l ? r : r.filter((f) => f.key !== K);
+  return /* @__PURE__ */ e("nav", { className: E["menu-renderer"], role: "menu", "aria-label": "Sidebar navigation", children: l ? /* @__PURE__ */ e(c, { menuItems: y, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: t }) : /* @__PURE__ */ e(_, { menuItems: y, currentPath: n, isActive: m, isTreeActive: s, onNavigate: i, onMenuItemClick: t, showChildIcons: u, maxOpenParents: o, maxOpenChildren: d }) });
 }
 export {
-  K as MenuRenderer
+  R as MenuRenderer
 };

package/dist/components/Sidebar/components/SubMenuWrapper/index.d.ts

@@ -7,9 +7,10 @@ interface SubMenuWrapperProps {
     collapsed: boolean;
     level: number;
     isSingleTopLevel?: boolean;
+    showIcon?: boolean;
     onToggle: () => void;
     children: ReactNode;
 }
-export declare function SubMenuWrapper({ item, isOpen, active, collapsed, level, isSingleTopLevel, onToggle, children }: SubMenuWrapperProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SubMenuWrapper({ item, isOpen, active, collapsed, level, isSingleTopLevel, showIcon, onToggle, children }: SubMenuWrapperProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Sidebar/components/SubMenuWrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Sidebar/components/SubMenuWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAInD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAwB,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,kDAuC3I"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Sidebar/components/SubMenuWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAInD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAwB,EAAE,QAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,kDAsC5J"}

package/dist/components/Sidebar/components/SubMenuWrapper/index.js

@@ -1,45 +1,49 @@
-import { jsxs as t, jsx as n } from "react/jsx-runtime";
-import { IconRenderer as b } from "../IconRenderer/index.js";
-import '../../../../assets/index-DrxnMAdp.css';const _ = "_submenu_kaorb_1", h = "_open_kaorb_39", p = "_arrow_kaorb_50", k = "_rotate_kaorb_63", e = {
-  submenu: _,
-  "with-child": "_with-child_kaorb_4",
-  "submenu-children": "_submenu-children_kaorb_13",
-  "submenu-children-inner": "_submenu-children-inner_kaorb_16",
-  "submenu-label": "_submenu-label_kaorb_24",
-  open: h,
-  arrow: p,
-  rotate: k,
-  "menu-icon": "_menu-icon_kaorb_67",
-  "menu-content": "_menu-content_kaorb_84"
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { IconRenderer as d } from "../IconRenderer/index.js";
+import '../../../../assets/index-eZS6kms7.css';const h = "_submenu_qk07k_1", b = "_active_qk07k_21", p = "_open_qk07k_80", w = "_arrow_qk07k_117", q = "_rotate_qk07k_130", e = {
+  submenu: h,
+  "parent-item": "_parent-item_qk07k_4",
+  active: b,
+  "top-level": "_top-level_qk07k_25",
+  "with-child": "_with-child_qk07k_32",
+  "submenu-children": "_submenu-children_qk07k_41",
+  "submenu-children-inner": "_submenu-children-inner_qk07k_44",
+  "nested-submenu": "_nested-submenu_qk07k_50",
+  "has-active": "_has-active_qk07k_55",
+  "submenu-label": "_submenu-label_qk07k_65",
+  open: p,
+  arrow: w,
+  rotate: q,
+  "menu-icon": "_menu-icon_qk07k_134",
+  "menu-content": "_menu-content_qk07k_151"
 };
-function f({ item: s, isOpen: r, active: c, collapsed: u, level: l, isSingleTopLevel: a = !1, onToggle: i, children: d }) {
-  if (u) return null;
-  const m = !(a && r);
-  return /* @__PURE__ */ t("div", { className: `${e.submenu} ${r ? e["with-child"] : ""}`, children: [
-    /* @__PURE__ */ t(
+function f({ item: o, isOpen: t, active: u, collapsed: _, level: r, isSingleTopLevel: a = !1, showIcon: m = !0, onToggle: i, children: l }) {
+  if (_) return null;
+  const k = !(a && t);
+  return /* @__PURE__ */ c("div", { className: `${e.submenu} ${t ? e["with-child"] : ""} ${u && r === 0 ? e["has-active"] : ""} ${r > 0 ? e["nested-submenu"] : ""}`, children: [
+    /* @__PURE__ */ c(
       "div",
       {
-        className: `parent-item ${c || r ? "active" : ""}`,
+        className: `${e["parent-item"]} ${r === 0 ? e["top-level"] : ""} ${u || t ? e.active : ""}`,
         onClick: () => {
-          a && r || i();
+          a && t || i();
         },
-        onKeyDown: (o) => {
-          (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a && r || i());
+        onKeyDown: (s) => {
+          (s.key === "Enter" || s.key === " ") && (s.preventDefault(), a && t || i());
         },
         role: "menuitem",
         tabIndex: 0,
-        "aria-expanded": r,
-        style: { display: "flex", alignItems: "center", padding: "8px 12px", cursor: "pointer", borderRadius: "8px", border: "1px solid transparent" },
+        "aria-expanded": t,
         children: [
-          l === 0 && /* @__PURE__ */ n("span", { className: e["menu-icon"], children: /* @__PURE__ */ n(b, { icon: s.icon }) }),
-          /* @__PURE__ */ n("span", { className: e["menu-content"], children: /* @__PURE__ */ t("span", { className: e["submenu-label"], children: [
-            /* @__PURE__ */ n("span", { children: s.name }),
-            m && /* @__PURE__ */ n("span", { className: `${e.arrow} ${r ? e.rotate : ""}`, children: /* @__PURE__ */ n("svg", { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M1 1L5 5L1 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+          m && r === 0 && /* @__PURE__ */ n("span", { className: e["menu-icon"], children: /* @__PURE__ */ n(d, { icon: o.icon }) }),
+          /* @__PURE__ */ n("span", { className: e["menu-content"], children: /* @__PURE__ */ c("span", { className: e["submenu-label"], children: [
+            /* @__PURE__ */ n("span", { children: o.name }),
+            k && /* @__PURE__ */ n("span", { className: `${e.arrow} ${t ? e.rotate : ""}`, children: /* @__PURE__ */ n("svg", { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M1 1L5 5L1 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ n("div", { className: `${e["submenu-children"]} ${r ? e.open : ""}`, children: /* @__PURE__ */ n("div", { className: e["submenu-children-inner"], children: d }) })
+    /* @__PURE__ */ n("div", { className: `${e["submenu-children"]} ${t ? e.open : ""}`, children: /* @__PURE__ */ n("div", { className: e["submenu-children-inner"], children: l }) })
   ] });
 }
 export {

package/dist/components/Sidebar/components/index.js

@@ -1,7 +1,7 @@
 import { MenuRenderer as e } from "./MenuRenderer/index.js";
 import { MenuItemWrapper as p } from "./MenuItemWrapper/index.js";
 import { SubMenuWrapper as n } from "./SubMenuWrapper/index.js";
-import { C as f } from "../../../index-DKHB_5Ee.js";
+import { C as f } from "../../../index-CSxlVCTW.js";
 import { ExploreSection as u } from "./ExploreSection/index.js";
 import { ModuleSwitchButton as c } from "./ModuleSwitchButton/index.js";
 import { ContactUsButton as i } from "./ContactUsButton/index.js";

package/dist/components/Sidebar/hooks/useMenuState.d.ts

@@ -2,8 +2,12 @@ import { SidebarMenuItem } from '../types';
 interface UseMenuStateOptions {
     menuItems: SidebarMenuItem[];
     currentPath: string;
+    /** Max parent-level (level 0) items that can be expanded simultaneously. Undefined = unlimited. */
+    maxOpenParents?: number;
+    /** Max child-level (level > 0) items that can be expanded simultaneously within the same parent. Undefined = unlimited. */
+    maxOpenChildren?: number;
 }
-export declare function useMenuState({ menuItems, currentPath }: UseMenuStateOptions): {
+export declare function useMenuState({ menuItems, currentPath, maxOpenParents, maxOpenChildren }: UseMenuStateOptions): {
     openByLevel: Record<string, boolean>;
     toggleMenu: (key: string, level: number, item: SidebarMenuItem) => void;
 };

package/dist/components/Sidebar/hooks/useMenuState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuState.d.ts","sourceRoot":"","sources":["../../../../lib/components/Sidebar/hooks/useMenuState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhD,UAAU,mBAAmB;IAC3B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,mBAAmB;;sBAsClE,MAAM,SAAS,MAAM,QAAQ,eAAe;EA4BrD"}
+{"version":3,"file":"useMenuState.d.ts","sourceRoot":"","sources":["../../../../lib/components/Sidebar/hooks/useMenuState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhD,UAAU,mBAAmB;IAC3B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,mGAAmG;IACnG,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2HAA2H;IAC3H,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,EAAE,mBAAmB;;sBAsCnG,MAAM,SAAS,MAAM,QAAQ,eAAe;EAiErD"}