@ck-ui/component-library 2.0.2 → 2.0.4

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

@@ -1,23 +1,41 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { capitalizeFirstLetter as u } from "../../Sidebar.utils.js";
-import { Tooltip as w } from "../../../Tooltip/index.js";
-import '../../../../assets/index-CSofT_ix.css';const r = {
-  "box-shadow": "_box-shadow_rhe0s_1",
-  "switch-module-wrapper": "_switch-module-wrapper_rhe0s_10",
-  "switch-module-btn": "_switch-module-btn_rhe0s_17",
-  "switch-module-collapsed": "_switch-module-collapsed_rhe0s_42"
-};
-function f({ modules: s, collapsed: i, currentModuleId: d, userType: h, onModuleSwitch: a }) {
-  if (h !== "CUSTOMER") return null;
-  const l = s.filter((e) => e.feEnabled && e.type === "CUSTOMER" && e.id !== d);
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { capitalizeFirstLetter as p } from "../../Sidebar.utils.js";
+import { Tooltip as m } from "../../../Tooltip/index.js";
+import * as i from "react";
+import '../../../../assets/index-tNRjcWyS.css';const r = {
+  "box-shadow": "_box-shadow_1ugi6_1",
+  "switch-module-wrapper": "_switch-module-wrapper_1ugi6_10",
+  "switch-module-btn": "_switch-module-btn_1ugi6_17",
+  "switch-module-collapsed": "_switch-module-collapsed_1ugi6_45"
+}, w = (o) => /* @__PURE__ */ i.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o }, /* @__PURE__ */ i.createElement("path", { d: "M13.6671 9.99348L10.3271 13.3402", stroke: "white", strokeWidth: 0.666667, strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M2.3335 9.99348H13.6668", stroke: "white", strokeWidth: 0.666667, strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M2.3335 6.00682L5.6735 2.66016", stroke: "white", strokeWidth: 0.666667, strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M13.6668 6.00652H2.3335", stroke: "white", strokeWidth: 0.666667, strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" }));
+function _({
+  modules: o,
+  collapsed: n,
+  currentModuleId: a,
+  userType: c,
+  onModuleSwitch: h
+}) {
+  if (c !== "CUSTOMER") return null;
+  const l = o.filter(
+    (e) => e.feEnabled && e.type === "CUSTOMER" && e.id !== a
+  );
   return l.length === 0 ? null : /* @__PURE__ */ t("div", { className: r["box-shadow"], children: l.map((e) => {
-    const o = `Switch to ${u(e.displayName)}`, n = /* @__PURE__ */ c("button", { type: "button", className: `${r["switch-module-btn"]} ${i ? r["switch-module-collapsed"] : ""}`, onClick: () => a(e.name), "aria-label": o, children: [
-      !i && /* @__PURE__ */ t("span", { children: o }),
-      /* @__PURE__ */ t("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", style: { marginLeft: i ? 0 : "8px" }, children: /* @__PURE__ */ t("path", { d: "M1.5 1L6.5 6L1.5 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-    ] });
-    return i ? /* @__PURE__ */ t("div", { className: r["switch-module-wrapper"], children: /* @__PURE__ */ t(w, { title: o, placement: "right", arrow: !0, children: /* @__PURE__ */ t("span", { children: n }) }) }, e.id) : /* @__PURE__ */ t("div", { className: r["switch-module-wrapper"], children: n }, e.id);
+    const s = `Switch to ${p(e.displayName)}`, d = /* @__PURE__ */ u(
+      "button",
+      {
+        type: "button",
+        className: `${r["switch-module-btn"]} ${n ? r["switch-module-collapsed"] : ""}`,
+        onClick: () => h(e.name),
+        "aria-label": s,
+        children: [
+          !n && /* @__PURE__ */ t("span", { children: s }),
+          /* @__PURE__ */ t(w, {})
+        ]
+      }
+    );
+    return n ? /* @__PURE__ */ t("div", { className: r["switch-module-wrapper"], children: /* @__PURE__ */ t(m, { title: s, placement: "right", arrow: !0, children: /* @__PURE__ */ t("span", { children: d }) }) }, e.id) : /* @__PURE__ */ t("div", { className: r["switch-module-wrapper"], children: d }, e.id);
   }) });
 }
 export {
-  f as ModuleSwitchButton
+  _ as ModuleSwitchButton
 };

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

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import '../../../../assets/index-tIl-UucG.css';const a = {
-  "sidebar-tag": "_sidebar-tag_1wvk7_1"
+import '../../../../assets/index-cVRrZueX.css';const a = {
+  "sidebar-tag": "_sidebar-tag_8vnad_1"
 };
-function i({ label: e, collapsed: r }) {
+function s({ label: e, collapsed: r }) {
   return r ? null : /* @__PURE__ */ t("p", { className: a["sidebar-tag"], children: e });
 }
 export {
-  i as SectionLabel
+  s as SectionLabel
 };

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

@@ -7,9 +7,11 @@ interface SubMenuWrapperProps {
     collapsed: boolean;
     level: number;
     isSingleTopLevel?: boolean;
+    showIcon?: boolean;
     onToggle: () => void;
     children: ReactNode;
+    textOverflow?: "ellipsis" | "wrap";
 }
-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, textOverflow, }: 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":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAOnD,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;IACpB,YAAY,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CACpC;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,gBAAwB,EACxB,QAAe,EACf,QAAQ,EACR,QAAQ,EACR,YAAyB,GAC1B,EAAE,mBAAmB,kDAgJrB"}

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

@@ -1,47 +1,136 @@
-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 _, jsx as r } from "react/jsx-runtime";
+import { useRef as R, useState as M, useEffect as W, useCallback as D } from "react";
+import { IconRenderer as Y } from "../IconRenderer/index.js";
+import { Tooltip as j } from "../../../Tooltip/index.js";
+import { animateScroll as q } from "../../_helpers/animateScroll.js";
+import { S as E } from "../../../../down-arrow-Con-s3fU.js";
+import '../../../../assets/index-DePIj7wn.css';const z = "_submenu_1w7u0_1", H = "_active_1w7u0_25", K = "_open_1w7u0_87", L = "_arrow_1w7u0_138", G = "_rotate_1w7u0_150", e = {
+  submenu: z,
+  "parent-item": "_parent-item_1w7u0_5",
+  active: H,
+  "top-level": "_top-level_1w7u0_29",
+  "with-child": "_with-child_1w7u0_39",
+  "submenu-children": "_submenu-children_1w7u0_48",
+  "has-active": "_has-active_1w7u0_51",
+  "submenu-label": "_submenu-label_1w7u0_61",
+  "submenu-name": "_submenu-name_1w7u0_69",
+  open: K,
+  "submenu-children-inner": "_submenu-children-inner_1w7u0_96",
+  "nested-submenu": "_nested-submenu_1w7u0_124",
+  arrow: L,
+  rotate: G,
+  "menu-icon": "_menu-icon_1w7u0_154",
+  "menu-content": "_menu-content_1w7u0_172",
+  "menu-content-wrap": "_menu-content-wrap_1w7u0_183"
 };
-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(
-      "div",
-      {
-        className: `parent-item ${c || r ? "active" : ""}`,
-        onClick: () => {
-          a && r || i();
-        },
-        onKeyDown: (o) => {
-          (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a && r || i());
-        },
-        role: "menuitem",
-        tabIndex: 0,
-        "aria-expanded": r,
-        style: { display: "flex", alignItems: "center", padding: "8px 12px", cursor: "pointer", borderRadius: "8px", border: "1px solid transparent" },
-        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" }) }) })
-          ] }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ n("div", { className: `${e["submenu-children"]} ${r ? e.open : ""}`, children: /* @__PURE__ */ n("div", { className: e["submenu-children-inner"], children: d }) })
-  ] });
+function Z({
+  item: i,
+  isOpen: c,
+  active: d,
+  collapsed: x,
+  level: o,
+  isSingleTopLevel: N = !1,
+  showIcon: C = !0,
+  onToggle: p,
+  children: T,
+  textOverflow: h = "ellipsis"
+}) {
+  const t = R(null), w = R(null), [y, B] = M(!1);
+  W(() => {
+    const n = w.current;
+    if (!n) return;
+    const m = () => {
+      n.clientWidth > 0 && B(n.scrollWidth > n.clientWidth);
+    }, s = setTimeout(m, 100), u = new ResizeObserver(() => setTimeout(m, 50));
+    return u.observe(n), () => {
+      clearTimeout(s), u.disconnect();
+    };
+  }, [i.name]);
+  const f = D(() => {
+    const n = c, m = t.current?.getBoundingClientRect().top ?? 0;
+    if (p(), o === 0 && !n && t.current) {
+      const s = t.current.closest(
+        '[class*="sidebar-list-wrapper"]'
+      );
+      if (!s) return;
+      s.style.scrollBehavior = "auto";
+      let u, b = 0;
+      const A = 20, v = () => {
+        if (!t.current) return;
+        const a = t.current.getBoundingClientRect().top - m;
+        Math.abs(a) > 0.5 && (s.scrollTop += a), b++, b < A ? u = requestAnimationFrame(v) : k();
+      }, k = () => {
+        if (!t.current) return;
+        const l = s.getBoundingClientRect(), a = t.current.getBoundingClientRect(), $ = a.top + t.current.offsetHeight;
+        if ($ > l.bottom) {
+          const F = $ - l.bottom, I = a.top - l.top, g = Math.min(F + 8, Math.max(0, I));
+          g > 0 && q(s, g, 600);
+        } else
+          s.style.scrollBehavior = "smooth";
+      };
+      u = requestAnimationFrame(v), setTimeout(() => cancelAnimationFrame(u), 350);
+    }
+  }, [p, o, c]);
+  if (x) return null;
+  const S = !N;
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      ref: t,
+      className: `${e.submenu} ${c ? e["with-child"] : ""} ${d && o === 0 ? e["has-active"] : ""} ${o > 0 ? e["nested-submenu"] : ""}`,
+      children: [
+        /* @__PURE__ */ _(
+          "div",
+          {
+            className: `${e["parent-item"]} ${o === 0 ? e["top-level"] : ""} ${d || c ? e.active : ""}`,
+            style: o > 1 ? { paddingLeft: `${12 + (o - 1) * 14}px` } : void 0,
+            onClick: f,
+            onKeyDown: (n) => {
+              (n.key === "Enter" || n.key === " ") && (n.preventDefault(), f());
+            },
+            role: "menuitem",
+            tabIndex: 0,
+            "aria-expanded": c,
+            children: [
+              C && o === 0 && /* @__PURE__ */ r("span", { className: e["menu-icon"], children: /* @__PURE__ */ r(Y, { icon: i.icon }) }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: `${e["menu-content"]} ${h === "wrap" ? e["menu-content-wrap"] : ""}`,
+                  children: /* @__PURE__ */ _("span", { className: e["submenu-label"], children: [
+                    /* @__PURE__ */ r(
+                      j,
+                      {
+                        title: h === "ellipsis" && y ? i.name : "",
+                        placement: "right",
+                        arrow: !0,
+                        children: /* @__PURE__ */ r("span", { ref: w, className: e["submenu-name"], children: i.name })
+                      }
+                    ),
+                    S && /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: `${e.arrow} ${c ? e.rotate : ""}`,
+                        children: /* @__PURE__ */ r(E, {})
+                      }
+                    )
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: `${e["submenu-children"]} ${c ? e.open : ""}`,
+            children: /* @__PURE__ */ r("div", { className: e["submenu-children-inner"], children: T })
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  f as SubMenuWrapper
+  Z as SubMenuWrapper
 };

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-BAG5O9tQ.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/useActiveDetection.d.ts

@@ -3,7 +3,7 @@ interface UseActiveDetectionOptions {
     currentPath: string;
     allItems: SidebarMenuItem[];
 }
-export declare function useActiveDetection({ currentPath, allItems }: UseActiveDetectionOptions): {
+export declare function useActiveDetection({ currentPath, allItems, }: UseActiveDetectionOptions): {
     isActive: (item: SidebarMenuItem) => boolean;
     isTreeActive: (item: SidebarMenuItem) => boolean;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useActiveDetection.d.ts","sourceRoot":"","sources":["../../../../lib/components/Sidebar/hooks/useActiveDetection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhD,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,eAAe,EAAE,CAAC;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,yBAAyB;qBAE5E,eAAe;yBAIf,eAAe;EAIzB"}
+{"version":3,"file":"useActiveDetection.d.ts","sourceRoot":"","sources":["../../../../lib/components/Sidebar/hooks/useActiveDetection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAMhD,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,eAAe,EAAE,CAAC;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EACX,QAAQ,GACT,EAAE,yBAAyB;qBAEjB,eAAe;yBAIf,eAAe;EAIzB"}

package/dist/components/Sidebar/hooks/useActiveDetection.js

@@ -1,6 +1,9 @@
 import { useCallback as c } from "react";
 import { isItemActive as v, isTreeActive as A } from "../Sidebar.utils.js";
-function n({ currentPath: i, allItems: e }) {
+function n({
+  currentPath: i,
+  allItems: e
+}) {
   const t = c(
     (o) => v(o, i, e),
     [i, e]

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 = accordion (1). */
+    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,uGAAuG;IACvG,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2HAA2H;IAC3H,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA2BD,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,cAAc,EACd,eAAe,GAChB,EAAE,mBAAmB;;sBAmDZ,MAAM,SAAS,MAAM,QAAQ,eAAe;EAgHrD"}

package/dist/components/Sidebar/hooks/useMenuState.js

@@ -1,51 +1,126 @@
-import { useState as u, useEffect as S, useCallback as g } from "react";
-import { isTreeActive as n } from "../Sidebar.utils.js";
-function p({ menuItems: r, currentPath: c }) {
-  const [h, d] = u({});
-  S(() => {
-    if (!r.length) return;
-    const e = {}, s = (i, a = 0) => {
-      for (const o of i)
-        if (n(o, c, r)) {
-          e[`${a}-${o.name}`] = !0, o.dashboardServices && s(o.dashboardServices, a + 1);
-          break;
-        }
-    };
-    s(r), d(e);
-  }, [r]), S(() => {
-    if (!r.length) return;
-    const e = {}, s = (i, a = 0) => {
-      for (const o of i)
-        if (n(o, c, r)) {
-          e[`${a}-${o.name}`] = !0, o.dashboardServices && s(o.dashboardServices, a + 1);
-          break;
-        }
-    };
-    s(r), d((i) => ({ ...i, ...e }));
-  }, [c]);
-  const v = g(
-    (e, s, i) => {
-      d((a) => {
-        const o = { ...a };
-        if (s === 0 && (Object.keys(o).forEach((f) => {
-          f !== e && delete o[f];
-        }), !a[e] && i.dashboardServices)) {
-          const f = ($, b) => {
-            for (const t of $)
-              if (n(t, c, r)) {
-                o[`${b}-${t.name}`] = !0, t.dashboardServices && f(t.dashboardServices, b + 1);
-                break;
+import { useState as w, useEffect as L, useCallback as E } from "react";
+import { isTreeActive as p } from "../Sidebar.utils.js";
+function T(o, f) {
+  const b = {};
+  let u = null;
+  const $ = (S, g = 0) => {
+    for (const l of S)
+      if (p(l, f, o)) {
+        g === 0 && (u = l), b[`${g}-${l.name}`] = !0, l.dashboardServices?.length && $(l.dashboardServices, g + 1);
+        break;
+      }
+  };
+  return $(o), { state: b, activeTopLevel: u };
+}
+function W({
+  menuItems: o,
+  currentPath: f,
+  maxOpenParents: b,
+  maxOpenChildren: u
+}) {
+  const [$, S] = w({}), g = o.map((e) => e.name).join("|");
+  L(() => {
+    if (!o.length) return;
+    const { state: e } = T(o, f);
+    S(e);
+  }, [g]), L(() => {
+    if (!o.length) return;
+    const { state: e, activeTopLevel: h } = T(
+      o,
+      f
+    );
+    if (!h?.dashboardServices?.length) {
+      S({});
+      return;
+    }
+    S((a) => {
+      const s = `0-${h.name}`;
+      if (Object.keys(a).find(
+        (i) => i.startsWith("0-") && a[i]
+      ) === s) {
+        const i = { ...a };
+        return Object.keys(e).forEach((d) => {
+          i[d] = !0;
+        }), i;
+      }
+      return e;
+    });
+  }, [f, o]);
+  const l = E(
+    (e, h, a) => {
+      S((s) => {
+        const y = !s[e];
+        if (h === 0) {
+          if (y) {
+            if (b !== void 0) {
+              const c = {}, v = Object.keys(s).filter(
+                (r) => r.startsWith("0-") && s[r]
+              );
+              if (v.length >= b) {
+                const r = new Set(
+                  v.slice(
+                    0,
+                    v.length - b + 1
+                  )
+                );
+                Object.keys(s).forEach((n) => {
+                  !r.has(n) && s[n] && (c[n] = !0);
+                });
+              } else
+                Object.assign(c, s);
+              if (c[e] = !0, a.dashboardServices) {
+                const r = (n, K) => {
+                  for (const j of n)
+                    if (p(j, f, o)) {
+                      c[`${K}-${j.name}`] = !0, j.dashboardServices && r(j.dashboardServices, K + 1);
+                      break;
+                    }
+                };
+                r(a.dashboardServices, h + 1);
               }
-          };
-          f(i.dashboardServices, s + 1);
+              return c;
+            }
+            const t = {};
+            if (t[e] = !0, a.dashboardServices) {
+              const c = (v, r) => {
+                for (const n of v)
+                  if (p(n, f, o)) {
+                    t[`${r}-${n.name}`] = !0, n.dashboardServices && c(n.dashboardServices, r + 1);
+                    break;
+                  }
+              };
+              c(a.dashboardServices, h + 1);
+            }
+            return t;
+          }
+          const d = {};
+          return Object.keys(s).forEach((t) => {
+            t === e || parseInt(t.split("-")[0], 10) > 0 && s[`0-${a.name}`] || s[t] && (d[t] = !0);
+          }), d;
         }
-        return o[e] = !a[e], o;
+        const i = { ...s };
+        if (y) {
+          if (u !== void 0) {
+            const d = Object.keys(i).filter(
+              (t) => t.startsWith(`${h}-`) && i[t] && t !== e
+            );
+            d.length >= u && d.slice(
+              0,
+              d.length - u + 1
+            ).forEach((c) => {
+              delete i[c];
+            });
+          }
+          i[e] = !0;
+        } else
+          delete i[e];
+        return i;
       });
     },
-    [c, r]
+    [f, o, b, u]
   );
-  return { openByLevel: h, toggleMenu: v };
+  return { openByLevel: $, toggleMenu: l };
 }
 export {
-  p as useMenuState
+  W as useMenuState
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useModuleSwitch.d.ts","sourceRoot":"","sources":["../../../../lib/components/Sidebar/hooks/useModuleSwitch.ts"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC9B,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD;AAED,wBAAgB,eAAe,CAAC,EAAE,cAAc,EAAE,EAAE,sBAAsB;;qCAInD,MAAM;EAS5B"}
+{"version":3,"file":"useModuleSwitch.d.ts","sourceRoot":"","sources":["../../../../lib/components/Sidebar/hooks/useModuleSwitch.ts"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC9B,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD;AAED,wBAAgB,eAAe,CAAC,EAAE,cAAc,EAAE,EAAE,sBAAsB;;qCAInD,MAAM;EAa5B"}

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

@@ -0,0 +1,7 @@
+/**
+ * Vertical-only overlay scrollbar for sidebar.
+ * Shows when content overflows and user interacts (hover/scroll).
+ * Hides when no overflow or after inactivity.
+ */
+export declare function useOverlayScrollbar(containerRef: React.RefObject<HTMLDivElement | null>): void;
+//# sourceMappingURL=useOverlayScrollbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayScrollbar.d.ts","sourceRoot":"","sources":["../../../../lib/components/Sidebar/hooks/useOverlayScrollbar.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,QAqLrD"}

package/dist/components/Sidebar/hooks/useOverlayScrollbar.js

@@ -0,0 +1,98 @@
+import { useRef as v, useCallback as g, useEffect as C } from "react";
+function O(l) {
+  const a = v(null), T = v(null), m = v(null), r = v(null), h = v(!1), o = g(() => {
+    const e = l.current;
+    return e ? e.scrollHeight > e.clientHeight : !1;
+  }, [l]), k = g(() => {
+    const e = a.current;
+    !e || !o() || (e.style.opacity = "1", r.current && clearTimeout(r.current), r.current = setTimeout(() => {
+      !h.current && a.current && (a.current.style.opacity = "0");
+    }, 1500));
+  }, [o]), E = g(() => {
+    r.current && clearTimeout(r.current);
+    const e = a.current;
+    e && (e.style.opacity = "0");
+  }, []), p = g(() => {
+    const e = l.current, n = T.current, s = a.current;
+    if (!e || !n || !s) return;
+    const { scrollTop: t, scrollHeight: i, clientHeight: c } = e;
+    if (i <= c) {
+      s.style.display = "none", s.style.opacity = "0";
+      return;
+    }
+    s.style.display = "block";
+    const d = e.parentElement;
+    if (d) {
+      const b = d.getBoundingClientRect(), x = e.getBoundingClientRect();
+      s.style.top = `${x.top - b.top}px`, s.style.height = `${c}px`;
+    }
+    const y = c, f = Math.max(
+      c / i * y,
+      24
+    ), u = t / (i - c) * (y - f);
+    n.style.height = `${f}px`, n.style.top = `${u}px`;
+  }, [l]);
+  C(() => {
+    const e = l.current;
+    if (!e) return;
+    const n = e.parentElement;
+    if (!n) return;
+    getComputedStyle(n).position === "static" && (n.style.position = "relative");
+    const t = document.createElement("div");
+    Object.assign(t.style, {
+      position: "absolute",
+      right: "2px",
+      width: "4px",
+      zIndex: "20",
+      pointerEvents: "none",
+      opacity: "0",
+      transition: "opacity 0.2s ease",
+      borderRadius: "4px",
+      display: "none"
+    });
+    const i = document.createElement("div");
+    Object.assign(i.style, {
+      position: "absolute",
+      width: "100%",
+      right: "0",
+      backgroundColor: "var(--ckcl-black-200, #C5C5C5)",
+      borderRadius: "4px",
+      pointerEvents: "none"
+    }), t.appendChild(i), n.appendChild(t), a.current = t, T.current = i, p();
+    const c = () => {
+      m.current && cancelAnimationFrame(m.current), m.current = requestAnimationFrame(() => {
+        p(), k();
+      });
+    };
+    e.addEventListener("scroll", c, { passive: !0 });
+    const d = () => {
+      h.current = !0, p(), o() && (t.style.opacity = "1", r.current && clearTimeout(r.current));
+    }, y = () => {
+      h.current = !1, E();
+    };
+    e.addEventListener("mouseenter", d), e.addEventListener("mouseleave", y);
+    const f = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        p(), h.current && o() ? t.style.opacity = "1" : o() || (t.style.opacity = "0");
+      });
+    });
+    f.observe(e);
+    let u = null;
+    const b = new MutationObserver(() => {
+      u && clearTimeout(u), u = setTimeout(() => {
+        p(), o() || E();
+      }, 400);
+    });
+    return b.observe(e, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["style", "class"]
+    }), () => {
+      e.removeEventListener("scroll", c), e.removeEventListener("mouseenter", d), e.removeEventListener("mouseleave", y), f.disconnect(), b.disconnect(), u && clearTimeout(u), r.current && clearTimeout(r.current), m.current && cancelAnimationFrame(m.current), t.remove();
+    };
+  }, [l, p, k, E, o]);
+}
+export {
+  O as useOverlayScrollbar
+};