@unicom-cloud/ui 0.8.43 → 0.8.45

package/menu/Item.js

@@ -0,0 +1,125 @@
+import { jsxs as k, Fragment as D, jsx as o } from "react/jsx-runtime";
+import F from "@unicom-cloud/scroll-into-view-if-needed";
+import { forwardRef as O, useContext as j, useRef as B, useEffect as K } from "react";
+import U from "../hooks/useIsFirstRender.js";
+import V from "../Tooltip.js";
+import z from "@unicom-cloud/utils/class-name";
+import { Enter as A } from "../utils/keyCode.js";
+import x from "../utils/omit.js";
+import H from "./Indent.js";
+import W from "./context.js";
+import { PROPS_NEED_TO_BE_PASSED_IN_SUBMENU as q } from "./util.js";
+function G(T, p) {
+  const {
+    _key: f,
+    children: i,
+    level: l,
+    disabled: m,
+    className: _,
+    style: $,
+    wrapper: w = "div",
+    onClick: c,
+    renderItemInTooltip: u,
+    ...S
+  } = T, {
+    prefixCls: t,
+    mode: y,
+    collapse: a,
+    inDropdown: C,
+    levelIndent: R,
+    selectedKeys: I,
+    autoScrollIntoView: g,
+    scrollConfig: v,
+    tooltipProps: r,
+    onClickMenuItem: d
+  } = j(W), n = B(null), M = U(), N = y === "vertical" && l > 1, P = a && !C && l === 1, s = I && ~I.indexOf(f);
+  K(() => {
+    const e = s && g;
+    n.current && e && setTimeout(
+      () => {
+        n.current && F(n.current, {
+          behavior: "smooth",
+          block: "start",
+          scrollMode: "if-needed",
+          boundary: document.body,
+          ...v
+        });
+      },
+      M ? 500 : 0
+    );
+  }, [s, g]);
+  const h = (e) => {
+    m || (d == null || d(f, e), c == null || c(e));
+  }, b = /* @__PURE__ */ k(
+    w,
+    {
+      tabIndex: m ? -1 : 0,
+      role: "menuitem",
+      ref: (e) => {
+        p = e, n.current = p;
+      },
+      style: $,
+      className: z(
+        `${t}-item`,
+        {
+          [`${t}-disabled`]: m,
+          [`${t}-selected`]: s,
+          // 存在缩进dom
+          [`${t}-item-indented`]: N && !a
+        },
+        _
+      ),
+      onClick: h,
+      onKeyDown: (e) => {
+        e.key === A.key && h(e);
+      },
+      ...x(
+        S,
+        ["key", "_key"].concat(q)
+      ),
+      children: [
+        N && !a ? /* @__PURE__ */ k(D, { children: [
+          /* @__PURE__ */ o(
+            H,
+            {
+              prefixCls: t,
+              levelIndent: R,
+              level: l
+            }
+          ),
+          /* @__PURE__ */ o(
+            "span",
+            {
+              className: `${t}-item-inner`,
+              style: {
+                display: "block"
+              },
+              children: i
+            }
+          )
+        ] }) : i,
+        s && y === "horizontal" ? /* @__PURE__ */ o("div", { className: `${t}-selected-label` }) : null
+      ]
+    }
+  );
+  return P ? /* @__PURE__ */ o(
+    V,
+    {
+      trigger: "hover",
+      position: "right",
+      content: typeof u == "function" ? u() : /* @__PURE__ */ o("span", { children: i }),
+      triggerProps: {
+        className: `${t}-item-tooltip`,
+        ...(r == null ? void 0 : r.triggerProps) || {}
+      },
+      ...x(r, ["triggerProps"]),
+      children: b
+    }
+  ) : b;
+}
+const J = O(G), E = J;
+E.displayName = "MenuItem";
+E.menuType = "MenuItem";
+export {
+  E as default
+};

package/menu/ItemGroup.js

