@para-ui/core 5.0.1 → 5.0.3-beta.8

package/es/Menu/verticalMenuList.js

@@ -1,238 +1,255 @@
-import { j as n } from "../_virtual/jsx-runtime.js";
-import Te, { useState as x, useEffect as R, useMemo as D, createElement as ke, useRef as Ne } from "react";
+import { j as e } from "../_virtual/jsx-runtime.js";
+import Te, { useState as C, useEffect as A, useMemo as D, createElement as Ne, useRef as ke } from "react";
 import { createPortal as Le } from "react-dom";
 import be from "../CollapseBox/index.js";
-import { Down as Y } from "../para-ui-core/node_modules/@para-ui/icons/Down/index.js";
-import * as me from "../para-ui-core/node_modules/@para-ui/icons/index.js";
+import { Down as G } from "../para-ui-core/node_modules/@para-ui/icons/Down/index.js";
+import * as pe from "../para-ui-core/node_modules/@para-ui/icons/index.js";
 import { UUID as Ee, DeepClone as ye } from "@snack-kit/lib";
-import { $prefixCls as A } from "../GlobalContext/constant.js";
-import xe from "../AutoTips/index.js";
-const de = (d) => {
-  let u = "div";
-  return (!d || d.length === 0) && (u = "a"), u;
-}, he = (d = [], u, N) => !d || d.length === 0 ? {
-  href: N || `#${u}`
-} : {}, ve = (d) => {
+import { $prefixCls as z } from "../GlobalContext/constant.js";
+import me from "../AutoTips/index.js";
+const he = (h) => {
+  let c = "div";
+  return (!h || h.length === 0) && (c = "a"), c;
+}, fe = (h = [], c, E) => !h || h.length === 0 ? {
+  href: E || `#${c}`
+} : {}, de = (h) => {
   const {
-    label: u,
-    type: N = "router",
-    path: v,
-    href: g,
-    icon: L,
-    children: c,
-    className: B,
-    level: h = 1,
-    badge: f,
-    selectMenu: E = "",
-    idMenuLast: j,
-    onClickMenu: p,
-    shrinkOthers: C = !0,
-    jumpIcon: T,
-    onClickJump: b
-  } = d, [M, S] = x(!1);
-  R(() => {
-    const s = j?.[E || ""];
-    s && s.indexOf(v || "") !== -1 && s.length > 1 ? S(!0) : C && S(!1);
-  }, [j, E, v]);
-  const $ = (s) => {
-    if (c && c.length > 0)
-      return p && p(!1), S(!M);
-    p && p(d), s.preventDefault();
-  }, H = () => {
-    if (L) {
-      const s = me[L];
-      return s ? /* @__PURE__ */ n.jsx("span", { className: "menu-item-icon", children: s() }) : /* @__PURE__ */ n.jsx("span", { className: "menu-item-icon", children: L });
+    label: c,
+    type: E = "router",
+    path: T,
+    href: N,
+    icon: y,
+    children: l,
+    className: O,
+    level: d = 1,
+    badge: v,
+    selectMenu: L = "",
+    idMenuLast: f,
+    onClickMenu: m,
+    shrinkOthers: g = !0,
+    jumpIcon: j,
+    onClickJump: k,
+    group: P
+  } = h, [I, _] = C(!1), Y = !!(P && d === 1 && l && l.length > 0);
+  A(() => {
+    const o = f?.[L || ""];
+    o && o.indexOf(T || "") !== -1 && o.length > 1 ? _(!0) : g && _(!1);
+  }, [f, L, T]);
+  const w = (o) => {
+    if (l && l.length > 0)
+      return m && m(!1), _(!I);
+    m && m(h), o.preventDefault();
+  }, B = () => {
+    if (y) {
+      const o = pe[y];
+      return o ? /* @__PURE__ */ e.jsx("span", { className: "menu-item-icon", children: o() }) : /* @__PURE__ */ e.jsx("span", { className: "menu-item-icon", children: y });
     }
-  }, O = (s) => {
-    s.stopPropagation(), s.preventDefault(), b?.(d);
-  }, y = () => c && c.length > 0 ? /* @__PURE__ */ n.jsx(Y, {}) : T ? /* @__PURE__ */ n.jsx(
+  }, F = (o) => {
+    o.stopPropagation(), o.preventDefault(), k?.(h);
+  }, S = () => l && l.length > 0 ? /* @__PURE__ */ e.jsx(G, {}) : j ? /* @__PURE__ */ e.jsx(
     "span",
     {
       className: "jump-icon",
-      onClick: O,
-      children: T
+      onClick: F,
+      children: j
     }
-  ) : /* @__PURE__ */ n.jsx(Y, { className: "opacity-pos-svg" }), w = () => {
-    if (f !== void 0)
-      return /* @__PURE__ */ n.jsx("div", { className: "menu-item-badge", children: /* @__PURE__ */ n.jsx("span", { children: f }) });
-  }, _ = () => {
-    let s = "vertical-menu-list-item";
-    M && (s += " vertical-menu-list-item-open"), B && (s += ` ${B}`);
-    const l = j?.[E || ""];
-    if (l) {
-      const P = l.indexOf(v || "");
-      P !== -1 && (s += " vertical-menu-list-item-select", P === l.length - 1 && (s += " vertical-menu-list-item-select-last"), M || (s += " vertical-menu-list-item-select-retract"));
+  ) : /* @__PURE__ */ e.jsx(G, { className: "opacity-pos-svg" }), U = () => {
+    if (v !== void 0)
+      return /* @__PURE__ */ e.jsx("div", { className: "menu-item-badge", children: /* @__PURE__ */ e.jsx("span", { children: v }) });
+  }, p = () => {
+    let o = "vertical-menu-list-item";
+    I && (o += " vertical-menu-list-item-open"), O && (o += ` ${O}`);
+    const M = f?.[L || ""];
+    if (M) {
+      const H = M.indexOf(T || "");
+      H !== -1 && (o += " vertical-menu-list-item-select", H === M.length - 1 && (o += " vertical-menu-list-item-select-last"), I || (o += " vertical-menu-list-item-select-retract"));
     }
-    return s;
-  }, q = () => {
-    const s = {
+    return o;
+  }, $ = () => {
+    const o = {
       paddingRight: "12px",
       paddingLeft: "0px"
-    }, l = typeof h == "number" ? h : 1;
-    return l >= 0 && (s.paddingLeft = `${(l - 1) * 26 + 12}px`), s;
-  }, m = D(() => {
-    const s = de(c);
-    return /* @__PURE__ */ n.jsxs(
-      s,
+    }, M = typeof d == "number" ? d : 1;
+    return M >= 0 && (o.paddingLeft = `${(M - 1) * 26 + 12}px`), o;
+  }, x = D(() => {
+    const o = he(l);
+    return /* @__PURE__ */ e.jsxs(
+      o,
       {
-        onClick: $,
+        onClick: w,
         className: "vertical-menu-list-item-content",
-        style: q(),
-        ...he(c, v, g),
+        style: $(),
+        ...fe(l, T, N),
         children: [
-          H(),
-          /* @__PURE__ */ n.jsxs("div", { className: "menu-item-content", children: [
-            /* @__PURE__ */ n.jsx("span", { className: "menu-item-label", children: /* @__PURE__ */ n.jsx(xe, { children: u }) }),
-            w()
+          B(),
+          /* @__PURE__ */ e.jsxs("div", { className: "menu-item-content", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "menu-item-label", children: /* @__PURE__ */ e.jsx(me, { children: c }) }),
+            U()
           ] }),
-          /* @__PURE__ */ n.jsx("span", { className: "menu-item-arrow", children: y() })
+          /* @__PURE__ */ e.jsx("span", { className: "menu-item-arrow", children: S() })
         ]
       }
     );
-  }, [c, p, M, h, L, u, v, g, T]), I = D(() => /* @__PURE__ */ n.jsx(
+  }, [l, m, I, d, y, c, T, N, j]), a = D(() => /* @__PURE__ */ e.jsx(
     be,
     {
-      in: M,
+      in: I,
       className: "li-collapse",
       timeout: "auto",
       unmountOnExit: !0,
-      children: c && c.length > 0 && c.map((s, l) => /* @__PURE__ */ n.jsx(
-        ve,
+      children: l && l.length > 0 && l.map((o, M) => /* @__PURE__ */ e.jsx(
+        de,
         {
-          ...s,
-          jumpIcon: T || s.jumpIcon,
-          onClickJump: b,
-          level: h + 1,
-          idMenuLast: j,
-          selectMenu: E,
-          onClickMenu: p,
-          shrinkOthers: C
+          ...o,
+          jumpIcon: j || o.jumpIcon,
+          onClickJump: k,
+          level: d + 1,
+          idMenuLast: f,
+          selectMenu: L,
+          onClickMenu: m,
+          shrinkOthers: g
         },
-        l
+        M
       ))
     }
-  ), [M, c, h, j, E, p, C, T]);
-  return /* @__PURE__ */ n.jsxs("div", { className: _(), children: [
-    m,
-    I
+  ), [I, l, d, f, L, m, g, j]), R = D(() => /* @__PURE__ */ e.jsxs("div", { className: "vertical-menu-list-group", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "vertical-menu-list-group-label", children: /* @__PURE__ */ e.jsx(me, { children: c }) }),
+    l?.map((o, M) => /* @__PURE__ */ e.jsx(
+      de,
+      {
+        ...o,
+        jumpIcon: j || o.jumpIcon,
+        onClickJump: k,
+        level: 1,
+        idMenuLast: f,
+        selectMenu: L,
+        onClickMenu: m,
+        shrinkOthers: g
+      },
+      M
+    ))
+  ] }), [l, j, k, f, L, m, g, c]);
+  return Y ? R : /* @__PURE__ */ e.jsxs("div", { className: p(), children: [
+    x,
+    a
   ] });
-}, ge = (d) => {
+}, ge = (h) => {
   const {
-    size: u = "large",
-    open: N = !1,
-    anchorEl: v,
-    idMenuLast: g,
-    selectMenu: L = "",
-    onClickMenu: c,
-    list: B = [],
-    onMouseEnter: h,
-    onMouseLeave: f,
-    onMouseEnterBus: E,
-    onMouseLeaveBus: j,
-    level: p = 1,
-    color: C,
-    className: T,
-    jumpIcon: b,
-    onClickJump: M
-  } = d, [S, $] = x(!1), [H, O] = x(""), [y, w] = x([]), [_, q] = x({}), [m] = x({}), I = Ne(null);
-  R(() => () => {
-    clearTimeout(m.leaveBox), clearTimeout(m.closeTimer), clearTimeout(m.styleTimer);
-  }, []), R(() => {
-    s();
-  }, [N, v]);
-  const s = () => {
-    clearTimeout(m.styleTimer), m.styleTimer = setTimeout(() => {
-      if (v && N && I.current) {
-        const t = document.querySelector(`[data-menu-id=${v}]`);
+    size: c = "large",
+    open: E = !1,
+    anchorEl: T,
+    idMenuLast: N,
+    selectMenu: y = "",
+    onClickMenu: l,
+    list: O = [],
+    onMouseEnter: d,
+    onMouseLeave: v,
+    onMouseEnterBus: L,
+    onMouseLeaveBus: f,
+    level: m = 1,
+    color: g,
+    className: j,
+    jumpIcon: k,
+    onClickJump: P
+  } = h, [I, _] = C(!1), [Y, w] = C(""), [B, F] = C([]), [S, U] = C({}), [p] = C({}), $ = ke(null);
+  A(() => () => {
+    clearTimeout(p.leaveBox), clearTimeout(p.closeTimer), clearTimeout(p.styleTimer);
+  }, []), A(() => {
+    x();
+  }, [E, T]);
+  const x = () => {
+    clearTimeout(p.styleTimer), p.styleTimer = setTimeout(() => {
+      if (T && E && $.current) {
+        const t = document.querySelector(`[data-menu-id=${T}]`);
         if (!t) return;
         const i = t.getBoundingClientRect();
-        let a = i.top;
-        p !== 1 && (a = a - 4);
-        const Q = document.body.clientHeight, X = I.current.clientHeight;
-        X + a > Q && (a = a - (X + a - Q) - 20), a < 0 && (a = 0), q({
+        let u = i.top;
+        m !== 1 && (u = u - 4);
+        const X = document.body.clientHeight, Z = $.current.clientHeight;
+        Z + u > X && (u = u - (Z + u - X) - 20), u < 0 && (u = 0), U({
           position: "absolute",
           left: "0",
           top: "0",
-          transform: `translate3d(${i.right}px, ${a}px, 0px)`
+          transform: `translate3d(${i.right}px, ${u}px, 0px)`
         });
       }
     });
-  }, l = () => {
-    let t = `${A}-vertical-menu-item-popper`;
-    return C && (t += ` ${A}-vertical-menu-item-popper-${C}`), u && (t += ` ${A}-vertical-menu-item-popper-${u}`), C === "deep" ? t += ` ${A}-scrollbar-small-deep` : t += ` ${A}-scrollbar-small`, b && (t += ` ${A}-vertical-menu-item-popper-jump-icon`), T && (t += ` ${T}`), t;
-  }, P = (t) => {
+  }, a = () => {
+    let t = `${z}-vertical-menu-item-popper`;
+    return g && (t += ` ${z}-vertical-menu-item-popper-${g}`), c && (t += ` ${z}-vertical-menu-item-popper-${c}`), g === "deep" ? t += ` ${z}-scrollbar-small-deep` : t += ` ${z}-scrollbar-small`, k && (t += ` ${z}-vertical-menu-item-popper-jump-icon`), j && (t += ` ${j}`), t;
+  }, R = (t) => {
     let i = "menu-item-popper-content-item";
-    const a = g?.[L || ""];
-    return a && a.indexOf(t.path || "") !== -1 && (i += " menu-item-popper-content-item-select"), i;
-  }, ee = (t) => {
+    const u = N?.[y || ""];
+    return u && u.indexOf(t.path || "") !== -1 && (i += " menu-item-popper-content-item-select"), i;
+  }, o = (t) => {
     if (t) {
-      const i = me[t];
-      return i ? /* @__PURE__ */ n.jsx("span", { className: "menu-item-icon", children: i() }) : /* @__PURE__ */ n.jsx("span", { className: "menu-item-icon", children: t });
+      const i = pe[t];
+      return i ? /* @__PURE__ */ e.jsx("span", { className: "menu-item-icon", children: i() }) : /* @__PURE__ */ e.jsx("span", { className: "menu-item-icon", children: t });
     }
-  }, z = (t) => (i) => {
-    i.stopPropagation(), i.preventDefault(), M?.(t);
-  }, U = (t, i) => t && t.length > 0 ? /* @__PURE__ */ n.jsx(Y, {}) : b ? /* @__PURE__ */ n.jsx(
+  }, M = (t) => (i) => {
+    i.stopPropagation(), i.preventDefault(), P?.(t);
+  }, H = (t, i) => t && t.length > 0 ? /* @__PURE__ */ e.jsx(G, {}) : k ? /* @__PURE__ */ e.jsx(
     "span",
     {
       className: "jump-icon",
-      onClick: z(i),
-      children: b
+      onClick: M(i),
+      children: k
     }
-  ) : /* @__PURE__ */ n.jsx(Y, { className: "opacity-pos-svg" }), V = (t) => {
+  ) : /* @__PURE__ */ e.jsx(G, { className: "opacity-pos-svg" }), V = (t) => {
     if (t.badge !== void 0)
-      return /* @__PURE__ */ n.jsx("div", { className: "menu-item-badge", children: /* @__PURE__ */ n.jsx("span", { children: t.badge }) });
+      return /* @__PURE__ */ e.jsx("div", { className: "menu-item-badge", children: /* @__PURE__ */ e.jsx("span", { children: t.badge }) });
   }, ne = (t) => (i) => {
-    i.preventDefault(), !(t.children && t.children.length > 0) && c && c(t);
+    i.preventDefault(), !(t.children && t.children.length > 0) && l && l(t);
   }, te = () => {
-    p == 1 ? h && h() : E && E();
+    m == 1 ? d && d() : L && L();
   }, se = () => {
-    clearTimeout(m.leaveBox), m.leaveBox = setTimeout(() => {
-      p === 1 ? f && f() : j && j();
+    clearTimeout(p.leaveBox), p.leaveBox = setTimeout(() => {
+      m === 1 ? v && v() : f && f();
     }, 50);
   }, W = () => {
-    clearTimeout(m.leaveBox);
+    clearTimeout(p.leaveBox);
   }, re = () => {
-    $(!1), O(""), w([]), f && f();
+    _(!1), w(""), F([]), v && v();
   }, oe = (t) => (i) => {
-    le(i.target), $(!1), clearTimeout(m.closeTimer), m.closeTimer = setTimeout(() => {
-      (t.children || []).length > 0 ? ($(!0), O(i.target.getAttribute("data-menu-id") || ""), w(t.children || [])) : ($(!1), O(""), w([]));
+    le(i.target), _(!1), clearTimeout(p.closeTimer), p.closeTimer = setTimeout(() => {
+      (t.children || []).length > 0 ? (_(!0), w(i.target.getAttribute("data-menu-id") || ""), F(t.children || [])) : (_(!1), w(""), F([]));
     });
-  }, G = (t) => (i) => {
+  }, K = (t) => (i) => {
   }, le = (t) => {
-    if (I) {
-      const a = I.current?.querySelector(".menu-item-popper-content-item-hover");
-      a && a.classList.remove("menu-item-popper-content-item-hover");
+    if ($) {
+      const u = $.current?.querySelector(".menu-item-popper-content-item-hover");
+      u && u.classList.remove("menu-item-popper-content-item-hover");
     }
     t && t.classList.add("menu-item-popper-content-item-hover");
-  }, ie = D(() => /* @__PURE__ */ n.jsx(
+  }, ie = D(() => /* @__PURE__ */ e.jsx(
     "div",
     {
       className: "menu-item-popper-content",
       onMouseEnter: te,
       onMouseLeave: se,
-      ref: I,
-      children: B.map((t, i) => {
-        const a = de(t.children);
-        return /* @__PURE__ */ n.jsx(
+      ref: $,
+      children: O.map((t, i) => {
+        const u = he(t.children);
+        return /* @__PURE__ */ e.jsx(
           "div",
           {
-            className: P(t),
+            className: R(t),
             onMouseEnter: oe(t),
-            onMouseLeave: G(),
-            children: /* @__PURE__ */ n.jsxs(
-              a,
+            onMouseLeave: K(),
+            children: /* @__PURE__ */ e.jsxs(
+              u,
               {
                 className: "menu-item-popper-content-item-content",
                 "data-menu-id": t._paraui_menu_id,
                 onClick: ne(t),
-                ...he(t.children, t.path, t.href),
+                ...fe(t.children, t.path, t.href),
                 children: [
-                  ee(t.icon),
-                  /* @__PURE__ */ n.jsxs("div", { className: "menu-item-content", children: [
-                    /* @__PURE__ */ n.jsx("span", { className: "menu-item-label", children: /* @__PURE__ */ n.jsx(xe, { children: t.label }) }),
+                  o(t.icon),
+                  /* @__PURE__ */ e.jsxs("div", { className: "menu-item-content", children: [
+                    /* @__PURE__ */ e.jsx("span", { className: "menu-item-label", children: /* @__PURE__ */ e.jsx(me, { children: t.label }) }),
                     V(t)
                   ] }),
-                  /* @__PURE__ */ n.jsx("span", { className: "menu-item-arrow", children: U(t.children, t) })
+                  /* @__PURE__ */ e.jsx("span", { className: "menu-item-arrow", children: H(t.children, t) })
                 ]
               }
             )
@@ -242,272 +259,272 @@ const de = (d) => {
       })
     }
   ), [
-    B,
-    c,
-    g,
-    L,
-    c,
-    h,
-    f,
-    p,
-    M,
-    b
-  ]), ce = () => /* @__PURE__ */ n.jsx(
+    O,
+    l,
+    N,
+    y,
+    l,
+    d,
+    v,
+    m,
+    P,
+    k
+  ]), ce = () => /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: l(),
-      style: _,
+      className: a(),
+      style: S,
       children: ie
     }
-  ), K = D(() => /* @__PURE__ */ n.jsx(n.Fragment, { children: Le(/* @__PURE__ */ n.jsx(ce, {}), document.getElementsByTagName("body")[0]) }), [
-    _,
-    B,
-    c,
+  ), Q = D(() => /* @__PURE__ */ e.jsx(e.Fragment, { children: Le(/* @__PURE__ */ e.jsx(ce, {}), document.getElementsByTagName("body")[0]) }), [
+    S,
+    O,
+    l,
+    N,
+    y,
+    l,
+    d,
+    v,
+    m,
+    j,
     g,
-    L,
     c,
-    h,
-    f,
-    p,
-    T,
-    C,
-    u,
-    M,
-    b
+    P,
+    k
   ]);
-  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    K,
-    S && /* @__PURE__ */ n.jsx(
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    Q,
+    I && /* @__PURE__ */ e.jsx(
       ge,
       {
-        size: u,
-        open: S,
-        anchorEl: H,
-        list: y,
-        idMenuLast: g,
-        selectMenu: L,
-        onClickMenu: c,
-        onMouseEnter: h,
-        onMouseLeave: f,
+        size: c,
+        open: I,
+        anchorEl: Y,
+        list: B,
+        idMenuLast: N,
+        selectMenu: y,
+        onClickMenu: l,
+        onMouseEnter: d,
+        onMouseLeave: v,
         onMouseEnterBus: W,
         onMouseLeaveBus: re,
-        color: C,
-        level: p + 1,
-        jumpIcon: b,
-        onClickJump: M
+        color: g,
+        level: m + 1,
+        jumpIcon: k,
+        onClickJump: P
       }
     )
   ] });
-}, ue = (d) => {
-  if (!d) return 0;
+}, ue = (h) => {
+  if (!h) return 0;
   try {
-    const u = d.match(/translate3d\((.*)px, (.*)px, (.*)px\)/);
-    return Number(u && u[2]);
+    const c = h.match(/translate3d\((.*)px, (.*)px, (.*)px\)/);
+    return Number(c && c[2]);
   } catch {
   }
   return 0;
-}, we = (d) => {
+}, we = (h) => {
   const {
-    list: u,
-    expansion: N = !0,
-    selectMenu: v = "",
-    onClickMenu: g,
-    className: L,
-    shrinkOthers: c = !0,
-    size: B = "large",
-    jumpIcon: h,
-    onClickJump: f,
-    color: E
-  } = d, [j, p] = x([]), [C, T] = x(!1), [b, M] = x(null), [S, $] = x(""), [H, O] = x([]), [y, w] = x(""), [_, q] = x({}), [m, I] = x({ prev: !1, next: !1 }), [s] = x({}), l = Te.useRef(null);
-  R(() => () => {
-    clearTimeout(s.arrowTimer), clearTimeout(s.leaveTimer), clearTimeout(s.enterTimer);
-  }, []), R(() => {
-    const e = u || [], r = [];
-    for (let o = 0, k = e.length; o < k; o++) {
-      const Z = e[o];
-      r.push({ ...Z });
+    list: c,
+    expansion: E = !0,
+    selectMenu: T = "",
+    onClickMenu: N,
+    className: y,
+    shrinkOthers: l = !0,
+    size: O = "large",
+    jumpIcon: d,
+    onClickJump: v,
+    color: L
+  } = h, [f, m] = C([]), [g, j] = C(!1), [k, P] = C(null), [I, _] = C(""), [Y, w] = C([]), [B, F] = C(""), [S, U] = C({}), [p, $] = C({ prev: !1, next: !1 }), [x] = C({}), a = Te.useRef(null);
+  A(() => () => {
+    clearTimeout(x.arrowTimer), clearTimeout(x.leaveTimer), clearTimeout(x.enterTimer);
+  }, []), A(() => {
+    const n = c || [], s = [];
+    for (let r = 0, b = n.length; r < b; r++) {
+      const ee = n[r];
+      s.push({ ...ee });
     }
-    ne(r);
-  }, [u]), R(() => {
-    P();
-  }, [j]), R(() => {
-    v !== y && w(v), P();
-  }, [v]);
-  const P = () => {
-    clearTimeout(s.arrowTimer), s.arrowTimer = setTimeout(() => {
-      if (!l.current) return;
-      const { min: e, max: r } = V(), o = ue(l.current.style.transform);
-      I({ prev: o !== e, next: o > r });
+    ne(s);
+  }, [c]), A(() => {
+    R();
+  }, [f]), A(() => {
+    T !== B && F(T), R();
+  }, [T]);
+  const R = () => {
+    clearTimeout(x.arrowTimer), x.arrowTimer = setTimeout(() => {
+      if (!a.current) return;
+      const { min: n, max: s } = V(), r = ue(a.current.style.transform);
+      $({ prev: r !== n, next: r > s });
     }, 300);
-  }, ee = (e) => {
-    if (!l.current) return;
-    l.current.style.transition = "none";
-    const { deltaY: r } = e;
-    let o = ue(l.current.style.transform);
-    o -= r, U(o);
-  }, z = (e) => () => {
-    if (!l.current) return;
-    const r = 100;
-    let o = ue(l.current.style.transform);
-    switch (e) {
+  }, o = (n) => {
+    if (!a.current) return;
+    a.current.style.transition = "none";
+    const { deltaY: s } = n;
+    let r = ue(a.current.style.transform);
+    r -= s, H(r);
+  }, M = (n) => () => {
+    if (!a.current) return;
+    const s = 100;
+    let r = ue(a.current.style.transform);
+    switch (n) {
       case "next":
-        o -= r;
+        r -= s;
         break;
       case "prev":
-        o += r;
+        r += s;
         break;
     }
-    U(o);
-  }, U = (e) => {
-    if (!l.current) return;
-    const { min: r, max: o } = V();
-    e > r && (e = r), e < o && (e = o), I({ prev: e !== r, next: e > o }), l.current.style.transform = `translate3d(0, ${e}px, 0)`, l.current.style.transition = "all .3s";
+    H(r);
+  }, H = (n) => {
+    if (!a.current) return;
+    const { min: s, max: r } = V();
+    n > s && (n = s), n < r && (n = r), $({ prev: n !== s, next: n > r }), a.current.style.transform = `translate3d(0, ${n}px, 0)`, a.current.style.transition = "all .3s";
   }, V = () => {
-    if (!l.current || !l.current.parentNode)
+    if (!a.current || !a.current.parentNode)
       return { min: 0, max: 0 };
-    const e = l.current.parentNode.getBoundingClientRect().height, r = 0;
-    let o = -(l.current.getBoundingClientRect().height - e);
-    return e > l.current.getBoundingClientRect().height && (o = 0), { min: r, max: o };
-  }, ne = (e) => {
-    const r = {}, o = {}, k = (Z, pe) => {
-      for (let ae = 0, Ce = Z.length; ae < Ce; ae++) {
-        const F = Z[ae], J = F.path || "";
-        if (F._paraui_menu_id = `_paraui_menu_id_${Ee()}`, pe) {
-          const fe = ye(r[pe.path || ""] || []);
-          fe.push(J), r[J] = [...fe];
+    const n = a.current.parentNode.getBoundingClientRect().height, s = 0;
+    let r = -(a.current.getBoundingClientRect().height - n);
+    return n > a.current.getBoundingClientRect().height && (r = 0), { min: s, max: r };
+  }, ne = (n) => {
+    const s = {}, r = {}, b = (ee, xe) => {
+      for (let ae = 0, Ce = ee.length; ae < Ce; ae++) {
+        const J = ee[ae], q = J.path || "";
+        if (J._paraui_menu_id = `_paraui_menu_id_${Ee()}`, xe) {
+          const ve = ye(s[xe.path || ""] || []);
+          ve.push(q), s[q] = [...ve];
         } else
-          r[J] = [J], F._paraui_menu_first = !0;
-        F.children && F.children.length > 0 ? k(F.children, F) : o[J] = r[J];
+          s[q] = [q], J._paraui_menu_first = !0;
+        J.children && J.children.length > 0 ? b(J.children, J) : r[q] = s[q];
       }
     };
-    k(e), q(o), p(e);
-  }, te = (e, r) => (o) => {
-    T(!1), clearTimeout(s.enterTimer), s.enterTimer = setTimeout(() => {
-      clearTimeout(s.leaveTimer);
-      let k = [e];
-      e.children && e.children.length > 0 && (k = e.children), M(r), $(o.target.getAttribute("data-menu-id") || ""), O(k), T(!0);
+    b(n), U(r), m(n);
+  }, te = (n, s) => (r) => {
+    j(!1), clearTimeout(x.enterTimer), x.enterTimer = setTimeout(() => {
+      clearTimeout(x.leaveTimer);
+      let b = [n];
+      n.children && n.children.length > 0 && (b = n.children), P(s), _(r.target.getAttribute("data-menu-id") || ""), w(b), j(!0);
     });
-  }, se = (e) => (r) => {
+  }, se = (n) => (s) => {
     W();
   }, W = () => {
-    clearTimeout(s.leaveTimer), s.leaveTimer = setTimeout(() => {
-      G();
+    clearTimeout(x.leaveTimer), x.leaveTimer = setTimeout(() => {
+      K();
     }, 50);
   }, re = () => {
-    clearTimeout(s.leaveTimer);
+    clearTimeout(x.leaveTimer);
   }, oe = () => {
     W();
-  }, G = () => {
-    T(!1), $(""), O([]), M(null);
-  }, le = (e) => {
-    const { icon: r, label: o } = e;
-    if (r) {
-      const k = me[r];
-      return k ? k() : r;
+  }, K = () => {
+    j(!1), _(""), w([]), P(null);
+  }, le = (n) => {
+    const { icon: s, label: r } = n;
+    if (s) {
+      const b = pe[s];
+      return b ? b() : s;
     }
-    return typeof o == "string" ? o[0] : o;
-  }, ie = (e) => {
-    if (e.badge !== void 0)
-      return /* @__PURE__ */ n.jsx("div", { className: "menu-item-shrink-badge", children: /* @__PURE__ */ n.jsx("span", { children: e.badge }) });
-  }, ce = (e) => (r) => {
-    if (!e.children || e.children.length === 0) {
-      const o = { ...e };
-      delete o._paraui_menu_id, g && g(o);
+    return typeof r == "string" ? r[0] : r;
+  }, ie = (n) => {
+    if (n.badge !== void 0)
+      return /* @__PURE__ */ e.jsx("div", { className: "menu-item-shrink-badge", children: /* @__PURE__ */ e.jsx("span", { children: n.badge }) });
+  }, ce = (n) => (s) => {
+    if (!n.children || n.children.length === 0) {
+      const r = { ...n };
+      delete r._paraui_menu_id, N && N(r);
     }
-    r.preventDefault();
-  }, K = (e) => {
-    if (e === !1)
-      return P();
-    G();
-    const r = { ...e };
-    delete r._paraui_menu_id, g && g(r);
-  }, t = (e, r) => {
-    let o = "vertical-menu-list-item-shrink";
-    const k = _?.[y || ""];
-    return k && k.indexOf(e.path || "") !== -1 && (o += " vertical-menu-list-item-shrink-select"), b === r && (o += " vertical-menu-list-item-shrink-hover"), o;
+    s.preventDefault();
+  }, Q = (n) => {
+    if (n === !1)
+      return R();
+    K();
+    const s = { ...n };
+    delete s._paraui_menu_id, N && N(s);
+  }, t = (n, s) => {
+    let r = "vertical-menu-list-item-shrink";
+    const b = S?.[B || ""];
+    return b && b.indexOf(n.path || "") !== -1 && (r += " vertical-menu-list-item-shrink-select"), k === s && (r += " vertical-menu-list-item-shrink-hover"), r;
   }, i = () => {
-    let e = "vertical-menu-list";
-    return L && (e += ` ${L}`), e;
-  }, a = D(() => {
-    if (N)
-      return j.map((e, r) => /* @__PURE__ */ ke(
-        ve,
+    let n = "vertical-menu-list";
+    return y && (n += ` ${y}`), n;
+  }, u = D(() => {
+    if (E)
+      return f.map((n, s) => /* @__PURE__ */ Ne(
+        de,
         {
-          ...e,
-          key: r,
+          ...n,
+          key: s,
           level: 1,
-          jumpIcon: e.jumpIcon || h,
-          onClickJump: e.onClickJump || f,
-          idMenuLast: _,
-          selectMenu: y,
-          onClickMenu: K,
-          shrinkOthers: c
+          jumpIcon: n.jumpIcon || d,
+          onClickJump: n.onClickJump || v,
+          idMenuLast: S,
+          selectMenu: B,
+          onClickMenu: Q,
+          shrinkOthers: l
         }
       ));
-  }, [N, j, _, y, g, c, h, f]), Q = D(() => N ? null : j.map((e, r) => {
-    const o = de(e.children);
-    return /* @__PURE__ */ n.jsx(
-      o,
+  }, [E, f, S, B, N, l, d, v]), X = D(() => E ? null : f.map((n, s) => {
+    const r = he(n.children);
+    return /* @__PURE__ */ e.jsx(
+      r,
       {
-        className: t(e, r),
-        onMouseEnter: te(e, r),
+        className: t(n, s),
+        onMouseEnter: te(n, s),
         onMouseLeave: se(),
-        "data-menu-id": e._paraui_menu_id,
-        onClick: ce(e),
-        ...he(e.children, e.path, e.href),
-        children: /* @__PURE__ */ n.jsxs("span", { className: "vertical-menu-list-item-shrink-content", children: [
-          le(e),
-          ie(e)
+        "data-menu-id": n._paraui_menu_id,
+        onClick: ce(n),
+        ...fe(n.children, n.path, n.href),
+        children: /* @__PURE__ */ e.jsxs("span", { className: "vertical-menu-list-item-shrink-content", children: [
+          le(n),
+          ie(n)
         ] })
       },
-      r
+      s
     );
-  }), [N, j, _, y, b]), X = D(() => /* @__PURE__ */ n.jsx(n.Fragment, { children: m.prev && /* @__PURE__ */ n.jsx("div", { className: "scroll-top", children: /* @__PURE__ */ n.jsx("span", { onClick: z("prev"), children: /* @__PURE__ */ n.jsx(Y, {}) }) }) }), [m]), je = D(() => /* @__PURE__ */ n.jsx(n.Fragment, { children: m.next && /* @__PURE__ */ n.jsx("div", { className: "scroll-bottom", children: /* @__PURE__ */ n.jsx("span", { onClick: z("next"), children: /* @__PURE__ */ n.jsx(Y, {}) }) }) }), [m]), Me = D(() => /* @__PURE__ */ n.jsx(n.Fragment, { children: C && /* @__PURE__ */ n.jsx(
+  }), [E, f, S, B, k]), Z = D(() => /* @__PURE__ */ e.jsx(e.Fragment, { children: p.prev && /* @__PURE__ */ e.jsx("div", { className: "scroll-top", children: /* @__PURE__ */ e.jsx("span", { onClick: M("prev"), children: /* @__PURE__ */ e.jsx(G, {}) }) }) }), [p]), je = D(() => /* @__PURE__ */ e.jsx(e.Fragment, { children: p.next && /* @__PURE__ */ e.jsx("div", { className: "scroll-bottom", children: /* @__PURE__ */ e.jsx("span", { onClick: M("next"), children: /* @__PURE__ */ e.jsx(G, {}) }) }) }), [p]), Me = D(() => /* @__PURE__ */ e.jsx(e.Fragment, { children: g && /* @__PURE__ */ e.jsx(
     ge,
     {
-      open: C,
-      anchorEl: S,
-      list: H,
-      idMenuLast: _,
-      selectMenu: y,
-      onClickMenu: K,
+      open: g,
+      anchorEl: I,
+      list: Y,
+      idMenuLast: S,
+      selectMenu: B,
+      onClickMenu: Q,
       onMouseEnter: re,
       onMouseLeave: oe,
-      color: E,
+      color: L,
       level: 1,
-      size: B,
-      jumpIcon: h,
-      onClickJump: f
+      size: O,
+      jumpIcon: d,
+      onClickJump: v
     }
   ) }), [
-    C,
-    S,
-    H,
-    _,
-    y,
     g,
-    s,
-    E,
+    I,
+    Y,
+    S,
     B,
-    h,
-    f
+    N,
+    x,
+    L,
+    O,
+    d,
+    v
   ]);
-  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    /* @__PURE__ */ n.jsxs(
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(
       "div",
       {
         className: i(),
-        onWheel: ee,
+        onWheel: o,
         children: [
-          X,
-          /* @__PURE__ */ n.jsx("div", { className: "vertical-menu-list-box", children: /* @__PURE__ */ n.jsxs(
+          Z,
+          /* @__PURE__ */ e.jsx("div", { className: "vertical-menu-list-box", children: /* @__PURE__ */ e.jsxs(
             "div",
             {
               className: "vertical-menu-list-box-srcoll",
-              ref: l,
+              ref: a,
               children: [
-                a,
-                Q
+                u,
+                X
               ]
             }
           ) }),