@ynput/ayon-frontend-shared 0.6.9 → 0.7.0

package/dist/chunks/Menu.es.js

@@ -1,308 +1,654 @@
-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 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 { jsxs as Q, jsx as p, 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 fe, 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 pe from "clsx";
 import "@module-federation/enhanced/runtime";
 import "react-toastify";
 import "./searchTerms.es.js";
 import "./getUris.es.js";
 import "primereact/confirmdialog";
-import { a as ct, u as at } from "./DeleteEntitiesContextInstance.es.js";
-import "lodash";
+import { a as ne, u as ue } from "./TableExportContextInstance.es.js";
 import "uuid";
 import "semver";
 import "./ContextMenuContextInstance.es.js";
-import kt from "clsx";
-import { createPortal as Dt } from "react-dom";
+import { createPortal as Te } from "react-dom";
 import "react-redux";
-import { c as Ht } from "./copyToClipboard.es.js";
-const re = rt(Mt)`
+import { c as Ne } from "./copyToClipboard.es.js";
+const z = 42, Ae = 8, U = z + Ae, De = A.dialog`
+  position: fixed;
+  margin: 0;
+  inset: 0;
+  top: ${z}px;
+  width: auto;
+  height: auto;
+  z-index: 1000;
+  border: none;
+  background-color: unset;
+  padding: 0;
+
+  user-select: none;
+
+  overflow: auto;
+  /* remove scroll bar */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  padding-bottom: 60px;
+`, Ie = Re`
+    from {
+        scale: 0.95;
+        opacity: 0.6;
+    }
+    to {
+        scale: 1;
+        opacity: 1;
+    }
+`, Oe = A.div`
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  flex-grow: 1;
-  position: relative;
-  max-width: 100%;
-  overflow: hidden;
+  gap: var(--base-gap-large);
+  min-height: 0;
+
+  /* position */
+  position: absolute;
+  right: 0;
   top: 0;
-  left: 0;
-  transform: none;
-  gap: 8px;
-  .icon {
-    font-size: 34px;
+  width: fit-content;
+  z-index: 30;
+
+  /* animate */
+  animation: ${Ie} 0.03s ease-in forwards;
+
+  /* transform origin based on alignment */
+  &.right {
+    transform-origin: top right;
   }
-  h3 {
-    font-size: 18px;
+  &.left {
+    transform-origin: top left;
   }
-`, se = rt.div`
+
+  /* add shadow to each item */
+  & > *:not(.sub-menu),
+  .sub-menu menu {
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
+  }
+
+  /* theme support */
+  &.dark {
+    color: var(--md-sys-color-on-surface, #fff);
+    /* override children backgrounds if needed */
+    & > * {
+      color: var(--md-sys-color-on-surface, #fff) !important;
+    }
+  }
+`, He = A.section`
+  position: relative;
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  min-height: 0;
 
+  padding: 0px;
+  border-radius: 8px;
+  /* colors */
+  background-color: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+  z-index: 10;
+  overflow: hidden;
+`, _e = A.div`
   position: relative;
-  height: 100%;
-  border-radius: var(--border-radius-m);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  & > * {
+    min-height: 0;
+  }
+
+  /* sub menu */
+  &.sub-menu {
+    position: absolute;
 
-  background: var(--md-sys-color-surface-container-low);
-  .header {
+    border-radius: 8px;
+    width: max-content;
+    z-index: 30;
+
+    & > * {
+      border-radius: 8px;
+      overflow-x: hidden;
+    }
+  }
+`, Be = A.menu`
+  /* reset defaults */
+  display: flex;
+  list-style-type: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0;
+
+  /* custom */
+  flex-direction: column;
+  gap: var(--base-gap-large);
+  padding: 8px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+
+  /* shrink the padding when compact */
+  &.compact {
+    padding: 4px;
+    gap: var(--base-gap-small);
+  }
+
+  /* colors */
+  background-color: var(--md-sys-color-surface-container-high);
+
+  /* divider */
+  hr {
     margin: 0;
-    padding: 9.4px 8px;
-    text-transform: capitalize;
+    width: 100%;
+    border-style: solid;
+    opacity: 0.5;
+    border-color: var(--md-sys-color-surface-container-highest);
+  }
+`, Fe = A.li`
+  display: flex;
+  padding: 6px 16px 6px 12px;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--base-gap-large);
+  align-self: stretch;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+
+  span {
+    display: inline-block;
+  }
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-highest);
+  }
+
+  .hover-swap {
+    display: none;
+    cursor: grab;
+  }
+  &:hover {
+    .hover-swap-default {
+      display: none;
+    }
+    .hover-swap {
+      display: inline-block;
+    }
+  }
+
+  .more {
+    margin-left: auto;
+  }
+
+  /* highlighted item */
+  &.highlighted {
+    background-color: var(--md-sys-color-secondary-container);
+    &:hover {
+      background-color: var(--md-sys-color-secondary-container-hover);
+    }
+  }
+
+  /* selected item */
+  &.selected {
+    background-color: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+    &:hover {
+      background-color: var(--md-sys-color-primary-container-hover);
+    }
+  }
+
+  &.notification::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(25%, -25%);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-error);
+  }
+
+  &.danger {
+    &,
+    .icon {
+      color: var(--md-sys-color-error);
+    }
+
+    &:hover {
+      background-color: var(--md-sys-color-error-container);
+
+      &,
+      .icon {
+        color: var(--md-sys-color-on-error-container);
+      }
+    }
+  }
+
+  &.dev {
+    &,
+    .icon {
+      color: var(--color-hl-developer);
+    }
+
+    &:hover {
+      background-color: var(--color-hl-developer-container-hover);
+    }
+  }
+
+  /* needs a Power Pack license: a bolt at the end of the row */
+  .power-bolt {
+    margin-left: auto;
+    color: var(--md-sys-color-tertiary);
+    font-variation-settings: 'FILL' 1;
+  }
+
+  &.disabled {
+    user-select: none;
+    pointer-events: none;
+    &,
+    .icon {
+      color: var(--md-sys-color-outline);
+    }
+    background-color: unset;
+  }
+`, We = A.div`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+  margin-left: auto;
+  padding-left: 24px;
+`, $e = A(fe)`
+  margin-left: auto;
+  &.hasIcon {
+    padding: 4px;
+  }
+  .icon {
+    font-size: 16px;
+  }
+
+  .selected & {
+    background-color: var(--md-sys-color-on-primary);
+    color: var(--md-sys-color-primary);
+  }
+`, ze = A.img`
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+`, qe = A.footer`
+  position: relative;
+  display: flex;
+  padding: 8px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  background-color: var(--md-sys-color-surface-container-lowest);
+
+  user-select: text;
+
+  button {
+    display: none;
+
+    position: absolute;
+    right: 2px;
+    border-radius: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+
+  /* hover show button */
+  &:hover {
+    button {
+      display: flex;
+    }
+  }
+`, ge = Ee(
+  ({
+    label: s,
+    icon: n,
+    hoverIcon: r,
+    img: i,
+    highlighted: d,
+    notification: u,
+    selected: c,
+    danger: t,
+    items: g = [],
+    className: a,
+    isLink: h,
+    isDev: m,
+    shortcut: L,
+    disabled: e,
+    powerFeature: l,
+    active: f,
+    reserveActiveSlot: w,
+    endActions: y = [],
+    ...N
+  }, q) => {
+    const J = Ce(s) ? s : [s], { powerLicense: v } = ne(), C = !v && l, S = /* @__PURE__ */ Q(
+      Fe,
+      {
+        ref: q,
+        className: pe(
+          "menu-item",
+          {
+            highlighted: d,
+            selected: c,
+            notification: u,
+            danger: t,
+            dev: m,
+            disabled: e,
+            power: C
+          },
+          a
+        ),
+        ...N,
+        "aria-label": J.join(", "),
+        children: [
+          n && /* @__PURE__ */ p(K, { icon: n, className: r ? "hover-swap-default" : void 0 }),
+          r && /* @__PURE__ */ p(K, { icon: r, className: "hover-swap" }),
+          i && /* @__PURE__ */ p(ze, { src: i, alt: `${s} icon` }),
+          J.map((b, x) => /* @__PURE__ */ p("span", { children: b }, x)),
+          L && /* @__PURE__ */ p(Pe, { style: { minWidth: 22, textAlign: "center" }, align: "right", children: L }),
+          (f || w) && /* @__PURE__ */ p(
+            K,
+            {
+              icon: "check",
+              style: { marginLeft: "auto", visibility: f ? "visible" : "hidden" }
+            }
+          ),
+          !!y.length && /* @__PURE__ */ p(We, { children: y.map((b) => /* @__PURE__ */ p(
+            $e,
+            {
+              variant: "text",
+              icon: b.icon,
+              className: "menu-item-end-action",
+              "data-tooltip": b.tooltip,
+              "aria-label": b.tooltip,
+              onClick: (x) => {
+                x.stopPropagation(), b.onClick(x);
+              },
+              onKeyDown: (x) => x.stopPropagation()
+            },
+            b.icon
+          )) }),
+          C && /* @__PURE__ */ p(K, { icon: "bolt", className: "power-bolt" }),
+          !!g.length && /* @__PURE__ */ p(K, { icon: "arrow_right", className: "more" })
+        ]
+      }
+    );
+    return h ? /* @__PURE__ */ p(Se, { to: h, target: N.target, children: S }) : S;
   }
-`, ot = ({
-  items: c,
-  handleClick: o,
+);
+ge.displayName = "MenuItem";
+const ae = ({
+  items: s,
+  handleClick: n,
   onSubMenu: r,
   onSubMenuLayout: i,
-  subMenu: f,
-  level: d,
-  id: a = "root-menu",
-  parentRef: e,
-  parentEl: p,
-  style: s,
+  subMenu: d,
+  level: u,
+  id: c = "root-menu",
+  parentRef: t,
+  parentEl: g,
+  style: a,
   placement: h,
   onClose: m,
-  onMenuClose: R,
-  itemClassName: t,
+  onMenuClose: L,
+  itemClassName: e,
   itemStyle: l,
-  setPowerpackDialog: u,
-  ...x
+  setPowerpackDialog: f,
+  ...w
 }) => {
-  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
-    ), 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,
+  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), I = 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;
+    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));
+    let W = D.top - 8;
+    W + I > B - M && (W = B - I - M), W = Math.max(U, W);
+    const ee = R === "left" ? o - 16 : o;
+    r?.(v, {
+      id: C,
       style: {
-        top: N - F.top,
-        left: J - F.left,
-        maxHeight: I - N - w
+        top: W - _.top,
+        left: ee - _.left,
+        maxHeight: B - W - M
       },
-      items: H,
-      level: d,
-      placement: b,
+      items: S,
+      level: u,
+      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: C
+      parentEl: b
     });