@@ -0,0 +1,39 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { forwardRef as f, useContext as h } from "react";
+import v from "@unicom-cloud/utils/class-name";
+import x from "./context.js";
+import I from "./Indent.js";
+import { processChildren as N } from "./util.js";
+function C(s, l) {
+  const { children: m, title: i, level: e, className: p, style: c } = s, { prefixCls: r, levelIndent: a } = h(x), u = e === 1 ? e + 1 : e, d = N(m, {
+    level: u
+  });
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ref: l,
+      className: v(`${r}-group`, p),
+      style: c,
+      children: [
+        /* @__PURE__ */ o("div", { className: `${r}-group-title`, children: [
+          /* @__PURE__ */ t(
+            I,
+            {
+              level: e,
+              prefixCls: r,
+              levelIndent: a
+            }
+          ),
+          /* @__PURE__ */ t("span", { children: i })
+        ] }),
+        d
+      ]
+    }
+  );
+}
+const G = f(C), n = G;
+n.displayName = "MenuItemGroup";
+n.menuType = "MenuGroup";
+export {
+  n as default
+};

package/menu/Menu.js

@@ -0,0 +1,181 @@
+import { jsx as c, jsxs as de, Fragment as fe } from "react/jsx-runtime";
+import he from "@unicom-cloud/icons/IconUiMenuFold";
+import Ce from "@unicom-cloud/icons/IconUiMenuUnfold";
+import Me from "lodash/isPlainObject";
+import { forwardRef as xe, useContext as y, useRef as B, useMemo as ve, useEffect as Ie } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import Ke from "../hooks/useForceUpdate.js";
+import ye from "../hooks/useId.js";
+import be from "../hooks/useKeyboardEvent.js";
+import ge from "../hooks/useMergeProps.js";
+import b from "../hooks/useMergeValue.js";
+import { SiderContext as Pe } from "../layout/Sider.js";
+import $e from "@unicom-cloud/utils/class-name";
+import Oe from "../utils/omit.js";
+import U from "./context.js";
+import Se from "./Item.js";
+import Ee from "./ItemGroup.js";
+import we from "./OverflowWrap.js";
+import Ne from "./sub-menu/index.js";
+import { generateInfoMap as Be, processChildren as Ue } from "./util.js";
+import { ConfigContext as _e } from "../config-provider/context.js";
+const Fe = "light", ze = {
+  mode: "vertical",
+  selectable: !0,
+  ellipsis: !0
+};
+function Te(_, F) {
+  const { getPrefixCls: z, componentConfig: f, rtl: T } = y(_e), V = ge(
+    _,
+    ze,
+    f == null ? void 0 : f.Menu
+  ), {
+    style: j,
+    children: h,
+    className: A,
+    prefixCls: D,
+    mode: l,
+    theme: H,
+    icons: p,
+    levelIndent: R,
+    collapse: G,
+    inDropdown: u,
+    selectable: L,
+    triggerProps: Q,
+    tooltipProps: W,
+    ellipsis: C,
+    accordion: M,
+    autoOpen: q,
+    autoScrollIntoView: J,
+    scrollConfig: X,
+    hasCollapseButton: Y,
+    defaultOpenKeys: Z,
+    defaultSelectedKeys: k,
+    openKeys: ee,
+    selectedKeys: te,
+    onClickSubMenu: x,
+    onClickMenuItem: v,
+    onCollapseChange: I,
+    onEllipsisChange: oe,
+    ...g
+  } = V, [n, P] = b([], {
+    defaultValue: Z,
+    value: ee
+  }), [re, ne] = b([], {
+    defaultValue: k,
+    value: te
+  }), [m, se] = b(!1, {
+    value: G
+  }), le = y(U), { siderCollapsed: ie } = y(Pe), o = D || z("menu"), d = ie || m || u || l === "popButton", $ = H || le.theme || Fe, i = B([]), O = B([]), ce = Ke(), pe = be(), S = ve(() => Be(h), [h]), ae = ye(`${o}-`), K = g.id || ae;
+  Ie(() => {
+    let e = n.filter(
+      (t) => i.current.indexOf(t) !== -1
+    );
+    if (q) {
+      const t = i.current.filter(
+        (r) => O.current.indexOf(r) === -1
+      );
+      e = n.concat(t);
+    }
+    P(M ? e.slice(0, 1) : e), O.current = i.current.slice();
+  }, [i.current.toString()]);
+  const E = l !== "horizontal" && l !== "popButton" && !u && Y, ue = () => {
+    const e = Ue(h, { level: 1 }), t = m ? p && p.collapseActive || /* @__PURE__ */ c(Ce, {}) : p && p.collapseDefault || /* @__PURE__ */ c(he, {}), r = () => {
+      const s = !m;
+      se(s), I == null || I(s);
+    };
+    return /* @__PURE__ */ de(fe, { children: [
+      /* @__PURE__ */ c("div", { className: `${o}-inner`, children: l === "horizontal" && C !== !1 ? /* @__PURE__ */ c(
+        we,
+        {
+          ellipsisText: Me(C) ? C.text : "···",
+          onEllipsisChange: oe,
+          children: e
+        }
+      ) : e }),
+      E && /* @__PURE__ */ c(
+        "div",
+        {
+          tabIndex: 0,
+          role: "button",
+          "aria-controls": K,
+          "aria-expanded": !m,
+          className: `${o}-collapse-button`,
+          onClick: r,
+          ...pe({ onPressEnter: r }),
+          children: t
+        }
+      )
+    ] });
+  }, w = { ...j };
+  return d && !u && delete w.width, /* @__PURE__ */ c(
+    "div",
+    {
+      id: E ? K : void 0,
+      role: "menu",
+      ...Oe(g, ["isMenu"]),
+      ref: F,
+      style: w,
+      className: $e(
+        o,
+        `${o}-${$}`,
+        `${o}-${l === "horizontal" ? "horizontal" : "vertical"}`,
+        {
+          [`${o}-collapse`]: d,
+          // 缩起状态自动变成 pop 模式
+          [`${o}-pop`]: l === "pop" || d,
+          [`${o}-pop-button`]: l === "popButton",
+          [`${o}-rtl`]: T
+        },
+        A
+      ),
+      children: /* @__PURE__ */ c(
+        U.Provider,
+        {
+          value: {
+            mode: l,
+            theme: $,
+            collapse: d,
+            levelIndent: R,
+            inDropdown: u,
+            selectedKeys: re,
+            openKeys: n,
+            icons: p,
+            triggerProps: Q,
+            tooltipProps: W,
+            autoScrollIntoView: J,
+            scrollConfig: X,
+            // pass props directly
+            id: K,
+            prefixCls: o,
+            collectInlineMenuKeys: (e, t) => {
+              t ? i.current = i.current.filter(
+                (r) => r !== e
+              ) : i.current.push(e), ce();
+            },
+            onClickMenuItem: (e, t) => {
+              var r;
+              L && ne([e]), v == null || v(e, t, (r = S[e]) == null ? void 0 : r.keyPath);
+            },
+            onClickSubMenu: (e, t, r) => {
+              var N;
+              let s = [...n];
+              r === "inline" && ((n == null ? void 0 : n.indexOf(e)) > -1 ? M && t === 1 ? s = [] : s = n.filter((me) => me !== e) : M && t === 1 ? s = [e] : s = n.concat([e])), P(s), x == null || x(e, s, (N = S[e]) == null ? void 0 : N.keyPath);
+            }
+          },
+          children: ue()
+        }
+      )
+    }
+  );
+}
+const Ve = xe(Te), a = Ve;
+a.displayName = "Menu";
+a.Item = Se;
+a.SubMenu = Ne;
+a.ItemGroup = Ee;
+a.__PQB_MENU__ = !0;
+export {
+  a as default
+};

