@ynput/ayon-frontend-shared 0.7.5 → 0.8.0

package/dist/chunks/Menu.es.js

@@ -1,9 +1,9 @@
-import { jsxs as Q, jsx as f, Fragment as ke } from "react/jsx-runtime";
-import te, { forwardRef as Ee, useRef as oe, useEffect as Y, useLayoutEffect as ce, useState as de, useCallback as Le } from "react";
-import { Button as pe, Icon as K, ShortcutTag as Pe } from "@ynput/ayon-react-components";
-import A, { keyframes as Re } from "styled-components";
-import { isArray as Ce } from "lodash";
-import { Link as Se } from "react-router-dom";
+import { jsxs as Q, jsx as p, Fragment as Me } from "react/jsx-runtime";
+import te, { forwardRef as ke, useRef as oe, useEffect as Y, useLayoutEffect as le, useState as ce, useCallback as Ee } from "react";
+import { Button as de, Icon as K, ShortcutTag as Le } from "@ynput/ayon-react-components";
+import A, { keyframes as Pe } from "styled-components";
+import { isArray as Re } from "lodash";
+import { Link as Ce } from "react-router-dom";
 import fe from "clsx";
 import "@module-federation/enhanced/runtime";
 import "@ynput/ayon-addon/host";
@@ -11,15 +11,14 @@ import "react-toastify";
 import "./searchTerms.es.js";
 import "./getUris.es.js";
 import "primereact/confirmdialog";
-import { b as ne, u as ue } from "./TableExportContextInstance.es.js";
 import "uuid";
 import "axios";
+import { b as ne, u as ue } from "./TableExportContextInstance.es.js";
 import "semver";
 import "./ContextMenuContextInstance.es.js";
-import { createPortal as Te } from "react-dom";
-import "react-redux";
-import { c as Ne } from "./copyToClipboard.es.js";
-const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
+import { createPortal as Se } from "react-dom";
+import { c as Te } from "./copyToClipboard.es.js";
+const z = 42, Ne = 8, U = z + Ne, Ae = A.dialog`
   position: fixed;
   margin: 0;
   inset: 0;
@@ -41,7 +40,7 @@ const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
     display: none;
   }
   padding-bottom: 60px;
-`, Ie = Re`
+`, De = Pe`
     from {
         scale: 0.95;
         opacity: 0.6;
@@ -64,7 +63,7 @@ const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
   z-index: 30;
 
   /* animate */
-  animation: ${Ie} 0.03s ease-in forwards;
+  animation: ${De} 0.03s ease-in forwards;
 
   /* transform origin based on alignment */
   &.right {
@@ -88,7 +87,7 @@ const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
       color: var(--md-sys-color-on-surface, #fff) !important;
     }
   }
-`, He = A.section`
+`, Ie = A.section`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -101,7 +100,7 @@ const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
   color: var(--md-sys-color-on-surface);
   z-index: 10;
   overflow: hidden;
-`, _e = A.div`
+`, He = A.div`
   position: relative;
   border-radius: 8px;
   display: flex;
@@ -125,7 +124,7 @@ const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
       overflow-x: hidden;
     }
   }
-`, Be = A.menu`
+`, _e = A.menu`
   /* reset defaults */
   display: flex;
   list-style-type: none;
@@ -160,7 +159,7 @@ const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
     opacity: 0.5;
     border-color: var(--md-sys-color-surface-container-highest);
   }
-`, Fe = A.li`
+`, Be = A.li`
   display: flex;
   padding: 6px 16px 6px 12px;
   justify-content: flex-start;
@@ -269,13 +268,13 @@ const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
     }
     background-color: unset;
   }
-`, We = A.div`
+`, Fe = A.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
   margin-left: auto;
   padding-left: 24px;
-`, $e = A(pe)`
+`, We = A(de)`
   margin-left: auto;
   &.hasIcon {
     padding: 4px;
@@ -288,11 +287,11 @@ const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
     background-color: var(--md-sys-color-on-primary);
     color: var(--md-sys-color-primary);
   }
-`, ze = A.img`
+`, $e = A.img`
   width: 18px;
   height: 18px;
   object-fit: contain;
-`, qe = A.footer`
+`, ze = A.footer`
   position: relative;
   display: flex;
   padding: 8px;
