@ynput/ayon-frontend-shared 0.6.4 → 0.6.6

package/dist/chunks/Menu.es.js

@@ -1,8 +1,8 @@
 import rt from "styled-components";
 import { E as Mt } from "./EmptyPlaceholder.es.js";
 import { jsx as L, jsxs as Q, Fragment as yt } from "react/jsx-runtime";
-import X, { useRef as Z, useEffect as U, useLayoutEffect as st, useState as lt, useCallback as bt } from "react";
-import { M as xt, a as Et, b as Pt, c as K, D as $, d as Lt, e as Rt, S as Ct, F as St } from "./MenuItem.es.js";
+import X, { useRef as Z, useEffect as U, useLayoutEffect as st, useState as lt, useCallback as xt } from "react";
+import { M as Et, a as bt, b as Pt, c as K, D as $, d as Lt, e as Rt, S as Ct, F as St } from "./MenuItem.es.js";
 import { Icon as Tt, Button as Ot } from "@ynput/ayon-react-components";
 import "@module-federation/enhanced/runtime";
 import "./searchTerms.es.js";
@@ -18,7 +18,7 @@ import kt from "clsx";
 import { createPortal as Dt } from "react-dom";
 import "react-redux";
 import { c as Ht } from "./copyToClipboard.es.js";