package/menu/OverflowWrap.js

@@ -0,0 +1,85 @@
+import { jsx as h } from "react/jsx-runtime";
+import a, { useContext as O, useRef as T, useState as k, useEffect as A } from "react";
+import { getStyle as x } from "../utils/style.js";
+import H from "./context.js";
+import U from "./sub-menu/index.js";
+const j = 5;
+function C(l) {
+  return l && Math.ceil(+l.getBoundingClientRect().width);
+}
+function g(l) {
+  const u = Number(l.replace("px", ""));
+  return isNaN(u) ? 0 : u;
+}
+const V = (l) => {
+  const { children: u, ellipsisText: R = "···", onEllipsisChange: p } = l, { prefixCls: d } = O(H), o = T(null), [c, y] = k(null), v = `${d}-overflow-sub-menu`, E = `${d}-overflow-hidden-menu-item`, M = `${d}-overflow-sub-menu-mirror`, N = (e) => {
+    if (e !== c) {
+      const n = a.Children.toArray(u), t = e === null;
+      p == null || p({
+        lastVisibleIndex: t ? n.length - 1 : e,
+        overflowNodes: t ? [] : n.slice(e + 1)
+      }), y(e);
+    }
+  };
+  function I() {
+    if (!o.current)
+      return;
+    const e = o.current, n = C(e) - j, t = [].slice.call(e.children);
+    let i = 0, s = 0, f = 0;
+    for (let m = 0; m < t.length; m++) {
+      const r = t[m], b = r.className.split(" "), W = b.indexOf(v) > -1, $ = b.indexOf(M) > -1;
+      if (W)
+        continue;
+      const w = C(r) + g(x(r, "marginLeft")) + g(x(r, "marginRight"));
+      if ($) {
+        f = w;
+        continue;
+      }
+      if (s += w, s > n) {
+        N(
+          // 判断如果将最后一个菜单项换为 ... 是否会超出宽度
+          i - (s - w + f <= n ? 1 : 2)
+        );
+        return;
+      }
+      i++;
+    }
+    N(null);
+  }
+  const S = (e, n = !1) => /* @__PURE__ */ h(
+    U,
+    {
+      title: /* @__PURE__ */ h("span", { children: R }),
+      className: n ? M : v,
+      children: e
+    },
+    `pqb-menu-overflow-sub-menu${n ? "-mirror" : ""}`
+  ), L = () => {
+    let e = null;
+    const n = S(null, !0), t = a.Children.map(u, (i, s) => {
+      let f = i;
+      if (c !== null && (s > c && (f = a.cloneElement(i, {
+        className: E
+      })), s === c + 1)) {
+        const m = a.Children.toArray(u).slice(c + 1).map(
+          (r) => a.cloneElement(r, {
+            key: r.props._key
+          })
+        );
+        e = S(m);
+      }
+      return f;
+    }) ?? [];
+    return [n, ...t, e];
+  };
+  return A(() => {
+    let e;
+    return o.current && (e = new ResizeObserver(I), e.observe(o.current)), () => {
+      var n, t;
+      o.current && ((n = e == null ? void 0 : e.unobserve) == null || n.call(e, o.current)), (t = e == null ? void 0 : e.disconnect) == null || t.call(e), e = null;
+    };
+  }, [o.current]), /* @__PURE__ */ h("div", { className: `${d}-overflow-wrap`, ref: o, children: L() });
+};
+export {
+  V as default
+};

