@ynput/ayon-frontend-shared 0.3.29 → 0.3.31

package/dist/shared/src/components/Menu/MenuContainer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContainer.cjs.js","sources":["../../../../../src/components/Menu/MenuContainer.tsx"],"sourcesContent":["import React, { useEffect, ReactNode } from 'react'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport { createPortal } from 'react-dom'\nimport clsx from 'clsx'\nimport * as Styled from './Menu.styled'\nimport { useMenuPosition } from './useMenuPosition'\n\ntype AlignType = 'left' | 'right'\ntype ThemeType = 'light' | 'dark'\n\ninterface MenuContainerProps {\n  id: string | undefined\n  target?: HTMLElement | null\n  targetId?: string\n  align?: AlignType\n  theme?: ThemeType\n  children: ReactNode\n  [key: string]: any\n}\n\nexport const MenuContainer: React.FC<MenuContainerProps> = ({\n  id,\n  target,\n  targetId = '',\n  align = 'right',\n  theme = 'light',\n  children,\n  ...props\n}) => {\n  const { menuOpen, setMenuOpen, navigate } = useMenuContext()\n  const isOpen = menuOpen === id\n\n  const handleClose = () => {\n    setMenuOpen(false)\n  }\n\n  const handleNavigate = (path?: string) => {\n    console.log('navigate and close')\n    handleClose()\n    if (!navigate && path) {\n      console.log('navigate not found')\n    } else if (navigate && path) {\n      navigate(path)\n    }\n  }\n\n  if (!isOpen) return null\n\n  return (\n    <MenuInner\n      {...{\n        handleClose,\n        handleNavigate,\n        target,\n        targetId,\n        align,\n        theme,\n        children,\n        ...props,\n      }}\n    />\n  )\n}\n\ninterface MenuInnerProps {\n  handleClose: () => void\n  handleNavigate: (path?: string) => void\n  target?: HTMLElement | null\n  targetId?: string\n  align?: AlignType\n  children: ReactNode\n  [key: string]: any\n}\n\nconst MenuInner: React.FC<MenuInnerProps> = ({\n  handleClose,\n  handleNavigate,\n  target,\n  targetId,\n  align = 'right',\n  children,\n  ...props\n}) => {\n  const { position, menuRef } = useMenuPosition(target ?? null, targetId ?? '', align)\n\n  // Focus management\n  useEffect(() => {\n    if (position && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n      first?.focus()\n    }\n  }, [position])\n\n  // Keyboard handling\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') handleClose()\n  }\n\n  // Click outside handling\n  const handleOnClick = (e: React.MouseEvent<HTMLDialogElement>) => {\n    if ((e.target as HTMLElement).id === 'dialog') handleClose()\n  }\n\n  // Attach props to children\n  const childrenWithProps = React.Children.map(children, (child, i) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child, {\n        onClose: handleClose,\n        index: i,\n        navigate: handleNavigate,\n      } as any)\n    }\n    return child\n  })\n\n  const menuPosition = position || { top: 0, left: 0, opacity: 0, visibility: 'hidden' as const }\n\n  return createPortal(\n    <Styled.Dialog\n      open={true}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n      id=\"dialog\"\n    >\n      <Styled.DialogContent\n        id=\"content\"\n        style={menuPosition}\n        className={clsx(align)}\n        ref={menuRef as any}\n      >\n        {childrenWithProps}\n      </Styled.DialogContent>\n    </Styled.Dialog>,\n    document.body,\n  )\n}\n"],"names":["MenuContainer","id","target","targetId","align","theme","children","props","menuOpen","setMenuOpen","navigate","useMenuContext","isOpen","handleClose","handleNavigate","path","jsx","MenuInner","position","menuRef","useMenuPosition","useEffect","handleKeyDown","handleOnClick","childrenWithProps","React","child","i","menuPosition","createPortal","Styled.Dialog","Styled.DialogContent","clsx"],"mappings":"6TAoBaA,EAA8C,CAAC,CAC1D,GAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,MAAAC,EAAQ,QACR,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,KAAM,CAAE,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAA,EAAaC,EAAAA,eAAA,EACtCC,EAASJ,IAAaP,EAEtBY,EAAc,IAAM,CACxBJ,EAAY,EAAK,CACnB,EAEMK,EAAkBC,GAAkB,CACxC,QAAQ,IAAI,oBAAoB,EAChCF,EAAA,EACI,CAACH,GAAYK,EACf,QAAQ,IAAI,oBAAoB,EACvBL,GAAYK,GACrBL,EAASK,CAAI,CAEjB,EAEA,OAAKH,EAGHI,EAAAA,kBAAAA,IAACC,EAAA,CAEG,YAAAJ,EACA,eAAAC,EACA,OAAAZ,EACA,SAAAC,EACA,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,CAAA,EAbgB,IAgBtB,EAYMU,EAAsC,CAAC,CAC3C,YAAAJ,EACA,eAAAC,EACA,OAAAZ,EACA,SAAAC,EACA,MAAAC,EAAQ,QACR,SAAAE,EACA,GAAGC,CACL,IAAM,CACJ,KAAM,CAAE,SAAAW,EAAU,QAAAC,CAAA,EAAYC,EAAAA,gBAAgBlB,GAAU,KAAMC,GAAY,GAAIC,CAAK,EAGnFiB,EAAAA,UAAU,IAAM,CACVH,GAAYC,EAAQ,SACRA,EAAQ,QAAQ,iBAAiB,YAAY,EAAE,CAAC,GACvD,MAAA,CAEX,EAAG,CAACD,CAAQ,CAAC,EAGb,MAAMI,EAAiB,GAA2B,CAC5C,EAAE,MAAQ,UAAUT,EAAA,CAC1B,EAGMU,EAAiB,GAA2C,CAC3D,EAAE,OAAuB,KAAO,UAAUV,EAAA,CACjD,EAGMW,EAAoBC,EAAM,SAAS,IAAInB,EAAU,CAACoB,EAAOC,IACzDF,EAAM,eAAeC,CAAK,EACrBD,EAAM,aAAaC,EAAO,CAC/B,QAASb,EACT,MAAOc,EACP,SAAUb,CAAA,CACJ,EAEHY,CACR,EAEKE,EAAeV,GAAY,CAAE,IAAK,EAAG,KAAM,EAAG,QAAS,EAAG,WAAY,QAAA,EAE5E,OAAOW,EAAAA,aACLb,EAAAA,kBAAAA,IAACc,EAAAA,OAAA,CACC,KAAM,GACN,QAASP,EACT,UAAWD,EACV,GAAGf,EACJ,GAAG,SAEH,SAAAS,EAAAA,kBAAAA,IAACe,EAAAA,cAAA,CACC,GAAG,UACH,MAAOH,EACP,UAAWI,EAAK5B,CAAK,EACrB,IAAKe,EAEJ,SAAAK,CAAA,CAAA,CACH,CAAA,EAEF,SAAS,IAAA,CAEb"}
+{"version":3,"file":"MenuContainer.cjs.js","sources":["../../../../../src/components/Menu/MenuContainer.tsx"],"sourcesContent":["import React, { useEffect, ReactNode } from 'react'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport { createPortal } from 'react-dom'\nimport clsx from 'clsx'\nimport * as Styled from './Menu.styled'\nimport { useMenuPosition } from './useMenuPosition'\n\n// DOM ids of the menu portal — exported so other menu code (mouse-leave heuristics,\n// hit-testing, etc.) can reference them by constant instead of magic strings.\nexport const MENU_PORTAL_DIALOG_ID = 'ayon-menu-dialog'\nexport const MENU_PORTAL_CONTENT_ID = 'ayon-menu-content'\n\ntype AlignType = 'left' | 'right'\ntype ThemeType = 'light' | 'dark'\n\ninterface MenuContainerProps {\n  id: string | undefined\n  target?: HTMLElement | null\n  targetId?: string\n  align?: AlignType\n  theme?: ThemeType\n  children: ReactNode\n  [key: string]: any\n}\n\nexport const MenuContainer: React.FC<MenuContainerProps> = ({\n  id,\n  target,\n  targetId = '',\n  align = 'right',\n  theme = 'light',\n  children,\n  ...props\n}) => {\n  const { menuOpen, setMenuOpen, navigate } = useMenuContext()\n  const isOpen = menuOpen === id\n\n  const handleClose = () => {\n    setMenuOpen(false)\n  }\n\n  const handleNavigate = (path?: string) => {\n    console.log('navigate and close')\n    handleClose()\n    if (!navigate && path) {\n      console.log('navigate not found')\n    } else if (navigate && path) {\n      navigate(path)\n    }\n  }\n\n  if (!isOpen) return null\n\n  return (\n    <MenuInner\n      {...{\n        handleClose,\n        handleNavigate,\n        target,\n        targetId,\n        align,\n        theme,\n        children,\n        ...props,\n      }}\n    />\n  )\n}\n\ninterface MenuInnerProps {\n  handleClose: () => void\n  handleNavigate: (path?: string) => void\n  target?: HTMLElement | null\n  targetId?: string\n  align?: AlignType\n  children: ReactNode\n  [key: string]: any\n}\n\nconst MenuInner: React.FC<MenuInnerProps> = ({\n  handleClose,\n  handleNavigate,\n  target,\n  targetId,\n  align = 'right',\n  children,\n  ...props\n}) => {\n  const { position, menuRef } = useMenuPosition(target ?? null, targetId ?? '', align)\n\n  // Focus management\n  useEffect(() => {\n    if (position && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n      first?.focus()\n    }\n  }, [position])\n\n  // Keyboard handling\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') handleClose()\n  }\n\n  // Click outside handling\n  const handleOnClick = (e: React.MouseEvent<HTMLDialogElement>) => {\n    if ((e.target as HTMLElement).id === MENU_PORTAL_DIALOG_ID) handleClose()\n  }\n\n  // Attach props to children\n  const childrenWithProps = React.Children.map(children, (child, i) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child, {\n        onClose: handleClose,\n        index: i,\n        navigate: handleNavigate,\n      } as any)\n    }\n    return child\n  })\n\n  const menuPosition = position || { top: 0, left: 0, opacity: 0, visibility: 'hidden' as const }\n\n  return createPortal(\n    <Styled.Dialog\n      open={true}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n      id={MENU_PORTAL_DIALOG_ID}\n    >\n      <Styled.DialogContent\n        id={MENU_PORTAL_CONTENT_ID}\n        style={menuPosition}\n        className={clsx(align)}\n        ref={menuRef as any}\n      >\n        {childrenWithProps}\n      </Styled.DialogContent>\n    </Styled.Dialog>,\n    document.body,\n  )\n}\n"],"names":["MENU_PORTAL_DIALOG_ID","MENU_PORTAL_CONTENT_ID","MenuContainer","id","target","targetId","align","theme","children","props","menuOpen","setMenuOpen","navigate","useMenuContext","isOpen","handleClose","handleNavigate","path","jsx","MenuInner","position","menuRef","useMenuPosition","useEffect","handleKeyDown","handleOnClick","childrenWithProps","React","child","i","menuPosition","createPortal","Styled.Dialog","Styled.DialogContent","clsx"],"mappings":"6TASaA,EAAwB,mBACxBC,EAAyB,oBAezBC,EAA8C,CAAC,CAC1D,GAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,MAAAC,EAAQ,QACR,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,KAAM,CAAE,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAA,EAAaC,EAAAA,eAAA,EACtCC,EAASJ,IAAaP,EAEtBY,EAAc,IAAM,CACxBJ,EAAY,EAAK,CACnB,EAEMK,EAAkBC,GAAkB,CACxC,QAAQ,IAAI,oBAAoB,EAChCF,EAAA,EACI,CAACH,GAAYK,EACf,QAAQ,IAAI,oBAAoB,EACvBL,GAAYK,GACrBL,EAASK,CAAI,CAEjB,EAEA,OAAKH,EAGHI,EAAAA,kBAAAA,IAACC,EAAA,CAEG,YAAAJ,EACA,eAAAC,EACA,OAAAZ,EACA,SAAAC,EACA,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,CAAA,EAbgB,IAgBtB,EAYMU,EAAsC,CAAC,CAC3C,YAAAJ,EACA,eAAAC,EACA,OAAAZ,EACA,SAAAC,EACA,MAAAC,EAAQ,QACR,SAAAE,EACA,GAAGC,CACL,IAAM,CACJ,KAAM,CAAE,SAAAW,EAAU,QAAAC,CAAA,EAAYC,EAAAA,gBAAgBlB,GAAU,KAAMC,GAAY,GAAIC,CAAK,EAGnFiB,EAAAA,UAAU,IAAM,CACVH,GAAYC,EAAQ,SACRA,EAAQ,QAAQ,iBAAiB,YAAY,EAAE,CAAC,GACvD,MAAA,CAEX,EAAG,CAACD,CAAQ,CAAC,EAGb,MAAMI,EAAiB,GAA2B,CAC5C,EAAE,MAAQ,UAAUT,EAAA,CAC1B,EAGMU,EAAiB,GAA2C,CAC3D,EAAE,OAAuB,KAAOzB,GAAuBe,EAAA,CAC9D,EAGMW,EAAoBC,EAAM,SAAS,IAAInB,EAAU,CAACoB,EAAOC,IACzDF,EAAM,eAAeC,CAAK,EACrBD,EAAM,aAAaC,EAAO,CAC/B,QAASb,EACT,MAAOc,EACP,SAAUb,CAAA,CACJ,EAEHY,CACR,EAEKE,EAAeV,GAAY,CAAE,IAAK,EAAG,KAAM,EAAG,QAAS,EAAG,WAAY,QAAA,EAE5E,OAAOW,EAAAA,aACLb,EAAAA,kBAAAA,IAACc,EAAAA,OAAA,CACC,KAAM,GACN,QAASP,EACT,UAAWD,EACV,GAAGf,EACJ,GAAIT,EAEJ,SAAAkB,EAAAA,kBAAAA,IAACe,EAAAA,cAAA,CACC,GAAIhC,EACJ,MAAO6B,EACP,UAAWI,EAAK5B,CAAK,EACrB,IAAKe,EAEJ,SAAAK,CAAA,CAAA,CACH,CAAA,EAEF,SAAS,IAAA,CAEb"}

package/dist/shared/src/components/Menu/MenuContainer.es.js

@@ -1,74 +1,74 @@
 import { j as g } from "../../../../_virtual/jsx-runtime.es.js";
-import p, { useEffect as y } from "react";
-import { useMenuContext as h } from "../../context/MenuContext.es.js";
-import { createPortal as v } from "react-dom";
-import C from "clsx";
-import { Dialog as j, DialogContent as E } from "./Menu.styled.es.js";
+import p, { useEffect as E } from "react";
+import { useMenuContext as O } from "../../context/MenuContext.es.js";
+import { createPortal as _ } from "react-dom";
+import h from "clsx";
+import { Dialog as C, DialogContent as D } from "./Menu.styled.es.js";
 import { useMenuPosition as M } from "./useMenuPosition.es.js";
-const N = ({
-  id: n,
+const y = "ayon-menu-dialog", v = "ayon-menu-content", k = ({
+  id: e,
   target: l,
   targetId: c = "",
-  align: a = "right",
+  align: u = "right",
   theme: r = "light",
-  children: u,
+  children: a,
   ...f
 }) => {
-  const { menuOpen: t, setMenuOpen: o, navigate: i } = h(), m = t === n, s = () => {
+  const { menuOpen: t, setMenuOpen: o, navigate: i } = O(), m = t === e, s = () => {
     o(!1);
-  }, d = (e) => {
-    console.log("navigate and close"), s(), !i && e ? console.log("navigate not found") : i && e && i(e);
+  }, d = (n) => {
+    console.log("navigate and close"), s(), !i && n ? console.log("navigate not found") : i && n && i(n);
   };
   return m ? /* @__PURE__ */ g.jsx(
-    D,
+    N,
     {
       handleClose: s,
       handleNavigate: d,
       target: l,
       targetId: c,
-      align: a,
+      align: u,
       theme: r,
-      children: u,
+      children: a,
       ...f
     }
   ) : null;
-}, D = ({
-  handleClose: n,
+}, N = ({
+  handleClose: e,
   handleNavigate: l,
   target: c,
-  targetId: a,
+  targetId: u,
   align: r = "right",
-  children: u,
+  children: a,
   ...f
 }) => {
-  const { position: t, menuRef: o } = M(c ?? null, a ?? "", r);
-  y(() => {
+  const { position: t, menuRef: o } = M(c ?? null, u ?? "", r);
+  E(() => {
     t && o.current && o.current.querySelectorAll("li, button")[0]?.focus();
   }, [t]);
-  const i = (e) => {
-    e.key === "Escape" && n();
-  }, m = (e) => {
-    e.target.id === "dialog" && n();
-  }, s = p.Children.map(u, (e, x) => p.isValidElement(e) ? p.cloneElement(e, {
-    onClose: n,
+  const i = (n) => {
+    n.key === "Escape" && e();
+  }, m = (n) => {
+    n.target.id === y && e();
+  }, s = p.Children.map(a, (n, x) => p.isValidElement(n) ? p.cloneElement(n, {
+    onClose: e,
     index: x,
     navigate: l
-  }) : e), d = t || { top: 0, left: 0, opacity: 0, visibility: "hidden" };
-  return v(
+  }) : n), d = t || { top: 0, left: 0, opacity: 0, visibility: "hidden" };
+  return _(
     /* @__PURE__ */ g.jsx(
-      j,
+      C,
       {
         open: !0,
         onClick: m,
         onKeyDown: i,
         ...f,
-        id: "dialog",
+        id: y,
         children: /* @__PURE__ */ g.jsx(
-          E,
+          D,
           {
-            id: "content",
+            id: v,
             style: d,
-            className: C(r),
+            className: h(r),
             ref: o,
             children: s
           }
@@ -79,6 +79,8 @@ const N = ({
   );
 };
 export {
-  N as MenuContainer
+  v as MENU_PORTAL_CONTENT_ID,
+  y as MENU_PORTAL_DIALOG_ID,
+  k as MenuContainer
 };
 //# sourceMappingURL=MenuContainer.es.js.map

package/dist/shared/src/components/Menu/MenuContainer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContainer.es.js","sources":["../../../../../src/components/Menu/MenuContainer.tsx"],"sourcesContent":["import React, { useEffect, ReactNode } from 'react'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport { createPortal } from 'react-dom'\nimport clsx from 'clsx'\nimport * as Styled from './Menu.styled'\nimport { useMenuPosition } from './useMenuPosition'\n\ntype AlignType = 'left' | 'right'\ntype ThemeType = 'light' | 'dark'\n\ninterface MenuContainerProps {\n  id: string | undefined\n  target?: HTMLElement | null\n  targetId?: string\n  align?: AlignType\n  theme?: ThemeType\n  children: ReactNode\n  [key: string]: any\n}\n\nexport const MenuContainer: React.FC<MenuContainerProps> = ({\n  id,\n  target,\n  targetId = '',\n  align = 'right',\n  theme = 'light',\n  children,\n  ...props\n}) => {\n  const { menuOpen, setMenuOpen, navigate } = useMenuContext()\n  const isOpen = menuOpen === id\n\n  const handleClose = () => {\n    setMenuOpen(false)\n  }\n\n  const handleNavigate = (path?: string) => {\n    console.log('navigate and close')\n    handleClose()\n    if (!navigate && path) {\n      console.log('navigate not found')\n    } else if (navigate && path) {\n      navigate(path)\n    }\n  }\n\n  if (!isOpen) return null\n\n  return (\n    <MenuInner\n      {...{\n        handleClose,\n        handleNavigate,\n        target,\n        targetId,\n        align,\n        theme,\n        children,\n        ...props,\n      }}\n    />\n  )\n}\n\ninterface MenuInnerProps {\n  handleClose: () => void\n  handleNavigate: (path?: string) => void\n  target?: HTMLElement | null\n  targetId?: string\n  align?: AlignType\n  children: ReactNode\n  [key: string]: any\n}\n\nconst MenuInner: React.FC<MenuInnerProps> = ({\n  handleClose,\n  handleNavigate,\n  target,\n  targetId,\n  align = 'right',\n  children,\n  ...props\n}) => {\n  const { position, menuRef } = useMenuPosition(target ?? null, targetId ?? '', align)\n\n  // Focus management\n  useEffect(() => {\n    if (position && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n      first?.focus()\n    }\n  }, [position])\n\n  // Keyboard handling\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') handleClose()\n  }\n\n  // Click outside handling\n  const handleOnClick = (e: React.MouseEvent<HTMLDialogElement>) => {\n    if ((e.target as HTMLElement).id === 'dialog') handleClose()\n  }\n\n  // Attach props to children\n  const childrenWithProps = React.Children.map(children, (child, i) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child, {\n        onClose: handleClose,\n        index: i,\n        navigate: handleNavigate,\n      } as any)\n    }\n    return child\n  })\n\n  const menuPosition = position || { top: 0, left: 0, opacity: 0, visibility: 'hidden' as const }\n\n  return createPortal(\n    <Styled.Dialog\n      open={true}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n      id=\"dialog\"\n    >\n      <Styled.DialogContent\n        id=\"content\"\n        style={menuPosition}\n        className={clsx(align)}\n        ref={menuRef as any}\n      >\n        {childrenWithProps}\n      </Styled.DialogContent>\n    </Styled.Dialog>,\n    document.body,\n  )\n}\n"],"names":["MenuContainer","id","target","targetId","align","theme","children","props","menuOpen","setMenuOpen","navigate","useMenuContext","isOpen","handleClose","handleNavigate","path","jsx","MenuInner","position","menuRef","useMenuPosition","useEffect","handleKeyDown","handleOnClick","childrenWithProps","React","child","i","menuPosition","createPortal","Styled.Dialog","Styled.DialogContent","clsx"],"mappings":";;;;;;;AAoBO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,IAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,UAAAC,GAAU,aAAAC,GAAa,UAAAC,EAAA,IAAaC,EAAA,GACtCC,IAASJ,MAAaP,GAEtBY,IAAc,MAAM;AACxB,IAAAJ,EAAY,EAAK;AAAA,EACnB,GAEMK,IAAiB,CAACC,MAAkB;AACxC,YAAQ,IAAI,oBAAoB,GAChCF,EAAA,GACI,CAACH,KAAYK,IACf,QAAQ,IAAI,oBAAoB,IACvBL,KAAYK,KACrBL,EAASK,CAAI;AAAA,EAEjB;AAEA,SAAKH,IAGHI,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MAEG,aAAAJ;AAAA,MACA,gBAAAC;AAAA,MACA,QAAAZ;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,GAAGC;AAAA,IACL;AAAA,EAAA,IAbgB;AAgBtB,GAYMU,IAAsC,CAAC;AAAA,EAC3C,aAAAJ;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAZ;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAE;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,UAAAW,GAAU,SAAAC,EAAA,IAAYC,EAAgBlB,KAAU,MAAMC,KAAY,IAAIC,CAAK;AAGnF,EAAAiB,EAAU,MAAM;AACd,IAAIH,KAAYC,EAAQ,WACRA,EAAQ,QAAQ,iBAAiB,YAAY,EAAE,CAAC,GACvD,MAAA;AAAA,EAEX,GAAG,CAACD,CAAQ,CAAC;AAGb,QAAMI,IAAgB,CAAC,MAA2B;AAChD,IAAI,EAAE,QAAQ,YAAUT,EAAA;AAAA,EAC1B,GAGMU,IAAgB,CAAC,MAA2C;AAChE,IAAK,EAAE,OAAuB,OAAO,YAAUV,EAAA;AAAA,EACjD,GAGMW,IAAoBC,EAAM,SAAS,IAAInB,GAAU,CAACoB,GAAOC,MACzDF,EAAM,eAAeC,CAAK,IACrBD,EAAM,aAAaC,GAAO;AAAA,IAC/B,SAASb;AAAA,IACT,OAAOc;AAAA,IACP,UAAUb;AAAA,EAAA,CACJ,IAEHY,CACR,GAEKE,IAAeV,KAAY,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,SAAA;AAE5E,SAAOW;AAAA,IACLb,gBAAAA,EAAAA;AAAAA,MAACc;AAAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAASP;AAAA,QACT,WAAWD;AAAA,QACV,GAAGf;AAAA,QACJ,IAAG;AAAA,QAEH,UAAAS,gBAAAA,EAAAA;AAAAA,UAACe;AAAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAOH;AAAA,YACP,WAAWI,EAAK5B,CAAK;AAAA,YACrB,KAAKe;AAAA,YAEJ,UAAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"MenuContainer.es.js","sources":["../../../../../src/components/Menu/MenuContainer.tsx"],"sourcesContent":["import React, { useEffect, ReactNode } from 'react'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport { createPortal } from 'react-dom'\nimport clsx from 'clsx'\nimport * as Styled from './Menu.styled'\nimport { useMenuPosition } from './useMenuPosition'\n\n// DOM ids of the menu portal — exported so other menu code (mouse-leave heuristics,\n// hit-testing, etc.) can reference them by constant instead of magic strings.\nexport const MENU_PORTAL_DIALOG_ID = 'ayon-menu-dialog'\nexport const MENU_PORTAL_CONTENT_ID = 'ayon-menu-content'\n\ntype AlignType = 'left' | 'right'\ntype ThemeType = 'light' | 'dark'\n\ninterface MenuContainerProps {\n  id: string | undefined\n  target?: HTMLElement | null\n  targetId?: string\n  align?: AlignType\n  theme?: ThemeType\n  children: ReactNode\n  [key: string]: any\n}\n\nexport const MenuContainer: React.FC<MenuContainerProps> = ({\n  id,\n  target,\n  targetId = '',\n  align = 'right',\n  theme = 'light',\n  children,\n  ...props\n}) => {\n  const { menuOpen, setMenuOpen, navigate } = useMenuContext()\n  const isOpen = menuOpen === id\n\n  const handleClose = () => {\n    setMenuOpen(false)\n  }\n\n  const handleNavigate = (path?: string) => {\n    console.log('navigate and close')\n    handleClose()\n    if (!navigate && path) {\n      console.log('navigate not found')\n    } else if (navigate && path) {\n      navigate(path)\n    }\n  }\n\n  if (!isOpen) return null\n\n  return (\n    <MenuInner\n      {...{\n        handleClose,\n        handleNavigate,\n        target,\n        targetId,\n        align,\n        theme,\n        children,\n        ...props,\n      }}\n    />\n  )\n}\n\ninterface MenuInnerProps {\n  handleClose: () => void\n  handleNavigate: (path?: string) => void\n  target?: HTMLElement | null\n  targetId?: string\n  align?: AlignType\n  children: ReactNode\n  [key: string]: any\n}\n\nconst MenuInner: React.FC<MenuInnerProps> = ({\n  handleClose,\n  handleNavigate,\n  target,\n  targetId,\n  align = 'right',\n  children,\n  ...props\n}) => {\n  const { position, menuRef } = useMenuPosition(target ?? null, targetId ?? '', align)\n\n  // Focus management\n  useEffect(() => {\n    if (position && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n      first?.focus()\n    }\n  }, [position])\n\n  // Keyboard handling\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') handleClose()\n  }\n\n  // Click outside handling\n  const handleOnClick = (e: React.MouseEvent<HTMLDialogElement>) => {\n    if ((e.target as HTMLElement).id === MENU_PORTAL_DIALOG_ID) handleClose()\n  }\n\n  // Attach props to children\n  const childrenWithProps = React.Children.map(children, (child, i) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child, {\n        onClose: handleClose,\n        index: i,\n        navigate: handleNavigate,\n      } as any)\n    }\n    return child\n  })\n\n  const menuPosition = position || { top: 0, left: 0, opacity: 0, visibility: 'hidden' as const }\n\n  return createPortal(\n    <Styled.Dialog\n      open={true}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n      id={MENU_PORTAL_DIALOG_ID}\n    >\n      <Styled.DialogContent\n        id={MENU_PORTAL_CONTENT_ID}\n        style={menuPosition}\n        className={clsx(align)}\n        ref={menuRef as any}\n      >\n        {childrenWithProps}\n      </Styled.DialogContent>\n    </Styled.Dialog>,\n    document.body,\n  )\n}\n"],"names":["MENU_PORTAL_DIALOG_ID","MENU_PORTAL_CONTENT_ID","MenuContainer","id","target","targetId","align","theme","children","props","menuOpen","setMenuOpen","navigate","useMenuContext","isOpen","handleClose","handleNavigate","path","jsx","MenuInner","position","menuRef","useMenuPosition","useEffect","handleKeyDown","e","handleOnClick","childrenWithProps","React","child","i","menuPosition","createPortal","Styled.Dialog","Styled.DialogContent","clsx"],"mappings":";;;;;;;AASO,MAAMA,IAAwB,oBACxBC,IAAyB,qBAezBC,IAA8C,CAAC;AAAA,EAC1D,IAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,UAAAC,GAAU,aAAAC,GAAa,UAAAC,EAAA,IAAaC,EAAA,GACtCC,IAASJ,MAAaP,GAEtBY,IAAc,MAAM;AACxB,IAAAJ,EAAY,EAAK;AAAA,EACnB,GAEMK,IAAiB,CAACC,MAAkB;AACxC,YAAQ,IAAI,oBAAoB,GAChCF,EAAA,GACI,CAACH,KAAYK,IACf,QAAQ,IAAI,oBAAoB,IACvBL,KAAYK,KACrBL,EAASK,CAAI;AAAA,EAEjB;AAEA,SAAKH,IAGHI,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MAEG,aAAAJ;AAAA,MACA,gBAAAC;AAAA,MACA,QAAAZ;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,GAAGC;AAAA,IACL;AAAA,EAAA,IAbgB;AAgBtB,GAYMU,IAAsC,CAAC;AAAA,EAC3C,aAAAJ;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAZ;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAE;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,UAAAW,GAAU,SAAAC,EAAA,IAAYC,EAAgBlB,KAAU,MAAMC,KAAY,IAAIC,CAAK;AAGnF,EAAAiB,EAAU,MAAM;AACd,IAAIH,KAAYC,EAAQ,WACRA,EAAQ,QAAQ,iBAAiB,YAAY,EAAE,CAAC,GACvD,MAAA;AAAA,EAEX,GAAG,CAACD,CAAQ,CAAC;AAGb,QAAMI,IAAgB,CAACC,MAA2B;AAChD,IAAIA,EAAE,QAAQ,YAAUV,EAAA;AAAA,EAC1B,GAGMW,IAAgB,CAACD,MAA2C;AAChE,IAAKA,EAAE,OAAuB,OAAOzB,KAAuBe,EAAA;AAAA,EAC9D,GAGMY,IAAoBC,EAAM,SAAS,IAAIpB,GAAU,CAACqB,GAAOC,MACzDF,EAAM,eAAeC,CAAK,IACrBD,EAAM,aAAaC,GAAO;AAAA,IAC/B,SAASd;AAAA,IACT,OAAOe;AAAA,IACP,UAAUd;AAAA,EAAA,CACJ,IAEHa,CACR,GAEKE,IAAeX,KAAY,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,SAAA;AAE5E,SAAOY;AAAA,IACLd,gBAAAA,EAAAA;AAAAA,MAACe;AAAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAASP;AAAA,QACT,WAAWF;AAAA,QACV,GAAGf;AAAA,QACJ,IAAIT;AAAA,QAEJ,UAAAkB,gBAAAA,EAAAA;AAAAA,UAACgB;AAAAA,UAAA;AAAA,YACC,IAAIjC;AAAA,YACJ,OAAO8B;AAAA,YACP,WAAWI,EAAK7B,CAAK;AAAA,YACrB,KAAKe;AAAA,YAEJ,UAAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,EAAA;AAEb;"}

package/dist/shared/src/components/Menu/MenuItem.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("../../../../_virtual/jsx-runtime.cjs.js"),t=require("@ynput/ayon-react-components"),M=require("react"),q=require("./Menu.styled.cjs.js"),N=require("lodash"),P=require("react-router-dom"),C=require("clsx");require("../../context/RemoteModulesContext.cjs.js");require("../../context/DetailsPanelContext.cjs.js");require("../../context/SubtasksModulesContext.cjs.js");require("../../context/ThumbnailUploaderContext.cjs.js");require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");const L=require("../../context/PowerpackContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");require("../../context/WebsocketContext.cjs.js");require("../../context/GlobalContext.cjs.js");require("../../context/ProjectContext.cjs.js");require("../../context/ProjectFoldersContext.cjs.js");require("../../context/UriContext.cjs.js");const m=M.forwardRef(({label:r,icon:i,img:n,highlighted:j,notification:l,selected:p,danger:R,items:d=[],className:h,isLink:o,isDev:g,shortcut:u,disabled:E,powerFeature:I,active:w,...c},y)=>{const x=N.isArray(r)?r:[r],{powerLicense:f}=L.usePowerpack(),s=!f&&I,a=e.jsxRuntimeExports.jsxs(q.Item,{ref:y,className:C("menu-item",{highlighted:j,selected:p,notification:l,danger:R,dev:g,disabled:E,power:s},h),...c,"aria-label":x.join(", "),children:[(i||s)&&e.jsxRuntimeExports.jsx(t.Icon,{icon:s?"bolt":i}),n&&e.jsxRuntimeExports.jsx(q.Img,{src:n,alt:`${r} icon`}),x.map((k,A)=>e.jsxRuntimeExports.jsx("span",{children:k},A)),u&&e.jsxRuntimeExports.jsx(t.ShortcutTag,{style:{minWidth:22,textAlign:"center"},align:"right",children:u}),w&&e.jsxRuntimeExports.jsx(t.Icon,{icon:"check",style:{marginLeft:"auto"}}),!!d.length&&e.jsxRuntimeExports.jsx(t.Icon,{icon:"arrow_right",className:"more"})]});return o?e.jsxRuntimeExports.jsx(P.Link,{to:o,target:c.target,children:a}):a});m.displayName="MenuItem";module.exports=m;
+"use strict";const e=require("../../../../_virtual/jsx-runtime.cjs.js"),i=require("@ynput/ayon-react-components"),M=require("react"),a=require("./Menu.styled.cjs.js"),N=require("lodash"),P=require("react-router-dom"),C=require("clsx");require("../../context/RemoteModulesContext.cjs.js");const L=require("../../context/PowerpackContext.cjs.js");require("../../context/UriContext.cjs.js");require("../../../../_virtual/runtime.cjs.js");require("../../../../_virtual/semver.cjs.js");require("../../api/base/client.cjs.js");require("../../api/generated/graphql.cjs.js");require("../../api/generated/graphqlLinks.cjs.js");require("../../api/generated/access.cjs.js");require("../../api/generated/actions.cjs.js");require("../../api/generated/activityFeed.cjs.js");require("../../api/generated/addons.cjs.js");require("../../api/generated/anatomy.cjs.js");require("../../api/generated/attributes.cjs.js");require("../../api/generated/authentication.cjs.js");require("../../api/generated/bundles.cjs.js");require("../../api/generated/configuration.cjs.js");require("../../api/generated/dataImport.cjs.js");require("../../api/generated/desktop.cjs.js");require("../../api/generated/entityLists.cjs.js");require("../../api/generated/events.cjs.js");require("../../api/generated/files.cjs.js");require("../../api/generated/folders.cjs.js");require("../../api/generated/inbox.cjs.js");require("../../api/generated/links.cjs.js");require("../../api/generated/market.cjs.js");require("../../api/generated/onboarding.cjs.js");require("../../api/generated/operations.cjs.js");require("../../api/generated/products.cjs.js");require("../../api/generated/projectDashboard.cjs.js");require("../../api/generated/projects.cjs.js");require("../../api/generated/projectFolders.cjs.js");require("../../api/generated/reviewables.cjs.js");require("../../api/generated/services.cjs.js");require("../../api/generated/system.cjs.js");require("../../api/generated/tasks.cjs.js");require("../../api/generated/teams.cjs.js");require("../../api/generated/thumbnails.cjs.js");require("../../api/generated/uRIs.cjs.js");require("../../api/generated/users.cjs.js");require("../../api/generated/versions.cjs.js");require("../../api/generated/workfiles.cjs.js");require("../../api/generated/ynputCloud.cjs.js");require("../../api/generated/grouping.cjs.js");require("../../api/generated/views.cjs.js");require("../../api/queries/actions/getActions.cjs.js");require("../../api/queries/activities/getActivities.cjs.js");require("../../api/queries/activities/updateActivities.cjs.js");require("../../api/queries/activities/updateReaction.cjs.js");require("../../api/queries/activities/getMentions.cjs.js");require("../../api/queries/activities/getCategories.cjs.js");require("../../api/queries/addons/getAddons.cjs.js");require("../../api/queries/addons/updateAddons.cjs.js");require("../../api/queries/attributes/getAttributes.cjs.js");require("../../api/queries/attributes/updateAttributes.cjs.js");require("../../api/queries/authentication/getAuthentication.cjs.js");require("../../api/queries/cloud/cloud.cjs.js");require("../../api/queries/config/getConfig.cjs.js");require("../../api/queries/config/updateConfig.cjs.js");require("../../api/queries/entities/getEntity.cjs.js");require("../../api/queries/entities/getEntityPanel.cjs.js");require("../../api/queries/overview/getOverview.cjs.js");require("../../api/queries/overview/updateOverview.cjs.js");require("../../api/queries/versions/getVersionsProducts.cjs.js");require("../../api/queries/links/getEntityLinks.cjs.js");require("../../api/queries/entities/updateEntity.cjs.js");require("../../api/queries/entityLists/getLists.cjs.js");require("../../api/queries/entityLists/updateLists.cjs.js");require("../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../api/queries/entityLists/listFolders.cjs.js");require("../../api/queries/folders/getFolders.cjs.js");require("../../api/queries/folders/getFolderDeleteInfo.cjs.js");require("../../api/queries/grouping/getGrouping.cjs.js");require("../../api/queries/links/updateLinks.cjs.js");require("../../api/queries/links/getLinks.cjs.js");require("../../api/queries/permissions/getPermissions.cjs.js");require("../../api/queries/products/createProduct.cjs.js");require("../../api/queries/products/getFolderProducts.cjs.js");require("../../api/queries/project/getProject.cjs.js");require("../../api/queries/project/updateProject.cjs.js");require("../../api/queries/projectFolders/projectFolders.cjs.js");require("../../api/queries/review/getReview.cjs.js");require("../../api/queries/review/updateReview.cjs.js");require("../../api/queries/share/share.cjs.js");require("../../api/queries/system/getSystem.cjs.js");require("../../api/queries/tasks/getTasks.cjs.js");require("../../api/queries/tasks/updateTasks.cjs.js");require("../../api/queries/teams/getTeams.cjs.js");require("../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../api/queries/users/getUsers.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../api/queries/users/guests.cjs.js");require("../../api/queries/versions/updateVersions.cjs.js");require("../../api/queries/views/getViews.cjs.js");require("../../api/queries/views/updateViews.cjs.js");require("../../api/queries/watchers/getWatchers.cjs.js");require("../../api/queries/uris/getUris.cjs.js");require("react-toastify");require("react-redux");require("custom-protocol-check");require("../../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");require("../../context/DetailsPanelContextInstance.cjs.js");require("../../context/SubtasksModulesContextInstance.cjs.js");require("../../context/ThumbnailUploaderContext.cjs.js");require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");require("../../context/WebsocketContext.cjs.js");require("../../context/GlobalContext.cjs.js");require("../../context/ProjectContext.cjs.js");require("../../context/ProjectFoldersContext.cjs.js");const m=M.forwardRef(({label:r,icon:q,img:t,highlighted:j,notification:l,selected:p,danger:R,items:d=[],className:h,isLink:s,isDev:g,shortcut:n,disabled:E,powerFeature:I,active:w,...o},y)=>{const c=N.isArray(r)?r:[r],{powerLicense:f}=L.usePowerpack(),u=!f&&I,x=e.jsxRuntimeExports.jsxs(a.Item,{ref:y,className:C("menu-item",{highlighted:j,selected:p,notification:l,danger:R,dev:g,disabled:E,power:u},h),...o,"aria-label":c.join(", "),children:[(q||u)&&e.jsxRuntimeExports.jsx(i.Icon,{icon:u?"bolt":q}),t&&e.jsxRuntimeExports.jsx(a.Img,{src:t,alt:`${r} icon`}),c.map((k,A)=>e.jsxRuntimeExports.jsx("span",{children:k},A)),n&&e.jsxRuntimeExports.jsx(i.ShortcutTag,{style:{minWidth:22,textAlign:"center"},align:"right",children:n}),w&&e.jsxRuntimeExports.jsx(i.Icon,{icon:"check",style:{marginLeft:"auto"}}),!!d.length&&e.jsxRuntimeExports.jsx(i.Icon,{icon:"arrow_right",className:"more"})]});return s?e.jsxRuntimeExports.jsx(P.Link,{to:s,target:o.target,children:x}):x});m.displayName="MenuItem";module.exports=m;
 //# sourceMappingURL=MenuItem.cjs.js.map

package/dist/shared/src/components/Menu/MenuItem.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs.js","sources":["../../../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { usePowerpack } from '@shared/context'\nimport { MenuItemType } from './Menu'\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label?: string | string[]\n  icon?: string\n  img?: string\n  highlighted?: boolean\n  notification?: boolean\n  selected?: boolean\n  danger?: boolean\n  items?: MenuItemType[]\n  isLink?: string\n  isDev?: boolean\n  shortcut?: string\n  disabled?: boolean\n  powerFeature?: string\n  active?: boolean\n  target?: string\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      label,\n      icon,\n      img,\n      highlighted,\n      notification,\n      selected,\n      danger,\n      items = [],\n      className,\n      isLink,\n      isDev,\n      shortcut,\n      disabled,\n      powerFeature,\n      active,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\n    const { powerLicense } = usePowerpack()\n    const isPowerFeature = !powerLicense && powerFeature\n\n    const Item = (\n      <Styled.Item\n        ref={ref}\n        className={clsx(\n          'menu-item',\n          {\n            highlighted: highlighted,\n            selected: selected,\n            notification: notification,\n            danger: danger,\n            dev: isDev,\n            disabled: disabled,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        aria-label={labelsArray.join(', ')}\n      >\n        {(icon || isPowerFeature) && <Icon icon={isPowerFeature ? 'bolt' : icon!} />}\n        {img && <Styled.Img src={img} alt={`${label} icon`} />}\n        {labelsArray.map((label, index) => (\n          <span key={index}>{label}</span>\n        ))}\n        {shortcut && (\n          <ShortcutTag style={{ minWidth: 22, textAlign: 'center' }} align={'right'}>\n            {shortcut}\n          </ShortcutTag>\n        )}\n        {active && <Icon icon=\"check\" style={{ marginLeft: 'auto' }} />}\n\n        {!!items.length && <Icon icon=\"arrow_right\" className=\"more\" />}\n      </Styled.Item>\n    )\n\n    if (isLink) {\n      return (\n        <Link to={isLink} target={props.target}>\n          {Item}\n        </Link>\n      )\n    } else {\n      return Item\n    }\n  },\n)\n\nMenuItem.displayName = 'MenuItem'\n\nexport default MenuItem\n"],"names":["MenuItem","forwardRef","label","icon","img","highlighted","notification","selected","danger","items","className","isLink","isDev","shortcut","disabled","powerFeature","active","props","ref","labelsArray","isArray","powerLicense","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":"olCA2BA,MAAMA,EAAWC,EAAAA,WACf,CACE,CACE,MAAAC,EACA,KAAAC,EACA,IAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,CAAA,EACR,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAcC,EAAAA,QAAQlB,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAC7C,CAAE,aAAAmB,CAAA,EAAiBC,eAAA,EACnBC,EAAiB,CAACF,GAAgBN,EAElCS,EACJC,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,IAAAR,EACA,UAAWS,EACT,YACA,CACE,YAAAtB,EACA,SAAAE,EACA,aAAAD,EACA,OAAAE,EACA,IAAKI,EACL,SAAAE,EACA,MAAOS,CAAA,EAETb,CAAA,EAED,GAAGO,EACJ,aAAYE,EAAY,KAAK,IAAI,EAE/B,SAAA,EAAAhB,GAAQoB,IAAmBK,EAAAA,kBAAAA,IAACC,EAAAA,KAAA,CAAK,KAAMN,EAAiB,OAASpB,EAAO,EACzEC,GAAOwB,EAAAA,kBAAAA,IAACE,MAAA,CAAW,IAAK1B,EAAK,IAAK,GAAGF,CAAK,QAAS,EACnDiB,EAAY,IAAI,CAACjB,EAAO6B,4BACtB,OAAA,CAAkB,SAAA7B,CAAAA,EAAR6B,CAAc,CAC1B,EACAlB,GACCe,EAAAA,kBAAAA,IAACI,EAAAA,YAAA,CAAY,MAAO,CAAE,SAAU,GAAI,UAAW,QAAA,EAAY,MAAO,QAC/D,SAAAnB,CAAA,CACH,EAEDG,2BAAWa,EAAAA,KAAA,CAAK,KAAK,QAAQ,MAAO,CAAE,WAAY,MAAA,EAAU,EAE5D,CAAC,CAACpB,EAAM,gCAAWoB,EAAAA,KAAA,CAAK,KAAK,cAAc,UAAU,MAAA,CAAO,CAAA,CAAA,CAAA,EAIjE,OAAIlB,0BAECsB,EAAAA,KAAA,CAAK,GAAItB,EAAQ,OAAQM,EAAM,OAC7B,SAAAO,EACH,EAGKA,CAEX,CACF,EAEAxB,EAAS,YAAc"}
+{"version":3,"file":"MenuItem.cjs.js","sources":["../../../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { usePowerpack } from '@shared/context'\nimport { MenuItemType } from './Menu'\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label?: string | string[]\n  icon?: string\n  img?: string\n  highlighted?: boolean\n  notification?: boolean\n  selected?: boolean\n  danger?: boolean\n  items?: MenuItemType[]\n  isLink?: string\n  isDev?: boolean\n  shortcut?: string\n  disabled?: boolean\n  powerFeature?: string\n  active?: boolean\n  target?: string\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      label,\n      icon,\n      img,\n      highlighted,\n      notification,\n      selected,\n      danger,\n      items = [],\n      className,\n      isLink,\n      isDev,\n      shortcut,\n      disabled,\n      powerFeature,\n      active,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\n    const { powerLicense } = usePowerpack()\n    const isPowerFeature = !powerLicense && powerFeature\n\n    const Item = (\n      <Styled.Item\n        ref={ref}\n        className={clsx(\n          'menu-item',\n          {\n            highlighted: highlighted,\n            selected: selected,\n            notification: notification,\n            danger: danger,\n            dev: isDev,\n            disabled: disabled,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        aria-label={labelsArray.join(', ')}\n      >\n        {(icon || isPowerFeature) && <Icon icon={isPowerFeature ? 'bolt' : icon!} />}\n        {img && <Styled.Img src={img} alt={`${label} icon`} />}\n        {labelsArray.map((label, index) => (\n          <span key={index}>{label}</span>\n        ))}\n        {shortcut && (\n          <ShortcutTag style={{ minWidth: 22, textAlign: 'center' }} align={'right'}>\n            {shortcut}\n          </ShortcutTag>\n        )}\n        {active && <Icon icon=\"check\" style={{ marginLeft: 'auto' }} />}\n\n        {!!items.length && <Icon icon=\"arrow_right\" className=\"more\" />}\n      </Styled.Item>\n    )\n\n    if (isLink) {\n      return (\n        <Link to={isLink} target={props.target}>\n          {Item}\n        </Link>\n      )\n    } else {\n      return Item\n    }\n  },\n)\n\nMenuItem.displayName = 'MenuItem'\n\nexport default MenuItem\n"],"names":["MenuItem","forwardRef","label","icon","img","highlighted","notification","selected","danger","items","className","isLink","isDev","shortcut","disabled","powerFeature","active","props","ref","labelsArray","isArray","powerLicense","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":"muMA2BA,MAAMA,EAAWC,EAAAA,WACf,CACE,CACE,MAAAC,EACA,KAAAC,EACA,IAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,CAAA,EACR,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAcC,EAAAA,QAAQlB,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAC7C,CAAE,aAAAmB,CAAA,EAAiBC,eAAA,EACnBC,EAAiB,CAACF,GAAgBN,EAElCS,EACJC,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,IAAAR,EACA,UAAWS,EACT,YACA,CACE,YAAAtB,EACA,SAAAE,EACA,aAAAD,EACA,OAAAE,EACA,IAAKI,EACL,SAAAE,EACA,MAAOS,CAAA,EAETb,CAAA,EAED,GAAGO,EACJ,aAAYE,EAAY,KAAK,IAAI,EAE/B,SAAA,EAAAhB,GAAQoB,IAAmBK,EAAAA,kBAAAA,IAACC,EAAAA,KAAA,CAAK,KAAMN,EAAiB,OAASpB,EAAO,EACzEC,GAAOwB,EAAAA,kBAAAA,IAACE,MAAA,CAAW,IAAK1B,EAAK,IAAK,GAAGF,CAAK,QAAS,EACnDiB,EAAY,IAAI,CAACjB,EAAO6B,4BACtB,OAAA,CAAkB,SAAA7B,CAAAA,EAAR6B,CAAc,CAC1B,EACAlB,GACCe,EAAAA,kBAAAA,IAACI,EAAAA,YAAA,CAAY,MAAO,CAAE,SAAU,GAAI,UAAW,QAAA,EAAY,MAAO,QAC/D,SAAAnB,CAAA,CACH,EAEDG,2BAAWa,EAAAA,KAAA,CAAK,KAAK,QAAQ,MAAO,CAAE,WAAY,MAAA,EAAU,EAE5D,CAAC,CAACpB,EAAM,gCAAWoB,EAAAA,KAAA,CAAK,KAAK,cAAc,UAAU,MAAA,CAAO,CAAA,CAAA,CAAA,EAIjE,OAAIlB,0BAECsB,EAAAA,KAAA,CAAK,GAAItB,EAAQ,OAAQM,EAAM,OAC7B,SAAAO,EACH,EAGKA,CAEX,CACF,EAEAxB,EAAS,YAAc"}

package/dist/shared/src/components/Menu/MenuItem.es.js

@@ -6,8 +6,111 @@ import { isArray as $ } from "lodash";
 import { Link as v } from "react-router-dom";
 import E from "clsx";
 import "../../context/RemoteModulesContext.es.js";
-import "../../context/DetailsPanelContext.es.js";
-import "../../context/SubtasksModulesContext.es.js";
+import { usePowerpack as F } from "../../context/PowerpackContext.es.js";
+import "../../context/UriContext.es.js";
+import "../../../../_virtual/runtime.es.js";
+import "../../../../_virtual/semver.es.js";
+import "../../api/base/client.es.js";
+import "../../api/generated/graphql.es.js";
+import "../../api/generated/graphqlLinks.es.js";
+import "../../api/generated/access.es.js";
+import "../../api/generated/actions.es.js";
+import "../../api/generated/activityFeed.es.js";
+import "../../api/generated/addons.es.js";
+import "../../api/generated/anatomy.es.js";
+import "../../api/generated/attributes.es.js";
+import "../../api/generated/authentication.es.js";
+import "../../api/generated/bundles.es.js";
+import "../../api/generated/configuration.es.js";
+import "../../api/generated/dataImport.es.js";
+import "../../api/generated/desktop.es.js";
+import "../../api/generated/entityLists.es.js";
+import "../../api/generated/events.es.js";
+import "../../api/generated/files.es.js";
+import "../../api/generated/folders.es.js";
+import "../../api/generated/inbox.es.js";
+import "../../api/generated/links.es.js";
+import "../../api/generated/market.es.js";
+import "../../api/generated/onboarding.es.js";
+import "../../api/generated/operations.es.js";
+import "../../api/generated/products.es.js";
+import "../../api/generated/projectDashboard.es.js";
+import "../../api/generated/projects.es.js";
+import "../../api/generated/projectFolders.es.js";
+import "../../api/generated/reviewables.es.js";
+import "../../api/generated/services.es.js";
+import "../../api/generated/system.es.js";
+import "../../api/generated/tasks.es.js";
+import "../../api/generated/teams.es.js";
+import "../../api/generated/thumbnails.es.js";
+import "../../api/generated/uRIs.es.js";
+import "../../api/generated/users.es.js";
+import "../../api/generated/versions.es.js";
+import "../../api/generated/workfiles.es.js";
+import "../../api/generated/ynputCloud.es.js";
+import "../../api/generated/grouping.es.js";
+import "../../api/generated/views.es.js";
+import "../../api/queries/actions/getActions.es.js";
+import "../../api/queries/activities/getActivities.es.js";
+import "../../api/queries/activities/updateActivities.es.js";
+import "../../api/queries/activities/updateReaction.es.js";
+import "../../api/queries/activities/getMentions.es.js";
+import "../../api/queries/activities/getCategories.es.js";
+import "../../api/queries/addons/getAddons.es.js";
+import "../../api/queries/addons/updateAddons.es.js";
+import "../../api/queries/attributes/getAttributes.es.js";
+import "../../api/queries/attributes/updateAttributes.es.js";
+import "../../api/queries/authentication/getAuthentication.es.js";
+import "../../api/queries/cloud/cloud.es.js";
+import "../../api/queries/config/getConfig.es.js";
+import "../../api/queries/config/updateConfig.es.js";
+import "../../api/queries/entities/getEntity.es.js";
+import "../../api/queries/entities/getEntityPanel.es.js";
+import "../../api/queries/overview/getOverview.es.js";
+import "../../api/queries/overview/updateOverview.es.js";
+import "../../api/queries/versions/getVersionsProducts.es.js";
+import "../../api/queries/links/getEntityLinks.es.js";
+import "../../api/queries/entities/updateEntity.es.js";
+import "../../api/queries/entityLists/getLists.es.js";
+import "../../api/queries/entityLists/updateLists.es.js";
+import "../../api/queries/entityLists/getListsAttributes.es.js";
+import "../../api/queries/entityLists/updateListsAttributes.es.js";
+import "../../api/queries/entityLists/listFolders.es.js";
+import "../../api/queries/folders/getFolders.es.js";
+import "../../api/queries/folders/getFolderDeleteInfo.es.js";
+import "../../api/queries/grouping/getGrouping.es.js";
+import "../../api/queries/links/updateLinks.es.js";
+import "../../api/queries/links/getLinks.es.js";
+import "../../api/queries/permissions/getPermissions.es.js";
+import "../../api/queries/products/createProduct.es.js";
+import "../../api/queries/products/getFolderProducts.es.js";
+import "../../api/queries/project/getProject.es.js";
+import "../../api/queries/project/updateProject.es.js";
+import "../../api/queries/projectFolders/projectFolders.es.js";
+import "../../api/queries/review/getReview.es.js";
+import "../../api/queries/review/updateReview.es.js";
+import "../../api/queries/share/share.es.js";
+import "../../api/queries/system/getSystem.es.js";
+import "../../api/queries/tasks/getTasks.es.js";
+import "../../api/queries/tasks/updateTasks.es.js";
+import "../../api/queries/teams/getTeams.es.js";
+import "../../api/queries/userDashboard/getUserDashboard.es.js";
+import "../../api/queries/users/getUsers.es.js";
+import "../../api/queries/users/updateUsers.es.js";
+import "../../api/queries/users/guests.es.js";
+import "../../api/queries/versions/updateVersions.es.js";
+import "../../api/queries/views/getViews.es.js";
+import "../../api/queries/views/updateViews.es.js";
+import "../../api/queries/watchers/getWatchers.es.js";
+import "../../api/queries/uris/getUris.es.js";
+import "react-toastify";
+import "react-redux";
+import "custom-protocol-check";
+import "../../containers/ProjectTreeTable/components/GroupSettingsFallback.es.js";
+import "uuid";
+import "../../util/pubsub.es.js";
+import "../../context/DetailsPanelContextInstance.es.js";
+import "../../context/SubtasksModulesContextInstance.es.js";
 import "../../context/ThumbnailUploaderContext.es.js";
 import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
@@ -15,26 +118,24 @@ import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
 import "../../context/AddonProjectContext.es.js";
 import "../../context/AddonContext.es.js";
-import { usePowerpack as F } from "../../context/PowerpackContext.es.js";
 import "../../context/MoveEntityContext.es.js";
 import "../../context/MenuContext.es.js";
 import "../../context/WebsocketContext.es.js";
 import "../../context/GlobalContext.es.js";
 import "../../context/ProjectContext.es.js";
 import "../../context/ProjectFoldersContext.es.js";
-import "../../context/UriContext.es.js";
 const S = M(
   ({
     label: t,
     icon: i,
-    img: e,
+    img: p,
     highlighted: l,
     notification: f,
     selected: x,
     danger: j,
     items: u = [],
     className: d,
-    isLink: p,
+    isLink: e,
     isDev: g,
     shortcut: s,
     disabled: h,
@@ -63,7 +164,7 @@ const S = M(
         "aria-label": a.join(", "),
         children: [
           (i || o) && /* @__PURE__ */ r.jsx(m, { icon: o ? "bolt" : i }),
-          e && /* @__PURE__ */ r.jsx(R, { src: e, alt: `${t} icon` }),
+          p && /* @__PURE__ */ r.jsx(R, { src: p, alt: `${t} icon` }),
           a.map((N, k) => /* @__PURE__ */ r.jsx("span", { children: N }, k)),
           s && /* @__PURE__ */ r.jsx(L, { style: { minWidth: 22, textAlign: "center" }, align: "right", children: s }),
           I && /* @__PURE__ */ r.jsx(m, { icon: "check", style: { marginLeft: "auto" } }),
@@ -71,7 +172,7 @@ const S = M(
         ]
       }
     );
-    return p ? /* @__PURE__ */ r.jsx(v, { to: p, target: n.target, children: c }) : c;
+    return e ? /* @__PURE__ */ r.jsx(v, { to: e, target: n.target, children: c }) : c;
   }
 );
 S.displayName = "MenuItem";

package/dist/shared/src/components/Menu/MenuItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.es.js","sources":["../../../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { usePowerpack } from '@shared/context'\nimport { MenuItemType } from './Menu'\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label?: string | string[]\n  icon?: string\n  img?: string\n  highlighted?: boolean\n  notification?: boolean\n  selected?: boolean\n  danger?: boolean\n  items?: MenuItemType[]\n  isLink?: string\n  isDev?: boolean\n  shortcut?: string\n  disabled?: boolean\n  powerFeature?: string\n  active?: boolean\n  target?: string\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      label,\n      icon,\n      img,\n      highlighted,\n      notification,\n      selected,\n      danger,\n      items = [],\n      className,\n      isLink,\n      isDev,\n      shortcut,\n      disabled,\n      powerFeature,\n      active,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\n    const { powerLicense } = usePowerpack()\n    const isPowerFeature = !powerLicense && powerFeature\n\n    const Item = (\n      <Styled.Item\n        ref={ref}\n        className={clsx(\n          'menu-item',\n          {\n            highlighted: highlighted,\n            selected: selected,\n            notification: notification,\n            danger: danger,\n            dev: isDev,\n            disabled: disabled,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        aria-label={labelsArray.join(', ')}\n      >\n        {(icon || isPowerFeature) && <Icon icon={isPowerFeature ? 'bolt' : icon!} />}\n        {img && <Styled.Img src={img} alt={`${label} icon`} />}\n        {labelsArray.map((label, index) => (\n          <span key={index}>{label}</span>\n        ))}\n        {shortcut && (\n          <ShortcutTag style={{ minWidth: 22, textAlign: 'center' }} align={'right'}>\n            {shortcut}\n          </ShortcutTag>\n        )}\n        {active && <Icon icon=\"check\" style={{ marginLeft: 'auto' }} />}\n\n        {!!items.length && <Icon icon=\"arrow_right\" className=\"more\" />}\n      </Styled.Item>\n    )\n\n    if (isLink) {\n      return (\n        <Link to={isLink} target={props.target}>\n          {Item}\n        </Link>\n      )\n    } else {\n      return Item\n    }\n  },\n)\n\nMenuItem.displayName = 'MenuItem'\n\nexport default MenuItem\n"],"names":["MenuItem","forwardRef","label","icon","img","highlighted","notification","selected","danger","items","className","isLink","isDev","shortcut","disabled","powerFeature","active","props","ref","labelsArray","isArray","powerLicense","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,IAAWC;AAAA,EACf,CACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,KAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ,CAAA;AAAA,IACR,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAcC,EAAQlB,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAC7C,EAAE,cAAAmB,EAAA,IAAiBC,EAAA,GACnBC,IAAiB,CAACF,KAAgBN,GAElCS,IACJC,gBAAAA,EAAAA;AAAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,WAAWS;AAAA,UACT;AAAA,UACA;AAAA,YACE,aAAAtB;AAAA,YACA,UAAAE;AAAA,YACA,cAAAD;AAAA,YACA,QAAAE;AAAA,YACA,KAAKI;AAAA,YACL,UAAAE;AAAA,YACA,OAAOS;AAAA,UAAA;AAAA,UAETb;AAAA,QAAA;AAAA,QAED,GAAGO;AAAA,QACJ,cAAYE,EAAY,KAAK,IAAI;AAAA,QAE/B,UAAA;AAAA,WAAAhB,KAAQoB,MAAmBK,gBAAAA,EAAAA,IAACC,GAAA,EAAK,MAAMN,IAAiB,SAASpB,GAAO;AAAA,UACzEC,KAAOwB,gBAAAA,EAAAA,IAACE,GAAA,EAAW,KAAK1B,GAAK,KAAK,GAAGF,CAAK,SAAS;AAAA,UACnDiB,EAAY,IAAI,CAACjB,GAAO6B,4BACtB,QAAA,EAAkB,UAAA7B,EAAAA,GAAR6B,CAAc,CAC1B;AAAA,UACAlB,KACCe,gBAAAA,EAAAA,IAACI,GAAA,EAAY,OAAO,EAAE,UAAU,IAAI,WAAW,SAAA,GAAY,OAAO,SAC/D,UAAAnB,EAAA,CACH;AAAA,UAEDG,2BAAWa,GAAA,EAAK,MAAK,SAAQ,OAAO,EAAE,YAAY,OAAA,GAAU;AAAA,UAE5D,CAAC,CAACpB,EAAM,gCAAWoB,GAAA,EAAK,MAAK,eAAc,WAAU,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIjE,WAAIlB,0BAECsB,GAAA,EAAK,IAAItB,GAAQ,QAAQM,EAAM,QAC7B,UAAAO,GACH,IAGKA;AAAAA,EAEX;AACF;AAEAxB,EAAS,cAAc;"}
+{"version":3,"file":"MenuItem.es.js","sources":["../../../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { usePowerpack } from '@shared/context'\nimport { MenuItemType } from './Menu'\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label?: string | string[]\n  icon?: string\n  img?: string\n  highlighted?: boolean\n  notification?: boolean\n  selected?: boolean\n  danger?: boolean\n  items?: MenuItemType[]\n  isLink?: string\n  isDev?: boolean\n  shortcut?: string\n  disabled?: boolean\n  powerFeature?: string\n  active?: boolean\n  target?: string\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      label,\n      icon,\n      img,\n      highlighted,\n      notification,\n      selected,\n      danger,\n      items = [],\n      className,\n      isLink,\n      isDev,\n      shortcut,\n      disabled,\n      powerFeature,\n      active,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\n    const { powerLicense } = usePowerpack()\n    const isPowerFeature = !powerLicense && powerFeature\n\n    const Item = (\n      <Styled.Item\n        ref={ref}\n        className={clsx(\n          'menu-item',\n          {\n            highlighted: highlighted,\n            selected: selected,\n            notification: notification,\n            danger: danger,\n            dev: isDev,\n            disabled: disabled,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        aria-label={labelsArray.join(', ')}\n      >\n        {(icon || isPowerFeature) && <Icon icon={isPowerFeature ? 'bolt' : icon!} />}\n        {img && <Styled.Img src={img} alt={`${label} icon`} />}\n        {labelsArray.map((label, index) => (\n          <span key={index}>{label}</span>\n        ))}\n        {shortcut && (\n          <ShortcutTag style={{ minWidth: 22, textAlign: 'center' }} align={'right'}>\n            {shortcut}\n          </ShortcutTag>\n        )}\n        {active && <Icon icon=\"check\" style={{ marginLeft: 'auto' }} />}\n\n        {!!items.length && <Icon icon=\"arrow_right\" className=\"more\" />}\n      </Styled.Item>\n    )\n\n    if (isLink) {\n      return (\n        <Link to={isLink} target={props.target}>\n          {Item}\n        </Link>\n      )\n    } else {\n      return Item\n    }\n  },\n)\n\nMenuItem.displayName = 'MenuItem'\n\nexport default MenuItem\n"],"names":["MenuItem","forwardRef","label","icon","img","highlighted","notification","selected","danger","items","className","isLink","isDev","shortcut","disabled","powerFeature","active","props","ref","labelsArray","isArray","powerLicense","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,IAAWC;AAAA,EACf,CACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,KAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ,CAAA;AAAA,IACR,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAcC,EAAQlB,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAC7C,EAAE,cAAAmB,EAAA,IAAiBC,EAAA,GACnBC,IAAiB,CAACF,KAAgBN,GAElCS,IACJC,gBAAAA,EAAAA;AAAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,WAAWS;AAAA,UACT;AAAA,UACA;AAAA,YACE,aAAAtB;AAAA,YACA,UAAAE;AAAA,YACA,cAAAD;AAAA,YACA,QAAAE;AAAA,YACA,KAAKI;AAAA,YACL,UAAAE;AAAA,YACA,OAAOS;AAAA,UAAA;AAAA,UAETb;AAAA,QAAA;AAAA,QAED,GAAGO;AAAA,QACJ,cAAYE,EAAY,KAAK,IAAI;AAAA,QAE/B,UAAA;AAAA,WAAAhB,KAAQoB,MAAmBK,gBAAAA,EAAAA,IAACC,GAAA,EAAK,MAAMN,IAAiB,SAASpB,GAAO;AAAA,UACzEC,KAAOwB,gBAAAA,EAAAA,IAACE,GAAA,EAAW,KAAK1B,GAAK,KAAK,GAAGF,CAAK,SAAS;AAAA,UACnDiB,EAAY,IAAI,CAACjB,GAAO6B,4BACtB,QAAA,EAAkB,UAAA7B,EAAAA,GAAR6B,CAAc,CAC1B;AAAA,UACAlB,KACCe,gBAAAA,EAAAA,IAACI,GAAA,EAAY,OAAO,EAAE,UAAU,IAAI,WAAW,SAAA,GAAY,OAAO,SAC/D,UAAAnB,EAAA,CACH;AAAA,UAEDG,2BAAWa,GAAA,EAAK,MAAK,SAAQ,OAAO,EAAE,YAAY,OAAA,GAAU;AAAA,UAE5D,CAAC,CAACpB,EAAM,gCAAWoB,GAAA,EAAK,MAAK,eAAc,WAAU,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIjE,WAAIlB,0BAECsB,GAAA,EAAK,IAAItB,GAAQ,QAAQM,EAAM,QAC7B,UAAAO,GACH,IAGKA;AAAAA,EAEX;AACF;AAEAxB,EAAS,cAAc;"}

package/dist/shared/src/components/Menu/MenuList.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../../../_virtual/jsx-runtime.cjs.js"),q=require("react"),O=require("./MenuItem.cjs.js"),W=require("@ynput/ayon-react-components"),L=require("./Menu.styled.cjs.js");require("../../context/RemoteModulesContext.cjs.js");require("../../context/DetailsPanelContext.cjs.js");require("../../context/SubtasksModulesContext.cjs.js");require("../../context/ThumbnailUploaderContext.cjs.js");require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");const z=require("../../context/PowerpackContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");require("../../context/WebsocketContext.cjs.js");require("../../context/GlobalContext.cjs.js");require("../../context/ProjectContext.cjs.js");require("../../context/ProjectFoldersContext.cjs.js");require("../../context/UriContext.cjs.js");const G=({items:k,handleClick:g,onSubMenu:m,subMenu:n,level:v,id:w="root-menu",parentRef:x,style:a,onClose:E,onMenuClose:P,itemClassName:C,itemStyle:b,setPowerpackDialog:M,...S})=>{const f=q.useRef({}),s=q.useRef(null),c=(r,o,p)=>{!f.current[o]||!s.current||m?.(r,{id:o,style:{top:f.current[o].offsetTop+(a?.top||0)-4,left:s.current.getBoundingClientRect().width+(a?.left||0)-12},items:p,level:v})},D=r=>{n&&m?.(r,{id:"parent",items:[]})};return q.useEffect(()=>{n&&s.current&&s.current.querySelectorAll("li, button")[0]?.focus()},[n]),u.jsxRuntimeExports.jsx(L.MenuWrapper,{style:{paddingLeft:n?16:0,...a},className:n?"sub-menu":"menu-list",id:w,onMouseLeave:D,...S,ref:s,children:u.jsxRuntimeExports.jsx(L.Menu,{children:k.filter(r=>!r.hidden).map((r,o)=>{if(r.node)return r.node;if(r?.id==="divider"||r?.separator)return u.jsxRuntimeExports.jsx("hr",{},o);const{label:p,icon:$,img:F,highlighted:I,onClick:h,link:d,items:t=[],id:i,disableClose:N,selected:T,disabled:A,powerFeature:l,active:K,...y}=r,{powerLicense:_}=z.usePowerpack(),R=!_&&l,j=e=>{e.preventDefault(),e.stopPropagation(),l&&M?.(l),P?.()};return u.jsxRuntimeExports.jsx(O,{tabIndex:0,label:p,icon:$,img:F,highlighted:I,items:t,selected:T,disabled:A,powerFeature:l,active:K,isLink:d,onClick:e=>R?j(e):t.length?c(e,i,t):g(e,h,d,N),onKeyDown:e=>{e.key==="Enter"&&(R?j(e):t.length?c(e,i,t):g(e,h,d));const B=!e.target.nextSibling;e.key==="Tab"&&B&&!e.shiftKey&&(e.preventDefault(),e.stopPropagation(),s.current?.querySelectorAll("li, button")[0]?.focus()),e.key==="Escape"&&n&&x&&(e.preventDefault(),e.stopPropagation(),x.focus(),E?.(i))},style:{paddingRight:t.length?"0":"16px",...b},ref:e=>f.current[i]=e,onMouseEnter:e=>c(e,i,t),onMouseLeave:e=>c(e,i,[]),className:`${C} ${y.className||""}`,...y,children:!!t.length&&u.jsxRuntimeExports.jsx(W.Icon,{icon:"arrow_right",style:{marginLeft:"auto"}})},`${i}-${o}`)})})})};exports.MenuList=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../../../../_virtual/jsx-runtime.cjs.js"),I=require("react"),ne=require("./MenuItem.cjs.js"),ue=require("@ynput/ayon-react-components"),O=require("./Menu.styled.cjs.js");require("../../context/RemoteModulesContext.cjs.js");const oe=require("../../context/PowerpackContext.cjs.js");require("../../context/UriContext.cjs.js");require("../../../../_virtual/runtime.cjs.js");require("../../../../_virtual/semver.cjs.js");require("../../api/base/client.cjs.js");require("../../api/generated/graphql.cjs.js");require("../../api/generated/graphqlLinks.cjs.js");require("../../api/generated/access.cjs.js");require("../../api/generated/actions.cjs.js");require("../../api/generated/activityFeed.cjs.js");require("../../api/generated/addons.cjs.js");require("../../api/generated/anatomy.cjs.js");require("../../api/generated/attributes.cjs.js");require("../../api/generated/authentication.cjs.js");require("../../api/generated/bundles.cjs.js");require("../../api/generated/configuration.cjs.js");require("../../api/generated/dataImport.cjs.js");require("../../api/generated/desktop.cjs.js");require("../../api/generated/entityLists.cjs.js");require("../../api/generated/events.cjs.js");require("../../api/generated/files.cjs.js");require("../../api/generated/folders.cjs.js");require("../../api/generated/inbox.cjs.js");require("../../api/generated/links.cjs.js");require("../../api/generated/market.cjs.js");require("../../api/generated/onboarding.cjs.js");require("../../api/generated/operations.cjs.js");require("../../api/generated/products.cjs.js");require("../../api/generated/projectDashboard.cjs.js");require("../../api/generated/projects.cjs.js");require("../../api/generated/projectFolders.cjs.js");require("../../api/generated/reviewables.cjs.js");require("../../api/generated/services.cjs.js");require("../../api/generated/system.cjs.js");require("../../api/generated/tasks.cjs.js");require("../../api/generated/teams.cjs.js");require("../../api/generated/thumbnails.cjs.js");require("../../api/generated/uRIs.cjs.js");require("../../api/generated/users.cjs.js");require("../../api/generated/versions.cjs.js");require("../../api/generated/workfiles.cjs.js");require("../../api/generated/ynputCloud.cjs.js");require("../../api/generated/grouping.cjs.js");require("../../api/generated/views.cjs.js");require("../../api/queries/actions/getActions.cjs.js");require("../../api/queries/activities/getActivities.cjs.js");require("../../api/queries/activities/updateActivities.cjs.js");require("../../api/queries/activities/updateReaction.cjs.js");require("../../api/queries/activities/getMentions.cjs.js");require("../../api/queries/activities/getCategories.cjs.js");require("../../api/queries/addons/getAddons.cjs.js");require("../../api/queries/addons/updateAddons.cjs.js");require("../../api/queries/attributes/getAttributes.cjs.js");require("../../api/queries/attributes/updateAttributes.cjs.js");require("../../api/queries/authentication/getAuthentication.cjs.js");require("../../api/queries/cloud/cloud.cjs.js");require("../../api/queries/config/getConfig.cjs.js");require("../../api/queries/config/updateConfig.cjs.js");require("../../api/queries/entities/getEntity.cjs.js");require("../../api/queries/entities/getEntityPanel.cjs.js");require("../../api/queries/overview/getOverview.cjs.js");require("../../api/queries/overview/updateOverview.cjs.js");require("../../api/queries/versions/getVersionsProducts.cjs.js");require("../../api/queries/links/getEntityLinks.cjs.js");require("../../api/queries/entities/updateEntity.cjs.js");require("../../api/queries/entityLists/getLists.cjs.js");require("../../api/queries/entityLists/updateLists.cjs.js");require("../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../api/queries/entityLists/listFolders.cjs.js");require("../../api/queries/folders/getFolders.cjs.js");require("../../api/queries/folders/getFolderDeleteInfo.cjs.js");require("../../api/queries/grouping/getGrouping.cjs.js");require("../../api/queries/links/updateLinks.cjs.js");require("../../api/queries/links/getLinks.cjs.js");require("../../api/queries/permissions/getPermissions.cjs.js");require("../../api/queries/products/createProduct.cjs.js");require("../../api/queries/products/getFolderProducts.cjs.js");require("../../api/queries/project/getProject.cjs.js");require("../../api/queries/project/updateProject.cjs.js");require("../../api/queries/projectFolders/projectFolders.cjs.js");require("../../api/queries/review/getReview.cjs.js");require("../../api/queries/review/updateReview.cjs.js");require("../../api/queries/share/share.cjs.js");require("../../api/queries/system/getSystem.cjs.js");require("../../api/queries/tasks/getTasks.cjs.js");require("../../api/queries/tasks/updateTasks.cjs.js");require("../../api/queries/teams/getTeams.cjs.js");require("../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../api/queries/users/getUsers.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../api/queries/users/guests.cjs.js");require("../../api/queries/versions/updateVersions.cjs.js");require("../../api/queries/views/getViews.cjs.js");require("../../api/queries/views/updateViews.cjs.js");require("../../api/queries/watchers/getWatchers.cjs.js");require("../../api/queries/uris/getUris.cjs.js");require("lodash");require("react-toastify");require("react-redux");require("custom-protocol-check");require("../../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");require("../../context/DetailsPanelContextInstance.cjs.js");require("../../context/SubtasksModulesContextInstance.cjs.js");require("../../context/ThumbnailUploaderContext.cjs.js");require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");require("../../context/WebsocketContext.cjs.js");require("../../context/GlobalContext.cjs.js");require("../../context/ProjectContext.cjs.js");require("../../context/ProjectFoldersContext.cjs.js");const se=({items:V,handleClick:W,onSubMenu:H,onSubMenuLayout:T,subMenu:a,level:A,id:y="root-menu",parentRef:M,style:l,placement:k,onClose:K,onMenuClose:_,itemClassName:Y,itemStyle:z,setPowerpackDialog:G,...J})=>{const D=I.useRef({}),E=I.useRef(null),S=(r,p,d)=>{const g=D.current[p],h=E.current;if(!g||!h)return;const m=(h.offsetParent??document.body).getBoundingClientRect(),f=g.getBoundingClientRect(),t=(h.querySelector("menu")??h).getBoundingClientRect(),P=window.innerWidth,v=window.innerHeight,i=8,o=Math.max(240,t.width),L=Math.min(d.length*36+16,480),w=4,n=()=>Math.max(i,t.left-o-w),R=()=>t.right+w,x=R()+o<=P-i,e=n()>=i;let s,c;k==="left"&&e?(s="left",c=n()):x?(s="right",c=R()):e?(s="left",c=n()):(s="left",c=Math.max(i,P-o-i));let q=f.top-8;q+L>v-i&&(q=Math.max(i,v-L-i));const j=s==="left"?c-16:c;H?.(r,{id:p,style:{top:q-m.top,left:j-m.left},items:d,level:A,placement:s,parentEl:g})},Q=r=>{a&&H?.(r,{id:"parent",items:[]})};return I.useEffect(()=>{a&&E.current&&E.current.querySelectorAll("li, button")[0]?.focus()},[a]),I.useLayoutEffect(()=>{if(!a||!E.current||!M||!T||!y)return;const r=E.current,p=M,d=p.closest(".menu-list, .sub-menu");if(!d)return;const g=r.querySelector("menu")??r,h=d.querySelector("menu")??d,m=(r.offsetParent??document.body).getBoundingClientRect(),f=r.getBoundingClientRect(),u=g.getBoundingClientRect(),t=h.getBoundingClientRect(),P=p.getBoundingClientRect(),v=u.left-f.left,i=u.width,o=u.height,L=window.innerWidth,w=window.innerHeight,n=8,R=4,x=()=>Math.max(n,t.left-i-R),e=()=>t.right+R,s=e()+i<=L-n,c=x()>=n;let b,q;k==="left"&&c?(b="left",q=x()):s?(b="right",q=e()):c?(b="left",q=x()):(b="left",q=Math.max(n,L-i-n));const j=g.querySelector(":scope > li")?.getBoundingClientRect(),X=P.top,Z=j?j.top:f.top+8,ee=X-Z;let F=f.top+ee;F+o>w-n&&(F=Math.max(n,w-o-n));const re=b==="left"?q-v:q,$=F-m.top,N=re-m.left,te=typeof l?.top=="number"?l.top:parseFloat(String(l?.top)),ie=typeof l?.left=="number"?l.left:parseFloat(String(l?.left));(Math.abs($-te)>1||Math.abs(N-ie)>1)&&T(y,{top:$,left:N},b)},[a,V,M,y,k,l?.top,l?.left,T]),C.jsxRuntimeExports.jsx(O.MenuWrapper,{style:{paddingLeft:a?16:0,...l},className:a?"sub-menu":"menu-list",id:y,onMouseLeave:Q,...J,ref:E,children:C.jsxRuntimeExports.jsx(O.Menu,{children:V.filter(r=>!r.hidden).map((r,p)=>{if(r.node)return r.node;if(r?.id==="divider"||r?.separator)return C.jsxRuntimeExports.jsx("hr",{},p);const{label:d,icon:g,img:h,highlighted:B,onClick:m,link:f,items:u=[],id:t,disableClose:P,selected:v,disabled:i,powerFeature:o,active:L,...w}=r,{powerLicense:n}=oe.usePowerpack(),R=!n&&o,x=e=>{e.preventDefault(),e.stopPropagation(),o&&G?.(o),_?.()};return C.jsxRuntimeExports.jsx(ne,{tabIndex:0,label:d,icon:g,img:h,highlighted:B,items:u,selected:v,disabled:i,powerFeature:o,active:L,isLink:f,onClick:e=>R?x(e):u.length?S(e,t,u):W(e,m,f,P),onKeyDown:e=>{e.key==="Enter"&&(R?x(e):u.length?S(e,t,u):W(e,m,f));const s=!e.target.nextSibling;e.key==="Tab"&&s&&!e.shiftKey&&(e.preventDefault(),e.stopPropagation(),E.current?.querySelectorAll("li, button")[0]?.focus()),e.key==="Escape"&&a&&M&&(e.preventDefault(),e.stopPropagation(),M.focus(),K?.(t))},style:{paddingRight:u.length?"0":"16px",...z},ref:e=>D.current[t]=e,onMouseEnter:e=>S(e,t,u),onMouseLeave:e=>S(e,t,[]),className:`${Y} ${w.className||""}`,...w,children:!!u.length&&C.jsxRuntimeExports.jsx(ue.Icon,{icon:"arrow_right",style:{marginLeft:"auto"}})},`${t}-${p}`)})})})};exports.MenuList=se;
 //# sourceMappingURL=MenuList.cjs.js.map

package/dist/shared/src/components/Menu/MenuList.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.cjs.js","sources":["../../../../../src/components/Menu/MenuList.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport MenuItem from './MenuItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './Menu.styled'\nimport { PowerpackFeature, usePowerpack } from '@shared/context'\nimport type { MenuItemType } from './Menu'\n\ninterface MenuListProps {\n  items: MenuItemType[]\n  handleClick: (\n    e: React.MouseEvent,\n    onClick?: (e: React.MouseEvent) => void,\n    url?: string,\n    disableClose?: boolean,\n  ) => void\n  onSubMenu?: (e: React.MouseEvent, menu: any) => void\n  subMenu?: boolean\n  level: number\n  id?: string\n  parentRef?: HTMLElement | null\n  style?: React.CSSProperties\n  onClose?: (id?: string) => void\n  onMenuClose?: () => void\n  itemClassName?: string\n  itemStyle?: React.CSSProperties\n  setPowerpackDialog?: (feature: PowerpackFeature) => void\n  [key: string]: any\n}\n\nexport const MenuList: React.FC<MenuListProps> = ({\n  items,\n  handleClick,\n  onSubMenu,\n  subMenu,\n  level,\n  id = 'root-menu',\n  parentRef,\n  style,\n  onClose,\n  onMenuClose,\n  itemClassName,\n  itemStyle,\n  setPowerpackDialog,\n  ...props\n}) => {\n  const itemRefs = useRef<{ [key: string]: HTMLElement | null }>({})\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const handleSubMenu = (e: React.MouseEvent, id: string, items: MenuItemType[]) => {\n    if (!itemRefs.current[id] || !menuRef.current) return\n    onSubMenu?.(e, {\n      id,\n      style: {\n        top: itemRefs.current[id]!.offsetTop + ((style?.top as number) || 0) - 4,\n        left: menuRef.current.getBoundingClientRect().width + ((style?.left as number) || 0) - 12,\n      },\n      items,\n      level: level,\n    })\n  }\n\n  const handleMouseLeave = (e: React.MouseEvent) => {\n    if (subMenu) {\n      onSubMenu?.(e, { id: 'parent', items: [] })\n    }\n  }\n\n  //   when a subMenu open, set focus on the first item\n  useEffect(() => {\n    if (subMenu && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n      first?.focus()\n    }\n  }, [subMenu])\n\n  return (\n    <Styled.MenuWrapper\n      style={{ paddingLeft: subMenu ? 16 : 0, ...style }}\n      className={subMenu ? 'sub-menu' : 'menu-list'}\n      id={id}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n      ref={menuRef}\n    >\n      <Styled.Menu>\n        {items\n          .filter((item) => !item.hidden)\n          .map((item, i) => {\n            // if item is a node, return it\n            if (item.node) {\n              return item.node\n            }\n\n            if (item?.id === 'divider' || item?.separator ) return <hr key={i} />\n\n            const {\n              label,\n              icon,\n              img,\n              highlighted,\n              onClick,\n              link,\n              items = [],\n              id,\n              disableClose,\n              selected,\n              disabled,\n              powerFeature,\n              active,\n              ...props\n            } = item\n\n            const { powerLicense } = usePowerpack()\n            const isPowerFeature = !powerLicense && powerFeature\n\n            const handleClickPowerFeature = (e: React.MouseEvent) => {\n              e.preventDefault()\n              e.stopPropagation()\n              if (powerFeature) {\n                setPowerpackDialog?.(powerFeature)\n              }\n\n              // close the menu\n              onMenuClose?.()\n            }\n\n            return (\n              <MenuItem\n                tabIndex={0}\n                key={`${id}-${i}`}\n                {...{\n                  label,\n                  icon,\n                  img,\n                  highlighted,\n                  items,\n                  selected,\n                  disabled,\n                  powerFeature,\n                  active,\n                }}\n                isLink={link}\n                onClick={(e) =>\n                  isPowerFeature\n                    ? handleClickPowerFeature(e)\n                    : items.length\n                    ? handleSubMenu(e, id, items)\n                    : handleClick(e, onClick, link, disableClose)\n                }\n                onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {\n                  if (e.key === 'Enter') {\n                    if (isPowerFeature) {\n                      handleClickPowerFeature(e as any)\n                    } else if (items.length) {\n                      handleSubMenu(e as any, id, items)\n                    } else {\n                      handleClick(e as any, onClick, link)\n                    }\n                  }\n                  const isLastChild = !(e.target as HTMLElement).nextSibling\n                  if (e.key === 'Tab' && isLastChild && !e.shiftKey) {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    //   when at bottom of list, tab goes to top\n                    const first = menuRef.current?.querySelectorAll('li, button')[0] as HTMLElement\n                    first?.focus()\n                  }\n                  //   when a submenu is open, esc closes it and sets focus on the parent\n                  if (e.key === 'Escape' && subMenu && parentRef) {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    parentRef.focus()\n                    onClose?.(id)\n                  }\n                }}\n                style={{ paddingRight: items.length ? '0' : '16px', ...itemStyle }}\n                ref={(e) => (itemRefs.current[id] = e)}\n                onMouseEnter={(e) => handleSubMenu(e, id, items)}\n                onMouseLeave={(e) => handleSubMenu(e, id, [])}\n                className={`${itemClassName} ${props.className || ''}`}\n                {...props}\n              >\n                {!!items.length && <Icon icon=\"arrow_right\" style={{ marginLeft: 'auto' }} />}\n              </MenuItem>\n            )\n          })}\n      </Styled.Menu>\n    </Styled.MenuWrapper>\n  )\n}\n"],"names":["MenuList","items","handleClick","onSubMenu","subMenu","level","id","parentRef","style","onClose","onMenuClose","itemClassName","itemStyle","setPowerpackDialog","props","itemRefs","useRef","menuRef","handleSubMenu","e","handleMouseLeave","useEffect","jsx","Styled.MenuWrapper","Styled.Menu","item","i","label","icon","img","highlighted","onClick","link","disableClose","selected","disabled","powerFeature","active","powerLicense","usePowerpack","isPowerFeature","handleClickPowerFeature","MenuItem","isLastChild","Icon"],"mappings":"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"}
+{"version":3,"file":"MenuList.cjs.js","sources":["../../../../../src/components/Menu/MenuList.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react'\nimport MenuItem from './MenuItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './Menu.styled'\nimport { PowerpackFeature, usePowerpack } from '@shared/context'\nimport type { MenuItemType } from './Menu'\n\ninterface MenuListProps {\n  items: MenuItemType[]\n  handleClick: (\n    e: React.MouseEvent,\n    onClick?: (e: React.MouseEvent) => void,\n    url?: string,\n    disableClose?: boolean,\n  ) => void\n  onSubMenu?: (e: React.MouseEvent, menu: any) => void\n  /** Called by a sub-menu after it mounts, with its real measured style. Lets the parent\n   *  refit using actual width/height instead of the open-time estimate. */\n  onSubMenuLayout?: (id: string, style: React.CSSProperties, placement: 'left' | 'right') => void\n  subMenu?: boolean\n  level: number\n  id?: string\n  parentRef?: HTMLElement | null\n  style?: React.CSSProperties\n  /** Placement of THIS menu relative to its parent. Inherited by descendants so once\n   *  a chain flips to one side it stays there. */\n  placement?: 'left' | 'right'\n  onClose?: (id?: string) => void\n  onMenuClose?: () => void\n  itemClassName?: string\n  itemStyle?: React.CSSProperties\n  setPowerpackDialog?: (feature: PowerpackFeature) => void\n  [key: string]: any\n}\n\nexport const MenuList: React.FC<MenuListProps> = ({\n  items,\n  handleClick,\n  onSubMenu,\n  onSubMenuLayout,\n  subMenu,\n  level,\n  id = 'root-menu',\n  parentRef,\n  style,\n  placement,\n  onClose,\n  onMenuClose,\n  itemClassName,\n  itemStyle,\n  setPowerpackDialog,\n  ...props\n}) => {\n  const itemRefs = useRef<{ [key: string]: HTMLElement | null }>({})\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const handleSubMenu = (e: React.MouseEvent, id: string, items: MenuItemType[]) => {\n    const itemEl = itemRefs.current[id]\n    const parentMenuEl = menuRef.current\n    if (!itemEl || !parentMenuEl) return\n\n    // Sub-menus render absolute inside DialogContent. Compute viewport-anchored coords\n    // from this item's bounding rect, then translate into the offsetParent's coord space.\n    // Each level computes independently — no inherited offsets that drift across depth.\n    const offsetParent = (parentMenuEl.offsetParent as HTMLElement | null) ?? document.body\n    const offsetParentRect = offsetParent.getBoundingClientRect()\n    const itemRect = itemEl.getBoundingClientRect()\n    // Use the visible inner <menu> element if present — the wrapper has 16px paddingLeft\n    // for sub-menus which would otherwise produce a phantom gap on flip-left chains.\n    const parentVisibleEl = (parentMenuEl.querySelector('menu') as HTMLElement | null) ?? parentMenuEl\n    const parentVisibleRect = parentVisibleEl.getBoundingClientRect()\n\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n    const padding = 8\n    // Use the parent's visible width as the initial estimate — sub-menus tend to be\n    // similar size or smaller. Falls back to 240 if parent is unusually narrow.\n    const estimatedWidth = Math.max(240, parentVisibleRect.width)\n    const estimatedHeight = Math.min(items.length * 36 + 16, 480)\n\n    // Choose horizontal placement. If an ancestor sub-menu has already flipped to the\n    // left, every descendant sub-menu also goes left — DetailsPanel scenarios put the\n    // root menu near the right edge of the screen, so flipping flip-flop on each level\n    // would push deep menus back into the panel content.\n    const gap = 4\n    const computeLeftSide = () => Math.max(padding, parentVisibleRect.left - estimatedWidth - gap)\n    const computeRightSide = () => parentVisibleRect.right + gap\n    const fitsRight = computeRightSide() + estimatedWidth <= viewportWidth - padding\n    const fitsLeft = computeLeftSide() >= padding\n\n    let nextPlacement: 'left' | 'right'\n    let viewportLeft: number\n    if (placement === 'left' && fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else if (fitsRight) {\n      nextPlacement = 'right'\n      viewportLeft = computeRightSide()\n    } else if (fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else {\n      // Neither side fits cleanly — clamp to viewport, prefer left.\n      nextPlacement = 'left'\n      viewportLeft = Math.max(padding, viewportWidth - estimatedWidth - padding)\n    }\n\n    // Align first sub-menu item with the hovered parent item. The visible <menu> has\n    // 8px top padding, so the wrapper top sits 8px above the item top.\n    const innerTopOffset = 8\n    let viewportTop = itemRect.top - innerTopOffset\n    if (viewportTop + estimatedHeight > viewportHeight - padding) {\n      viewportTop = Math.max(padding, viewportHeight - estimatedHeight - padding)\n    }\n\n    // Sub-menu wrappers carry 16px paddingLeft (so their wrapper rect is wider than\n    // the visible menu). When we anchor on the LEFT side, the visible menu sits 16px\n    // inside the wrapper — pull the wrapper left so the visible right edge lines up\n    // with parentVisibleRect.left.\n    const subMenuPaddingLeft = 16\n    const wrapperLeft = nextPlacement === 'left' ? viewportLeft - subMenuPaddingLeft : viewportLeft\n\n    onSubMenu?.(e, {\n      id,\n      style: {\n        top: viewportTop - offsetParentRect.top,\n        left: wrapperLeft - offsetParentRect.left,\n      },\n      items,\n      level: level,\n      placement: nextPlacement,\n      // Pass the actual menu-item element so sub-menu measurement uses the <li>\n      // instead of whatever inner span the mouse event bubbled from.\n      parentEl: itemEl,\n    })\n  }\n\n  const handleMouseLeave = (e: React.MouseEvent) => {\n    if (subMenu) {\n      onSubMenu?.(e, { id: 'parent', items: [] })\n    }\n  }\n\n  //   when a subMenu open, set focus on the first item\n  useEffect(() => {\n    if (subMenu && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n      first?.focus()\n    }\n  }, [subMenu])\n\n  // Sub-menus open with an estimated width — once mounted, measure for real and refit.\n  // Reuses the same flip/clamp rules as handleSubMenu but with the actual rendered size.\n  useLayoutEffect(() => {\n    if (!subMenu || !menuRef.current || !parentRef || !onSubMenuLayout || !id) return\n    const wrapperEl = menuRef.current\n    const parentItemEl = parentRef\n    const parentMenuEl = parentItemEl.closest('.menu-list, .sub-menu') as HTMLElement | null\n    if (!parentMenuEl) return\n    // Measure visible boxes (the inner <menu> tag), not wrappers. Sub-menu wrappers\n    // carry 16px paddingLeft which inflates the rect on the left side and would\n    // otherwise produce phantom gaps when flipping left.\n    const ownVisibleEl = (wrapperEl.querySelector('menu') as HTMLElement | null) ?? wrapperEl\n    const parentVisibleEl = (parentMenuEl.querySelector('menu') as HTMLElement | null) ?? parentMenuEl\n\n    const offsetParent = (wrapperEl.offsetParent as HTMLElement | null) ?? document.body\n    const offsetParentRect = offsetParent.getBoundingClientRect()\n    const wrapperRect = wrapperEl.getBoundingClientRect()\n    const ownVisibleRect = ownVisibleEl.getBoundingClientRect()\n    const parentVisibleRect = parentVisibleEl.getBoundingClientRect()\n    const parentItemRect = parentItemEl.getBoundingClientRect()\n\n    // Some wrappers have 16px left padding (sub-menus). Track it so we can place the\n    // wrapper such that the visible-menu edge — not the wrapper edge — lines up.\n    const subMenuPaddingLeft = ownVisibleRect.left - wrapperRect.left\n    const visibleWidth = ownVisibleRect.width\n    const visibleHeight = ownVisibleRect.height\n\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n    const padding = 8\n\n    const gap = 4\n    const computeLeftSide = () => Math.max(padding, parentVisibleRect.left - visibleWidth - gap)\n    const computeRightSide = () => parentVisibleRect.right + gap\n    const fitsRight = computeRightSide() + visibleWidth <= viewportWidth - padding\n    const fitsLeft = computeLeftSide() >= padding\n\n    let nextPlacement: 'left' | 'right'\n    let viewportLeft: number\n    if (placement === 'left' && fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else if (fitsRight) {\n      nextPlacement = 'right'\n      viewportLeft = computeRightSide()\n    } else if (fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else {\n      nextPlacement = 'left'\n      viewportLeft = Math.max(padding, viewportWidth - visibleWidth - padding)\n    }\n\n    // Align this sub-menu's first <li> with the hovered parent item.\n    // Direct DOM measurement is more robust than computed-style math across nested\n    // levels — picks up any box-sizing / margin quirks that pure padding values miss.\n    const firstItemEl = ownVisibleEl.querySelector(':scope > li') as HTMLElement | null\n    const firstItemRect = firstItemEl?.getBoundingClientRect()\n    // Move the wrapper by exactly the delta between where the first <li> currently is\n    // and where we want it (parent item's top). Avoids any cascading offset arithmetic.\n    const desiredFirstItemTop = parentItemRect.top\n    const currentFirstItemTop = firstItemRect ? firstItemRect.top : wrapperRect.top + 8\n    const deltaY = desiredFirstItemTop - currentFirstItemTop\n    let viewportTop = wrapperRect.top + deltaY\n    if (viewportTop + visibleHeight > viewportHeight - padding) {\n      viewportTop = Math.max(padding, viewportHeight - visibleHeight - padding)\n    }\n\n    // Wrapper origin: visible target minus the wrapper's left padding when on the left.\n    const wrapperLeft =\n      nextPlacement === 'left' ? viewportLeft - subMenuPaddingLeft : viewportLeft\n\n    const targetTop = viewportTop - offsetParentRect.top\n    const targetLeft = wrapperLeft - offsetParentRect.left\n    const currentTop = typeof style?.top === 'number' ? style.top : parseFloat(String(style?.top))\n    const currentLeft =\n      typeof style?.left === 'number' ? style.left : parseFloat(String(style?.left))\n\n    // Idempotent guard: only emit a layout update when the target differs by >1px\n    // from what's already applied. This makes the effect safe to re-run on every\n    // dependency change — including `style`, which we update from inside this effect.\n    // After a successful update, the new style flows back as props, the effect runs\n    // once more, current ≈ target, and the guard is a no-op. No infinite loop.\n    if (Math.abs(targetTop - currentTop) > 1 || Math.abs(targetLeft - currentLeft) > 1) {\n      onSubMenuLayout(id, { top: targetTop, left: targetLeft }, nextPlacement)\n    }\n  }, [subMenu, items, parentRef, id, placement, style?.top, style?.left, onSubMenuLayout])\n\n  return (\n    <Styled.MenuWrapper\n      style={{ paddingLeft: subMenu ? 16 : 0, ...style }}\n      className={subMenu ? 'sub-menu' : 'menu-list'}\n      id={id}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n      ref={menuRef}\n    >\n      <Styled.Menu>\n        {items\n          .filter((item) => !item.hidden)\n          .map((item, i) => {\n            // if item is a node, return it\n            if (item.node) {\n              return item.node\n            }\n\n            if (item?.id === 'divider' || item?.separator ) return <hr key={i} />\n\n            const {\n              label,\n              icon,\n              img,\n              highlighted,\n              onClick,\n              link,\n              items = [],\n              id,\n              disableClose,\n              selected,\n              disabled,\n              powerFeature,\n              active,\n              ...props\n            } = item\n\n            const { powerLicense } = usePowerpack()\n            const isPowerFeature = !powerLicense && powerFeature\n\n            const handleClickPowerFeature = (e: React.MouseEvent) => {\n              e.preventDefault()\n              e.stopPropagation()\n              if (powerFeature) {\n                setPowerpackDialog?.(powerFeature)\n              }\n\n              // close the menu\n              onMenuClose?.()\n            }\n\n            return (\n              <MenuItem\n                tabIndex={0}\n                key={`${id}-${i}`}\n                {...{\n                  label,\n                  icon,\n                  img,\n                  highlighted,\n                  items,\n                  selected,\n                  disabled,\n                  powerFeature,\n                  active,\n                }}\n                isLink={link}\n                onClick={(e) =>\n                  isPowerFeature\n                    ? handleClickPowerFeature(e)\n                    : items.length\n                    ? handleSubMenu(e, id, items)\n                    : handleClick(e, onClick, link, disableClose)\n                }\n                onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {\n                  if (e.key === 'Enter') {\n                    if (isPowerFeature) {\n                      handleClickPowerFeature(e as any)\n                    } else if (items.length) {\n                      handleSubMenu(e as any, id, items)\n                    } else {\n                      handleClick(e as any, onClick, link)\n                    }\n                  }\n                  const isLastChild = !(e.target as HTMLElement).nextSibling\n                  if (e.key === 'Tab' && isLastChild && !e.shiftKey) {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    //   when at bottom of list, tab goes to top\n                    const first = menuRef.current?.querySelectorAll('li, button')[0] as HTMLElement\n                    first?.focus()\n                  }\n                  //   when a submenu is open, esc closes it and sets focus on the parent\n                  if (e.key === 'Escape' && subMenu && parentRef) {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    parentRef.focus()\n                    onClose?.(id)\n                  }\n                }}\n                style={{ paddingRight: items.length ? '0' : '16px', ...itemStyle }}\n                ref={(e) => (itemRefs.current[id] = e)}\n                onMouseEnter={(e) => handleSubMenu(e, id, items)}\n                onMouseLeave={(e) => handleSubMenu(e, id, [])}\n                className={`${itemClassName} ${props.className || ''}`}\n                {...props}\n              >\n                {!!items.length && <Icon icon=\"arrow_right\" style={{ marginLeft: 'auto' }} />}\n              </MenuItem>\n            )\n          })}\n      </Styled.Menu>\n    </Styled.MenuWrapper>\n  )\n}\n"],"names":["MenuList","items","handleClick","onSubMenu","onSubMenuLayout","subMenu","level","id","parentRef","style","placement","onClose","onMenuClose","itemClassName","itemStyle","setPowerpackDialog","props","itemRefs","useRef","menuRef","handleSubMenu","e","itemEl","parentMenuEl","offsetParentRect","itemRect","parentVisibleRect","viewportWidth","viewportHeight","padding","estimatedWidth","estimatedHeight","gap","computeLeftSide","computeRightSide","fitsRight","fitsLeft","nextPlacement","viewportLeft","viewportTop","wrapperLeft","handleMouseLeave","useEffect","useLayoutEffect","wrapperEl","parentItemEl","ownVisibleEl","parentVisibleEl","wrapperRect","ownVisibleRect","parentItemRect","subMenuPaddingLeft","visibleWidth","visibleHeight","firstItemRect","desiredFirstItemTop","currentFirstItemTop","deltaY","targetTop","targetLeft","currentTop","currentLeft","jsx","Styled.MenuWrapper","Styled.Menu","item","i","label","icon","img","highlighted","onClick","link","disableClose","selected","disabled","powerFeature","active","powerLicense","usePowerpack","isPowerFeature","handleClickPowerFeature","MenuItem","isLastChild","Icon"],"mappings":"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"}