@svar-ui/react-menu 2.4.3 → 2.5.1

package/dist/index.es.js

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