package/menu/context.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+const o = t({});
+export {
+  o as default
+};

package/menu/sub-menu/Inline.js

@@ -0,0 +1,111 @@
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import P from "@unicom-cloud/icons/IconUiDown";
+import { useContext as T } from "react";
+import H from "../../hooks/useId.js";
+import A from "../../hooks/useStateWithPromise.js";
+import U from "../Indent.js";
+import j from "../context.js";
+import { isChildrenSelected as z, processChildren as B, PROPS_NEED_TO_BE_PASSED_IN_SUBMENU as L } from "../util.js";
+import R from "../../utils/CSSTransition.js";
+import d from "@unicom-cloud/utils/class-name";
+import { Enter as q } from "../../utils/keyCode.js";
+import K from "../../utils/omit.js";
+import W from "../../utils/pick.js";
+const h = { height: 0, visibility: "hidden" }, re = (f) => {
+  const {
+    _key: r,
+    children: u,
+    style: C,
+    className: E,
+    title: k,
+    level: l,
+    forwardedRef: w,
+    selectable: c,
+    ...p
+  } = f, {
+    id: I,
+    prefixCls: i,
+    levelIndent: _,
+    openKeys: a = [],
+    selectedKeys: y = [],
+    icons: m,
+    onClickSubMenu: b,
+    onClickMenuItem: g
+  } = T(j), o = `${i}-inline`, s = (a == null ? void 0 : a.indexOf(r)) > -1, D = c && y.indexOf(f._key) > -1 || z(u, y), [$, t] = A(
+    s ? { height: "auto" } : h
+  ), N = (e) => {
+    b(r, l, "inline"), c && g(r, e);
+  }, S = H(`${I}-submenu-inline-`), M = B(u, {
+    ...W(p, L),
+    level: l + 1,
+    selectable: c
+  }), O = /* @__PURE__ */ x(
+    "div",
+    {
+      tabIndex: 0,
+      "aria-expanded": s,
+      "aria-controls": S,
+      className: d(`${o}-header`, {
+        [`${i}-selected`]: D
+      }),
+      onClick: N,
+      onKeyDown: (e) => {
+        e.key === q.key && N(e);
+      },
+      children: [
+        /* @__PURE__ */ n(
+          U,
+          {
+            level: l,
+            prefixCls: i,
+            levelIndent: _
+          }
+        ),
+        /* @__PURE__ */ n("span", { children: k }),
+        /* @__PURE__ */ n("span", { className: `${i}-icon-suffix ${s ? "is-open" : ""}`, children: m && m.horizontalArrowDown ? m.horizontalArrowDown : /* @__PURE__ */ n(P, {}) })
+      ]
+    }
+  ), v = /* @__PURE__ */ n(
+    "div",
+    {
+      id: S,
+      className: d(`${o}-content`),
+      style: $,
+      children: M
+    }
+  );
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      ref: w,
+      className: d(o, E),
+      style: C,
+      ...K(p, ["key", "popup", "triggerProps"]),
+      children: [
+        O,
+        /* @__PURE__ */ n(
+          R,
+          {
+            in: s,
+            timeout: 200,
+            classNames: o,
+            unmountOnExit: !1,
+            onEnter: async (e) => {
+              e && (await t(h), await t({ height: e.scrollHeight }));
+            },
+            onEntered: () => {
+              t({ height: "auto" });
+            },
+            onExit: async (e) => {
+              e && (await t({ height: e.scrollHeight }), await t(h));
+            },
+            children: v
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  re as default
+};

package/menu/sub-menu/Pop.js

@@ -0,0 +1,126 @@
+import { jsx as o, jsxs as K } from "react/jsx-runtime";
+import O from "@unicom-cloud/icons/IconUiDown";
+import T from "@unicom-cloud/icons/IconUiLeft";
+import _ from "@unicom-cloud/icons/IconUiRight";
+import { useContext as y, useState as B } from "react";
+/* empty css                     */
+import "../../config-provider/ConfigProvider.js";
+import H from "../../Dropdown.js";
+import W from "../../hooks/useId.js";
+/* empty css                            */
+/* empty css                             */
+/* empty css                              */
+/* empty css                             */
+/* empty css                  */
+import q from "../Menu.js";
+import F from "../Indent.js";
+import G from "../context.js";
+import { isChildrenSelected as J } from "../util.js";
+import M from "@unicom-cloud/utils/class-name";
+import { Enter as Q, ArrowLeft as X, ArrowRight as Y } from "../../utils/keyCode.js";
+import N from "../../utils/omit.js";
+import { ConfigContext as Z } from "../../config-provider/context.js";
+const xe = (m) => {
+  const {
+    _key: a,
+    children: c,
+    style: P,
+    className: D,
+    title: A,
+    level: d,
+    selectable: u,
+    forwardedRef: S,
+    triggerProps: $,
+    ...v
+  } = m, {
+    id: R,
+    prefixCls: n,
+    mode: f,
+    inDropdown: z,
+    levelIndent: L,
+    selectedKeys: s = [],
+    icons: t,
+    triggerProps: U,
+    onClickSubMenu: V,
+    onClickMenuItem: g
+  } = y(G), { rtl: h } = y(Z), p = { ...U, ...$ }, [w, i] = B(!1), l = `${n}-pop`, j = u && s.indexOf(m._key) > -1, C = f === "horizontal" && !z, I = W(`${R}-submenu-pop-`), E = () => {
+    const e = t && t.popArrowRight ? t.popArrowRight : h ? /* @__PURE__ */ o(T, {}) : /* @__PURE__ */ o(_, {}), r = t && t.horizontalArrowDown ? t.horizontalArrowDown : /* @__PURE__ */ o(O, {});
+    return /* @__PURE__ */ o("span", { className: `${n}-icon-suffix`, children: C ? r : e });
+  }, b = J(c, s) || j, k = h ? ["br", "lt"] : ["bl", "rt"], x = (e) => {
+    V(a, d, "pop"), u && g(a, e);
+  };
+  return /* @__PURE__ */ o(
+    H,
+    {
+      trigger: "hover",
+      popupVisible: w,
+      onVisibleChange: i,
+      droplist: /* @__PURE__ */ o(
+        q,
+        {
+          id: I,
+          selectedKeys: s,
+          onClickMenuItem: (e, r) => {
+            g(e, r), i(!1);
+          },
+          children: c
+        }
+      ),
+      triggerProps: {
+        position: C ? k[0] : k[1],
+        showArrow: !0,
+        autoAlignPopupMinWidth: !0,
+        classNames: "fadeIn",
+        duration: 100,
+        mouseEnterDelay: 50,
+        mouseLeaveDelay: 50,
+        className: M(
+          `${l}-trigger`,
+          p && p.className
+        ),
+        ...N(p, ["className"])
+      },
+      children: /* @__PURE__ */ K(
+        "div",
+        {
+          tabIndex: 0,
+          "aria-haspopup": !0,
+          "aria-expanded": w,
+          "aria-controls": I,
+          ref: S,
+          style: P,
+          className: M(
+            l,
+            `${l}-header`,
+            {
+              [`${n}-selected`]: b
+            },
+            D
+          ),
+          onClick: x,
+          onKeyDown: (e) => {
+            const r = e.key;
+            r === Q.key ? x(e) : r === X.key ? i(!1) : r === Y.key && i(!0);
+          },
+          ...N(v, ["key", "popup"]),
+          children: [
+            /* @__PURE__ */ o(
+              F,
+              {
+                prefixCls: n,
+                levelIndent: L,
+                level: d
+              }
+            ),
+            A,
+            E(),
+            b && f === "horizontal" ? /* @__PURE__ */ o("div", { className: `${n}-selected-label` }) : null
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  xe as default
+};

package/menu/sub-menu/index.js

@@ -0,0 +1,17 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as l, useContext as s, useEffect as M } from "react";
+import a from "../context.js";
+import b from "./Inline.js";
+import S from "./Pop.js";
+function y(e, t) {
+  const { children: r, popup: o, level: f } = e, { mode: p, collapse: c, inDropdown: m, collectInlineMenuKeys: n } = s(a), i = !!(typeof o == "function" ? o(f) : o) || c || m || p !== "vertical" ? S : b;
+  return M(() => (n(e._key), () => {
+    n(e._key, !0);
+  }), []), /* @__PURE__ */ d(i, { forwardedRef: t, ...e, children: r });
+}
+const P = l(y), u = P;
+u.displayName = "SubMenu";
+u.menuType = "SubMenu";
+export {
+  u as default
+};