@unicom-cloud/ui 0.8.41

package/chunk/CUK6MU72.js

@@ -0,0 +1,694 @@
+import { jsx as i, jsxs as F, Fragment as we } from "react/jsx-runtime";
+import Ae from "@unicom-cloud/icons/IconUiMenuFold";
+import Ue from "@unicom-cloud/icons/IconUiMenuUnfold";
+import He from "lodash/isPlainObject";
+import L, { createContext as Be, useContext as K, forwardRef as X, useRef as J, useEffect as Z, useState as Ce, useMemo as Fe } from "react";
+import "./DP2rzg_V.js";
+import { a as Ie } from "./Dc_89PVN.js";
+import Ve from "../hooks/useForceUpdate.js";
+import le from "../hooks/useId.js";
+import We from "../hooks/useKeyboardEvent.js";
+import Ge from "../hooks/useMergeProps.js";
+import re from "../hooks/useMergeValue.js";
+import { a as ze } from "./cRoKuTbN.js";
+import B from "@unicom-cloud/utils/class-name";
+import z from "../utils/omit.js";
+import je from "@unicom-cloud/scroll-into-view-if-needed";
+import qe from "../hooks/useIsFirstRender.js";
+import Qe from "../Tooltip.js";
+import { Enter as ie, ArrowLeft as Ye, ArrowRight as Je } from "../utils/keyCode.js";
+import { getStyle as ge } from "../utils/style.js";
+import ve from "@unicom-cloud/icons/IconUiDown";
+import { CSSTransition as Xe } from "@unicom-cloud/react-transition-group";
+import Ze from "../hooks/useStateWithPromise.js";
+import en from "../utils/pick.js";
+import nn from "@unicom-cloud/icons/IconUiLeft";
+import tn from "@unicom-cloud/icons/IconUiRight";
+import on from "../Dropdown.js";
+import "./C6Kfwj0f.js";
+import "../Trigger.js";
+const H = Be({});
+function ee(l) {
+  const { prefixCls: o, levelIndent: e } = l, { collapse: s } = K(H), r = l.level - 1;
+  return !s && r > 0 ? /* @__PURE__ */ i("span", { children: [...new Array(r)].map((n, c) => /* @__PURE__ */ i(
+    "span",
+    {
+      className: `${o}-indent`,
+      style: { width: e }
+    },
+    c
+  )) }) : null;
+}
+const Ne = [
+  "popup",
+  "triggerProps",
+  "selectable"
+], Se = (l) => {
+  let o = [];
+  return L.Children.forEach(l, (e) => {
+    var r;
+    const s = (r = e == null ? void 0 : e.type) == null ? void 0 : r.menuType;
+    s === "MenuItem" || s === "SubMenu" ? o.push(e) : s === "MenuGroup" && (o = o.concat(
+      Se(e.props.children)
+    ));
+  }), o;
+}, ke = (l, o = [], e = {}) => {
+  const s = Se(l);
+  return s.forEach((r, n) => {
+    var p, w;
+    const c = r.key, u = r.type.menuType, h = [c, ...o], y = {
+      keyPath: [],
+      prev: ((p = s[n - 1]) == null ? void 0 : p.key) || null,
+      next: ((w = s[n + 1]) == null ? void 0 : w.key) || null
+    };
+    if (n === 0 || n === s.length - 1) {
+      const a = h[1], v = n === 0 ? "firstChild" : "lastChild";
+      a && (e[a] = {
+        ...e[a],
+        [v]: c
+      });
+    }
+    switch (u) {
+      case "SubMenu":
+        y.keyPath = h, ke(r.props.children, h, e);
+        break;
+      case "MenuItem":
+        y.keyPath = h, y.disabled = r.props.disabled;
+        break;
+    }
+    e[c] = {
+      ...e[c],
+      ...y
+    };
+  }), e;
+}, ne = (l, o) => L.Children.map(l, (e, s) => {
+  if (!e || !e.props)
+    return e;
+  const r = typeof e.type == "string";
+  if (!(e.type && e.type.menuType) && e.props.children) {
+    const c = r ? {} : o, u = ne(e.props.children, o);
+    return L.cloneElement(e, {
+      ...c,
+      _key: e.key,
+      children: u.length === 1 ? u[0] : u
+    });
+  }
+  return r ? e : L.cloneElement(e, {
+    ...o,
+    // Properties of the component itself have higher priority
+    ...e.props,
+    _key: e.key || `$menu-${s}`
+  });
+});
+function xe(l, o) {
+  let e = !1;
+  function s(r) {
+    !r || e || L.Children.forEach(r, (n) => {
+      if (n && n.props && n.type && !e) {
+        const c = n.type.menuType, u = n.props.selectable;
+        (c === "MenuItem" || c === "SubMenu" && u) && (e = o.indexOf(n.key) !== -1), !e && n.props.children && s(n.props.children);
+      }
+    });
+  }
+  return s(l), e;
+}
+function rn(l, o) {
+  const {
+    _key: e,
+    children: s,
+    level: r,
+    disabled: n,
+    className: c,
+    style: u,
+    wrapper: h = "div",
+    onClick: y,
+    renderItemInTooltip: p,
+    ...w
+  } = l, {
+    prefixCls: a,
+    mode: v,
+    collapse: P,
+    inDropdown: t,
+    levelIndent: f,
+    selectedKeys: d,
+    autoScrollIntoView: C,
+    scrollConfig: M,
+    tooltipProps: b,
+    onClickMenuItem: N
+  } = K(H), m = J(null), E = qe(), x = v === "vertical" && r > 1, O = P && !t && r === 1, $ = d && ~d.indexOf(e);
+  Z(() => {
+    const k = $ && C;
+    m.current && k && setTimeout(
+      () => {
+        m.current && je(m.current, {
+          behavior: "smooth",
+          block: "start",
+          scrollMode: "if-needed",
+          boundary: document.body,
+          ...M
+        });
+      },
+      E ? 500 : 0
+    );
+  }, [$, C]);
+  const A = (k) => {
+    n || (N == null || N(e, k), y == null || y(k));
+  }, S = /* @__PURE__ */ F(
+    h,
+    {
+      tabIndex: n ? -1 : 0,
+      role: "menuitem",
+      ref: (k) => {
+        o = k, m.current = o;
+      },
+      style: u,
+      className: B(
+        `${a}-item`,
+        {
+          [`${a}-disabled`]: n,
+          [`${a}-selected`]: $,
+          // 存在缩进dom
+          [`${a}-item-indented`]: x && !P
+        },
+        c
+      ),
+      onClick: A,
+      onKeyDown: (k) => {
+        k.key === ie.key && A(k);
+      },
+      ...z(
+        w,
+        ["key", "_key"].concat(Ne)
+      ),
+      children: [
+        x && !P ? /* @__PURE__ */ F(we, { children: [
+          /* @__PURE__ */ i(
+            ee,
+            {
+              prefixCls: a,
+              levelIndent: f,
+              level: r
+            }
+          ),
+          /* @__PURE__ */ i(
+            "span",
+            {
+              className: `${a}-item-inner`,
+              style: {
+                display: "block"
+              },
+              children: s
+            }
+          )
+        ] }) : s,
+        $ && v === "horizontal" ? /* @__PURE__ */ i("div", { className: `${a}-selected-label` }) : null
+      ]
+    }
+  );
+  return O ? /* @__PURE__ */ i(
+    Qe,
+    {
+      trigger: "hover",
+      position: "right",
+      content: typeof p == "function" ? p() : /* @__PURE__ */ i("span", { children: s }),
+      triggerProps: {
+        className: `${a}-item-tooltip`,
+        ...(b == null ? void 0 : b.triggerProps) || {}
+      },
+      ...z(b, ["triggerProps"]),
+      children: S
+    }
+  ) : S;
+}
+const sn = X(rn), ce = sn;
+ce.displayName = "MenuItem";
+ce.menuType = "MenuItem";
+function ln(l, o) {
+  const { children: e, title: s, level: r, className: n, style: c } = l, { prefixCls: u, levelIndent: h } = K(H), y = r === 1 ? r + 1 : r, p = ne(e, {
+    level: y
+  });
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      ref: o,
+      className: B(`${u}-group`, n),
+      style: c,
+      children: [
+        /* @__PURE__ */ F("div", { className: `${u}-group-title`, children: [
+          /* @__PURE__ */ i(
+            ee,
+            {
+              level: r,
+              prefixCls: u,
+              levelIndent: h
+            }
+          ),
+          /* @__PURE__ */ i("span", { children: s })
+        ] }),
+        p
+      ]
+    }
+  );
+}
+const cn = X(ln), ae = cn;
+ae.displayName = "MenuItemGroup";
+ae.menuType = "MenuGroup";
+const se = { height: 0, visibility: "hidden" }, an = (l) => {
+  const {
+    _key: o,
+    children: e,
+    style: s,
+    className: r,
+    title: n,
+    level: c,
+    forwardedRef: u,
+    selectable: h,
+    ...y
+  } = l, {
+    id: p,
+    prefixCls: w,
+    levelIndent: a,
+    openKeys: v = [],
+    selectedKeys: P = [],
+    icons: t,
+    onClickSubMenu: f,
+    onClickMenuItem: d
+  } = K(H), C = `${w}-inline`, M = (v == null ? void 0 : v.indexOf(o)) > -1, b = h && P.indexOf(l._key) > -1 || xe(e, P), [N, m] = Ze(
+    M ? { height: "auto" } : se
+  ), E = (S) => {
+    f(o, c, "inline"), h && d(o, S);
+  }, x = le(`${p}-submenu-inline-`), O = ne(e, {
+    ...en(y, Ne),
+    level: c + 1,
+    selectable: h
+  }), $ = /* @__PURE__ */ F(
+    "div",
+    {
+      tabIndex: 0,
+      "aria-expanded": M,
+      "aria-controls": x,
+      className: B(`${C}-header`, {
+        [`${w}-selected`]: b
+      }),
+      onClick: E,
+      onKeyDown: (S) => {
+        S.key === ie.key && E(S);
+      },
+      children: [
+        /* @__PURE__ */ i(
+          ee,
+          {
+            level: c,
+            prefixCls: w,
+            levelIndent: a
+          }
+        ),
+        /* @__PURE__ */ i("span", { children: n }),
+        /* @__PURE__ */ i("span", { className: `${w}-icon-suffix ${M ? "is-open" : ""}`, children: t && t.horizontalArrowDown ? t.horizontalArrowDown : /* @__PURE__ */ i(ve, {}) })
+      ]
+    }
+  ), A = /* @__PURE__ */ i(
+    "div",
+    {
+      id: x,
+      className: B(`${C}-content`),
+      style: N,
+      children: O
+    }
+  );
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      ref: u,
+      className: B(C, r),
+      style: s,
+      ...z(y, ["key", "popup", "triggerProps"]),
+      children: [
+        $,
+        /* @__PURE__ */ i(
+          Xe,
+          {
+            in: M,
+            timeout: 200,
+            classNames: C,
+            unmountOnExit: !1,
+            onEnter: async (S) => {
+              await m(se), await m({ height: S.scrollHeight });
+            },
+            onEntered: () => {
+              m({ height: "auto" });
+            },
+            onExit: async (S) => {
+              await m({ height: S.scrollHeight }), await m(se);
+            },
+            children: A
+          }
+        )
+      ]
+    }
+  );
+}, un = (l) => {
+  const {
+    _key: o,
+    children: e,
+    style: s,
+    className: r,
+    title: n,
+    level: c,
+    selectable: u,
+    forwardedRef: h,
+    triggerProps: y,
+    ...p
+  } = l, {
+    id: w,
+    prefixCls: a,
+    mode: v,
+    inDropdown: P,
+    levelIndent: t,
+    selectedKeys: f = [],
+    icons: d,
+    triggerProps: C,
+    onClickSubMenu: M,
+    onClickMenuItem: b
+  } = K(H), { rtl: N } = K(Ie), m = { ...C, ...y }, [E, x] = Ce(!1), O = `${a}-pop`, $ = u && f.indexOf(l._key) > -1, A = v === "horizontal" && !P, S = le(`${w}-submenu-pop-`), k = () => {
+    const _ = d && d.popArrowRight ? d.popArrowRight : N ? /* @__PURE__ */ i(nn, {}) : /* @__PURE__ */ i(tn, {}), I = d && d.horizontalArrowDown ? d.horizontalArrowDown : /* @__PURE__ */ i(ve, {});
+    return /* @__PURE__ */ i("span", { className: `${a}-icon-suffix`, children: A ? I : _ });
+  }, V = xe(e, f) || $, G = N ? ["br", "lt"] : ["bl", "rt"], q = (_) => {
+    M(o, c, "pop"), u && b(o, _);
+  };
+  return /* @__PURE__ */ i(
+    on,
+    {
+      trigger: "hover",
+      popupVisible: E,
+      onVisibleChange: x,
+      droplist: /* @__PURE__ */ i(
+        j,
+        {
+          id: S,
+          selectedKeys: f,
+          onClickMenuItem: (_, I) => {
+            b(_, I), x(!1);
+          },
+          children: e
+        }
+      ),
+      triggerProps: {
+        position: A ? G[0] : G[1],
+        showArrow: !0,
+        autoAlignPopupMinWidth: !0,
+        classNames: "fadeIn",
+        duration: 100,
+        mouseEnterDelay: 50,
+        mouseLeaveDelay: 50,
+        className: B(
+          `${O}-trigger`,
+          m && m.className
+        ),
+        ...z(m, ["className"])
+      },
+      children: /* @__PURE__ */ F(
+        "div",
+        {
+          tabIndex: 0,
+          "aria-haspopup": !0,
+          "aria-expanded": E,
+          "aria-controls": S,
+          ref: h,
+          style: s,
+          className: B(
+            O,
+            `${O}-header`,
+            {
+              [`${a}-selected`]: V
+            },
+            r
+          ),
+          onClick: q,
+          onKeyDown: (_) => {
+            const I = _.key;
+            I === ie.key ? q(_) : I === Ye.key ? x(!1) : I === Je.key && x(!0);
+          },
+          ...z(p, ["key", "popup"]),
+          children: [
+            /* @__PURE__ */ i(
+              ee,
+              {
+                prefixCls: a,
+                levelIndent: t,
+                level: c
+              }
+            ),
+            n,
+            k(),
+            V && v === "horizontal" ? /* @__PURE__ */ i("div", { className: `${a}-selected-label` }) : null
+          ]
+        }
+      )
+    }
+  );
+};
+function pn(l, o) {
+  const { children: e, popup: s, level: r } = l, { mode: n, collapse: c, inDropdown: u, collectInlineMenuKeys: h } = K(H), w = !!(typeof s == "function" ? s(r) : s) || c || u || n !== "vertical" ? un : an;
+  return Z(() => (h(l._key), () => {
+    h(l._key, !0);
+  }), []), /* @__PURE__ */ i(w, { forwardedRef: o, ...l, children: e });
+}
+const dn = X(pn), te = dn;
+te.displayName = "SubMenu";
+te.menuType = "SubMenu";
+const mn = 5;
+function Me(l) {
+  return l && Math.ceil(+l.getBoundingClientRect().width);
+}
+function be(l) {
+  const o = Number(l.replace("px", ""));
+  return isNaN(o) ? 0 : o;
+}
+const fn = (l) => {
+  const { children: o, ellipsisText: e = "···", onEllipsisChange: s } = l, { prefixCls: r } = K(H), n = J(null), [c, u] = Ce(null), h = `${r}-overflow-sub-menu`, y = `${r}-overflow-hidden-menu-item`, p = `${r}-overflow-sub-menu-mirror`, w = (t) => {
+    if (t !== c) {
+      const f = L.Children.toArray(o), d = t === null;
+      s == null || s({
+        lastVisibleIndex: d ? f.length - 1 : t,
+        overflowNodes: d ? [] : f.slice(t + 1)
+      }), u(t);
+    }
+  };
+  function a() {
+    if (!n.current)
+      return;
+    const t = n.current, f = Me(t) - mn, d = [].slice.call(t.children);
+    let C = 0, M = 0, b = 0;
+    for (let N = 0; N < d.length; N++) {
+      const m = d[N], E = m.className.split(" "), x = E.indexOf(h) > -1, O = E.indexOf(p) > -1;
+      if (x)
+        continue;
+      const $ = Me(m) + be(ge(m, "marginLeft")) + be(ge(m, "marginRight"));
+      if (O) {
+        b = $;
+        continue;
+      }
+      if (M += $, M > f) {
+        w(
+          // 判断如果将最后一个菜单项换为 ... 是否会超出宽度
+          C - (M - $ + b <= f ? 1 : 2)
+        );
+        return;
+      }
+      C++;
+    }
+    w(null);
+  }
+  const v = (t, f = !1) => /* @__PURE__ */ i(
+    te,
+    {
+      title: /* @__PURE__ */ i("span", { children: e }),
+      className: f ? p : h,
+      children: t
+    },
+    `pqb-menu-overflow-sub-menu${f ? "-mirror" : ""}`
+  ), P = () => {
+    let t = null;
+    const f = v(null, !0), d = L.Children.map(o, (C, M) => {
+      let b = C;
+      if (c !== null && (M > c && (b = L.cloneElement(C, {
+        className: y
+      })), M === c + 1)) {
+        const N = L.Children.toArray(o).slice(c + 1).map(
+          (m) => L.cloneElement(m, {
+            key: m.props._key
+          })
+        );
+        t = v(N);
+      }
+      return b;
+    }) ?? [];
+    return [f, ...d, t];
+  };
+  return Z(() => {
+    let t;
+    return n.current && (t = new ResizeObserver(a), t.observe(n.current)), () => {
+      var f, d;
+      n.current && ((f = t == null ? void 0 : t.unobserve) == null || f.call(t, n.current)), (d = t == null ? void 0 : t.disconnect) == null || d.call(t), t = null;
+    };
+  }, [n.current]), /* @__PURE__ */ i("div", { className: `${r}-overflow-wrap`, ref: n, children: P() });
+}, hn = "light", yn = {
+  mode: "vertical",
+  selectable: !0,
+  ellipsis: !0
+};
+function gn(l, o) {
+  const { getPrefixCls: e, componentConfig: s, rtl: r } = K(Ie), n = Ge(
+    l,
+    yn,
+    s == null ? void 0 : s.Menu
+  ), {
+    style: c,
+    children: u,
+    className: h,
+    prefixCls: y,
+    mode: p,
+    theme: w,
+    icons: a,
+    levelIndent: v,
+    collapse: P,
+    inDropdown: t,
+    selectable: f,
+    triggerProps: d,
+    tooltipProps: C,
+    ellipsis: M,
+    accordion: b,
+    autoOpen: N,
+    autoScrollIntoView: m,
+    scrollConfig: E,
+    hasCollapseButton: x,
+    defaultOpenKeys: O,
+    defaultSelectedKeys: $,
+    openKeys: A,
+    selectedKeys: S,
+    onClickSubMenu: k,
+    onClickMenuItem: V,
+    onCollapseChange: G,
+    onEllipsisChange: q,
+    ..._
+  } = n, [I, ue] = re([], {
+    defaultValue: O,
+    value: A
+  }), [$e, Pe] = re([], {
+    defaultValue: $,
+    value: S
+  }), [Q, Ee] = re(!1, {
+    value: P
+  }), Te = K(H), { siderCollapsed: Oe } = K(ze), R = y || e("menu"), Y = Oe || Q || t || p === "popButton", pe = w || Te.theme || hn, W = J([]), de = J([]), _e = Ve(), Re = We(), me = Fe(() => ke(u), [u]), De = le(`${R}-`), oe = _.id || De;
+  Z(() => {
+    let g = I.filter(
+      (T) => W.current.indexOf(T) !== -1
+    );
+    if (N) {
+      const T = W.current.filter(
+        (D) => de.current.indexOf(D) === -1
+      );
+      g = I.concat(T);
+    }
+    ue(b ? g.slice(0, 1) : g), de.current = W.current.slice();
+  }, [W.current.toString()]);
+  const fe = p !== "horizontal" && p !== "popButton" && !t && x, Ke = () => {
+    const g = ne(u, { level: 1 }), T = Q ? a && a.collapseActive || /* @__PURE__ */ i(Ue, {}) : a && a.collapseDefault || /* @__PURE__ */ i(Ae, {}), D = () => {
+      const U = !Q;
+      Ee(U), G == null || G(U);
+    };
+    return /* @__PURE__ */ F(we, { children: [
+      /* @__PURE__ */ i("div", { className: `${R}-inner`, children: p === "horizontal" && M !== !1 ? /* @__PURE__ */ i(
+        fn,
+        {
+          ellipsisText: He(M) ? M.text : "···",
+          onEllipsisChange: q,
+          children: g
+        }
+      ) : g }),
+      fe && /* @__PURE__ */ i(
+        "div",
+        {
+          tabIndex: 0,
+          role: "button",
+          "aria-controls": oe,
+          "aria-expanded": !Q,
+          className: `${R}-collapse-button`,
+          onClick: D,
+          ...Re({ onPressEnter: D }),
+          children: T
+        }
+      )
+    ] });
+  }, he = { ...c };
+  return Y && !t && delete he.width, /* @__PURE__ */ i(
+    "div",
+    {
+      id: fe ? oe : void 0,
+      role: "menu",
+      ...z(_, ["isMenu"]),
+      ref: o,
+      style: he,
+      className: B(
+        R,
+        `${R}-${pe}`,
+        `${R}-${p === "horizontal" ? "horizontal" : "vertical"}`,
+        {
+          [`${R}-collapse`]: Y,
+          // 缩起状态自动变成 pop 模式
+          [`${R}-pop`]: p === "pop" || Y,
+          [`${R}-pop-button`]: p === "popButton",
+          [`${R}-rtl`]: r
+        },
+        h
+      ),
+      children: /* @__PURE__ */ i(
+        H.Provider,
+        {
+          value: {
+            mode: p,
+            theme: pe,
+            collapse: Y,
+            levelIndent: v,
+            inDropdown: t,
+            selectedKeys: $e,
+            openKeys: I,
+            icons: a,
+            triggerProps: d,
+            tooltipProps: C,
+            autoScrollIntoView: m,
+            scrollConfig: E,
+            // pass props directly
+            id: oe,
+            prefixCls: R,
+            collectInlineMenuKeys: (g, T) => {
+              T ? W.current = W.current.filter(
+                (D) => D !== g
+              ) : W.current.push(g), _e();
+            },
+            onClickMenuItem: (g, T) => {
+              var D;
+              f && Pe([g]), V == null || V(g, T, (D = me[g]) == null ? void 0 : D.keyPath);
+            },
+            onClickSubMenu: (g, T, D) => {
+              var ye;
+              let U = [...I];
+              D === "inline" && ((I == null ? void 0 : I.indexOf(g)) > -1 ? b && T === 1 ? U = [] : U = I.filter((Le) => Le !== g) : b && T === 1 ? U = [g] : U = I.concat([g])), ue(U), k == null || k(g, U, (ye = me[g]) == null ? void 0 : ye.keyPath);
+            }
+          },
+          children: Ke()
+        }
+      )
+    }
+  );
+}
+const Mn = X(gn), j = Mn;
+j.displayName = "Menu";
+j.Item = ce;
+j.SubMenu = te;
+j.ItemGroup = ae;
+j.__PQB_MENU__ = !0;
+export {
+  j as M
+};