@@ -321,114 +320,114 @@ const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
       display: flex;
     }
   }
-`, me = Ee(
+`, pe = ke(
   ({
-    label: s,
-    icon: n,
+    label: a,
+    icon: i,
     hoverIcon: r,
-    img: i,
-    highlighted: d,
+    img: n,
+    highlighted: f,
     notification: u,
-    selected: c,
+    selected: l,
     danger: t,
-    items: m = [],
-    className: a,
+    items: g = [],
+    className: c,
     isLink: h,
-    isDev: g,
+    isDev: m,
     shortcut: L,
     disabled: e,
-    powerFeature: l,
-    active: p,
+    powerFeature: s,
+    active: d,
     reserveActiveSlot: w,
-    endActions: b = [],
+    endActions: y = [],
     ...N
   }, q) => {
-    const J = Ce(s) ? s : [s], { powerLicense: v } = ne(), C = !v && l, S = /* @__PURE__ */ Q(
-      Fe,
+    const J = Re(a) ? a : [a], { powerLicense: v } = ne(), C = !v && s, S = /* @__PURE__ */ Q(
+      Be,
       {
         ref: q,
         className: fe(
           "menu-item",
           {
-            highlighted: d,
-            selected: c,
+            highlighted: f,
+            selected: l,
             notification: u,
             danger: t,
-            dev: g,
+            dev: m,
             disabled: e,
             power: C
           },
-          a
+          c
         ),
         ...N,
         "aria-label": J.join(", "),
         children: [
-          n && /* @__PURE__ */ f(K, { icon: n, className: r ? "hover-swap-default" : void 0 }),
-          r && /* @__PURE__ */ f(K, { icon: r, className: "hover-swap" }),
-          i && /* @__PURE__ */ f(ze, { src: i, alt: `${s} icon` }),
-          J.map((y, x) => /* @__PURE__ */ f("span", { children: y }, x)),
-          L && /* @__PURE__ */ f(Pe, { style: { minWidth: 22, textAlign: "center" }, align: "right", children: L }),
-          (p || w) && /* @__PURE__ */ f(
+          i && /* @__PURE__ */ p(K, { icon: i, className: r ? "hover-swap-default" : void 0 }),
+          r && /* @__PURE__ */ p(K, { icon: r, className: "hover-swap" }),
+          n && /* @__PURE__ */ p($e, { src: n, alt: `${a} icon` }),
+          J.map((b, x) => /* @__PURE__ */ p("span", { children: b }, x)),
+          L && /* @__PURE__ */ p(Le, { style: { minWidth: 22, textAlign: "center" }, align: "right", children: L }),
+          (d || w) && /* @__PURE__ */ p(
             K,
             {
               icon: "check",
-              style: { marginLeft: "auto", visibility: p ? "visible" : "hidden" }
+              style: { marginLeft: "auto", visibility: d ? "visible" : "hidden" }
             }
           ),
-          !!b.length && /* @__PURE__ */ f(We, { children: b.map((y) => /* @__PURE__ */ f(
-            $e,
+          !!y.length && /* @__PURE__ */ p(Fe, { children: y.map((b) => /* @__PURE__ */ p(
+            We,
             {
               variant: "text",
-              icon: y.icon,
+              icon: b.icon,
               className: "menu-item-end-action",
-              "data-tooltip": y.tooltip,
-              "aria-label": y.tooltip,
+              "data-tooltip": b.tooltip,
+              "aria-label": b.tooltip,
               onClick: (x) => {
-                x.stopPropagation(), y.onClick(x);
+                x.stopPropagation(), b.onClick(x);
               },
               onKeyDown: (x) => x.stopPropagation()
             },
-            y.icon
+            b.icon
           )) }),
-          C && /* @__PURE__ */ f(K, { icon: "bolt", className: "power-bolt" }),
-          !!m.length && /* @__PURE__ */ f(K, { icon: "arrow_right", className: "more" })
+          C && /* @__PURE__ */ p(K, { icon: "bolt", className: "power-bolt" }),
+          !!g.length && /* @__PURE__ */ p(K, { icon: "arrow_right", className: "more" })
         ]
       }
     );
-    return h ? /* @__PURE__ */ f(Se, { to: h, target: N.target, children: S }) : S;
+    return h ? /* @__PURE__ */ p(Ce, { to: h, target: N.target, children: S }) : S;
   }
 );
-me.displayName = "MenuItem";
+pe.displayName = "MenuItem";
 const ae = ({
-  items: s,
-  handleClick: n,
+  items: a,
+  handleClick: i,
   onSubMenu: r,
-  onSubMenuLayout: i,
-  subMenu: d,
+  onSubMenuLayout: n,
+  subMenu: f,
   level: u,
-  id: c = "root-menu",
+  id: l = "root-menu",
   parentRef: t,
-  parentEl: m,
-  style: a,
+  parentEl: g,
+  style: c,
   placement: h,
-  onClose: g,
+  onClose: m,
   onMenuClose: L,
   itemClassName: e,
-  itemStyle: l,
-  setPowerpackDialog: p,
+  itemStyle: s,
+  setPowerpackDialog: d,
   ...w
 }) => {
-  const b = oe({}), N = oe(null), q = (v, C, S) => {
-    const y = b.current[C], x = N.current;
-    if (!y || !x) return;
-    const _ = (x.offsetParent ?? document.body).getBoundingClientRect(), D = y.getBoundingClientRect(), k = (x.querySelector("menu") ?? x).getBoundingClientRect(), V = window.innerWidth, B = window.innerHeight, M = 8, T = Math.max(240, k.width), I = Math.min(
+  const y = oe({}), N = oe(null), q = (v, C, S) => {
+    const b = y.current[C], x = N.current;
+    if (!b || !x) return;
+    const _ = (x.offsetParent ?? document.body).getBoundingClientRect(), D = b.getBoundingClientRect(), k = (x.querySelector("menu") ?? x).getBoundingClientRect(), V = window.innerWidth, B = window.innerHeight, M = 8, T = Math.max(240, k.width), O = Math.min(
       S.length * 36 + 16,
       B - U - M
-    ), E = 4, F = () => Math.max(M, k.left - T - E), O = () => k.right + E, j = O() + T <= V - M, $ = F() >= M;
+    ), E = 4, F = () => Math.max(M, k.left - T - E), I = () => k.right + E, j = I() + T <= V - M, $ = F() >= M;
     let R, o;
-    h === "left" && $ ? (R = "left", o = F()) : j ? (R = "right", o = O()) : $ ? (R = "left", o = F()) : (R = "left", o = Math.max(M, V - T - M));
+    h === "left" && $ ? (R = "left", o = F()) : j ? (R = "right", o = I()) : $ ? (R = "left", o = F()) : (R = "left", o = Math.max(M, V - T - M));
     let W = D.top - 8;
-    W + I > B - M && (W = B - I - M), W = Math.max(U, W);
+    W + O > B - M && (W = B - O - M), W = Math.max(U, W);
     const ee = R === "left" ? o - 16 : o;
     r?.(v, {
       id: C,
@@ -442,49 +441,49 @@ const ae = ({
       placement: R,
       // Pass the actual menu-item element so sub-menu measurement uses the <li>
       // instead of whatever inner span the mouse event bubbled from.
-      parentEl: y
+      parentEl: b
     });
   }, J = (v) => {
-    d && r?.(v, { id: "parent", items: [] });
+    f && r?.(v, { id: "parent", items: [] });
   };
   return Y(() => {
-    d && N.current && N.current.querySelectorAll("li, button")[0]?.focus();
-  }, [d]), ce(() => {
-    if (!d || !N.current || !t || !i || !c) return;
+    f && N.current && N.current.querySelectorAll("li, button")[0]?.focus();
+  }, [f]), le(() => {
+    if (!f || !N.current || !t || !n || !l) return;
     const v = N.current, C = t, S = C.closest(".menu-list, .sub-menu");
     if (!S) return;
-    const y = v.querySelector("menu") ?? v, x = S.querySelector("menu") ?? S, _ = (v.offsetParent ?? document.body).getBoundingClientRect(), D = v.getBoundingClientRect(), P = y.getBoundingClientRect(), k = x.getBoundingClientRect(), V = C.getBoundingClientRect(), B = P.left - D.left, M = P.width, T = window.innerWidth, I = window.innerHeight, E = 8, F = 4, O = () => Math.max(E, k.left - M - F), j = () => k.right + F, $ = j() + M <= T - E, R = O() >= E;
+    const b = v.querySelector("menu") ?? v, x = S.querySelector("menu") ?? S, _ = (v.offsetParent ?? document.body).getBoundingClientRect(), D = v.getBoundingClientRect(), P = b.getBoundingClientRect(), k = x.getBoundingClientRect(), V = C.getBoundingClientRect(), B = P.left - D.left, M = P.width, T = window.innerWidth, O = window.innerHeight, E = 8, F = 4, I = () => Math.max(E, k.left - M - F), j = () => k.right + F, $ = j() + M <= T - E, R = I() >= E;
     let o, H;
-    h === "left" && R ? (o = "left", H = O()) : $ ? (o = "right", H = j()) : R ? (o = "left", H = O()) : (o = "left", H = Math.max(E, T - M - E));
-    const Z = y.querySelector(":scope > li")?.getBoundingClientRect(), ee = V.top, ve = Z ? Z.top : D.top + 8, be = ee - ve, ie = y.scrollHeight;
-    let G = D.top + be;
-    if (G + ie > I - E) {
-      const Me = Math.min(ie, I - U - E);
-      G = I - Me - E;
+    h === "left" && R ? (o = "left", H = I()) : $ ? (o = "right", H = j()) : R ? (o = "left", H = I()) : (o = "left", H = Math.max(E, T - M - E));
+    const Z = b.querySelector(":scope > li")?.getBoundingClientRect(), ee = V.top, he = Z ? Z.top : D.top + 8, ve = ee - he, ie = b.scrollHeight;
+    let G = D.top + ve;
+    if (G + ie > O - E) {
+      const xe = Math.min(ie, O - U - E);
+      G = O - xe - E;
     }
     G = Math.max(U, G);
-    const ye = o === "left" ? H - B : H, re = G - _.top, se = ye - _.left, we = typeof a?.top == "number" ? a.top : parseFloat(String(a?.top)), xe = typeof a?.left == "number" ? a.left : parseFloat(String(a?.left));
-    (Math.abs(re - we) > 1 || Math.abs(se - xe) > 1) && i(
-      c,
-      { top: re, left: se, maxHeight: I - G - E },
+    const ye = o === "left" ? H - B : H, re = G - _.top, se = ye - _.left, be = typeof c?.top == "number" ? c.top : parseFloat(String(c?.top)), we = typeof c?.left == "number" ? c.left : parseFloat(String(c?.left));
+    (Math.abs(re - be) > 1 || Math.abs(se - we) > 1) && n(
+      l,
+      { top: re, left: se, maxHeight: O - G - E },
       o
     );
-  }, [d, s, t, c, h, a?.top, a?.left, i]), /* @__PURE__ */ f(
-    _e,
+  }, [f, a, t, l, h, c?.top, c?.left, n]), /* @__PURE__ */ p(
+    He,
     {
-      style: { paddingLeft: d ? 16 : 0, ...a },
-      className: d ? "sub-menu" : "menu-list",
-      id: c,
+      style: { paddingLeft: f ? 16 : 0, ...c },
+      className: f ? "sub-menu" : "menu-list",
+      id: l,
       onMouseLeave: J,
       ...w,
       ref: N,
-      children: /* @__PURE__ */ f(Be, { children: s.filter((v) => !v.hidden).map((v, C) => {
+      children: /* @__PURE__ */ p(_e, { children: a.filter((v) => !v.hidden).map((v, C) => {
         if (v.node)
           return v.node;
-        if (v?.id === "divider" || v?.separator) return /* @__PURE__ */ f("hr", {}, C);
+        if (v?.id === "divider" || v?.separator) return /* @__PURE__ */ p("hr", {}, C);
         const {
           label: S,
-          icon: y,
+          icon: b,
           img: x,
           highlighted: X,
           onClick: _,
@@ -495,42 +494,42 @@ const ae = ({
           selected: B,
           disabled: M,
           powerFeature: T,
-          active: I,
+          active: O,
           reserveActiveSlot: E,
           endActions: F,
-          ...O
+          ...I
         } = v, { powerLicense: j } = ne(), $ = !j && T, R = (o) => {
-          o.preventDefault(), o.stopPropagation(), T && p?.(T), L?.();
+          o.preventDefault(), o.stopPropagation(), T && d?.(T), L?.();
         };
-        return /* @__PURE__ */ f(
-          me,
+        return /* @__PURE__ */ p(
+          pe,
           {
             tabIndex: 0,
             label: S,
-            icon: y,
+            icon: b,
             img: x,
             highlighted: X,
             items: P,
             selected: B,
             disabled: M,
             powerFeature: T,
-            active: I,
+            active: O,
             reserveActiveSlot: E,
             endActions: F,
             isLink: D,
-            onClick: (o) => $ ? R(o) : P.length ? q(o, k, P) : n(o, _, D, V),
+            onClick: (o) => $ ? R(o) : P.length ? q(o, k, P) : i(o, _, D, V),
             onKeyDown: (o) => {
-              o.key === "Enter" && ($ ? R(o) : P.length ? q(o, k, P) : n(o, _, D));
+              o.key === "Enter" && ($ ? R(o) : P.length ? q(o, k, P) : i(o, _, D));
               const H = !o.target.nextSibling;
-              o.key === "Tab" && H && !o.shiftKey && (o.preventDefault(), o.stopPropagation(), N.current?.querySelectorAll("li, button")[0]?.focus()), o.key === "Escape" && d && t && (o.preventDefault(), o.stopPropagation(), t.focus(), g?.(k));
+              o.key === "Tab" && H && !o.shiftKey && (o.preventDefault(), o.stopPropagation(), N.current?.querySelectorAll("li, button")[0]?.focus()), o.key === "Escape" && f && t && (o.preventDefault(), o.stopPropagation(), t.focus(), m?.(k));
             },
-            style: { paddingRight: P.length ? "0" : "16px", ...l },
-            ref: (o) => b.current[k] = o,
+            style: { paddingRight: P.length ? "0" : "16px", ...s },
+            ref: (o) => y.current[k] = o,
             onMouseEnter: (o) => q(o, k, P),
             onMouseLeave: (o) => q(o, k, []),
-            className: `${e} ${O.className || ""}`,
-            ...O,
-            children: !!P.length && /* @__PURE__ */ f(K, { icon: "arrow_right", style: { marginLeft: "auto" } })
+            className: `${e} ${I.className || ""}`,
+            ...I,
+            children: !!P.length && /* @__PURE__ */ p(K, { icon: "arrow_right", style: { marginLeft: "auto" } })
           },
           `${k}-${C}`
         );
@@ -538,219 +537,222 @@ const ae = ({
     }
   );
 };
-function Ve(s, n, r = "right") {
-  if (!s) return null;
-  const i = s.getBoundingClientRect(), d = n?.getBoundingClientRect(), u = d?.width || 200, c = d?.height || 300, t = 8, m = window.innerWidth, a = window.innerHeight;
-  let h = i.bottom + 8 - z, g;
+function qe(a, i, r = "right") {
+  if (!a) return null;
+  const n = a.getBoundingClientRect(), f = i?.getBoundingClientRect(), u = f?.width || 200, l = f?.height || 300, t = 8, g = window.innerWidth, c = window.innerHeight;
+  let h = n.bottom + 8 - z, m;
   const L = U - z;
-  if (h + z + c > a - t) {
-    const e = i.top - 8 - c - z;
+  if (h + z + l > c - t) {
+    const e = n.top - 8 - l - z;
     e >= L && (h = e);
   }
   if (h = Math.max(L, h), r === "right") {
-    const e = i.right - u;
-    e >= t ? g = e : g = i.left;
+    const e = n.right - u;
+    e >= t ? m = e : m = n.left;
   } else {
-    const e = i.left;
-    e + u <= m - t ? g = e : g = i.right - u;
+    const e = n.left;
+    e + u <= g - t ? m = e : m = n.right - u;
   }
-  return g !== void 0 && (g = Math.max(t, Math.min(g, m - u - t))), { top: h, left: g, maxHeight: a - (h + z) - t };
+  return m !== void 0 && (m = Math.max(t, Math.min(m, g - u - t))), { top: h, left: m, maxHeight: c - (h + z) - t };
 }
-function je(s, n, r = "right") {
-  const [i, d] = de(null), u = oe(null), c = Le(() => {
-    let t = s;
-    if (!t && n && (t = document.getElementById(n)), !t) {
-      n && console.warn(`Target element with id '${n}' not found`);
+function Ve(a, i, r = "right") {
+  const [n, f] = ce(null), u = oe(null), l = Ee(() => {
+    let t = a;
+    if (!t && i && (t = document.getElementById(i)), !t) {
+      i && console.warn(`Target element with id '${i}' not found`);
       return;
     }
     if (!u.current) return;
-    const m = Ve(t, u.current, r);
-    m && d(
-      (a) => a && Math.abs(a.top - m.top) < 1 && Math.abs((a.left ?? 0) - (m.left ?? 0)) < 1 && Math.abs((a.maxHeight ?? 0) - (m.maxHeight ?? 0)) < 1 ? a : m
+    const g = qe(t, u.current, r);
+    g && f(
+      (c) => c && Math.abs(c.top - g.top) < 1 && Math.abs((c.left ?? 0) - (g.left ?? 0)) < 1 && Math.abs((c.maxHeight ?? 0) - (g.maxHeight ?? 0)) < 1 ? c : g
     );
-  }, [s, n, r]);
-  return ce(() => {
-    c();
-  }, [c]), Y(() => {
-    const t = () => requestAnimationFrame(c);
+  }, [a, i, r]);
+  return le(() => {
+    l();
+  }, [l]), Y(() => {
+    const t = () => requestAnimationFrame(l);
     return window.addEventListener("resize", t, { passive: !0 }), window.addEventListener("scroll", t, { passive: !0 }), () => {
       window.removeEventListener("resize", t), window.removeEventListener("scroll", t);
     };
-  }, [c]), Y(() => {
+  }, [l]), Y(() => {
     if (!u.current) return;
     const t = new ResizeObserver(() => {
-      c();
+      l();
     });
     return t.observe(u.current), () => {
       t.disconnect();
     };
-  }, [c]), { position: i, menuRef: u };
+  }, [l]), { position: n, menuRef: u };
 }
-const le = "ayon-menu-dialog", ge = "ayon-menu-content", ht = ({
-  id: s,
-  target: n,
+const je = "ayon-menu-dialog", me = "ayon-menu-content", gt = ({
+  id: a,
+  target: i,
   targetId: r = "",
-  align: i = "right",
-  theme: d = "light",
-  children: u,
-  ...c
+  align: n = "right",
+  theme: f = "light",
+  isOpen: u,
+  onDismiss: l,
+  children: t,
+  ...g
 }) => {
-  const { menuOpen: t, setMenuOpen: m, navigate: a } = ue(), h = t === s, g = () => {
-    m(!1);
-  }, L = (e) => {
-    console.log("navigate and close"), g(), !a && e ? console.log("navigate not found") : a && e && a(e);
+  const { menuOpen: c, setMenuOpen: h, navigate: m } = ue(), L = u ?? c === a, e = () => {
+    u !== void 0 ? l?.() : h(!1);
+  }, s = (d) => {
+    console.log("navigate and close"), e(), !m && d ? console.log("navigate not found") : m && d && m(d);
   };
-  return h ? /* @__PURE__ */ f(
+  return L ? /* @__PURE__ */ p(
     Ge,
     {
-      handleClose: g,
-      handleNavigate: L,
-      target: n,
+      handleClose: e,
+      handleNavigate: s,
+      target: i,
       targetId: r,
-      align: i,
-      theme: d,
-      children: u,
-      ...c
+      align: n,
+      theme: f,
+      children: t,
+      ...g
     }
   ) : null;
 }, Ge = ({
-  handleClose: s,
-  handleNavigate: n,
+  handleClose: a,
+  handleNavigate: i,
   target: r,
-  targetId: i,
-  align: d = "right",
+  targetId: n,
+  align: f = "right",
   children: u,
-  ...c
+  ...l
 }) => {
-  const { position: t, menuRef: m } = je(r ?? null, i ?? "", d);
+  const { position: t, menuRef: g } = Ve(r ?? null, n ?? "", f);
   Y(() => {
-    t && m.current && m.current.querySelectorAll("li, button")[0]?.focus();
+    t && g.current && g.current.querySelectorAll("li, button")[0]?.focus();
   }, [t]);
-  const a = (e) => {
-    e.key === "Escape" && s();
+  const c = (e) => {
+    if (e.key !== "Escape") return;
+    e.preventDefault(), e.stopPropagation(), a(), (r ?? (n ? document.getElementById(n) : null))?.focus();
   }, h = (e) => {
-    e.target.id === le && s();
-  }, g = te.Children.map(u, (e, l) => te.isValidElement(e) ? te.cloneElement(e, {
-    onClose: s,
-    index: l,
-    navigate: n
+    e.target === e.currentTarget && a();
+  }, m = te.Children.map(u, (e, s) => te.isValidElement(e) ? te.cloneElement(e, {
+    onClose: a,
+    index: s,
+    navigate: i
   }) : e);
-  return Te(
-    /* @__PURE__ */ f(
-      De,
+  return Se(
+    /* @__PURE__ */ p(
+      Ae,
       {
         open: !0,
         onClick: h,
-        onKeyDown: a,
-        ...c,
-        id: le,
-        children: /* @__PURE__ */ f(
+        onKeyDown: c,
+        ...l,
+        id: je,
+        children: /* @__PURE__ */ p(
           Oe,
           {
-            id: ge,
+            id: me,
             style: t || { top: 0, left: 0, opacity: 0, visibility: "hidden" },
-            className: fe(d),
-            ref: m,
-            children: g
+            className: fe(f),
+            ref: g,
+            children: m
           }
         )
       }
     ),
     document.body
   );
-}, he = (s, n) => {
-  for (const r of s) {
-    if (r.id === n) return r.items?.length ? r.items : void 0;
-    const i = r.items?.length ? he(r.items, n) : void 0;
-    if (i) return i;
+}, ge = (a, i) => {
+  for (const r of a) {
+    if (r.id === i) return r.items?.length ? r.items : void 0;
+    const n = r.items?.length ? ge(r.items, i) : void 0;
+    if (n) return n;
   }
-}, Ke = (s = [], n = []) => s.length === n.length && s.every((r, i) => r.icon === n[i].icon && r.tooltip === n[i].tooltip), Ue = (s, n) => s.length === n.length && s.every(
-  (r, i) => r.id === n[i].id && r.icon === n[i].icon && r.selected === n[i].selected && r.active === n[i].active && Ke(r.endActions, n[i].endActions)
-), vt = ({ menu: s = [], onClose: n, header: r, footer: i = "" }) => {
-  const { setPowerpackDialog: d } = ne(), { setMenuOpen: u } = ue(), [c, t] = de([]), m = (e, l, p, w) => {
-    if (p) return n?.();
-    l?.(e), !w && n && n();
-  }, a = (e, l) => {
-    if (l.items.length) {
-      if (!c.find((p) => p.id === l.id)) {
-        const p = l.parentEl ?? e.currentTarget ?? e.target;
+}, Ke = (a = [], i = []) => a.length === i.length && a.every((r, n) => r.icon === i[n].icon && r.tooltip === i[n].tooltip), Ue = (a, i) => a.length === i.length && a.every(
+  (r, n) => r.id === i[n].id && r.icon === i[n].icon && r.selected === i[n].selected && r.active === i[n].active && Ke(r.endActions, i[n].endActions)
+), ht = ({ menu: a = [], onClose: i, header: r, footer: n = "" }) => {
+  const { setPowerpackDialog: f } = ne(), { setMenuOpen: u } = ue(), [l, t] = ce([]), g = (e, s, d, w) => {
+    if (d) return i?.();
+    s?.(e), !w && i && i();
+  }, c = (e, s) => {
+    if (s.items.length) {
+      if (!l.find((d) => d.id === s.id)) {
+        const d = s.parentEl ?? e.currentTarget ?? e.target;
         t([
-          ...c.filter((w) => w.level < (l.level || 0) + 1),
+          ...l.filter((w) => w.level < (s.level || 0) + 1),
           {
-            ...l,
-            id: l.id,
-            level: (l.level || 0) + 1,
-            parentRef: p
+            ...s,
+            id: s.id,
+            level: (s.level || 0) + 1,
+            parentRef: d
           }
         ]);
       }
     } else
-      t(c.filter((p) => p.level <= (l.level || 0)));
-  }, h = (e, l = {}) => {
-    const p = e.relatedTarget;
-    if (!p) return;
-    if (p.tagName === "DIALOG") return t([]);
-    typeof p.closest == "function" && p.closest(`#${ge}`) || c.find((b) => b.id === p.id) || t(c.filter((b) => b.level <= (l.level || 0) + 1));
-  }, g = (e, l) => {
-    e.type === "mouseenter" || e.type === "keydown" ? a(e, l) : e.type === "mouseleave" && h(e, l);
+      t(l.filter((d) => d.level <= (s.level || 0)));
+  }, h = (e, s = {}) => {
+    const d = e.relatedTarget;
+    if (!d) return;
+    if (d.tagName === "DIALOG") return t([]);
+    typeof d.closest == "function" && d.closest(`#${me}`) || l.find((y) => y.id === d.id) || t(l.filter((y) => y.level <= (s.level || 0) + 1));
+  }, m = (e, s) => {
+    e.type === "mouseenter" || e.type === "keydown" ? c(e, s) : e.type === "mouseleave" && h(e, s);
   };
   Y(() => {
     t((e) => {
       if (!e.length) return e;
-      const l = e.flatMap((w) => {
-        const b = he(s, w.id);
-        return b ? [{ ...w, items: b }] : [];
+      const s = e.flatMap((w) => {
+        const y = ge(a, w.id);
+        return y ? [{ ...w, items: y }] : [];
       });
-      return l.length === e.length && l.every((w, b) => Ue(w.items, e[b].items)) ? e : l;
+      return s.length === e.length && s.every((w, y) => Ue(w.items, e[y].items)) ? e : s;
     });
-  }, [s]);
-  const L = (e, l, p) => {
-    t((w) => w.map((b) => b.id === e ? { ...b, style: l, placement: p } : b));
+  }, [a]);
+  const L = (e, s, d) => {
+    t((w) => w.map((y) => y.id === e ? { ...y, style: s, placement: d } : y));
   };
-  return /* @__PURE__ */ Q(ke, { children: [
-    /* @__PURE__ */ Q(He, { children: [
+  return /* @__PURE__ */ Q(Me, { children: [
+    /* @__PURE__ */ Q(Ie, { children: [
       r && r,
-      /* @__PURE__ */ f(
+      /* @__PURE__ */ p(
         ae,
         {
-          items: s,
-          handleClick: m,
-          onSubMenu: g,
+          items: a,
+          handleClick: g,
+          onSubMenu: m,
           level: 0,
-          setPowerpackDialog: d,
+          setPowerpackDialog: f,
           onMenuClose: () => u(!1)
         }
       ),
-      i && /* @__PURE__ */ Q(qe, { children: [
-        i,
-        /* @__PURE__ */ f(pe, { icon: "content_copy", variant: "text", onClick: () => Ne(i) })
+      n && /* @__PURE__ */ Q(ze, { children: [
+        n,
+        /* @__PURE__ */ p(de, { icon: "content_copy", variant: "text", onClick: () => Te(n) })
       ] })
     ] }),
-    c.map((e, l) => /* @__PURE__ */ f(
+    l.map((e, s) => /* @__PURE__ */ p(
       ae,
       {
         ...e,
         parentRef: e.parentRef || null,
         style: e.style || {},
-        handleClick: m,
+        handleClick: g,
         subMenu: !0,
-        onSubMenu: g,
+        onSubMenu: m,
         onSubMenuLayout: L,
-        onClose: () => t(c.filter((p) => p.id !== e.id)),
+        onClose: () => t(l.filter((d) => d.id !== e.id)),
         onMenuClose: () => u(!1),
-        onChange: a,
-        setPowerpackDialog: d,
+        onChange: c,
+        setPowerpackDialog: f,
         itemClassName: void 0,
         itemStyle: void 0
       },
-      l
+      s
     ))
   ] });
 };
 export {
-  ht as M,
-  vt as a,
-  ge as b,
-  le as c,
+  gt as M,
+  ht as a,
+  me as b,
+  je as c,
   ae as d
 };