@ynput/ayon-frontend-shared 0.2.28 → 0.2.30

package/dist/src/components/Menu/MenuComponents/Menu.es.js

@@ -1,55 +1,79 @@
-import { j as n } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as b } from "react";
-import { Section as j, Footer as S } from "./Menu.styled.es.js";
-import M from "./MenuList.es.js";
+import { j as i } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState as S } from "react";
+import { Section as h, Footer as y } from "./Menu.styled.es.js";
+import g from "./MenuList.es.js";
 import "lodash";
 import "react-toastify";
-import { copyToClipboard as h } from "../../../../shared/src/util/copyToClipboard.es.js";
+import { copyToClipboard as C } from "../../../../shared/src/util/copyToClipboard.es.js";
 import "uuid";
 import "../../../../shared/src/util/pubsub.es.js";
-import { Button as y } from "@ynput/ayon-react-components";
-const B = ({ menu: x = [], onClose: l, header: p, footer: s = "" }) => {
-  const [r, o] = b([]), f = (t, e, i, a) => {
-    if (i) return l();
-    e && e(t), !a && l && l();
-  }, u = (t, e = {}) => {
-    e.items.length ? r.find((i) => i.id === e.id) || o([
-      ...r.filter((i) => i.level < e.level + 1),
-      { ...e, id: e.id, level: e.level + 1, parentRef: t.target }
-    ]) : o(r.filter((i) => i.level <= e.level));
-  }, g = (t, e = {}) => {
-    var m, v;
-    const i = (m = t.relatedTarget) == null ? void 0 : m.id, a = r.find((d) => d.id === i);
-    if (((v = t.relatedTarget) == null ? void 0 : v.tagName) === "DIALOG") return o([]);
-    a || o(r.filter((d) => d.level <= (e.level || 0) + 1));
+import { Button as T } from "@ynput/ayon-react-components";
+import "../../../../shared/src/context/RemoteModulesContext.es.js";
+import "../../../../shared/src/context/DetailsPanelContext.es.js";
+import "../../../../shared/src/context/ThumbnailUploaderContext.es.js";
+import "../../../../shared/src/context/SettingsPanelContext.es.js";
+import "../../../../shared/src/context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../../../shared/src/context/pip/PiPWrapper.es.js";
+import "../../../../shared/src/context/AddonProjectContext.es.js";
+import "../../../../shared/src/context/AddonContext.es.js";
+import { usePowerpack as k } from "../../../../shared/src/context/PowerpackContext.es.js";
+import "../../../../shared/src/context/MoveEntityContext.es.js";
+import { useMenuContext as w } from "../../../../shared/src/context/MenuContext.es.js";
+const X = ({ menu: b = [], onClose: s, header: a, footer: l = "" }) => {
+  const { setPowerpackDialog: u } = k(), { setMenuOpen: f } = w(), [r, n] = S([]), d = (t, e, o, p) => {
+    if (o) return s();
+    e && e(t), !p && s && s();
   }, c = (t, e = {}) => {
-    t.type === "mouseenter" || t.type === "keydown" ? u(t, e) : t.type === "mouseleave" && g(t, e);
+    e.items.length ? r.find((o) => o.id === e.id) || n([
+      ...r.filter((o) => o.level < e.level + 1),
+      { ...e, id: e.id, level: e.level + 1, parentRef: t.target }
+    ]) : n(r.filter((o) => o.level <= e.level));
+  }, j = (t, e = {}) => {
+    var v, x;
+    const o = (v = t.relatedTarget) == null ? void 0 : v.id, p = r.find((m) => m.id === o);
+    if (((x = t.relatedTarget) == null ? void 0 : x.tagName) === "DIALOG") return n([]);
+    p || n(r.filter((m) => m.level <= (e.level || 0) + 1));
+  }, M = (t, e = {}) => {
+    t.type === "mouseenter" || t.type === "keydown" ? c(t, e) : t.type === "mouseleave" && j(t, e);
   };
-  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    /* @__PURE__ */ n.jsxs(j, { children: [
-      p && p,
-      /* @__PURE__ */ n.jsx(M, { items: x, handleClick: f, onSubMenu: c, level: 0 }),
-      s && /* @__PURE__ */ n.jsxs(S, { children: [
-        s,
-        /* @__PURE__ */ n.jsx(y, { icon: "content_copy", variant: "text", onClick: () => h(s) })
+  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    /* @__PURE__ */ i.jsxs(h, { children: [
+      a && a,
+      /* @__PURE__ */ i.jsx(
+        g,
+        {
+          items: b,
+          handleClick: d,
+          onSubMenu: M,
+          level: 0,
+          setPowerpackDialog: u,
+          onMenuClose: () => f(!1)
+        }
+      ),
+      l && /* @__PURE__ */ i.jsxs(y, { children: [
+        l,
+        /* @__PURE__ */ i.jsx(T, { icon: "content_copy", variant: "text", onClick: () => C(l) })
       ] })
     ] }),
-    r.map((t, e) => /* @__PURE__ */ n.jsx(
-      M,
+    r.map((t, e) => /* @__PURE__ */ i.jsx(
+      g,
       {
         items: t.items,
-        handleClick: f,
+        handleClick: d,
         ...t,
         subMenu: !0,
-        onSubMenu: c,
-        onClose: () => o(r.filter((i) => i.id !== t.id)),
-        onChange: u
+        onSubMenu: M,
+        onClose: () => n(r.filter((o) => o.id !== t.id)),
+        onMenuClose: () => f(!1),
+        onChange: c,
+        setPowerpackDialog: u
       },
       e
     ))
   ] });
 };
 export {
-  B as default
+  X as default
 };
 //# sourceMappingURL=Menu.es.js.map

package/dist/src/components/Menu/MenuComponents/Menu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.es.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport * as Styled from './Menu.styled'\nimport MenuList from './MenuList'\nimport { copyToClipboard } from '@shared/util'\nimport { Button } from '@ynput/ayon-react-components'\n\nconst Menu = ({ menu = [], onClose, header, footer = '' }) => {\n  const [subMenus, setSubMenus] = useState([])\n  //   When a menu item is clicked, the following happens:\n  const handleClick = (e, onClick, url, disableClose) => {\n    // this is handled by Link component inside the MenuItem\n    if (url) return onClose()\n\n    onClick && onClick(e)\n\n    !disableClose && onClose && onClose()\n  }\n\n  const onMenuEnter = (e, menu = {}) => {\n    // check to see if we need to open a submenu\n    if (menu.items.length) {\n      // yes, there is a submenu\n      // open it if it is not already open\n      if (!subMenus.find((m) => m.id === menu.id)) {\n        // also close any other submenus on the same level\n        setSubMenus([\n          ...subMenus.filter((m) => m.level < menu.level + 1),\n          { ...menu, id: menu.id, level: menu.level + 1, parentRef: e.target },\n        ])\n      }\n    } else {\n      // no items for this menu, so close all submenus on the higher levels\n      setSubMenus(subMenus.filter((m) => m.level <= menu.level))\n    }\n  }\n\n  const onMenuLeave = (e, menu = {}) => {\n    // target where we are going\n    const relatedTargetId = e.relatedTarget?.id\n    const relatedTargetSubMenu = subMenus.find((m) => m.id === relatedTargetId)\n\n    if (e.relatedTarget?.tagName === 'DIALOG') return setSubMenus([])\n\n    if (!relatedTargetSubMenu) {\n      setSubMenus(subMenus.filter((m) => m.level <= (menu.level || 0) + 1))\n    }\n    //   if (menu.items.length) {\n  }\n\n  const handleSubMenu = (e, menu = {}) => {\n    if (e.type === 'mouseenter' || e.type === 'keydown') onMenuEnter(e, menu)\n    else if (e.type === 'mouseleave') onMenuLeave(e, menu)\n  }\n\n  return (\n    <>\n      <Styled.Section>\n        {header && header}\n        <MenuList items={menu} handleClick={handleClick} onSubMenu={handleSubMenu} level={0} />\n        {footer && (\n          <Styled.Footer>\n            {footer}\n            <Button icon=\"content_copy\" variant=\"text\" onClick={() => copyToClipboard(footer)} />\n          </Styled.Footer>\n        )}\n      </Styled.Section>\n      {subMenus.map((menu, i) => (\n        <MenuList\n          key={i}\n          items={menu.items}\n          handleClick={handleClick}\n          {...menu}\n          subMenu\n          onSubMenu={handleSubMenu}\n          onClose={() => setSubMenus(subMenus.filter((m) => m.id !== menu.id))}\n          onChange={onMenuEnter}\n        />\n      ))}\n    </>\n  )\n}\n\nexport default Menu\n"],"names":["Menu","menu","onClose","header","footer","subMenus","setSubMenus","useState","handleClick","e","onClick","url","disableClose","onMenuEnter","m","onMenuLeave","relatedTargetId","_a","relatedTargetSubMenu","_b","handleSubMenu","jsxs","Fragment","Styled.Section","jsx","MenuList","Styled.Footer","Button","copyToClipboard","i"],"mappings":";;;;;;;;;;AAMM,MAAAA,IAAO,CAAC,EAAE,MAAAC,IAAO,IAAI,SAAAC,GAAS,QAAAC,GAAQ,QAAAC,IAAS,SAAS;AAC5D,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAA,CAAE,GAErCC,IAAc,CAACC,GAAGC,GAASC,GAAKC,MAAiB;AAEjD,QAAAD,UAAYT,EAAQ;AAExB,IAAAQ,KAAWA,EAAQD,CAAC,GAEnB,CAAAG,KAAgBV,KAAWA,EAAQ;AAAA,EACtC,GAEMW,IAAc,CAACJ,GAAGR,IAAO,CAAA,MAAO;AAEhCA,IAAAA,EAAK,MAAM,SAGRI,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAOb,EAAK,EAAE,KAE5BK,EAAA;AAAA,MACV,GAAGD,EAAS,OAAO,CAACS,MAAMA,EAAE,QAAQb,EAAK,QAAQ,CAAC;AAAA,MAClD,EAAE,GAAGA,GAAM,IAAIA,EAAK,IAAI,OAAOA,EAAK,QAAQ,GAAG,WAAWQ,EAAE,OAAO;AAAA,IAAA,CACpE,IAISH,EAAAD,EAAS,OAAO,CAACS,MAAMA,EAAE,SAASb,EAAK,KAAK,CAAC;AAAA,EAE7D,GAEMc,IAAc,CAACN,GAAGR,IAAO,CAAA,MAAO;;AAE9B,UAAAe,KAAkBC,IAAAR,EAAE,kBAAF,gBAAAQ,EAAiB,IACnCC,IAAuBb,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAOE,CAAe;AAE1E,UAAIG,IAAAV,EAAE,kBAAF,gBAAAU,EAAiB,aAAY,SAAiB,QAAAb,EAAY,EAAE;AAEhE,IAAKY,KACSZ,EAAAD,EAAS,OAAO,CAACS,MAAMA,EAAE,UAAUb,EAAK,SAAS,KAAK,CAAC,CAAC;AAAA,EAGxE,GAEMmB,IAAgB,CAACX,GAAGR,IAAO,CAAA,MAAO;AAClC,IAAAQ,EAAE,SAAS,gBAAgBA,EAAE,SAAS,YAAWI,EAAYJ,GAAGR,CAAI,IAC/DQ,EAAE,SAAS,gBAAcM,EAAYN,GAAGR,CAAI;AAAA,EACvD;AAEA,SAEIoB,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAACD,gBAAAA,OAAAE,GAAA,EACE,UAAA;AAAA,MAAUpB,KAAAA;AAAA,MACXqB,gBAAAA,MAACC,KAAS,OAAOxB,GAAM,aAAAO,GAA0B,WAAWY,GAAe,OAAO,GAAG;AAAA,MACpFhB,KACCiB,gBAAAA,EAAA,KAACK,GAAA,EACE,UAAA;AAAA,QAAAtB;AAAA,QACDoB,gBAAAA,EAAAA,IAACG,GAAO,EAAA,MAAK,gBAAe,SAAQ,QAAO,SAAS,MAAMC,EAAgBxB,CAAM,EAAG,CAAA;AAAA,MAAA,EACrF,CAAA;AAAA,IAAA,GAEJ;AAAA,IACCC,EAAS,IAAI,CAACJ,GAAM4B,MACnBL,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,OAAOxB,EAAK;AAAA,QACZ,aAAAO;AAAA,QACC,GAAGP;AAAAA,QACJ,SAAO;AAAA,QACP,WAAWmB;AAAA,QACX,SAAS,MAAMd,EAAYD,EAAS,OAAO,CAACS,MAAMA,EAAE,OAAOb,EAAK,EAAE,CAAC;AAAA,QACnE,UAAUY;AAAA,MAAA;AAAA,MAPLgB;AAAA,IASR,CAAA;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"Menu.es.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport * as Styled from './Menu.styled'\nimport MenuList from './MenuList'\nimport { copyToClipboard } from '@shared/util'\nimport { Button } from '@ynput/ayon-react-components'\nimport { useMenuContext, usePowerpack } from '@shared/context'\n\nconst Menu = ({ menu = [], onClose, header, footer = '' }) => {\n  const { setPowerpackDialog } = usePowerpack()\n  const { setMenuOpen } = useMenuContext()\n\n  const [subMenus, setSubMenus] = useState([])\n  //   When a menu item is clicked, the following happens:\n  const handleClick = (e, onClick, url, disableClose) => {\n    // this is handled by Link component inside the MenuItem\n    if (url) return onClose()\n\n    onClick && onClick(e)\n\n    !disableClose && onClose && onClose()\n  }\n\n  const onMenuEnter = (e, menu = {}) => {\n    // check to see if we need to open a submenu\n    if (menu.items.length) {\n      // yes, there is a submenu\n      // open it if it is not already open\n      if (!subMenus.find((m) => m.id === menu.id)) {\n        // also close any other submenus on the same level\n        setSubMenus([\n          ...subMenus.filter((m) => m.level < menu.level + 1),\n          { ...menu, id: menu.id, level: menu.level + 1, parentRef: e.target },\n        ])\n      }\n    } else {\n      // no items for this menu, so close all submenus on the higher levels\n      setSubMenus(subMenus.filter((m) => m.level <= menu.level))\n    }\n  }\n\n  const onMenuLeave = (e, menu = {}) => {\n    // target where we are going\n    const relatedTargetId = e.relatedTarget?.id\n    const relatedTargetSubMenu = subMenus.find((m) => m.id === relatedTargetId)\n\n    if (e.relatedTarget?.tagName === 'DIALOG') return setSubMenus([])\n\n    if (!relatedTargetSubMenu) {\n      setSubMenus(subMenus.filter((m) => m.level <= (menu.level || 0) + 1))\n    }\n    //   if (menu.items.length) {\n  }\n\n  const handleSubMenu = (e, menu = {}) => {\n    if (e.type === 'mouseenter' || e.type === 'keydown') onMenuEnter(e, menu)\n    else if (e.type === 'mouseleave') onMenuLeave(e, menu)\n  }\n\n  return (\n    <>\n      <Styled.Section>\n        {header && header}\n        <MenuList\n          items={menu}\n          handleClick={handleClick}\n          onSubMenu={handleSubMenu}\n          level={0}\n          setPowerpackDialog={setPowerpackDialog}\n          onMenuClose={() => setMenuOpen(false)}\n        />\n        {footer && (\n          <Styled.Footer>\n            {footer}\n            <Button icon=\"content_copy\" variant=\"text\" onClick={() => copyToClipboard(footer)} />\n          </Styled.Footer>\n        )}\n      </Styled.Section>\n      {subMenus.map((menu, i) => (\n        <MenuList\n          key={i}\n          items={menu.items}\n          handleClick={handleClick}\n          {...menu}\n          subMenu\n          onSubMenu={handleSubMenu}\n          onClose={() => setSubMenus(subMenus.filter((m) => m.id !== menu.id))}\n          onMenuClose={() => setMenuOpen(false)}\n          onChange={onMenuEnter}\n          setPowerpackDialog={setPowerpackDialog}\n        />\n      ))}\n    </>\n  )\n}\n\nexport default Menu\n"],"names":["Menu","menu","onClose","header","footer","setPowerpackDialog","usePowerpack","setMenuOpen","useMenuContext","subMenus","setSubMenus","useState","handleClick","e","onClick","url","disableClose","onMenuEnter","m","onMenuLeave","relatedTargetId","_a","relatedTargetSubMenu","_b","handleSubMenu","jsxs","Fragment","Styled.Section","jsx","MenuList","Styled.Footer","Button","copyToClipboard","i"],"mappings":"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"}

package/dist/src/components/Menu/MenuComponents/Menu.styled.cjs.js

@@ -208,6 +208,19 @@
     }
   }
 
+  &.power {
+    &,
+    .icon {
+      color: var(--md-sys-color-tertiary);
+    }
+    [icon='bolt'] {
+      font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+    }
+    .shortcut {
+      color: var(--md-sys-color-on-surface);
+    }
+  }
+
   &.disabled {
     user-select: none;
     pointer-events: none;

package/dist/src/components/Menu/MenuComponents/Menu.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.styled.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.styled.js"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\n// DIALOG (CONTAINER)\nexport const Dialog = styled.dialog`\n  position: fixed;\n  margin: 0;\n  inset: 0;\n  top: 42px;\n  width: auto;\n  height: auto;\n  z-index: 1000;\n  border: none;\n  background-color: unset;\n  padding: 0;\n\n  user-select: none;\n\n  overflow: auto;\n  /* remove scroll bar */\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  padding-bottom: 60px;\n`\n\nconst DialogOpenAnimation = keyframes`\n    from {\n        scale: 0.95;\n        opacity: 0.6;\n    }\n    to {\n        scale: 1;\n        opacity: 1;\n    }\n`\n\nexport const DialogContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n\n  /* position */\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: fit-content;\n  z-index: 30;\n\n  /* animate */\n  animation: ${DialogOpenAnimation} 0.03s ease-in forwards;\n\n  /* transform origin based on alignment */\n  &.right {\n    transform-origin: top right;\n  }\n  &.left {\n    transform-origin: top left;\n  }\n\n  /* add shadow to each item */\n  & > *:not(.sub-menu),\n  .sub-menu menu {\n    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);\n  }\n\n  /* theme support */\n  &.dark {\n    color: var(--md-sys-color-on-surface, #fff);\n    /* override children backgrounds if needed */\n    & > * {\n      color: var(--md-sys-color-on-surface, #fff) !important;\n    }\n  }\n`\n\n// MENULIST\nexport const Section = styled.section`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  padding: 0px;\n  border-radius: 8px;\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n  color: var(--md-sys-color-on-surface);\n  z-index: 10;\n  overflow: hidden;\n`\nexport const MenuWrapper = styled.div`\n  position: relative;\n  border-radius: 8px;\n\n  /* sub menu */\n  &.sub-menu {\n    position: absolute;\n    bottom: 0;\n\n    border-radius: 8px;\n    width: max-content;\n    z-index: 30;\n\n    & > * {\n      border-radius: 8px;\n      overflow: hidden;\n    }\n  }\n`\n\nexport const Menu = styled.menu`\n  /* reset defaults */\n  display: flex;\n  list-style-type: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0;\n\n  /* custom */\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 8px;\n\n  /* shrink the padding when compact */\n  &.compact {\n    padding: 4px;\n    gap: var(--base-gap-small);\n  }\n\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n\n  /* divider */\n  hr {\n    margin: 0;\n    width: 100%;\n    border-style: solid;\n    opacity: 0.5;\n    border-color: var(--md-sys-color-surface-container-highest);\n  }\n`\n\nexport const Item = styled.li`\n  display: flex;\n  padding: 6px 16px 6px 12px;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--base-gap-large);\n  align-self: stretch;\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n\n  span {\n    display: inline-block;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest);\n  }\n\n  .more {\n    margin-left: auto;\n  }\n\n  /* highlighted item */\n  &.highlighted {\n    background-color: var(--md-sys-color-secondary-container);\n    &:hover {\n      background-color: var(--md-sys-color-secondary-container-hover);\n    }\n  }\n\n  /* selected item */\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    color: var(--md-sys-color-on-primary-container);\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n  }\n\n  &.notification::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translate(25%, -25%);\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-error);\n  }\n\n  &.danger {\n    &,\n    .icon {\n      color: var(--md-sys-color-error);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-error-container);\n      }\n    }\n  }\n\n  &.dev {\n    &,\n    .icon {\n      color: var(--color-hl-developer);\n    }\n\n    &:hover {\n      background-color: var(--color-hl-developer-container-hover);\n    }\n  }\n\n  &.disabled {\n    user-select: none;\n    pointer-events: none;\n    &,\n    .icon {\n      color: var(--md-sys-color-outline);\n    }\n    background-color: unset;\n  }\n`\n\nexport const Img = styled.img`\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n`\n\nexport const Footer = styled.footer`\n  position: relative;\n  display: flex;\n  padding: 8px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  user-select: text;\n\n  button {\n    display: none;\n\n    position: absolute;\n    right: 2px;\n    border-radius: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n  }\n\n  /* hover show button */\n  &:hover {\n    button {\n      display: flex;\n    }\n  }\n`\n"],"names":["Dialog","styled","DialogOpenAnimation","keyframes","DialogContent","Section","MenuWrapper","Menu","Item","Img","Footer"],"mappings":"qHAGaA,EAASC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBvBC,EAAsBC,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWxBC,EAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAarBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BrBG,EAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAajBK,EAAcL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBrBM,EAAON,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCdO,EAAOP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2FdQ,EAAMR,EAAO;AAAA;AAAA;AAAA;AAAA,EAMbS,EAAST,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"Menu.styled.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.styled.js"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\n// DIALOG (CONTAINER)\nexport const Dialog = styled.dialog`\n  position: fixed;\n  margin: 0;\n  inset: 0;\n  top: 42px;\n  width: auto;\n  height: auto;\n  z-index: 1000;\n  border: none;\n  background-color: unset;\n  padding: 0;\n\n  user-select: none;\n\n  overflow: auto;\n  /* remove scroll bar */\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  padding-bottom: 60px;\n`\n\nconst DialogOpenAnimation = keyframes`\n    from {\n        scale: 0.95;\n        opacity: 0.6;\n    }\n    to {\n        scale: 1;\n        opacity: 1;\n    }\n`\n\nexport const DialogContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n\n  /* position */\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: fit-content;\n  z-index: 30;\n\n  /* animate */\n  animation: ${DialogOpenAnimation} 0.03s ease-in forwards;\n\n  /* transform origin based on alignment */\n  &.right {\n    transform-origin: top right;\n  }\n  &.left {\n    transform-origin: top left;\n  }\n\n  /* add shadow to each item */\n  & > *:not(.sub-menu),\n  .sub-menu menu {\n    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);\n  }\n\n  /* theme support */\n  &.dark {\n    color: var(--md-sys-color-on-surface, #fff);\n    /* override children backgrounds if needed */\n    & > * {\n      color: var(--md-sys-color-on-surface, #fff) !important;\n    }\n  }\n`\n\n// MENULIST\nexport const Section = styled.section`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  padding: 0px;\n  border-radius: 8px;\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n  color: var(--md-sys-color-on-surface);\n  z-index: 10;\n  overflow: hidden;\n`\nexport const MenuWrapper = styled.div`\n  position: relative;\n  border-radius: 8px;\n\n  /* sub menu */\n  &.sub-menu {\n    position: absolute;\n    bottom: 0;\n\n    border-radius: 8px;\n    width: max-content;\n    z-index: 30;\n\n    & > * {\n      border-radius: 8px;\n      overflow: hidden;\n    }\n  }\n`\n\nexport const Menu = styled.menu`\n  /* reset defaults */\n  display: flex;\n  list-style-type: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0;\n\n  /* custom */\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 8px;\n\n  /* shrink the padding when compact */\n  &.compact {\n    padding: 4px;\n    gap: var(--base-gap-small);\n  }\n\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n\n  /* divider */\n  hr {\n    margin: 0;\n    width: 100%;\n    border-style: solid;\n    opacity: 0.5;\n    border-color: var(--md-sys-color-surface-container-highest);\n  }\n`\n\nexport const Item = styled.li`\n  display: flex;\n  padding: 6px 16px 6px 12px;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--base-gap-large);\n  align-self: stretch;\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n\n  span {\n    display: inline-block;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest);\n  }\n\n  .more {\n    margin-left: auto;\n  }\n\n  /* highlighted item */\n  &.highlighted {\n    background-color: var(--md-sys-color-secondary-container);\n    &:hover {\n      background-color: var(--md-sys-color-secondary-container-hover);\n    }\n  }\n\n  /* selected item */\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    color: var(--md-sys-color-on-primary-container);\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n  }\n\n  &.notification::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translate(25%, -25%);\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-error);\n  }\n\n  &.danger {\n    &,\n    .icon {\n      color: var(--md-sys-color-error);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-error-container);\n      }\n    }\n  }\n\n  &.dev {\n    &,\n    .icon {\n      color: var(--color-hl-developer);\n    }\n\n    &:hover {\n      background-color: var(--color-hl-developer-container-hover);\n    }\n  }\n\n  &.power {\n    &,\n    .icon {\n      color: var(--md-sys-color-tertiary);\n    }\n    [icon='bolt'] {\n      font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n    }\n    .shortcut {\n      color: var(--md-sys-color-on-surface);\n    }\n  }\n\n  &.disabled {\n    user-select: none;\n    pointer-events: none;\n    &,\n    .icon {\n      color: var(--md-sys-color-outline);\n    }\n    background-color: unset;\n  }\n`\n\nexport const Img = styled.img`\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n`\n\nexport const Footer = styled.footer`\n  position: relative;\n  display: flex;\n  padding: 8px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  user-select: text;\n\n  button {\n    display: none;\n\n    position: absolute;\n    right: 2px;\n    border-radius: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n  }\n\n  /* hover show button */\n  &:hover {\n    button {\n      display: flex;\n    }\n  }\n`\n"],"names":["Dialog","styled","DialogOpenAnimation","keyframes","DialogContent","Section","MenuWrapper","Menu","Item","Img","Footer"],"mappings":"qHAGaA,EAASC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBvBC,EAAsBC,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWxBC,EAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAarBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BrBG,EAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAajBK,EAAcL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBrBM,EAAON,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCdO,EAAOP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwGdQ,EAAMR,EAAO;AAAA;AAAA;AAAA;AAAA,EAMbS,EAAST,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/src/components/Menu/MenuComponents/Menu.styled.es.js

@@ -209,6 +209,19 @@ const t = o.dialog`
     }
   }
 
+  &.power {
+    &,
+    .icon {
+      color: var(--md-sys-color-tertiary);
+    }
+    [icon='bolt'] {
+      font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+    }
+    .shortcut {
+      color: var(--md-sys-color-on-surface);
+    }
+  }
+
   &.disabled {
     user-select: none;
     pointer-events: none;

package/dist/src/components/Menu/MenuComponents/Menu.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.styled.es.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.styled.js"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\n// DIALOG (CONTAINER)\nexport const Dialog = styled.dialog`\n  position: fixed;\n  margin: 0;\n  inset: 0;\n  top: 42px;\n  width: auto;\n  height: auto;\n  z-index: 1000;\n  border: none;\n  background-color: unset;\n  padding: 0;\n\n  user-select: none;\n\n  overflow: auto;\n  /* remove scroll bar */\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  padding-bottom: 60px;\n`\n\nconst DialogOpenAnimation = keyframes`\n    from {\n        scale: 0.95;\n        opacity: 0.6;\n    }\n    to {\n        scale: 1;\n        opacity: 1;\n    }\n`\n\nexport const DialogContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n\n  /* position */\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: fit-content;\n  z-index: 30;\n\n  /* animate */\n  animation: ${DialogOpenAnimation} 0.03s ease-in forwards;\n\n  /* transform origin based on alignment */\n  &.right {\n    transform-origin: top right;\n  }\n  &.left {\n    transform-origin: top left;\n  }\n\n  /* add shadow to each item */\n  & > *:not(.sub-menu),\n  .sub-menu menu {\n    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);\n  }\n\n  /* theme support */\n  &.dark {\n    color: var(--md-sys-color-on-surface, #fff);\n    /* override children backgrounds if needed */\n    & > * {\n      color: var(--md-sys-color-on-surface, #fff) !important;\n    }\n  }\n`\n\n// MENULIST\nexport const Section = styled.section`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  padding: 0px;\n  border-radius: 8px;\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n  color: var(--md-sys-color-on-surface);\n  z-index: 10;\n  overflow: hidden;\n`\nexport const MenuWrapper = styled.div`\n  position: relative;\n  border-radius: 8px;\n\n  /* sub menu */\n  &.sub-menu {\n    position: absolute;\n    bottom: 0;\n\n    border-radius: 8px;\n    width: max-content;\n    z-index: 30;\n\n    & > * {\n      border-radius: 8px;\n      overflow: hidden;\n    }\n  }\n`\n\nexport const Menu = styled.menu`\n  /* reset defaults */\n  display: flex;\n  list-style-type: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0;\n\n  /* custom */\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 8px;\n\n  /* shrink the padding when compact */\n  &.compact {\n    padding: 4px;\n    gap: var(--base-gap-small);\n  }\n\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n\n  /* divider */\n  hr {\n    margin: 0;\n    width: 100%;\n    border-style: solid;\n    opacity: 0.5;\n    border-color: var(--md-sys-color-surface-container-highest);\n  }\n`\n\nexport const Item = styled.li`\n  display: flex;\n  padding: 6px 16px 6px 12px;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--base-gap-large);\n  align-self: stretch;\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n\n  span {\n    display: inline-block;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest);\n  }\n\n  .more {\n    margin-left: auto;\n  }\n\n  /* highlighted item */\n  &.highlighted {\n    background-color: var(--md-sys-color-secondary-container);\n    &:hover {\n      background-color: var(--md-sys-color-secondary-container-hover);\n    }\n  }\n\n  /* selected item */\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    color: var(--md-sys-color-on-primary-container);\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n  }\n\n  &.notification::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translate(25%, -25%);\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-error);\n  }\n\n  &.danger {\n    &,\n    .icon {\n      color: var(--md-sys-color-error);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-error-container);\n      }\n    }\n  }\n\n  &.dev {\n    &,\n    .icon {\n      color: var(--color-hl-developer);\n    }\n\n    &:hover {\n      background-color: var(--color-hl-developer-container-hover);\n    }\n  }\n\n  &.disabled {\n    user-select: none;\n    pointer-events: none;\n    &,\n    .icon {\n      color: var(--md-sys-color-outline);\n    }\n    background-color: unset;\n  }\n`\n\nexport const Img = styled.img`\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n`\n\nexport const Footer = styled.footer`\n  position: relative;\n  display: flex;\n  padding: 8px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  user-select: text;\n\n  button {\n    display: none;\n\n    position: absolute;\n    right: 2px;\n    border-radius: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n  }\n\n  /* hover show button */\n  &:hover {\n    button {\n      display: flex;\n    }\n  }\n`\n"],"names":["Dialog","styled","DialogOpenAnimation","keyframes","DialogContent","Section","MenuWrapper","Menu","Item","Img","Footer"],"mappings":";AAGY,MAACA,IAASC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBvBC,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWfC,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAarBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2BrBG,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAajBK,IAAcL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoBrBM,IAAON,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkCdO,IAAOP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2FdQ,IAAMR,EAAO;AAAA;AAAA;AAAA;AAAA,GAMbS,IAAST,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"Menu.styled.es.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.styled.js"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\n// DIALOG (CONTAINER)\nexport const Dialog = styled.dialog`\n  position: fixed;\n  margin: 0;\n  inset: 0;\n  top: 42px;\n  width: auto;\n  height: auto;\n  z-index: 1000;\n  border: none;\n  background-color: unset;\n  padding: 0;\n\n  user-select: none;\n\n  overflow: auto;\n  /* remove scroll bar */\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  padding-bottom: 60px;\n`\n\nconst DialogOpenAnimation = keyframes`\n    from {\n        scale: 0.95;\n        opacity: 0.6;\n    }\n    to {\n        scale: 1;\n        opacity: 1;\n    }\n`\n\nexport const DialogContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n\n  /* position */\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: fit-content;\n  z-index: 30;\n\n  /* animate */\n  animation: ${DialogOpenAnimation} 0.03s ease-in forwards;\n\n  /* transform origin based on alignment */\n  &.right {\n    transform-origin: top right;\n  }\n  &.left {\n    transform-origin: top left;\n  }\n\n  /* add shadow to each item */\n  & > *:not(.sub-menu),\n  .sub-menu menu {\n    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);\n  }\n\n  /* theme support */\n  &.dark {\n    color: var(--md-sys-color-on-surface, #fff);\n    /* override children backgrounds if needed */\n    & > * {\n      color: var(--md-sys-color-on-surface, #fff) !important;\n    }\n  }\n`\n\n// MENULIST\nexport const Section = styled.section`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  padding: 0px;\n  border-radius: 8px;\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n  color: var(--md-sys-color-on-surface);\n  z-index: 10;\n  overflow: hidden;\n`\nexport const MenuWrapper = styled.div`\n  position: relative;\n  border-radius: 8px;\n\n  /* sub menu */\n  &.sub-menu {\n    position: absolute;\n    bottom: 0;\n\n    border-radius: 8px;\n    width: max-content;\n    z-index: 30;\n\n    & > * {\n      border-radius: 8px;\n      overflow: hidden;\n    }\n  }\n`\n\nexport const Menu = styled.menu`\n  /* reset defaults */\n  display: flex;\n  list-style-type: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0;\n\n  /* custom */\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 8px;\n\n  /* shrink the padding when compact */\n  &.compact {\n    padding: 4px;\n    gap: var(--base-gap-small);\n  }\n\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n\n  /* divider */\n  hr {\n    margin: 0;\n    width: 100%;\n    border-style: solid;\n    opacity: 0.5;\n    border-color: var(--md-sys-color-surface-container-highest);\n  }\n`\n\nexport const Item = styled.li`\n  display: flex;\n  padding: 6px 16px 6px 12px;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--base-gap-large);\n  align-self: stretch;\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n\n  span {\n    display: inline-block;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest);\n  }\n\n  .more {\n    margin-left: auto;\n  }\n\n  /* highlighted item */\n  &.highlighted {\n    background-color: var(--md-sys-color-secondary-container);\n    &:hover {\n      background-color: var(--md-sys-color-secondary-container-hover);\n    }\n  }\n\n  /* selected item */\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    color: var(--md-sys-color-on-primary-container);\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n  }\n\n  &.notification::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translate(25%, -25%);\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-error);\n  }\n\n  &.danger {\n    &,\n    .icon {\n      color: var(--md-sys-color-error);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-error-container);\n      }\n    }\n  }\n\n  &.dev {\n    &,\n    .icon {\n      color: var(--color-hl-developer);\n    }\n\n    &:hover {\n      background-color: var(--color-hl-developer-container-hover);\n    }\n  }\n\n  &.power {\n    &,\n    .icon {\n      color: var(--md-sys-color-tertiary);\n    }\n    [icon='bolt'] {\n      font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n    }\n    .shortcut {\n      color: var(--md-sys-color-on-surface);\n    }\n  }\n\n  &.disabled {\n    user-select: none;\n    pointer-events: none;\n    &,\n    .icon {\n      color: var(--md-sys-color-outline);\n    }\n    background-color: unset;\n  }\n`\n\nexport const Img = styled.img`\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n`\n\nexport const Footer = styled.footer`\n  position: relative;\n  display: flex;\n  padding: 8px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  user-select: text;\n\n  button {\n    display: none;\n\n    position: absolute;\n    right: 2px;\n    border-radius: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n  }\n\n  /* hover show button */\n  &:hover {\n    button {\n      display: flex;\n    }\n  }\n`\n"],"names":["Dialog","styled","DialogOpenAnimation","keyframes","DialogContent","Section","MenuWrapper","Menu","Item","Img","Footer"],"mappings":";AAGY,MAACA,IAASC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBvBC,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWfC,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAarBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2BrBG,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAajBK,IAAcL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoBrBM,IAAON,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkCdO,IAAOP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwGdQ,IAAMR,EAAO;AAAA;AAAA;AAAA;AAAA,GAMbS,IAAST,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -1,2 +1,2 @@
-"use strict";const e=require("../../../../_virtual/jsx-runtime.cjs.js"),s=require("@ynput/ayon-react-components"),f=require("react"),a=require("./Menu.styled.cjs.js"),M=require("lodash"),N=require("react-router-dom"),w=require("clsx"),m=f.forwardRef(({label:t,icon:r,img:n,highlighted:j,notification:l,selected:R,danger:p,items:d=[],className:h,isLink:o,isDev:g,shortcut:i,disabled:q,...c},E)=>{const x=M.isArray(t)?t:[t],u=e.jsxRuntimeExports.jsxs(a.Item,{ref:E,className:w("menu-item",{highlighted:j,selected:R,notification:l,danger:p,dev:g,disabled:q},h),...c,label:x.join(", "),children:[r&&e.jsxRuntimeExports.jsx(s.Icon,{icon:r}),n&&e.jsxRuntimeExports.jsx(a.Img,{src:n,alt:`${t} icon`}),x.map((I,y)=>e.jsxRuntimeExports.jsx("span",{children:I},y)),i&&e.jsxRuntimeExports.jsx(s.ShortcutTag,{align:"right",children:i}),!!d.length&&e.jsxRuntimeExports.jsx(s.Icon,{icon:"arrow_right",className:"more"})]});return o?e.jsxRuntimeExports.jsx(N.Link,{to:o,target:c.target,children:u}):u});m.displayName="MenuItem";module.exports=m;
+"use strict";const e=require("../../../../_virtual/jsx-runtime.cjs.js"),t=require("@ynput/ayon-react-components"),M=require("react"),m=require("./Menu.styled.cjs.js"),N=require("lodash"),P=require("react-router-dom"),C=require("clsx");require("../../../../shared/src/context/RemoteModulesContext.cjs.js");require("../../../../shared/src/context/DetailsPanelContext.cjs.js");require("../../../../shared/src/context/ThumbnailUploaderContext.cjs.js");require("../../../../shared/src/context/SettingsPanelContext.cjs.js");require("../../../../shared/src/context/pip/PiPProvider.cjs.js");require("react-dom");require("../../../../shared/src/context/pip/PiPWrapper.cjs.js");require("../../../../shared/src/context/AddonProjectContext.cjs.js");require("../../../../shared/src/context/AddonContext.cjs.js");const _=require("../../../../shared/src/context/PowerpackContext.cjs.js");require("../../../../shared/src/context/MoveEntityContext.cjs.js");require("../../../../shared/src/context/MenuContext.cjs.js");const q=M.forwardRef(({label:r,icon:n,img:i,highlighted:j,notification:l,selected:p,danger:d,items:R=[],className:g,isLink:o,isDev:h,shortcut:u,disabled:E,powerFeature:I,active:w,...c},y)=>{const x=N.isArray(r)?r:[r],{powerLicense:f,isLoading:k}=_.usePowerpack(),s=!f&&I,a=e.jsxRuntimeExports.jsxs(m.Item,{ref:y,className:C("menu-item",{highlighted:j,selected:p,notification:l,danger:d,dev:h,disabled:E||k,power:s},g),...c,label:x.join(", "),children:[(n||s)&&e.jsxRuntimeExports.jsx(t.Icon,{icon:s?"bolt":n}),i&&e.jsxRuntimeExports.jsx(m.Img,{src:i,alt:`${r} icon`}),x.map((A,L)=>e.jsxRuntimeExports.jsx("span",{children:A},L)),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"}}),!!R.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});q.displayName="MenuItem";module.exports=q;
 //# sourceMappingURL=MenuItem.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/MenuItem.jsx"],"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'\n\nconst MenuItem = forwardRef(\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      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\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          },\n          className,\n        )}\n        {...props}\n        label={labelsArray.join(', ')}\n      >\n        {icon && <Icon icon={icon} />}\n        {img && <Styled.Img src={img} alt={`${label} icon`} />}\n        {labelsArray.map((label, index) => (\n          <span key={index}>{label}</span>\n        ))}\n        {shortcut && <ShortcutTag align={'right'}>{shortcut}</ShortcutTag>}\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","props","ref","labelsArray","isArray","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":"2OAOMA,EAAWC,EAAA,WACf,CACE,CACE,MAAAC,EACA,KAAAC,EACA,IAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,GAELC,IACG,CACH,MAAMC,EAAcC,EAAAA,QAAQhB,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAE7CiB,EACJC,EAAA,kBAAA,KAACC,EAAO,KAAP,CACC,IAAAL,EACA,UAAWM,EACT,YACA,CACE,YAAAjB,EACA,SAAAE,EACA,aAAAD,EACA,OAAAE,EACA,IAAKI,EACL,SAAAE,CACF,EACAJ,CACF,EACC,GAAGK,EACJ,MAAOE,EAAY,KAAK,IAAI,EAE3B,SAAA,CAAQd,GAAAoB,EAAA,kBAAA,IAACC,QAAK,KAAArB,CAAY,CAAA,EAC1BC,GAAQmB,EAAA,kBAAA,IAAAE,MAAA,CAAW,IAAKrB,EAAK,IAAK,GAAGF,CAAK,QAAS,EACnDe,EAAY,IAAI,CAACf,EAAOwB,4BACtB,OAAkB,CAAA,SAAAxB,CAAR,EAAAwB,CAAc,CAC1B,EACAb,GAAYU,EAAA,kBAAA,IAACI,cAAY,CAAA,MAAO,QAAU,SAASd,EAAA,EACnD,CAAC,CAACJ,EAAM,gCAAWe,EAAAA,KAAK,CAAA,KAAK,cAAc,UAAU,MAAO,CAAA,CAAA,CAAA,CAC/D,EAGF,OAAIb,0BAECiB,EAAAA,KAAK,CAAA,GAAIjB,EAAQ,OAAQI,EAAM,OAC7B,SACHI,EAAA,EAGKA,CACT,CAEJ,EAEAnB,EAAS,YAAc"}
+{"version":3,"file":"MenuItem.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/MenuItem.jsx"],"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'\n\nconst MenuItem = forwardRef(\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, isLoading } = 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 || isLoading,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        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","isLoading","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":"y+BAQA,MAAMA,EAAWC,EAAA,WACf,CACE,CACE,MAAAC,EACA,KAAAC,EACA,IAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,GAAGC,GAELC,IACG,CACH,MAAMC,EAAcC,EAAAA,QAAQlB,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAC7C,CAAE,aAAAmB,EAAc,UAAAC,CAAU,EAAIC,eAAa,EAC3CC,EAAiB,CAACH,GAAgBN,EAElCU,EACJC,EAAA,kBAAA,KAACC,EAAO,KAAP,CACC,IAAAT,EACA,UAAWU,EACT,YACA,CACE,YAAAvB,EACA,SAAAE,EACA,aAAAD,EACA,OAAAE,EACA,IAAKI,EACL,SAAUE,GAAYQ,EACtB,MAAOE,CACT,EACAd,CACF,EACC,GAAGO,EACJ,MAAOE,EAAY,KAAK,IAAI,EAE1B,SAAA,EAAAhB,GAAQqB,IAAoBK,EAAAA,kBAAAA,IAAAC,EAAA,KAAA,CAAK,KAAMN,EAAiB,OAASrB,EAAM,EACxEC,GAAQyB,EAAA,kBAAA,IAAAE,MAAA,CAAW,IAAK3B,EAAK,IAAK,GAAGF,CAAK,QAAS,EACnDiB,EAAY,IAAI,CAACjB,EAAO8B,4BACtB,OAAkB,CAAA,SAAA9B,CAAR,EAAA8B,CAAc,CAC1B,EACAnB,GACCgB,EAAAA,kBAAAA,IAACI,EAAAA,YAAY,CAAA,MAAO,CAAE,SAAU,GAAI,UAAW,QAAS,EAAG,MAAO,QAC/D,SACHpB,CAAA,CAAA,EAEDG,2BAAWc,EAAK,KAAA,CAAA,KAAK,QAAQ,MAAO,CAAE,WAAY,MAAA,EAAU,EAE5D,CAAC,CAACrB,EAAM,gCAAWqB,EAAAA,KAAK,CAAA,KAAK,cAAc,UAAU,MAAO,CAAA,CAAA,CAAA,CAC/D,EAGF,OAAInB,0BAECuB,EAAAA,KAAK,CAAA,GAAIvB,EAAQ,OAAQM,EAAM,OAC7B,SACHQ,EAAA,EAGKA,CACT,CAEJ,EAEAzB,EAAS,YAAc"}

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

@@ -1,59 +1,75 @@
 import { j as r } from "../../../../_virtual/jsx-runtime.es.js";
-import { Icon as c, ShortcutTag as N } from "@ynput/ayon-react-components";
-import { forwardRef as w } from "react";
-import { Item as A, Img as M } from "./Menu.styled.es.js";
-import { isArray as R } from "lodash";
-import { Link as $ } from "react-router-dom";
-import v from "clsx";
-const E = w(
+import { Icon as e, ShortcutTag as M } from "@ynput/ayon-react-components";
+import { forwardRef as P } from "react";
+import { Item as R, Img as $ } from "./Menu.styled.es.js";
+import { isArray as b } from "lodash";
+import { Link as v } from "react-router-dom";
+import E from "clsx";
+import "../../../../shared/src/context/RemoteModulesContext.es.js";
+import "../../../../shared/src/context/DetailsPanelContext.es.js";
+import "../../../../shared/src/context/ThumbnailUploaderContext.es.js";
+import "../../../../shared/src/context/SettingsPanelContext.es.js";
+import "../../../../shared/src/context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../../../shared/src/context/pip/PiPWrapper.es.js";
+import "../../../../shared/src/context/AddonProjectContext.es.js";
+import "../../../../shared/src/context/AddonContext.es.js";
+import { usePowerpack as F } from "../../../../shared/src/context/PowerpackContext.es.js";
+import "../../../../shared/src/context/MoveEntityContext.es.js";
+import "../../../../shared/src/context/MenuContext.es.js";
+const S = P(
   ({
     label: t,
-    icon: e,
+    icon: i,
     img: m,
-    highlighted: f,
-    notification: l,
+    highlighted: l,
+    notification: f,
     selected: x,
-    danger: j,
-    items: p = [],
-    className: d,
-    isLink: o,
-    isDev: g,
-    shortcut: s,
+    danger: d,
+    items: j = [],
+    className: g,
+    isLink: s,
+    isDev: u,
+    shortcut: n,
     disabled: h,
+    powerFeature: w,
+    active: I,
     ...a
-  }, u) => {
-    const i = R(t) ? t : [t], n = /* @__PURE__ */ r.jsxs(
-      A,
+  }, y) => {
+    const p = b(t) ? t : [t], { powerLicense: A, isLoading: L } = F(), o = !A && w, c = /* @__PURE__ */ r.jsxs(
+      R,
       {
-        ref: u,
-        className: v(
+        ref: y,
+        className: E(
           "menu-item",
           {
-            highlighted: f,
+            highlighted: l,
             selected: x,
-            notification: l,
-            danger: j,
-            dev: g,
-            disabled: h
+            notification: f,
+            danger: d,
+            dev: u,
+            disabled: h || L,
+            power: o
           },
-          d
+          g
         ),
         ...a,
-        label: i.join(", "),
+        label: p.join(", "),
         children: [
-          e && /* @__PURE__ */ r.jsx(c, { icon: e }),
-          m && /* @__PURE__ */ r.jsx(M, { src: m, alt: `${t} icon` }),
-          i.map((I, y) => /* @__PURE__ */ r.jsx("span", { children: I }, y)),
-          s && /* @__PURE__ */ r.jsx(N, { align: "right", children: s }),
-          !!p.length && /* @__PURE__ */ r.jsx(c, { icon: "arrow_right", className: "more" })
+          (i || o) && /* @__PURE__ */ r.jsx(e, { icon: o ? "bolt" : i }),
+          m && /* @__PURE__ */ r.jsx($, { src: m, alt: `${t} icon` }),
+          p.map((N, k) => /* @__PURE__ */ r.jsx("span", { children: N }, k)),
+          n && /* @__PURE__ */ r.jsx(M, { style: { minWidth: 22, textAlign: "center" }, align: "right", children: n }),
+          I && /* @__PURE__ */ r.jsx(e, { icon: "check", style: { marginLeft: "auto" } }),
+          !!j.length && /* @__PURE__ */ r.jsx(e, { icon: "arrow_right", className: "more" })
         ]
       }
     );
-    return o ? /* @__PURE__ */ r.jsx($, { to: o, target: a.target, children: n }) : n;
+    return s ? /* @__PURE__ */ r.jsx(v, { to: s, target: a.target, children: c }) : c;
   }
 );
-E.displayName = "MenuItem";
+S.displayName = "MenuItem";
 export {
-  E as default
+  S as default
 };
 //# sourceMappingURL=MenuItem.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.es.js","sources":["../../../../../../src/components/Menu/MenuComponents/MenuItem.jsx"],"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'\n\nconst MenuItem = forwardRef(\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      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\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          },\n          className,\n        )}\n        {...props}\n        label={labelsArray.join(', ')}\n      >\n        {icon && <Icon icon={icon} />}\n        {img && <Styled.Img src={img} alt={`${label} icon`} />}\n        {labelsArray.map((label, index) => (\n          <span key={index}>{label}</span>\n        ))}\n        {shortcut && <ShortcutTag align={'right'}>{shortcut}</ShortcutTag>}\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","props","ref","labelsArray","isArray","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":";;;;;;;AAOA,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,CAAC;AAAA,IACT,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAcC,EAAQhB,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAE7CiB,IACJC,gBAAAA,EAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAAL;AAAA,QACA,WAAWM;AAAA,UACT;AAAA,UACA;AAAA,YACE,aAAAjB;AAAA,YACA,UAAAE;AAAA,YACA,cAAAD;AAAA,YACA,QAAAE;AAAA,YACA,KAAKI;AAAA,YACL,UAAAE;AAAA,UACF;AAAA,UACAJ;AAAA,QACF;AAAA,QACC,GAAGK;AAAA,QACJ,OAAOE,EAAY,KAAK,IAAI;AAAA,QAE3B,UAAA;AAAA,UAAQd,KAAAoB,gBAAAA,EAAA,IAACC,KAAK,MAAArB,EAAY,CAAA;AAAA,UAC1BC,KAAQmB,gBAAAA,EAAA,IAAAE,GAAA,EAAW,KAAKrB,GAAK,KAAK,GAAGF,CAAK,SAAS;AAAA,UACnDe,EAAY,IAAI,CAACf,GAAOwB,4BACtB,QAAkB,EAAA,UAAAxB,EAAR,GAAAwB,CAAc,CAC1B;AAAA,UACAb,KAAYU,gBAAAA,EAAA,IAACI,GAAY,EAAA,OAAO,SAAU,UAASd,GAAA;AAAA,UACnD,CAAC,CAACJ,EAAM,gCAAWe,GAAK,EAAA,MAAK,eAAc,WAAU,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/D;AAGF,WAAIb,0BAECiB,GAAK,EAAA,IAAIjB,GAAQ,QAAQI,EAAM,QAC7B,UACHI,GAAA,IAGKA;AAAAA,EACT;AAEJ;AAEAnB,EAAS,cAAc;"}
+{"version":3,"file":"MenuItem.es.js","sources":["../../../../../../src/components/Menu/MenuComponents/MenuItem.jsx"],"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'\n\nconst MenuItem = forwardRef(\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, isLoading } = 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 || isLoading,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        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","isLoading","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":";;;;;;;;;;;;;;;;;;;AAQA,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,CAAC;AAAA,IACT,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAcC,EAAQlB,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAC7C,EAAE,cAAAmB,GAAc,WAAAC,EAAU,IAAIC,EAAa,GAC3CC,IAAiB,CAACH,KAAgBN,GAElCU,IACJC,gBAAAA,EAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAAT;AAAA,QACA,WAAWU;AAAA,UACT;AAAA,UACA;AAAA,YACE,aAAAvB;AAAA,YACA,UAAAE;AAAA,YACA,cAAAD;AAAA,YACA,QAAAE;AAAA,YACA,KAAKI;AAAA,YACL,UAAUE,KAAYQ;AAAA,YACtB,OAAOE;AAAA,UACT;AAAA,UACAd;AAAA,QACF;AAAA,QACC,GAAGO;AAAA,QACJ,OAAOE,EAAY,KAAK,IAAI;AAAA,QAE1B,UAAA;AAAA,WAAAhB,KAAQqB,MAAoBK,gBAAAA,EAAAA,IAAAC,GAAA,EAAK,MAAMN,IAAiB,SAASrB,GAAM;AAAA,UACxEC,KAAQyB,gBAAAA,EAAA,IAAAE,GAAA,EAAW,KAAK3B,GAAK,KAAK,GAAGF,CAAK,SAAS;AAAA,UACnDiB,EAAY,IAAI,CAACjB,GAAO8B,4BACtB,QAAkB,EAAA,UAAA9B,EAAR,GAAA8B,CAAc,CAC1B;AAAA,UACAnB,KACCgB,gBAAAA,EAAAA,IAACI,GAAY,EAAA,OAAO,EAAE,UAAU,IAAI,WAAW,SAAS,GAAG,OAAO,SAC/D,UACHpB,EAAA,CAAA;AAAA,UAEDG,2BAAWc,GAAK,EAAA,MAAK,SAAQ,OAAO,EAAE,YAAY,OAAA,GAAU;AAAA,UAE5D,CAAC,CAACrB,EAAM,gCAAWqB,GAAK,EAAA,MAAK,eAAc,WAAU,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/D;AAGF,WAAInB,0BAECuB,GAAK,EAAA,IAAIvB,GAAQ,QAAQM,EAAM,QAC7B,UACHQ,GAAA,IAGKA;AAAAA,EACT;AAEJ;AAEAzB,EAAS,cAAc;"}

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

@@ -1,2 +1,2 @@
-"use strict";const a=require("../../../../_virtual/jsx-runtime.cjs.js"),f=require("react"),P=require("./MenuItem.cjs.js"),S=require("@ynput/ayon-react-components"),w=require("./Menu.styled.cjs.js"),_=({items:q,handleClick:x,onSubMenu:l,subMenu:c,level:L,id:k="root-menu",parentRef:m,style:n,onClose:v,itemClassName:C,itemStyle:T,...$})=>{const d=f.useRef([]),i=f.useRef(null),[D,I]=f.useState((n==null?void 0:n.top)||0),p=(t,r,u)=>{!d.current[r]||!i.current||l&&l(t,{id:r,style:{top:d.current[r].offsetTop+((n==null?void 0:n.top)||0)-4,right:i.current.getBoundingClientRect().width+((n==null?void 0:n.right)||0)-12},items:u,level:L})},N=t=>{c&&l&&l(t,{id:parent,items:null})};return f.useEffect(()=>{if(c){const t=i.current.querySelectorAll("li, button")[0];t&&t.focus()}},[c]),f.useEffect(()=>{if(!i.current)return;const{top:t,height:r}=i.current.getBoundingClientRect(),u=window.innerHeight;if(t+r>u){const g=u-r-60;I(g)}},[i.current]),a.jsxRuntimeExports.jsx(w.MenuWrapper,{style:{paddingRight:c?16:0,...n,top:D},className:c?"sub-menu":"menu-list",id:k,onMouseLeave:N,...$,ref:i,children:a.jsxRuntimeExports.jsx(w.Menu,{children:q.filter(t=>!t.hidden).map((t,r)=>{if(t.node)return t.node;if((t==null?void 0:t.id)==="divider")return a.jsxRuntimeExports.jsx("hr",{},r);const{label:u,icon:g,img:b,highlighted:A,onClick:R,link:h,items:o=[],id:s,disableClose:B,selected:H,disabled:K,...j}=t;return a.jsxRuntimeExports.jsx(P,{tabIndex:0,label:u,icon:g,img:b,highlighted:A,items:o,selected:H,disabled:K,isLink:h,onClick:e=>o.length?p(e,s,o):x(e,R,h,B),onKeyDown:e=>{e.key==="Enter"&&(o.length?p(e,s,o):x(e,R,h));const M=!e.target.nextSibling;if(e.key==="Tab"&&M&&!e.shiftKey){e.preventDefault(),e.stopPropagation();const E=i.current.querySelectorAll("li, button")[0];E&&E.focus()}e.key==="Escape"&&c&&m&&(e.preventDefault(),e.stopPropagation(),m.focus(),v(s))},style:{paddingRight:o.length?"0":"16px",...T},ref:e=>d.current[s]=e,onMouseEnter:e=>p(e,s,o),onMouseLeave:e=>p(e,s,[]),className:`${C} ${j.className||""}`,...j,children:!!o.length&&a.jsxRuntimeExports.jsx(S.Icon,{icon:"arrow_right",style:{marginLeft:"auto"}})},`${s}-${r}`)})})})};module.exports=_;
+"use strict";const a=require("../../../../_virtual/jsx-runtime.cjs.js"),p=require("react"),J=require("./MenuItem.cjs.js"),O=require("@ynput/ayon-react-components"),L=require("./Menu.styled.cjs.js");require("../../../../shared/src/context/RemoteModulesContext.cjs.js");require("../../../../shared/src/context/DetailsPanelContext.cjs.js");require("../../../../shared/src/context/ThumbnailUploaderContext.cjs.js");require("../../../../shared/src/context/SettingsPanelContext.cjs.js");require("../../../../shared/src/context/pip/PiPProvider.cjs.js");require("react-dom");require("../../../../shared/src/context/pip/PiPWrapper.cjs.js");require("../../../../shared/src/context/AddonProjectContext.cjs.js");require("../../../../shared/src/context/AddonContext.cjs.js");const Q=require("../../../../shared/src/context/PowerpackContext.cjs.js");require("../../../../shared/src/context/MoveEntityContext.cjs.js");require("../../../../shared/src/context/MenuContext.cjs.js");const U=({items:C,handleClick:q,onSubMenu:f,subMenu:u,level:P,id:D="root-menu",parentRef:m,style:r,onClose:T,onMenuClose:R,itemClassName:$,itemStyle:F,setPowerpackDialog:I,...N})=>{const d=p.useRef([]),i=p.useRef(null),[b,A]=p.useState((r==null?void 0:r.top)||0),l=(t,n,c)=>{!d.current[n]||!i.current||f&&f(t,{id:n,style:{top:d.current[n].offsetTop+((r==null?void 0:r.top)||0)-4,right:i.current.getBoundingClientRect().width+((r==null?void 0:r.right)||0)-12},items:c,level:P})},B=t=>{u&&f&&f(t,{id:parent,items:null})};return p.useEffect(()=>{if(u){const t=i.current.querySelectorAll("li, button")[0];t&&t.focus()}},[u]),p.useEffect(()=>{if(!i.current)return;const{top:t,height:n}=i.current.getBoundingClientRect(),c=window.innerHeight;if(t+n>c){const g=c-n-60;A(g)}},[i.current]),a.jsxRuntimeExports.jsx(L.MenuWrapper,{style:{paddingRight:u?16:0,...r,top:b},className:u?"sub-menu":"menu-list",id:D,onMouseLeave:B,...N,ref:i,children:a.jsxRuntimeExports.jsx(L.Menu,{children:C.filter(t=>!t.hidden).map((t,n)=>{if(t.node)return t.node;if((t==null?void 0:t.id)==="divider")return a.jsxRuntimeExports.jsx("hr",{},n);const{label:c,icon:g,img:H,highlighted:K,onClick:w,link:h,items:o=[],id:s,disableClose:S,selected:_,disabled:M,powerFeature:x,active:W,...j}=t,{powerLicense:z}=Q.usePowerpack(),E=!z&&x,k=e=>{e.preventDefault(),e.stopPropagation(),I(x),R&&R()};return a.jsxRuntimeExports.jsx(J,{tabIndex:0,label:c,icon:g,img:H,highlighted:K,items:o,selected:_,disabled:M,powerFeature:x,active:W,isLink:h,onClick:e=>E?k(e):o.length?l(e,s,o):q(e,w,h,S),onKeyDown:e=>{e.key==="Enter"&&(E?k(e):o.length?l(e,s,o):q(e,w,h));const G=!e.target.nextSibling;if(e.key==="Tab"&&G&&!e.shiftKey){e.preventDefault(),e.stopPropagation();const v=i.current.querySelectorAll("li, button")[0];v&&v.focus()}e.key==="Escape"&&u&&m&&(e.preventDefault(),e.stopPropagation(),m.focus(),T(s))},style:{paddingRight:o.length?"0":"16px",...F},ref:e=>d.current[s]=e,onMouseEnter:e=>l(e,s,o),onMouseLeave:e=>l(e,s,[]),className:`${$} ${j.className||""}`,...j,children:!!o.length&&a.jsxRuntimeExports.jsx(O.Icon,{icon:"arrow_right",style:{marginLeft:"auto"}})},`${s}-${n}`)})})})};module.exports=U;
 //# sourceMappingURL=MenuList.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuList.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/MenuList.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport MenuItem from './MenuItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './Menu.styled'\n\nconst MenuList = ({\n  items,\n  handleClick,\n  onSubMenu,\n  subMenu,\n  level,\n  id = 'root-menu',\n  parentRef,\n  style,\n  onClose,\n  itemClassName,\n  itemStyle,\n  ...props\n}) => {\n  const itemRefs = useRef([])\n  const menuRef = useRef(null)\n\n  const [top, setTop] = useState(style?.top || 0)\n\n  const handleSubMenu = (e, id, items) => {\n    if (!itemRefs.current[id] || !menuRef.current) return\n    onSubMenu &&\n      onSubMenu(e, {\n        id,\n        style: {\n          top: itemRefs.current[id].offsetTop + (style?.top || 0) - 4,\n          right: menuRef.current.getBoundingClientRect().width + (style?.right || 0) - 12,\n        },\n        items,\n        level: level,\n      })\n  }\n\n  const handleMouseLeave = (e) => {\n    if (subMenu) {\n      onSubMenu && onSubMenu(e, { id: parent, items: null })\n    }\n  }\n\n  //   when a subMenu open, set focus on the first item\n  useEffect(() => {\n    if (subMenu) {\n      const first = menuRef.current.querySelectorAll('li, button')[0]\n      first && first.focus()\n    }\n  }, [subMenu])\n\n  // check that the menu is not off the screen\n  useEffect(() => {\n    if (!menuRef.current) return\n    const { top, height } = menuRef.current.getBoundingClientRect()\n    const windowHeight = window.innerHeight\n    if (top + height > windowHeight) {\n      const newTop = windowHeight - height - 60\n      setTop(newTop)\n    }\n  }, [menuRef.current])\n\n  return (\n    <Styled.MenuWrapper\n      style={{ paddingRight: subMenu ? 16 : 0, ...style, top }}\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') 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              ...props\n            } = item\n\n            return (\n              <MenuItem\n                tabIndex={0}\n                key={`${id}-${i}`}\n                {...{ label, icon, img, highlighted, items, selected, disabled }}\n                isLink={link}\n                onClick={(e) =>\n                  items.length\n                    ? handleSubMenu(e, id, items)\n                    : handleClick(e, onClick, link, disableClose)\n                }\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    if (items.length) {\n                      handleSubMenu(e, id, items)\n                    } else {\n                      handleClick(e, onClick, link)\n                    }\n                  }\n                  const isLastChild = !e.target.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]\n                    first && 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\nexport default MenuList\n"],"names":["MenuList","items","handleClick","onSubMenu","subMenu","level","id","parentRef","style","onClose","itemClassName","itemStyle","props","itemRefs","useRef","menuRef","top","setTop","useState","handleSubMenu","e","handleMouseLeave","useEffect","first","height","windowHeight","newTop","jsx","Styled.MenuWrapper","Styled.Menu","item","i","label","icon","img","highlighted","onClick","link","disableClose","selected","disabled","MenuItem","isLastChild","Icon"],"mappings":"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"}
+{"version":3,"file":"MenuList.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/MenuList.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport MenuItem from './MenuItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './Menu.styled'\nimport { usePowerpack } from '@shared/context'\n\nconst MenuList = ({\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([])\n  const menuRef = useRef(null)\n\n  const [top, setTop] = useState(style?.top || 0)\n\n  const handleSubMenu = (e, id, items) => {\n    if (!itemRefs.current[id] || !menuRef.current) return\n    onSubMenu &&\n      onSubMenu(e, {\n        id,\n        style: {\n          top: itemRefs.current[id].offsetTop + (style?.top || 0) - 4,\n          right: menuRef.current.getBoundingClientRect().width + (style?.right || 0) - 12,\n        },\n        items,\n        level: level,\n      })\n  }\n\n  const handleMouseLeave = (e) => {\n    if (subMenu) {\n      onSubMenu && onSubMenu(e, { id: parent, items: null })\n    }\n  }\n\n  //   when a subMenu open, set focus on the first item\n  useEffect(() => {\n    if (subMenu) {\n      const first = menuRef.current.querySelectorAll('li, button')[0]\n      first && first.focus()\n    }\n  }, [subMenu])\n\n  // check that the menu is not off the screen\n  useEffect(() => {\n    if (!menuRef.current) return\n    const { top, height } = menuRef.current.getBoundingClientRect()\n    const windowHeight = window.innerHeight\n    if (top + height > windowHeight) {\n      const newTop = windowHeight - height - 60\n      setTop(newTop)\n    }\n  }, [menuRef.current])\n\n  return (\n    <Styled.MenuWrapper\n      style={{ paddingRight: subMenu ? 16 : 0, ...style, top }}\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') 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) => {\n              e.preventDefault()\n              e.stopPropagation()\n              setPowerpackDialog(powerFeature)\n\n              // close the menu\n              onMenuClose && 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) => {\n                  if (e.key === 'Enter') {\n                    if (isPowerFeature) {\n                      handleClickPowerFeature(e)\n                    } else if (items.length) {\n                      handleSubMenu(e, id, items)\n                    } else {\n                      handleClick(e, onClick, link)\n                    }\n                  }\n                  const isLastChild = !e.target.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]\n                    first && 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\nexport default MenuList\n"],"names":["MenuList","items","handleClick","onSubMenu","subMenu","level","id","parentRef","style","onClose","onMenuClose","itemClassName","itemStyle","setPowerpackDialog","props","itemRefs","useRef","menuRef","top","setTop","useState","handleSubMenu","e","handleMouseLeave","useEffect","first","height","windowHeight","newTop","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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"}