@ynput/ayon-frontend-shared 0.3.29 → 0.3.30

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

@@ -1,16 +1,117 @@
-import { j as i } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as y } from "react";
-import { Section as b, Footer as j } from "./Menu.styled.es.js";
+import { j as m } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState as S } from "react";
+import { Section as g, Footer as j } from "./Menu.styled.es.js";
 import { MenuList as v } from "./MenuList.es.js";
+import { MENU_PORTAL_CONTENT_ID as C } from "./MenuContainer.es.js";
 import "lodash";
 import "react-toastify";
-import { copyToClipboard as S } from "../../util/copyToClipboard.es.js";
+import { copyToClipboard as T } from "../../util/copyToClipboard.es.js";
 import "uuid";
 import "../../util/pubsub.es.js";
-import { Button as C } from "@ynput/ayon-react-components";
+import { Button as h } from "@ynput/ayon-react-components";
 import "../../context/RemoteModulesContext.es.js";
-import "../../context/DetailsPanelContext.es.js";
-import "../../context/SubtasksModulesContext.es.js";
+import { usePowerpack as E } 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/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/links/getEntityLinks.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/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-redux";
+import "custom-protocol-check";
+import "../../containers/ProjectTreeTable/components/GroupSettingsFallback.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";
@@ -18,75 +119,85 @@ import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
 import "../../context/AddonProjectContext.es.js";
 import "../../context/AddonContext.es.js";
-import { usePowerpack as h } from "../../context/PowerpackContext.es.js";
 import "../../context/MoveEntityContext.es.js";