-  }, dt = (g) => {
-    f && r?.(g, { id: "parent", items: [] });
+  }, J = (v) => {
+    d && r?.(v, { id: "parent", items: [] });
   };
-  return U(() => {
-    f && _.current && _.current.querySelectorAll("li, button")[0]?.focus();
-  }, [f]), st(() => {
-    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 - y) {
-      const wt = Math.min(tt, T - K - y);
-      z = T - wt - y;
+  return Y(() => {
+    d && N.current && N.current.querySelectorAll("li, button")[0]?.focus();
+  }, [d]), ce(() => {
+    if (!d || !N.current || !t || !i || !c) return;
+    const v = N.current, C = t, S = C.closest(".menu-list, .sub-menu");
+    if (!S) return;
+    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, 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;
+    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 = b.querySelector(":scope > li")?.getBoundingClientRect(), ee = V.top, ve = Z ? Z.top : D.top + 8, ye = ee - ve, ie = b.scrollHeight;
+    let G = D.top + ye;
+    if (G + ie > I - E) {
+      const Me = Math.min(ie, I - U - E);
+      G = I - Me - E;
     }
-    z = Math.max(K, z);
-    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
+    G = Math.max(U, G);
+    const be = o === "left" ? H - B : H, re = G - _.top, se = be - _.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 },
+      o
     );
-  }, [f, c, e, a, h, s?.top, s?.left, i]), /* @__PURE__ */ L(
-    Et,
+  }, [d, s, t, c, h, a?.top, a?.left, i]), /* @__PURE__ */ p(
+    _e,
     {
-      style: { paddingLeft: f ? 16 : 0, ...s },
-      className: f ? "sub-menu" : "menu-list",
-      id: a,
-      onMouseLeave: dt,
-      ...x,
-      ref: _,
-      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", {}, D);
+      style: { paddingLeft: d ? 16 : 0, ...a },
+      className: d ? "sub-menu" : "menu-list",
+      id: c,
+      onMouseLeave: J,
+      ...w,
+      ref: N,
+      children: /* @__PURE__ */ p(Be, { children: s.filter((v) => !v.hidden).map((v, C) => {
+        if (v.node)
+          return v.node;
+        if (v?.id === "divider" || v?.separator) return /* @__PURE__ */ p("hr", {}, C);
         const {
-          label: H,
-          icon: C,
-          img: A,
-          highlighted: G,
-          onClick: F,
-          link: S,
-          items: E = [],
-          id: M,
-          disableClose: q,
-          selected: I,
-          disabled: w,
-          powerFeature: P,
-          active: T,
-          reserveActiveSlot: y,
-          endActions: B,
+          label: S,
+          icon: b,
+          img: x,
+          highlighted: X,
+          onClick: _,
+          link: D,
+          items: P = [],
+          id: k,
+          disableClose: V,
+          selected: B,
+          disabled: M,
+          powerFeature: T,
+          active: I,
+          reserveActiveSlot: E,
+          endActions: F,
           ...O
-        } = g, { powerLicense: V } = ct(), W = !V && P, b = (n) => {
-          n.preventDefault(), n.stopPropagation(), P && u?.(P), R?.();
+        } = v, { powerLicense: j } = ne(), $ = !j && T, R = (o) => {
+          o.preventDefault(), o.stopPropagation(), T && f?.(T), L?.();
         };
-        return /* @__PURE__ */ L(
-          Pt,
+        return /* @__PURE__ */ p(
+          ge,
           {
             tabIndex: 0,
-            label: H,
-            icon: C,
-            img: A,
-            highlighted: G,
-            items: E,
-            selected: I,
-            disabled: w,
-            powerFeature: P,
-            active: T,
-            reserveActiveSlot: y,
-            endActions: B,
-            isLink: S,
-            onClick: (n) => W ? b(n) : E.length ? j(n, M, E) : o(n, F, S, q),
-            onKeyDown: (n) => {
-              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));
+            label: S,
+            icon: b,
+            img: x,
+            highlighted: X,
+            items: P,
+            selected: B,
+            disabled: M,
+            powerFeature: T,
+            active: I,
+            reserveActiveSlot: E,
+            endActions: F,
+            isLink: D,
+            onClick: (o) => $ ? R(o) : P.length ? q(o, k, P) : n(o, _, D, V),
+            onKeyDown: (o) => {
+              o.key === "Enter" && ($ ? R(o) : P.length ? q(o, k, P) : n(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(), m?.(k));
             },
-            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 || ""}`,
+            style: { paddingRight: P.length ? "0" : "16px", ...l },
+            ref: (o) => y.current[k] = o,
+            onMouseEnter: (o) => q(o, k, P),
+            onMouseLeave: (o) => q(o, k, []),
+            className: `${e} ${O.className || ""}`,
             ...O,
-            children: !!E.length && /* @__PURE__ */ L(Tt, { icon: "arrow_right", style: { marginLeft: "auto" } })
+            children: !!P.length && /* @__PURE__ */ p(K, { icon: "arrow_right", style: { marginLeft: "auto" } })
           },
-          `${M}-${D}`
+          `${k}-${C}`
         );
       }) })
     }
   );
 };
-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 + $ + a > s - e) {
-    const t = i.top - 8 - a - $;
-    t >= R && (h = t);
+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, g = window.innerWidth, a = window.innerHeight;
+  let h = i.bottom + 8 - z, m;
+  const L = U - z;
+  if (h + z + c > a - t) {
+    const e = i.top - 8 - c - z;
+    e >= L && (h = e);
   }
-  if (h = Math.max(R, h), r === "right") {
-    const t = i.right - d;
-    t >= e ? m = t : m = i.left;
+  if (h = Math.max(L, h), r === "right") {
+    const e = i.right - u;
+    e >= t ? m = e : m = i.left;
   } else {
-    const t = i.left;
-    t + d <= p - e ? m = t : m = i.right - d;
+    const e = i.left;
+    e + u <= g - t ? m = e : m = i.right - u;
   }
-  return m !== void 0 && (m = Math.max(e, Math.min(m, p - d - e))), { top: h, left: m, maxHeight: s - (h + $) - e };
+  return m !== void 0 && (m = Math.max(t, Math.min(m, g - u - t))), { top: h, left: m, maxHeight: a - (h + z) - t };
 }
-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`);
+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`);
       return;
     }
-    if (!d.current) return;
-    const p = At(e, d.current, r);
-    p && f(
-      (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
+    if (!u.current) return;
+    const g = Ve(t, u.current, r);
+    g && d(
+      (a) => a && Math.abs(a.top - g.top) < 1 && Math.abs((a.left ?? 0) - (g.left ?? 0)) < 1 && Math.abs((a.maxHeight ?? 0) - (g.maxHeight ?? 0)) < 1 ? a : g
     );
-  }, [c, o, r]);
-  return st(() => {
-    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);
+  }, [s, n, r]);
+  return ce(() => {
+    c();
+  }, [c]), Y(() => {
+    const t = () => requestAnimationFrame(c);
+    return window.addEventListener("resize", t, { passive: !0 }), window.addEventListener("scroll", t, { passive: !0 }), () => {
+      window.removeEventListener("resize", t), window.removeEventListener("scroll", t);
     };
-  }, [a]), U(() => {
-    if (!d.current) return;
-    const e = new ResizeObserver(() => {
-      a();
+  }, [c]), Y(() => {
+    if (!u.current) return;
+    const t = new ResizeObserver(() => {
+      c();
     });
-    return e.observe(d.current), () => {
-      e.disconnect();
+    return t.observe(u.current), () => {
+      t.disconnect();
     };
-  }, [a]), { position: i, menuRef: d };
+  }, [c]), { position: i, menuRef: u };
 }
-const it = "ayon-menu-dialog", ft = "ayon-menu-content", le = ({
-  id: c,
-  target: o,
+const le = "ayon-menu-dialog", me = "ayon-menu-content", gt = ({
+  id: s,
+  target: n,
   targetId: r = "",
   align: i = "right",
-  theme: f = "light",
-  children: d,
-  ...a
+  theme: d = "light",
+  children: u,
+  ...c
 }) => {
-  const { menuOpen: e, setMenuOpen: p, navigate: s } = at(), h = e === c, m = () => {
-    p(!1);
-  }, R = (t) => {
-    console.log("navigate and close"), m(), !s && t ? console.log("navigate not found") : s && t && s(t);
+  const { menuOpen: t, setMenuOpen: g, navigate: a } = ue(), h = t === s, m = () => {
+    g(!1);
+  }, L = (e) => {
+    console.log("navigate and close"), m(), !a && e ? console.log("navigate not found") : a && e && a(e);
   };
-  return h ? /* @__PURE__ */ L(
-    It,
+  return h ? /* @__PURE__ */ p(
+    Ge,
     {
       handleClose: m,
-      handleNavigate: R,
-      target: o,
+      handleNavigate: L,
+      target: n,
       targetId: r,
       align: i,
-      theme: f,
-      children: d,
-      ...a
+      theme: d,
+      children: u,
+      ...c
     }
   ) : null;
-}, It = ({
-  handleClose: c,
-  handleNavigate: o,
+}, Ge = ({
+  handleClose: s,
+  handleNavigate: n,
   target: r,
   targetId: i,
-  align: f = "right",
-  children: d,
-  ...a
+  align: d = "right",
+  children: u,
+  ...c
 }) => {
-  const { position: e, menuRef: p } = Ft(r ?? null, i ?? "", f);
-  U(() => {
-    e && p.current && p.current.querySelectorAll("li, button")[0]?.focus();
-  }, [e]);
-  const s = (t) => {
-    t.key === "Escape" && c();
-  }, h = (t) => {
-    t.target.id === it && c();
-  }, m = X.Children.map(d, (t, l) => X.isValidElement(t) ? X.cloneElement(t, {
-    onClose: c,
+  const { position: t, menuRef: g } = je(r ?? null, i ?? "", d);
+  Y(() => {
+    t && g.current && g.current.querySelectorAll("li, button")[0]?.focus();
+  }, [t]);
+  const a = (e) => {
+    e.key === "Escape" && s();
+  }, h = (e) => {
+    e.target.id === le && s();
+  }, m = te.Children.map(u, (e, l) => te.isValidElement(e) ? te.cloneElement(e, {
+    onClose: s,
     index: l,
-    navigate: o
-  }) : t);
-  return Dt(
-    /* @__PURE__ */ L(
-      Lt,
+    navigate: n
+  }) : e);
+  return Te(
+    /* @__PURE__ */ p(
+      De,
       {
         open: !0,
         onClick: h,
-        onKeyDown: s,
-        ...a,
-        id: it,
-        children: /* @__PURE__ */ L(
-          Rt,
+        onKeyDown: a,
+        ...c,
+        id: le,
+        children: /* @__PURE__ */ p(
+          Oe,
           {
-            id: ft,
-            style: e || { top: 0, left: 0, opacity: 0, visibility: "hidden" },
-            className: kt(f),
-            ref: p,
+            id: me,
+            style: t || { top: 0, left: 0, opacity: 0, visibility: "hidden" },
+            className: pe(d),
+            ref: g,
             children: m
           }
         )
@@ -310,88 +656,88 @@ const it = "ayon-menu-dialog", ft = "ayon-menu-content", le = ({
     ),
     document.body
   );
-}, 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;
+}, 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;
   }
-}, 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) => {
+}, 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)
+), mt = ({ menu: s = [], onClose: n, header: r, footer: i = "" }) => {
+  const { setPowerpackDialog: d } = ne(), { setMenuOpen: u } = ue(), [c, t] = de([]), g = (e, l, f, w) => {
+    if (f) return n?.();
+    l?.(e), !w && n && n();
+  }, a = (e, l) => {
     if (l.items.length) {
-      if (!a.find((u) => u.id === l.id)) {
-        const u = l.parentEl ?? t.currentTarget ?? t.target;
-        e([
-          ...a.filter((x) => x.level < (l.level || 0) + 1),
+      if (!c.find((f) => f.id === l.id)) {
+        const f = l.parentEl ?? e.currentTarget ?? e.target;
+        t([
+          ...c.filter((w) => w.level < (l.level || 0) + 1),
           {
             ...l,
             id: l.id,
             level: (l.level || 0) + 1,
-            parentRef: u
+            parentRef: f
           }
         ]);
       }
     } else
-      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}`) || 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);
+      t(c.filter((f) => f.level <= (l.level || 0)));
+  }, h = (e, l = {}) => {
+    const f = e.relatedTarget;
+    if (!f) return;
+    if (f.tagName === "DIALOG") return t([]);
+    typeof f.closest == "function" && f.closest(`#${me}`) || c.find((y) => y.id === f.id) || t(c.filter((y) => y.level <= (l.level || 0) + 1));
+  }, m = (e, l) => {
+    e.type === "mouseenter" || e.type === "keydown" ? a(e, l) : e.type === "mouseleave" && h(e, l);
   };
-  U(() => {
-    e((t) => {
-      if (!t.length) return t;
-      const l = t.flatMap((x) => {
-        const v = ut(c, x.id);
-        return v ? [{ ...x, items: v }] : [];
+  Y(() => {
+    t((e) => {
+      if (!e.length) return e;
+      const l = e.flatMap((w) => {
+        const y = he(s, w.id);
+        return y ? [{ ...w, items: y }] : [];
       });
-      return l.length === t.length && l.every((x, v) => Nt(x.items, t[v].items)) ? t : l;
+      return l.length === e.length && l.every((w, y) => Ue(w.items, e[y].items)) ? e : l;
     });
-  }, [c]);
-  const R = (t, l, u) => {
-    e((x) => x.map((v) => v.id === t ? { ...v, style: l, placement: u } : v));
+  }, [s]);
+  const L = (e, l, f) => {
+    t((w) => w.map((y) => y.id === e ? { ...y, style: l, placement: f } : y));
   };
-  return /* @__PURE__ */ Q(yt, { children: [
-    /* @__PURE__ */ Q(Ct, { children: [
+  return /* @__PURE__ */ Q(ke, { children: [
+    /* @__PURE__ */ Q(He, { children: [
       r && r,
-      /* @__PURE__ */ L(
-        ot,
+      /* @__PURE__ */ p(
+        ae,
         {
-          items: c,
-          handleClick: p,
+          items: s,
+          handleClick: g,
           onSubMenu: m,
           level: 0,
-          setPowerpackDialog: f,
-          onMenuClose: () => d(!1)
+          setPowerpackDialog: d,
+          onMenuClose: () => u(!1)
         }
       ),
-      i && /* @__PURE__ */ Q(St, { children: [
+      i && /* @__PURE__ */ Q(qe, { children: [
         i,
-        /* @__PURE__ */ L(Ot, { icon: "content_copy", variant: "text", onClick: () => Ht(i) })
+        /* @__PURE__ */ p(fe, { icon: "content_copy", variant: "text", onClick: () => Ne(i) })
       ] })
     ] }),
-    a.map((t, l) => /* @__PURE__ */ L(
-      ot,
+    c.map((e, l) => /* @__PURE__ */ p(
+      ae,
       {
-        ...t,
-        parentRef: t.parentRef || null,
-        style: t.style || {},
-        handleClick: p,
+        ...e,
+        parentRef: e.parentRef || null,
+        style: e.style || {},
+        handleClick: g,
         subMenu: !0,
         onSubMenu: m,
-        onSubMenuLayout: R,
-        onClose: () => e(a.filter((u) => u.id !== t.id)),
-        onMenuClose: () => d(!1),
-        onChange: s,
-        setPowerpackDialog: f,
+        onSubMenuLayout: L,
+        onClose: () => t(c.filter((f) => f.id !== e.id)),
+        onMenuClose: () => u(!1),
+        onChange: a,
+        setPowerpackDialog: d,
         itemClassName: void 0,
         itemStyle: void 0
       },
@@ -400,11 +746,9 @@ const it = "ayon-menu-dialog", ft = "ayon-menu-content", le = ({
   ] });
 };
 export {
-  re as E,
-  le as M,
-  ce as a,
-  se as b,
-  ft as c,
-  it as d,
-  ot as e
+  gt as M,
+  mt as a,
+  me as b,
+  le as c,
+  ae as d
 };