@svar-ui/react-menu 2.5.0 → 2.5.1

package/dist/index.es.js

@@ -1,301 +1,317 @@
-import { jsxs as D, jsx as o, Fragment as R } from "react/jsx-runtime";
-import { useRef as v, useCallback as b, useMemo as O, useState as p, useEffect as z, Fragment as j, forwardRef as E, useImperativeHandle as H } from "react";
-import { uid as B, setID as T, calculatePosition as W, clickOutside as J, locateID as _ } from "@svar-ui/lib-dom";
-import { Portal as K } from "@svar-ui/react-core";
-function S(l, t) {
-  return l.map((e) => {
-    const n = t(e);
-    return e.data && e.data.length && (n.data = S(e.data, t)), n;
+import { jsxs as N, jsx as o, Fragment as R } from "react/jsx-runtime";
+import { useRef as D, useCallback as k, useMemo as E, useState as C, useEffect as A, Fragment as B, forwardRef as X, useImperativeHandle as F } from "react";
+import { uid as T, setID as W, calculatePosition as J, clickOutside as _, locateID as nn } from "@svar-ui/lib-dom";
+import { Portal as G } from "@svar-ui/react-core";
+function K(c, t) {
+  return c.map((n) => {
+    const l = t(n);
+    return n.data && n.data.length && (l.data = K(n.data, t)), l;
   });
 }
-function q(l, t) {
-  const e = [];
-  return l.forEach((n) => {
-    if (n.data) {
-      const a = q(n.data, t);
-      a.length && e.push({ ...n, data: a });
+function U(c, t) {
+  const n = [];
+  return c.forEach((l) => {
+    if (l.data) {
+      const a = U(l.data, t);
+      a.length && n.push({ ...l, data: a });
     } else
-      t(n) && e.push(n);
-  }), e;
+      t(l) && n.push(l);
+  }), n;
 }
-function G(l) {
-  return S(l, (t) => {
-    const e = { ...t, id: t.id || B() };
-    return e.type && (e.comp = e.type), e;
+function V(c) {
+  return K(c, (t) => {
+    const n = { ...t, id: t.id || T() };
+    return n.type && (n.comp = n.type), n;
   });
 }
-const U = {};
-function ee(l) {
-  return U[l] || l;
+const Y = {};
+function en(c) {
+  return Y[c] || c;
 }
-function ce(l, t) {
-  U[l] = t;
+function sn(c, t) {
+  Y[c] = t;
 }
-function te({ onClick: l, onShow: t, option: e }) {
-  const n = v(null), a = b(() => {
-    t(e.data ? e.id : !1, n.current);
-  }, [t, e]), x = b((c) => {
-    if (e.data) {
-      c.stopPropagation(), t(e.id, n.current);
+function tn({ onClick: c, onShow: t, option: n }) {
+  const l = D(null), a = k(() => {
+    t(n.data ? n.id : !1, l.current);
+  }, [t, n]), w = k((u) => {
+    if (n.data) {
+      u.stopPropagation(), t(n.id, l.current);
       return;
     }
-    l(c);
-  }, [l, t, e]), d = O(() => e && e.comp ? ee(e.comp) : null, [e]);
-  return /* @__PURE__ */ D(
+    c(u);
+  }, [c, t, n]), f = E(() => n && n.comp ? en(n.comp) : null, [n]);
+  return /* @__PURE__ */ N(
     "div",
     {
-      ref: n,
-      className: `wx-cDCz9rZQ wx-option ${e.css || ""} ${e.disabled ? "wx-disabled" : ""}`,
-      "data-id": T(e.id),
+      ref: l,
+      className: `wx-cDCz9rZQ wx-option ${n.css || ""} ${n.disabled ? "wx-disabled" : ""}`,
+      "data-id": W(n.id),
       onMouseEnter: a,
-      onClick: x,
+      onClick: w,
       children: [
-        e.icon ? /* @__PURE__ */ o("i", { className: `wx-cDCz9rZQ wx-icon ${e.icon}` }) : null,
-        e.comp ? d ? /* @__PURE__ */ o(d, { item: e, option: e }) : null : /* @__PURE__ */ D("span", { className: "wx-cDCz9rZQ wx-value", children: [
+        n.icon ? /* @__PURE__ */ o("i", { className: `wx-cDCz9rZQ wx-icon ${n.icon}` }) : null,
+        n.comp ? f ? /* @__PURE__ */ o(f, { item: n, option: n }) : null : /* @__PURE__ */ N("span", { className: "wx-cDCz9rZQ wx-value", children: [
           " ",
-          e.text,
+          n.text,
           " "
         ] }),
-        e.subtext ? /* @__PURE__ */ o("span", { className: "wx-cDCz9rZQ wx-subtext", children: e.subtext }) : null,
-        e.data ? /* @__PURE__ */ o("i", { className: "wx-cDCz9rZQ wx-sub-icon wxi-angle-right" }) : null
+        n.subtext ? /* @__PURE__ */ o("span", { className: "wx-cDCz9rZQ wx-subtext", children: n.subtext }) : null,
+        n.data ? /* @__PURE__ */ o("i", { className: "wx-cDCz9rZQ wx-sub-icon wxi-angle-right" }) : null
       ]
     }
   );
 }
-function X({
-  options: l,
+function S({
+  options: c,
   left: t = 0,
-  top: e = 0,
-  at: n = "bottom",
+  top: n = 0,
+  at: l = "bottom",
   parent: a = null,
-  mount: x = null,
-  context: d = null,
-  css: c = "",
-  onClick: u
+  mount: w = null,
+  context: f = null,
+  css: u = "",
+  onClick: h,
+  onCancel: i
 }) {
-  const [f, w] = p(-1e4), [h, C] = p(-1e4), [g, s] = p(20), [r, M] = p(), I = v(null), P = v(u), [A, L] = p(!1), [Q, $] = p(null);
-  z(() => {
-    P.current = u;
-  }, [u]);
-  const m = b(() => {
-    const i = W(I.current, a, n, t, e);
-    i && (w(i.x), C(i.y), s(i.z), M(i.width));
-  }, [a, n, t, e]);
-  z(() => {
-    x && x(m);
+  const [m, p] = C(-1e4), [g, x] = C(-1e4), [r, e] = C(20), [M, Z] = C(), $ = D(null), [P, y] = C(!1), [Q, H] = C(null), z = k(() => {
+    const s = J($.current, a, l, t, n);
+    s && (p(s.x), x(s.y), e(s.z), Z(s.width));
+  }, [a, l, t, n]);
+  A(() => {
+    w && w(z);
   }, []);
-  const Z = b(() => {
-    L(!1);
-  }, []), k = b(() => {
-    P.current && P.current({ action: null, option: null });
-  }, []), N = b((i, y) => {
-    L(i), $(y);
-  }, []), Y = O(() => G(l), [l]);
-  return z(() => {
-    m();
-  }, [a, m]), z(() => {
-    if (I.current)
-      return J(I.current, { callback: k, modal: !0 }).destroy;
-  }, [k]), /* @__PURE__ */ o(
+  const O = k(() => {
+    y(!1);
+  }, []), d = k((s, I) => {
+    y(s), H(I);
+  }, []), L = E(() => V(c), [c]);
+  A(() => {
+    z();
+  }, [a, z]);
+  const b = D(h), v = D(i);
+  return A(() => void (b.current = h), [h]), A(() => void (v.current = i), [i]), A(() => {
+    if (!$.current) return;
+    function s(I) {
+      v.current ? v.current(I) : b.current && b.current({ action: null, option: null });
+    }
+    return _($.current, { callback: s, modal: !0 }).destroy;
+  }, []), /* @__PURE__ */ o(
     "div",
     {
-      ref: I,
+      ref: $,
       "data-wx-menu": "true",
-      className: `wx-XMmAGqVx wx-menu ${c}`,
+      className: `wx-XMmAGqVx wx-menu ${u}`,
       style: {
         position: "absolute",
-        top: h + "px",
-        left: f + "px",
-        width: r,
-        zIndex: g
+        top: g + "px",
+        left: m + "px",
+        width: M,
+        zIndex: r
       },
-      onMouseLeave: Z,
-      children: Y.map((i) => /* @__PURE__ */ D(j, { children: [
-        i.comp === "separator" ? /* @__PURE__ */ o("div", { className: "wx-XMmAGqVx wx-separator" }) : /* @__PURE__ */ o(
-          te,
+      onMouseLeave: O,
+      children: L.map((s) => /* @__PURE__ */ N(B, { children: [
+        s.comp === "separator" ? /* @__PURE__ */ o("div", { className: "wx-XMmAGqVx wx-separator" }) : /* @__PURE__ */ o(
+          tn,
           {
-            option: i,
-            onShow: N,
-            onClick: (y) => {
-              if (!i.data && !y.defaultPrevented) {
-                const F = { context: d, action: i, option: i, event: y };
-                i.handler && i.handler(F), u && u(F), y.stopPropagation();
+            option: s,
+            onShow: d,
+            onClick: (I) => {
+              if (!s.data && !I.defaultPrevented) {
+                const q = { context: f, action: s, option: s, event: I };
+                s.handler && s.handler(q), h && h(q), I.stopPropagation();
               }
             }
           }
         ),
-        i.data && A === i.id ? /* @__PURE__ */ o(
-          X,
+        s.data && P === s.id ? /* @__PURE__ */ o(
+          S,
           {
-            css: c,
-            options: i.data,
+            css: u,
+            options: s.data,
             at: "right-overlap",
             parent: Q,
-            context: d,
-            onClick: u
+            context: f,
+            onClick: h,
+            onCancel: i
           }
         ) : null
-      ] }, i.id))
+      ] }, s.id))
     }
   );
 }
-const V = E(function(t, e) {
+const j = X(function(t, n) {
   const {
-    options: n,
+    options: l,
     at: a = "bottom",
-    resolver: x = null,
-    dataKey: d = "contextId",
-    filter: c = null,
-    css: u = "",
-    children: f,
-    onClick: w
-  } = t, [h, C] = p(null), [g, s] = p(null), [r, M] = p(0), [I, P] = p(0), A = O(
-    () => `data-${d.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()}`,
-    [d]
-  ), L = O(() => h !== null && c ? q(n, (m) => c(m, h)) : n, [h, c, n]), Q = b(
-    (m) => {
-      s(null), w && w(m);
-    },
-    [w]
-  ), $ = b(
-    (m, Z) => {
-      if (!m) {
-        s(null);
+    resolver: w = null,
+    dataKey: f = "contextId",
+    filter: u = null,
+    css: h = "",
+    children: i,
+    onClick: m
+  } = t, [p, g] = C(null), [x, r] = C(null), [e, M] = C(0), [Z, $] = C(0), P = D(null), y = E(
+    () => `data-${f.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()}`,
+    [f]
+  ), Q = E(() => p !== null && u ? U(l, (d) => u(d, p)) : l, [p, u, l]);
+  function H(d) {
+    r(null), m && m(d);
+  }
+  function z(d) {
+    if (P.current === d) {
+      P.current = null;
+      return;
+    }
+    r(null), m && m({ action: null, option: null });
+  }
+  const O = k(
+    (d, L) => {
+      if (!d) {
+        r(null);
         return;
       }
-      if (m.defaultPrevented) return;
-      const k = m.target;
-      if (k && k.dataset && k.dataset.menuIgnore) return;
-      M(m.clientX + 1), P(m.clientY + 1);
-      let N = typeof Z < "u" ? Z : _(k, A);
-      x && (N = x(N, m), !N) || (C(N), s(k), m.preventDefault());
+      if (d.defaultPrevented) return;
+      const b = d.target;
+      if (b && b.dataset && b.dataset.menuIgnore) return;
+      if (x && x === b) {
+        r(null), d.preventDefault();
+        return;
+      }
+      M(d.clientX + 1), $(d.clientY + 1);
+      let v = typeof L < "u" ? L : nn(b, y);
+      w && (v = w(v, d), !v) || (g(v), r(b), P.current = d.nativeEvent || d, d.preventDefault());
     },
-    [A, x]
+    [x, y, w]
   );
-  return H(e, () => ({ show: $ }), [$]), /* @__PURE__ */ D(R, { children: [
-    f ? /* @__PURE__ */ o("span", { onClick: $, "data-menu-ignore": "true", children: typeof f == "function" ? f() : f }) : null,
-    g ? /* @__PURE__ */ o(K, { children: /* @__PURE__ */ o(
-      X,
+  return F(n, () => ({ show: O }), [O]), /* @__PURE__ */ N(R, { children: [
+    i ? /* @__PURE__ */ o("span", { onClick: O, "data-menu-ignore": "true", children: typeof i == "function" ? i() : i }) : null,
+    x ? /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(
+      S,
       {
-        css: u,
+        css: h,
         at: a,
-        top: I,
-        left: r,
-        parent: g,
-        context: h,
-        onClick: Q,
-        options: L
+        top: Z,
+        left: e,
+        parent: x,
+        context: p,
+        onClick: H,
+        onCancel: z,
+        options: Q
       },
-      g
+      x
     ) }) : null
   ] });
 });
-function ae(l) {
-  const { css: t = "", menuCss: e = "", options: n, onClick: a } = l, x = O(() => G(n), [n]), [d, c] = p(!1), [u, f] = p([]), w = v(null);
-  function h(s) {
-    c(null), a && a(s);
+function an(c) {
+  const { css: t = "", menuCss: n = "", options: l, onClick: a } = c, w = E(() => V(l), [l]), [f, u] = C(!1), [h, i] = C([]), m = D(null);
+  function p(r) {
+    u(null), a && a(r);
   }
-  function C(s, r, M) {
-    r.data && r.data.length ? d && M ? c(null) : (f(r.data), c(r.id), w.current.show(s, r)) : (w.current.show(null), M ? (a && a({ action: r, option: r }), c(null)) : c(-1));
+  function g(r, e, M) {
+    e.data && e.data.length ? f && M ? u(null) : (i(e.data), u(e.id), m.current.show(r, e)) : (m.current.show(null), M ? (a && a({ action: e, option: e }), u(null)) : u(-1));
   }
-  function g(s, r) {
-    d && C(s, r);
+  function x(r, e) {
+    f && g(r, e);
   }
-  return /* @__PURE__ */ D(R, { children: [
-    /* @__PURE__ */ o("div", { className: `wx-UfhPCLL4 wx-menubar ${t}`, children: x.map((s) => /* @__PURE__ */ o(
+  return /* @__PURE__ */ N(R, { children: [
+    /* @__PURE__ */ o("div", { className: `wx-UfhPCLL4 wx-menubar ${t}`, children: w.map((r) => /* @__PURE__ */ o(
       "button",
       {
-        className: `wx-UfhPCLL4 wx-option ${d === s.id ? "wx-active" : ""} ${s.disabled ? "wx-disabled" : ""}`,
-        onMouseEnter: (r) => g(r, s),
-        onClick: (r) => C(r, s, !0),
-        children: s.text
+        className: `wx-UfhPCLL4 wx-option ${f === r.id ? "wx-active" : ""} ${r.disabled ? "wx-disabled" : ""}`,
+        onMouseEnter: (e) => x(e, r),
+        onClick: (e) => g(e, r, !0),
+        children: r.text
       },
-      s.id
+      r.id
     )) }),
     /* @__PURE__ */ o(
-      V,
+      j,
       {
-        css: e,
-        onClick: h,
-        options: u,
-        ref: w
+        css: n,
+        onClick: p,
+        options: h,
+        ref: m
       }
     )
   ] });
 }
-const ue = E(function(t, e) {
-  const { options: n, at: a = "bottom", css: x = "", children: d, onClick: c } = t, [u, f] = p(null);
-  function w(r) {
-    f(null), c && c(r);
+const on = X(function(t, n) {
+  const { options: l, at: a = "bottom", css: w = "", children: f, onClick: u } = t, [h, i] = C(null), m = D(null);
+  function p(e) {
+    i(null), u && u(e);
   }
-  const h = b((r) => {
-    f(r.target), r.preventDefault();
+  function g(e) {
+    if (m.current === e) {
+      m.current = null;
+      return;
+    }
+    i(null), u && u({ action: null, option: null });
+  }
+  const x = k((e) => {
+    i(e.target), m.current = e.nativeEvent || e, e.preventDefault();
   }, []);
-  H(e, () => ({ show: h }), [h]);
-  function C(r) {
-    let M = r.target;
+  F(n, () => ({ show: x }), [x]);
+  function r(e) {
+    let M = e.target;
     for (; !M.dataset.menuIgnore; )
-      f(M), M = M.parentNode;
+      i(M), M = M.parentNode;
   }
-  const g = v(0), s = v(u);
-  return z(() => {
-    s.current !== u && (g.current += 1, s.current = u);
-  }, [u]), /* @__PURE__ */ D(R, { children: [
-    /* @__PURE__ */ o("span", { onClick: C, "data-menu-ignore": "true", children: d }),
-    u ? /* @__PURE__ */ o(K, { children: /* @__PURE__ */ o(
-      X,
+  return /* @__PURE__ */ N(R, { children: [
+    /* @__PURE__ */ o("span", { onClick: r, "data-menu-ignore": "true", children: f }),
+    h ? /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(
+      S,
       {
-        css: x,
+        css: w,
         at: a,
-        parent: u,
-        options: n,
-        onClick: w
-      },
-      g.current
+        parent: h,
+        options: l,
+        onClick: p,
+        onCancel: g
+      }
     ) }) : null
   ] });
-}), ie = E(function(t, e) {
+}), dn = X(function(t, n) {
   const {
-    options: n,
+    options: l,
     at: a = "bottom",
-    resolver: x = null,
-    dataKey: d = "contextId",
-    filter: c = null,
-    css: u = "",
-    children: f,
-    onClick: w
-  } = t, h = v(null), C = b((g, s) => {
-    h.current.show(g, s);
+    resolver: w = null,
+    dataKey: f = "contextId",
+    filter: u = null,
+    css: h = "",
+    children: i,
+    onClick: m
+  } = t, p = D(null), g = k((x, r) => {
+    p.current.show(x, r);
   }, []);
-  return H(
-    e,
+  return F(
+    n,
     () => ({
-      show: C
+      show: g
     }),
-    [C]
-  ), /* @__PURE__ */ D(R, { children: [
-    f ? /* @__PURE__ */ o("span", { onContextMenu: C, "data-menu-ignore": "true", children: f }) : null,
+    [g]
+  ), /* @__PURE__ */ N(R, { children: [
+    i ? /* @__PURE__ */ o("span", { onContextMenu: g, "data-menu-ignore": "true", children: i }) : null,
     /* @__PURE__ */ o(
-      V,
+      j,
       {
-        css: u,
+        css: h,
         at: a,
-        options: n,
-        resolver: x,
-        dataKey: d,
-        filter: c,
-        ref: h,
-        onClick: w
+        options: l,
+        resolver: w,
+        dataKey: f,
+        filter: u,
+        ref: p,
+        onClick: m
       }
     )
   ] });
 });
 export {
-  V as ActionMenu,
-  ie as ContextMenu,
-  ue as DropDownMenu,
-  X as Menu,
-  ae as MenuBar,
-  ce as registerMenuItem
+  j as ActionMenu,
+  dn as ContextMenu,
+  on as DropDownMenu,
+  S as Menu,
+  an as MenuBar,
+  sn as registerMenuItem
 };
 //# sourceMappingURL=index.es.js.map