-import { useMenuContext as k } from "../../context/MenuContext.es.js";
+import { useMenuContext as L } from "../../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 ee = ({ menu: x = [], onClose: l, header: a, footer: s = "" }) => {
-  const { setPowerpackDialog: f } = h(), { setMenuOpen: u } = k(), [r, n] = y([]), d = (e, t, o, p) => {
-    if (o) return l?.();
-    t?.(e), !p && l && l();
-  }, c = (e, t) => {
-    t.items.length ? r.find((o) => o.id === t.id) || n([
-      ...r.filter((o) => o.level < (t.level || 0) + 1),
-      {
-        ...t,
-        id: t.id,
-        level: (t.level || 0) + 1,
-        parentRef: e.target
+const Qo = ({ menu: y = [], onClose: l, header: a, footer: s = "" }) => {
+  const { setPowerpackDialog: u } = E(), { setMenuOpen: f } = L(), [i, e] = S([]), c = (t, o, r, n) => {
+    if (r) return l?.();
+    o?.(t), !n && l && l();
+  }, d = (t, o) => {
+    if (o.items.length) {
+      if (!i.find((r) => r.id === o.id)) {
+        const r = o.parentEl ?? t.currentTarget ?? t.target;
+        e([
+          ...i.filter((n) => n.level < (o.level || 0) + 1),
+          {
+            ...o,
+            id: o.id,
+            level: (o.level || 0) + 1,
+            parentRef: r
+          }
+        ]);
       }
-    ]) : n(r.filter((o) => o.level <= (t.level || 0)));
-  }, g = (e, t = {}) => {
-    const o = e.relatedTarget?.id, p = r.find((m) => m.id === o);
-    if (e.relatedTarget?.tagName === "DIALOG") return n([]);
-    p || n(r.filter((m) => m.level <= (t.level || 0) + 1));
-  }, M = (e, t) => {
-    e.type === "mouseenter" || e.type === "keydown" ? c(e, t) : e.type === "mouseleave" && g(e, t);
+    } else
+      e(i.filter((r) => r.level <= (o.level || 0)));
+  }, b = (t, o = {}) => {
+    const r = t.relatedTarget;
+    if (!r) return;
+    if (r.tagName === "DIALOG") return e([]);
+    typeof r.closest == "function" && r.closest(`#${C}`) || i.find((p) => p.id === r.id) || e(i.filter((p) => p.level <= (o.level || 0) + 1));
+  }, M = (t, o) => {
+    t.type === "mouseenter" || t.type === "keydown" ? d(t, o) : t.type === "mouseleave" && b(t, o);
+  }, x = (t, o, r) => {
+    e(
+      (n) => n.map((p) => p.id === t ? { ...p, style: o, placement: r } : p)
+    );
   };
-  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-    /* @__PURE__ */ i.jsxs(b, { children: [
+  return /* @__PURE__ */ m.jsxs(m.Fragment, { children: [
+    /* @__PURE__ */ m.jsxs(g, { children: [
       a && a,
-      /* @__PURE__ */ i.jsx(
+      /* @__PURE__ */ m.jsx(
         v,
         {
-          items: x,
-          handleClick: d,
+          items: y,
+          handleClick: c,
           onSubMenu: M,
           level: 0,
-          setPowerpackDialog: f,
-          onMenuClose: () => u(!1)
+          setPowerpackDialog: u,
+          onMenuClose: () => f(!1)
         }
       ),
-      s && /* @__PURE__ */ i.jsxs(j, { children: [
+      s && /* @__PURE__ */ m.jsxs(j, { children: [
         s,
-        /* @__PURE__ */ i.jsx(C, { icon: "content_copy", variant: "text", onClick: () => S(s) })
+        /* @__PURE__ */ m.jsx(h, { icon: "content_copy", variant: "text", onClick: () => T(s) })
       ] })
     ] }),
-    r.map((e, t) => /* @__PURE__ */ i.jsx(
+    i.map((t, o) => /* @__PURE__ */ m.jsx(
       v,
       {
-        ...e,
-        parentRef: e.parentRef || null,
-        style: e.style || {},
-        handleClick: d,
+        ...t,
+        parentRef: t.parentRef || null,
+        style: t.style || {},
+        handleClick: c,
         subMenu: !0,
         onSubMenu: M,
-        onClose: () => n(r.filter((o) => o.id !== e.id)),
-        onMenuClose: () => u(!1),
-        onChange: c,
-        setPowerpackDialog: f,
+        onSubMenuLayout: x,
+        onClose: () => e(i.filter((r) => r.id !== t.id)),
+        onMenuClose: () => f(!1),
+        onChange: d,
+        setPowerpackDialog: u,
         itemClassName: void 0,
         itemStyle: void 0
       },
-      t
+      o
     ))
   ] });
 };
 export {
-  ee as Menu
+  Qo as Menu
 };
 //# sourceMappingURL=Menu.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.es.js","sources":["../../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, { useState, ReactNode } 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 { PowerpackFeature, useMenuContext, usePowerpack } from '@shared/context'\n\nexport interface MenuItemType {\n  id: string\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  onClick?: (e: React.MouseEvent) => void\n  link?: string\n  disableClose?: boolean\n  disabled?: boolean\n  powerFeature?: PowerpackFeature\n  active?: boolean\n  hidden?: boolean\n  node?: ReactNode\n  [key: string]: any\n}\n\ninterface SubMenu {\n  id: string\n  items: MenuItemType[]\n  level: number\n  parentRef?: HTMLElement\n  style?: React.CSSProperties\n}\n\ninterface MenuProps {\n  menu?: MenuItemType[]\n  onClose?: () => void\n  header?: ReactNode\n  footer?: string\n}\n\nexport const Menu: React.FC<MenuProps> = ({ menu = [], onClose, header, footer = '' }) => {\n  const { setPowerpackDialog } = usePowerpack()\n  const { setMenuOpen } = useMenuContext()\n\n  const [subMenus, setSubMenus] = useState<SubMenu[]>([])\n  //   When a menu item is clicked, the following happens:\n  const handleClick = (\n    e: React.MouseEvent,\n    onClick?: (e: React.MouseEvent) => void,\n    url?: string,\n    disableClose?: boolean,\n  ) => {\n    // this is handled by Link component inside the MenuItem\n    if (url) return onClose?.()\n\n    onClick?.(e)\n\n    if (!disableClose && onClose) onClose()\n  }\n\n  const onMenuEnter = (e: React.MouseEvent, menu: Partial<SubMenu> & { items: MenuItemType[] }) => {\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 || 0) + 1),\n          {\n            ...menu,\n            id: menu.id!,\n            level: (menu.level || 0) + 1,\n            parentRef: e.target as HTMLElement,\n          } as SubMenu,\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 || 0)))\n    }\n  }\n\n  const onMenuLeave = (e: React.MouseEvent, menu: Partial<SubMenu> = {}) => {\n    // target where we are going\n    const relatedTargetId = (e.relatedTarget as HTMLElement)?.id\n    const relatedTargetSubMenu = subMenus.find((m) => m.id === relatedTargetId)\n\n    if ((e.relatedTarget as HTMLElement)?.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 = (\n    e: React.MouseEvent,\n    menu: Partial<SubMenu> & { items: MenuItemType[] },\n  ) => {\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          {...menu}\n          parentRef={menu.parentRef || null}\n          style={menu.style || {}}\n          handleClick={handleClick}\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          itemClassName={undefined}\n          itemStyle={undefined}\n        />\n      ))}\n    </>\n  )\n}\n"],"names":["Menu","menu","onClose","header","footer","setPowerpackDialog","usePowerpack","setMenuOpen","useMenuContext","subMenus","setSubMenus","useState","handleClick","onClick","url","disableClose","onMenuEnter","m","onMenuLeave","relatedTargetId","relatedTargetSubMenu","handleSubMenu","jsxs","Fragment","Styled.Section","jsx","MenuList","Styled.Footer","Button","copyToClipboard","i"],"mappings":"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"}
+{"version":3,"file":"Menu.es.js","sources":["../../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, { useState, ReactNode } from 'react'\nimport * as Styled from './Menu.styled'\nimport { MenuList } from './MenuList'\nimport { MENU_PORTAL_CONTENT_ID } from './MenuContainer'\nimport { copyToClipboard } from '@shared/util'\nimport { Button } from '@ynput/ayon-react-components'\nimport { PowerpackFeature, useMenuContext, usePowerpack } from '@shared/context'\n\nexport interface MenuItemType {\n  id: string\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  onClick?: (e: React.MouseEvent) => void\n  link?: string\n  disableClose?: boolean\n  disabled?: boolean\n  powerFeature?: PowerpackFeature\n  active?: boolean\n  hidden?: boolean\n  node?: ReactNode\n  [key: string]: any\n}\n\ninterface SubMenu {\n  id: string\n  items: MenuItemType[]\n  level: number\n  parentRef?: HTMLElement\n  style?: React.CSSProperties\n  placement?: 'left' | 'right'\n}\n\ninterface MenuProps {\n  menu?: MenuItemType[]\n  onClose?: () => void\n  header?: ReactNode\n  footer?: string\n}\n\nexport const Menu: React.FC<MenuProps> = ({ menu = [], onClose, header, footer = '' }) => {\n  const { setPowerpackDialog } = usePowerpack()\n  const { setMenuOpen } = useMenuContext()\n\n  const [subMenus, setSubMenus] = useState<SubMenu[]>([])\n  //   When a menu item is clicked, the following happens:\n  const handleClick = (\n    e: React.MouseEvent,\n    onClick?: (e: React.MouseEvent) => void,\n    url?: string,\n    disableClose?: boolean,\n  ) => {\n    // this is handled by Link component inside the MenuItem\n    if (url) return onClose?.()\n\n    onClick?.(e)\n\n    if (!disableClose && onClose) onClose()\n  }\n\n  const onMenuEnter = (\n    e: React.MouseEvent,\n    menu: Partial<SubMenu> & { items: MenuItemType[]; parentEl?: HTMLElement | null },\n  ) => {\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        // Prefer the explicit element passed from the source MenuItem ref; fall back to\n        // currentTarget (the <li>) over target (which can be a nested span/icon).\n        const parentEl =\n          menu.parentEl ?? (e.currentTarget as HTMLElement) ?? (e.target as HTMLElement)\n        setSubMenus([\n          ...subMenus.filter((m) => m.level < (menu.level || 0) + 1),\n          {\n            ...menu,\n            id: menu.id!,\n            level: (menu.level || 0) + 1,\n            parentRef: parentEl,\n          } as SubMenu,\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 || 0)))\n    }\n  }\n\n  const onMenuLeave = (e: React.MouseEvent, menu: Partial<SubMenu> = {}) => {\n    const related = e.relatedTarget as HTMLElement | null\n\n    // Mouse exited the document entirely — keep menus open, user might come back.\n    if (!related) return\n\n    // Mouse moved onto the dialog backdrop itself — close everything.\n    if (related.tagName === 'DIALOG') return setSubMenus([])\n\n    // Mouse is still inside the menu portal (the DialogContent or any descendant).\n    // The user is most likely traveling across a small gap toward an adjacent sub-menu.\n    // Don't close anything — the next mouseenter will reconcile state.\n    if (\n      typeof related.closest === 'function' &&\n      related.closest(`#${MENU_PORTAL_CONTENT_ID}`)\n    )\n      return\n\n    // Mouse is targeting a known sub-menu element directly (id match) — keep open.\n    const relatedTargetSubMenu = subMenus.find((m) => m.id === related.id)\n    if (relatedTargetSubMenu) return\n\n    setSubMenus(subMenus.filter((m) => m.level <= (menu.level || 0) + 1))\n  }\n\n  const handleSubMenu = (\n    e: React.MouseEvent,\n    menu: Partial<SubMenu> & { items: MenuItemType[] },\n  ) => {\n    if (e.type === 'mouseenter' || e.type === 'keydown') onMenuEnter(e, menu)\n    else if (e.type === 'mouseleave') onMenuLeave(e, menu)\n  }\n\n  const handleSubMenuLayout = (\n    id: string,\n    style: React.CSSProperties,\n    placement: 'left' | 'right',\n  ) => {\n    setSubMenus((prev) =>\n      prev.map((m) => (m.id === id ? { ...m, style, placement } : m)),\n    )\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          {...menu}\n          parentRef={menu.parentRef || null}\n          style={menu.style || {}}\n          handleClick={handleClick}\n          subMenu\n          onSubMenu={handleSubMenu}\n          onSubMenuLayout={handleSubMenuLayout}\n          onClose={() => setSubMenus(subMenus.filter((m) => m.id !== menu.id))}\n          onMenuClose={() => setMenuOpen(false)}\n          onChange={onMenuEnter}\n          setPowerpackDialog={setPowerpackDialog}\n          itemClassName={undefined}\n          itemStyle={undefined}\n        />\n      ))}\n    </>\n  )\n}\n"],"names":["Menu","menu","onClose","header","footer","setPowerpackDialog","usePowerpack","setMenuOpen","useMenuContext","subMenus","setSubMenus","useState","handleClick","e","onClick","url","disableClose","onMenuEnter","m","parentEl","onMenuLeave","related","MENU_PORTAL_CONTENT_ID","handleSubMenu","handleSubMenuLayout","id","style","placement","prev","jsxs","Fragment","Styled.Section","jsx","MenuList","Styled.Footer","Button","copyToClipboard","i"],"mappings":"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"}

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

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

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/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/links/getEntityLinks.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/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"}