-const ie = rt(Mt)`
+const re = rt(Mt)`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -36,7 +36,7 @@ const ie = rt(Mt)`
   h3 {
     font-size: 18px;
   }
-`, re = rt.div`
+`, se = rt.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -52,238 +52,240 @@ const ie = rt(Mt)`
     text-transform: capitalize;
   }
 `, ot = ({
-  items: a,
-  handleClick: i,
-  onSubMenu: c,
-  onSubMenuLayout: o,
+  items: c,
+  handleClick: o,
+  onSubMenu: r,
+  onSubMenuLayout: i,
   subMenu: f,
   level: d,
-  id: l = "root-menu",
+  id: a = "root-menu",
   parentRef: e,
   parentEl: p,
-  style: r,
+  style: s,
   placement: h,
   onClose: m,
   onMenuClose: R,
   itemClassName: t,
-  itemStyle: s,
+  itemStyle: l,
   setPowerpackDialog: u,
   ...x
 }) => {
-  const v = Z({}), _ = Z(null), j = (g, k, D) => {
-    const C = v.current[k], H = _.current;
-    if (!C || !H) return;
-    const F = (H.offsetParent ?? document.body).getBoundingClientRect(), S = C.getBoundingClientRect(), y = (H.querySelector("menu") ?? H).getBoundingClientRect(), V = window.innerWidth, I = window.innerHeight, w = 8, P = Math.max(240, y.width), T = Math.min(
-      D.length * 36 + 16,
+  const v = Z({}), _ = Z(null), j = (g, D, H) => {
+    const C = v.current[D], A = _.current;
+    if (!C || !A) return;
+    const F = (A.offsetParent ?? document.body).getBoundingClientRect(), S = C.getBoundingClientRect(), M = (A.querySelector("menu") ?? A).getBoundingClientRect(), q = window.innerWidth, I = window.innerHeight, w = 8, P = Math.max(240, M.width), T = Math.min(
+      H.length * 36 + 16,
       I - K - w
-    ), b = 4, O = () => Math.max(w, y.left - P - b), B = () => y.right + b, W = B() + P <= V - w, A = O() >= w;
-    let n, M;
-    h === "left" && A ? (n = "left", M = O()) : W ? (n = "right", M = B()) : A ? (n = "left", M = O()) : (n = "left", M = Math.max(w, V - P - w));
-    let q = S.top - 8;
-    q + T > I - w && (q = I - T - w), q = Math.max(K, q);
-    const J = n === "left" ? M - 16 : M;
-    c?.(g, {
-      id: k,
+    ), y = 4, B = () => Math.max(w, M.left - P - y), O = () => M.right + y, V = O() + P <= q - w, W = B() >= w;
+    let b, n;
+    h === "left" && W ? (b = "left", n = B()) : V ? (b = "right", n = O()) : W ? (b = "left", n = B()) : (b = "left", n = Math.max(w, q - P - w));
+    let N = S.top - 8;
+    N + T > I - w && (N = I - T - w), N = Math.max(K, N);
+    const J = b === "left" ? n - 16 : n;
+    r?.(g, {
+      id: D,
       style: {
-        top: q - F.top,
+        top: N - F.top,
         left: J - F.left,
-        maxHeight: I - q - w
+        maxHeight: I - N - w
       },
-      items: D,
+      items: H,
       level: d,
-      placement: n,
+      placement: b,
       // Pass the actual menu-item element so sub-menu measurement uses the <li>
       // instead of whatever inner span the mouse event bubbled from.
       parentEl: C
     });
   }, dt = (g) => {
-    f && c?.(g, { id: "parent", items: [] });
+    f && r?.(g, { id: "parent", items: [] });
   };
   return U(() => {
     f && _.current && _.current.querySelectorAll("li, button")[0]?.focus();
   }, [f]), st(() => {
-    if (!f || !_.current || !e || !o || !l) return;
-    const g = _.current, k = e, D = k.closest(".menu-list, .sub-menu");
-    if (!D) return;
-    const C = g.querySelector("menu") ?? g, H = D.querySelector("menu") ?? D, F = (g.offsetParent ?? document.body).getBoundingClientRect(), S = g.getBoundingClientRect(), E = C.getBoundingClientRect(), y = H.getBoundingClientRect(), V = k.getBoundingClientRect(), I = E.left - S.left, w = E.width, P = window.innerWidth, T = window.innerHeight, b = 8, O = 4, B = () => Math.max(b, y.left - w - O), W = () => y.right + O, A = W() + w <= P - b, n = B() >= b;
-    let M, N;
-    h === "left" && n ? (M = "left", N = B()) : A ? (M = "right", N = W()) : n ? (M = "left", N = B()) : (M = "left", N = Math.max(b, P - w - b));
-    const Y = C.querySelector(":scope > li")?.getBoundingClientRect(), J = V.top, pt = Y ? Y.top : S.top + 8, mt = J - pt, tt = C.scrollHeight;
+    if (!f || !_.current || !e || !i || !a) return;
+    const g = _.current, D = e, H = D.closest(".menu-list, .sub-menu");
+    if (!H) return;
+    const C = g.querySelector("menu") ?? g, A = H.querySelector("menu") ?? H, F = (g.offsetParent ?? document.body).getBoundingClientRect(), S = g.getBoundingClientRect(), E = C.getBoundingClientRect(), M = A.getBoundingClientRect(), q = D.getBoundingClientRect(), I = E.left - S.left, w = E.width, P = window.innerWidth, T = window.innerHeight, y = 8, B = 4, O = () => Math.max(y, M.left - w - B), V = () => M.right + B, W = V() + w <= P - y, b = O() >= y;
+    let n, k;
+    h === "left" && b ? (n = "left", k = O()) : W ? (n = "right", k = V()) : b ? (n = "left", k = O()) : (n = "left", k = Math.max(y, P - w - y));
+    const Y = C.querySelector(":scope > li")?.getBoundingClientRect(), J = q.top, pt = Y ? Y.top : S.top + 8, mt = J - pt, tt = C.scrollHeight;
     let z = S.top + mt;
-    if (z + tt > T - b) {
-      const wt = Math.min(tt, T - K - b);
-      z = T - wt - b;
+    if (z + tt > T - y) {
+      const wt = Math.min(tt, T - K - y);
+      z = T - wt - y;
     }
     z = Math.max(K, z);
-    const gt = M === "left" ? N - I : N, et = z - F.top, nt = gt - F.left, ht = typeof r?.top == "number" ? r.top : parseFloat(String(r?.top)), vt = typeof r?.left == "number" ? r.left : parseFloat(String(r?.left));
-    (Math.abs(et - ht) > 1 || Math.abs(nt - vt) > 1) && o(
-      l,
-      { top: et, left: nt, maxHeight: T - z - b },
-      M
+    const gt = n === "left" ? k - I : k, et = z - F.top, nt = gt - F.left, ht = typeof s?.top == "number" ? s.top : parseFloat(String(s?.top)), vt = typeof s?.left == "number" ? s.left : parseFloat(String(s?.left));
+    (Math.abs(et - ht) > 1 || Math.abs(nt - vt) > 1) && i(
+      a,
+      { top: et, left: nt, maxHeight: T - z - y },
+      n
     );
-  }, [f, a, e, l, h, r?.top, r?.left, o]), /* @__PURE__ */ L(
-    xt,
+  }, [f, c, e, a, h, s?.top, s?.left, i]), /* @__PURE__ */ L(
+    Et,
     {
-      style: { paddingLeft: f ? 16 : 0, ...r },
+      style: { paddingLeft: f ? 16 : 0, ...s },
       className: f ? "sub-menu" : "menu-list",
-      id: l,
+      id: a,
       onMouseLeave: dt,
       ...x,
       ref: _,
-      children: /* @__PURE__ */ L(Et, { children: a.filter((g) => !g.hidden).map((g, k) => {
+      children: /* @__PURE__ */ L(bt, { children: c.filter((g) => !g.hidden).map((g, D) => {
         if (g.node)
           return g.node;
-        if (g?.id === "divider" || g?.separator) return /* @__PURE__ */ L("hr", {}, k);
+        if (g?.id === "divider" || g?.separator) return /* @__PURE__ */ L("hr", {}, D);
         const {
-          label: D,
+          label: H,
           icon: C,
-          img: H,
+          img: A,
           highlighted: G,
           onClick: F,
           link: S,
           items: E = [],
-          id: y,
-          disableClose: V,
+          id: M,
+          disableClose: q,
           selected: I,
           disabled: w,
           powerFeature: P,
           active: T,
-          reserveActiveSlot: b,
+          reserveActiveSlot: y,
+          endActions: B,
           ...O
-        } = g, { powerLicense: B } = ct(), W = !B && P, A = (n) => {
+        } = g, { powerLicense: V } = ct(), W = !V && P, b = (n) => {
           n.preventDefault(), n.stopPropagation(), P && u?.(P), R?.();
         };
         return /* @__PURE__ */ L(
           Pt,
           {
             tabIndex: 0,
-            label: D,
+            label: H,
             icon: C,
-            img: H,
+            img: A,
             highlighted: G,
             items: E,
             selected: I,
             disabled: w,
             powerFeature: P,
             active: T,
-            reserveActiveSlot: b,
+            reserveActiveSlot: y,
+            endActions: B,
             isLink: S,
-            onClick: (n) => W ? A(n) : E.length ? j(n, y, E) : i(n, F, S, V),
+            onClick: (n) => W ? b(n) : E.length ? j(n, M, E) : o(n, F, S, q),
             onKeyDown: (n) => {
-              n.key === "Enter" && (W ? A(n) : E.length ? j(n, y, E) : i(n, F, S));
-              const M = !n.target.nextSibling;
-              n.key === "Tab" && M && !n.shiftKey && (n.preventDefault(), n.stopPropagation(), _.current?.querySelectorAll("li, button")[0]?.focus()), n.key === "Escape" && f && e && (n.preventDefault(), n.stopPropagation(), e.focus(), m?.(y));
+              n.key === "Enter" && (W ? b(n) : E.length ? j(n, M, E) : o(n, F, S));
+              const k = !n.target.nextSibling;
+              n.key === "Tab" && k && !n.shiftKey && (n.preventDefault(), n.stopPropagation(), _.current?.querySelectorAll("li, button")[0]?.focus()), n.key === "Escape" && f && e && (n.preventDefault(), n.stopPropagation(), e.focus(), m?.(M));
             },
-            style: { paddingRight: E.length ? "0" : "16px", ...s },
-            ref: (n) => v.current[y] = n,
-            onMouseEnter: (n) => j(n, y, E),
-            onMouseLeave: (n) => j(n, y, []),
+            style: { paddingRight: E.length ? "0" : "16px", ...l },
+            ref: (n) => v.current[M] = n,
+            onMouseEnter: (n) => j(n, M, E),
+            onMouseLeave: (n) => j(n, M, []),
             className: `${t} ${O.className || ""}`,
             ...O,
             children: !!E.length && /* @__PURE__ */ L(Tt, { icon: "arrow_right", style: { marginLeft: "auto" } })
           },
-          `${y}-${k}`
+          `${M}-${D}`
         );
       }) })
     }
   );
 };
-function Ft(a, i, c = "right") {
-  if (!a) return null;
-  const o = a.getBoundingClientRect(), f = i?.getBoundingClientRect(), d = f?.width || 200, l = f?.height || 300, e = 8, p = window.innerWidth, r = window.innerHeight;
-  let h = o.bottom + 8 - $, m;
+function At(c, o, r = "right") {
+  if (!c) return null;
+  const i = c.getBoundingClientRect(), f = o?.getBoundingClientRect(), d = f?.width || 200, a = f?.height || 300, e = 8, p = window.innerWidth, s = window.innerHeight;
+  let h = i.bottom + 8 - $, m;
   const R = K - $;
-  if (h + $ + l > r - e) {
-    const t = o.top - 8 - l - $;
+  if (h + $ + a > s - e) {
+    const t = i.top - 8 - a - $;
     t >= R && (h = t);
   }
-  if (h = Math.max(R, h), c === "right") {
-    const t = o.right - d;
-    t >= e ? m = t : m = o.left;
+  if (h = Math.max(R, h), r === "right") {
+    const t = i.right - d;
+    t >= e ? m = t : m = i.left;
   } else {
-    const t = o.left;
-    t + d <= p - e ? m = t : m = o.right - d;
+    const t = i.left;
+    t + d <= p - e ? m = t : m = i.right - d;
   }
-  return m !== void 0 && (m = Math.max(e, Math.min(m, p - d - e))), { top: h, left: m, maxHeight: r - (h + $) - e };
+  return m !== void 0 && (m = Math.max(e, Math.min(m, p - d - e))), { top: h, left: m, maxHeight: s - (h + $) - e };
 }
-function It(a, i, c = "right") {
-  const [o, f] = lt(null), d = Z(null), l = bt(() => {
-    let e = a;
-    if (!e && i && (e = document.getElementById(i)), !e) {
-      i && console.warn(`Target element with id '${i}' not found`);
+function Ft(c, o, r = "right") {
+  const [i, f] = lt(null), d = Z(null), a = xt(() => {
+    let e = c;
+    if (!e && o && (e = document.getElementById(o)), !e) {
+      o && console.warn(`Target element with id '${o}' not found`);
       return;
     }
     if (!d.current) return;
-    const p = Ft(e, d.current, c);
+    const p = At(e, d.current, r);
     p && f(
-      (r) => r && Math.abs(r.top - p.top) < 1 && Math.abs((r.left ?? 0) - (p.left ?? 0)) < 1 && Math.abs((r.maxHeight ?? 0) - (p.maxHeight ?? 0)) < 1 ? r : p
+      (s) => s && Math.abs(s.top - p.top) < 1 && Math.abs((s.left ?? 0) - (p.left ?? 0)) < 1 && Math.abs((s.maxHeight ?? 0) - (p.maxHeight ?? 0)) < 1 ? s : p
     );
-  }, [a, i, c]);
+  }, [c, o, r]);
   return st(() => {
-    l();
-  }, [l]), U(() => {
-    const e = () => requestAnimationFrame(l);
+    a();
+  }, [a]), U(() => {
+    const e = () => requestAnimationFrame(a);
     return window.addEventListener("resize", e, { passive: !0 }), window.addEventListener("scroll", e, { passive: !0 }), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e);
     };
-  }, [l]), U(() => {
+  }, [a]), U(() => {
     if (!d.current) return;
     const e = new ResizeObserver(() => {
-      l();
+      a();
     });
     return e.observe(d.current), () => {
       e.disconnect();
     };
-  }, [l]), { position: o, menuRef: d };
+  }, [a]), { position: i, menuRef: d };
 }
-const it = "ayon-menu-dialog", ft = "ayon-menu-content", se = ({
-  id: a,
-  target: i,
-  targetId: c = "",
-  align: o = "right",
+const it = "ayon-menu-dialog", ft = "ayon-menu-content", le = ({
+  id: c,
+  target: o,
+  targetId: r = "",
+  align: i = "right",
   theme: f = "light",
   children: d,
-  ...l
+  ...a
 }) => {
-  const { menuOpen: e, setMenuOpen: p, navigate: r } = at(), h = e === a, m = () => {
+  const { menuOpen: e, setMenuOpen: p, navigate: s } = at(), h = e === c, m = () => {
     p(!1);
   }, R = (t) => {
-    console.log("navigate and close"), m(), !r && t ? console.log("navigate not found") : r && t && r(t);
+    console.log("navigate and close"), m(), !s && t ? console.log("navigate not found") : s && t && s(t);
   };
   return h ? /* @__PURE__ */ L(
-    Bt,
+    It,
     {
       handleClose: m,
       handleNavigate: R,
-      target: i,
-      targetId: c,
-      align: o,
+      target: o,
+      targetId: r,
+      align: i,
       theme: f,
       children: d,
-      ...l
+      ...a
     }
   ) : null;
-}, Bt = ({
-  handleClose: a,
-  handleNavigate: i,
-  target: c,
-  targetId: o,
+}, It = ({
+  handleClose: c,
+  handleNavigate: o,
+  target: r,
+  targetId: i,
   align: f = "right",
   children: d,
-  ...l
+  ...a
 }) => {
-  const { position: e, menuRef: p } = It(c ?? null, o ?? "", f);
+  const { position: e, menuRef: p } = Ft(r ?? null, i ?? "", f);
   U(() => {
     e && p.current && p.current.querySelectorAll("li, button")[0]?.focus();
   }, [e]);
-  const r = (t) => {
-    t.key === "Escape" && a();
+  const s = (t) => {
+    t.key === "Escape" && c();
   }, h = (t) => {
-    t.target.id === it && a();
-  }, m = X.Children.map(d, (t, s) => X.isValidElement(t) ? X.cloneElement(t, {
-    onClose: a,
-    index: s,
-    navigate: i
+    t.target.id === it && c();
+  }, m = X.Children.map(d, (t, l) => X.isValidElement(t) ? X.cloneElement(t, {
+    onClose: c,
+    index: l,
+    navigate: o
   }) : t);
   return Dt(
     /* @__PURE__ */ L(
@@ -291,8 +293,8 @@ const it = "ayon-menu-dialog", ft = "ayon-menu-content", se = ({
       {
         open: !0,
         onClick: h,
-        onKeyDown: r,
-        ...l,
+        onKeyDown: s,
+        ...a,
         id: it,
         children: /* @__PURE__ */ L(
           Rt,
@@ -308,62 +310,62 @@ const it = "ayon-menu-dialog", ft = "ayon-menu-content", se = ({
     ),
     document.body
   );
-}, ut = (a, i) => {
-  for (const c of a) {
-    if (c.id === i) return c.items?.length ? c.items : void 0;
-    const o = c.items?.length ? ut(c.items, i) : void 0;
-    if (o) return o;
+}, ut = (c, o) => {
+  for (const r of c) {
+    if (r.id === o) return r.items?.length ? r.items : void 0;
+    const i = r.items?.length ? ut(r.items, o) : void 0;
+    if (i) return i;
   }
-}, Nt = (a, i) => a.length === i.length && a.every(
-  (c, o) => c.id === i[o].id && c.icon === i[o].icon && c.selected === i[o].selected && c.active === i[o].active
-), le = ({ menu: a = [], onClose: i, header: c, footer: o = "" }) => {
-  const { setPowerpackDialog: f } = ct(), { setMenuOpen: d } = at(), [l, e] = lt([]), p = (t, s, u, x) => {
-    if (u) return i?.();
-    s?.(t), !x && i && i();
-  }, r = (t, s) => {
-    if (s.items.length) {
-      if (!l.find((u) => u.id === s.id)) {
-        const u = s.parentEl ?? t.currentTarget ?? t.target;
+}, Bt = (c = [], o = []) => c.length === o.length && c.every((r, i) => r.icon === o[i].icon && r.tooltip === o[i].tooltip), Nt = (c, o) => c.length === o.length && c.every(
+  (r, i) => r.id === o[i].id && r.icon === o[i].icon && r.selected === o[i].selected && r.active === o[i].active && Bt(r.endActions, o[i].endActions)
+), ce = ({ menu: c = [], onClose: o, header: r, footer: i = "" }) => {
+  const { setPowerpackDialog: f } = ct(), { setMenuOpen: d } = at(), [a, e] = lt([]), p = (t, l, u, x) => {
+    if (u) return o?.();
+    l?.(t), !x && o && o();
+  }, s = (t, l) => {
+    if (l.items.length) {
+      if (!a.find((u) => u.id === l.id)) {
+        const u = l.parentEl ?? t.currentTarget ?? t.target;
         e([
-          ...l.filter((x) => x.level < (s.level || 0) + 1),
+          ...a.filter((x) => x.level < (l.level || 0) + 1),
           {
-            ...s,
-            id: s.id,
-            level: (s.level || 0) + 1,
+            ...l,
+            id: l.id,
+            level: (l.level || 0) + 1,
             parentRef: u
           }
         ]);
       }
     } else
-      e(l.filter((u) => u.level <= (s.level || 0)));
-  }, h = (t, s = {}) => {
+      e(a.filter((u) => u.level <= (l.level || 0)));
+  }, h = (t, l = {}) => {
     const u = t.relatedTarget;
     if (!u) return;
     if (u.tagName === "DIALOG") return e([]);
-    typeof u.closest == "function" && u.closest(`#${ft}`) || l.find((v) => v.id === u.id) || e(l.filter((v) => v.level <= (s.level || 0) + 1));
-  }, m = (t, s) => {
-    t.type === "mouseenter" || t.type === "keydown" ? r(t, s) : t.type === "mouseleave" && h(t, s);
+    typeof u.closest == "function" && u.closest(`#${ft}`) || a.find((v) => v.id === u.id) || e(a.filter((v) => v.level <= (l.level || 0) + 1));
+  }, m = (t, l) => {
+    t.type === "mouseenter" || t.type === "keydown" ? s(t, l) : t.type === "mouseleave" && h(t, l);
   };
   U(() => {
     e((t) => {
       if (!t.length) return t;
-      const s = t.flatMap((x) => {
-        const v = ut(a, x.id);
+      const l = t.flatMap((x) => {
+        const v = ut(c, x.id);
         return v ? [{ ...x, items: v }] : [];
       });
-      return s.length === t.length && s.every((x, v) => Nt(x.items, t[v].items)) ? t : s;
+      return l.length === t.length && l.every((x, v) => Nt(x.items, t[v].items)) ? t : l;
     });
-  }, [a]);
-  const R = (t, s, u) => {
-    e((x) => x.map((v) => v.id === t ? { ...v, style: s, placement: u } : v));
+  }, [c]);
+  const R = (t, l, u) => {
+    e((x) => x.map((v) => v.id === t ? { ...v, style: l, placement: u } : v));
   };
   return /* @__PURE__ */ Q(yt, { children: [
     /* @__PURE__ */ Q(Ct, { children: [
-      c && c,
+      r && r,
       /* @__PURE__ */ L(
         ot,
         {
-          items: a,
+          items: c,
           handleClick: p,
           onSubMenu: m,
           level: 0,
@@ -371,12 +373,12 @@ const it = "ayon-menu-dialog", ft = "ayon-menu-content", se = ({
           onMenuClose: () => d(!1)
         }
       ),
-      o && /* @__PURE__ */ Q(St, { children: [
-        o,
-        /* @__PURE__ */ L(Ot, { icon: "content_copy", variant: "text", onClick: () => Ht(o) })
+      i && /* @__PURE__ */ Q(St, { children: [
+        i,
+        /* @__PURE__ */ L(Ot, { icon: "content_copy", variant: "text", onClick: () => Ht(i) })
       ] })
     ] }),
-    l.map((t, s) => /* @__PURE__ */ L(
+    a.map((t, l) => /* @__PURE__ */ L(
       ot,
       {
         ...t,
@@ -386,22 +388,22 @@ const it = "ayon-menu-dialog", ft = "ayon-menu-content", se = ({
         subMenu: !0,
         onSubMenu: m,
         onSubMenuLayout: R,
-        onClose: () => e(l.filter((u) => u.id !== t.id)),
+        onClose: () => e(a.filter((u) => u.id !== t.id)),
         onMenuClose: () => d(!1),
-        onChange: r,
+        onChange: s,
         setPowerpackDialog: f,
         itemClassName: void 0,
         itemStyle: void 0
       },
-      s
+      l
     ))
   ] });
 };
 export {
-  ie as E,
-  se as M,
-  le as a,
-  re as b,
+  re as E,
+  le as M,
+  ce as a,
+  se as b,
   ft as c,
   it as d,
   ot as e