npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.38 → 0.2.40 - Mend

@ynput/ayon-frontend-shared 0.2.38 → 0.2.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (651) hide show

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

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

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

@@ -0,0 +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","e","onClick","url","disableClose","onMenuEnter","m","onMenuLeave","relatedTargetId","_a","relatedTargetSubMenu","_b","handleSubMenu","jsxs","Fragment","Styled.Section","jsx","MenuList","Styled.Footer","Button","copyToClipboard","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Ca,MAAAA,KAA4B,CAAC,EAAE,MAAAC,IAAO,IAAI,SAAAC,GAAS,QAAAC,GAAQ,QAAAC,IAAS,SAAS;AAClF,QAAA,EAAE,oBAAAC,EAAmB,IAAIC,EAAa,GACtC,EAAE,aAAAC,EAAY,IAAIC,EAAe,GAEjC,CAACC,GAAUC,CAAW,IAAIC,EAAoB,CAAA,CAAE,GAEhDC,IAAc,CAClBC,GACAC,GACAC,GACAC,MACG;AAEC,QAAAD,UAAYb,KAAA,gBAAAA;AAEhB,IAAAY,KAAA,QAAAA,EAAUD,IAEN,CAACG,KAAgBd,KAAiBA,EAAA;AAAA,EACxC,GAEMe,IAAc,CAACJ,GAAqBZ,MAAuD;AAE3FA,IAAAA,EAAK,MAAM,SAGRQ,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAOjB,EAAK,EAAE,KAE5BS,EAAA;AAAA,MACV,GAAGD,EAAS,OAAO,CAACS,MAAMA,EAAE,SAASjB,EAAK,SAAS,KAAK,CAAC;AAAA,MACzD;AAAA,QACE,GAAGA;AAAAA,QACH,IAAIA,EAAK;AAAA,QACT,QAAQA,EAAK,SAAS,KAAK;AAAA,QAC3B,WAAWY,EAAE;AAAA,MAAA;AAAA,IACf,CACD,IAISH,EAAAD,EAAS,OAAO,CAACS,MAAMA,EAAE,UAAUjB,EAAK,SAAS,EAAE,CAAC;AAAA,EAEpE,GAEMkB,IAAc,CAACN,GAAqBZ,IAAyB,CAAA,MAAO;;AAElE,UAAAmB,KAAmBC,IAAAR,EAAE,kBAAF,gBAAAQ,EAAiC,IACpDC,IAAuBb,EAAS,KAAK,CAAC,MAAM,EAAE,OAAOW,CAAe;AAE1E,UAAKG,IAAAV,EAAE,kBAAF,gBAAAU,EAAiC,aAAY,SAAiB,QAAAb,EAAY,EAAE;AAEjF,IAAKY,KACSZ,EAAAD,EAAS,OAAO,CAAC,MAAM,EAAE,UAAUR,EAAK,SAAS,KAAK,CAAC,CAAC;AAAA,EAGxE,GAEMuB,IAAgB,CACpBX,GACAZ,MACG;AACC,IAAAY,EAAE,SAAS,gBAAgBA,EAAE,SAAS,YAAWI,EAAYJ,GAAGZ,CAAI,IAC/DY,EAAE,SAAS,gBAAcM,EAAYN,GAAGZ,CAAI;AAAA,EACvD;AAEA,SAEIwB,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAACD,gBAAAA,OAAAE,GAAA,EACE,UAAA;AAAA,MAAUxB,KAAAA;AAAA,MACXyB,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAO5B;AAAA,UACP,aAAAW;AAAA,UACA,WAAWY;AAAA,UACX,OAAO;AAAA,UACP,oBAAAnB;AAAA,UACA,aAAa,MAAME,EAAY,EAAK;AAAA,QAAA;AAAA,MACtC;AAAA,MACCH,KACCqB,gBAAAA,EAAA,KAACK,GAAA,EACE,UAAA;AAAA,QAAA1B;AAAA,QACDwB,gBAAAA,EAAAA,IAACG,GAAO,EAAA,MAAK,gBAAe,SAAQ,QAAO,SAAS,MAAMC,EAAgB5B,CAAM,EAAG,CAAA;AAAA,MAAA,EACrF,CAAA;AAAA,IAAA,GAEJ;AAAA,IACCK,EAAS,IAAI,CAACR,GAAMgC,MACnBL,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QAEE,GAAG5B;AAAAA,QACJ,WAAWA,EAAK,aAAa;AAAA,QAC7B,OAAOA,EAAK,SAAS,CAAC;AAAA,QACtB,aAAAW;AAAA,QACA,SAAO;AAAA,QACP,WAAWY;AAAA,QACX,SAAS,MAAMd,EAAYD,EAAS,OAAO,CAACS,MAAMA,EAAE,OAAOjB,EAAK,EAAE,CAAC;AAAA,QACnE,aAAa,MAAMM,EAAY,EAAK;AAAA,QACpC,UAAUU;AAAA,QACV,oBAAAZ;AAAA,QACA,eAAe;AAAA,QACf,WAAW;AAAA,MAAA;AAAA,MAZN4B;AAAA,IAcR,CAAA;AAAA,EAAA,GACH;AAEJ;"}

package/dist/shared/src/components/Menu/Menu.styled.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Menu.styled.cjs.js","sources":["../../../../../src/components/Menu/Menu.styled.ts"],"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,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWfC,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/shared/src/components/Menu/Menu.styled.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Menu.styled.es.js","sources":["../../../../../src/components/Menu/Menu.styled.ts"],"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":";AAGO,MAAMA,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/shared/src/components/Menu/MenuContainer.cjs.js ADDED Viewed

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

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

@@ -0,0 +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 { useNavigate } from 'react-router-dom'\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 navigate = useNavigate()\n const { menuOpen, setMenuOpen } = 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 (path) navigate(path)\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","navigate","useNavigate","menuOpen","setMenuOpen","useMenuContext","isOpen","handleClose","handleNavigate","path","jsx","MenuInner","position","menuRef","useMenuPosition","useEffect","first","handleKeyDown","handleOnClick","childrenWithProps","React","child","i","menuPosition","createPortal","Styled.Dialog","Styled.DialogContent","clsx"],"mappings":"2VAqBaA,EAA8C,CAAC,CAC1D,GAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,MAAAC,EAAQ,QACR,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAWC,EAAAA,YAAY,EACvB,CAAE,SAAAC,EAAU,YAAAC,CAAY,EAAIC,iBAAe,EAC3CC,EAASH,IAAaT,EAEtBa,EAAc,IAAM,CACxBH,EAAY,EAAK,CACnB,EAEMI,EAAkBC,GAAkB,CACxC,QAAQ,IAAI,oBAAoB,EACpBF,EAAA,EACRE,KAAeA,CAAI,CACzB,EAEI,OAACH,EAGHI,EAAA,kBAAA,IAACC,EAAA,CAEG,YAAAJ,EACA,eAAAC,EACA,OAAAb,EACA,SAAAC,EACA,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,CACF,EAdkB,IAgBtB,EAYMW,EAAsC,CAAC,CAC3C,YAAAJ,EACA,eAAAC,EACA,OAAAb,EACA,SAAAC,EACA,MAAAC,EAAQ,QACR,SAAAE,EACA,GAAGC,CACL,IAAM,CACE,KAAA,CAAE,SAAAY,EAAU,QAAAC,CAAQ,EAAIC,kBAAgBnB,GAAU,KAAMC,GAAY,GAAIC,CAAK,EAGnFkB,EAAAA,UAAU,IAAM,CACV,GAAAH,GAAYC,EAAQ,QAAS,CAC/B,MAAMG,EAAQH,EAAQ,QAAQ,iBAAiB,YAAY,EAAE,CAAC,EAC9DG,GAAA,MAAAA,EAAO,OAAM,CACf,EACC,CAACJ,CAAQ,CAAC,EAGP,MAAAK,EAAiB,GAA2B,CAC5C,EAAE,MAAQ,UAAsBV,EAAA,CACtC,EAGMW,EAAiB,GAA2C,CAC3D,EAAE,OAAuB,KAAO,UAAsBX,EAAA,CAC7D,EAGMY,EAAoBC,EAAM,SAAS,IAAIrB,EAAU,CAACsB,EAAOC,IACzDF,EAAM,eAAeC,CAAK,EACrBD,EAAM,aAAaC,EAAO,CAC/B,QAASd,EACT,MAAOe,EACP,SAAUd,CAAA,CACJ,EAEHa,CACR,EAEKE,EAAeX,GAAY,CAAE,IAAK,EAAG,KAAM,EAAG,QAAS,EAAG,WAAY,QAAkB,EAEvF,OAAAY,EAAA,aACLd,EAAA,kBAAA,IAACe,EAAO,OAAP,CACC,KAAM,GACN,QAASP,EACT,UAAWD,EACV,GAAGjB,EACJ,GAAG,SAEH,SAAAU,EAAA,kBAAA,IAACgB,EAAO,cAAP,CACC,GAAG,UACH,MAAOH,EACP,UAAWI,EAAK9B,CAAK,EACrB,IAAKgB,EAEJ,SAAAM,CAAA,CAAA,CACH,CACF,EACA,SAAS,IACX,CACF"}

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

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

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

@@ -0,0 +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 { useNavigate } from 'react-router-dom'\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 navigate = useNavigate()\n const { menuOpen, setMenuOpen } = 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 (path) navigate(path)\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","navigate","useNavigate","menuOpen","setMenuOpen","useMenuContext","isOpen","handleClose","handleNavigate","path","jsx","MenuInner","position","menuRef","useMenuPosition","useEffect","first","handleKeyDown","handleOnClick","childrenWithProps","React","child","i","menuPosition","createPortal","Styled.Dialog","Styled.DialogContent","clsx"],"mappings":";;;;;;;;AAqBO,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,QAAMC,IAAWC,EAAY,GACvB,EAAE,UAAAC,GAAU,aAAAC,EAAY,IAAIC,EAAe,GAC3CC,IAASH,MAAaT,GAEtBa,IAAc,MAAM;AACxB,IAAAH,EAAY,EAAK;AAAA,EACnB,GAEMI,IAAiB,CAACC,MAAkB;AACxC,YAAQ,IAAI,oBAAoB,GACpBF,EAAA,GACRE,OAAeA,CAAI;AAAA,EACzB;AAEI,SAACH,IAGHI,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MAEG,aAAAJ;AAAA,MACA,gBAAAC;AAAA,MACA,QAAAb;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,GAAGC;AAAA,IACL;AAAA,EACF,IAdkB;AAgBtB,GAYMW,IAAsC,CAAC;AAAA,EAC3C,aAAAJ;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAb;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAE;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAA,EAAE,UAAAY,GAAU,SAAAC,EAAQ,IAAIC,EAAgBnB,KAAU,MAAMC,KAAY,IAAIC,CAAK;AAGnF,EAAAkB,EAAU,MAAM;AACV,QAAAH,KAAYC,EAAQ,SAAS;AAC/B,YAAMG,IAAQH,EAAQ,QAAQ,iBAAiB,YAAY,EAAE,CAAC;AAC9D,MAAAG,KAAA,QAAAA,EAAO;AAAA,IAAM;AAAA,EACf,GACC,CAACJ,CAAQ,CAAC;AAGP,QAAAK,IAAgB,CAAC,MAA2B;AAC5C,IAAA,EAAE,QAAQ,YAAsBV,EAAA;AAAA,EACtC,GAGMW,IAAgB,CAAC,MAA2C;AAChE,IAAK,EAAE,OAAuB,OAAO,YAAsBX,EAAA;AAAA,EAC7D,GAGMY,IAAoBC,EAAM,SAAS,IAAIrB,GAAU,CAACsB,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,SAAkB;AAEvF,SAAAY;AAAA,IACLd,gBAAAA,EAAA;AAAA,MAACe;AAAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAASP;AAAA,QACT,WAAWD;AAAA,QACV,GAAGjB;AAAA,QACJ,IAAG;AAAA,QAEH,UAAAU,gBAAAA,EAAA;AAAA,UAACgB;AAAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAOH;AAAA,YACP,WAAWI,EAAK9B,CAAK;AAAA,YACrB,KAAKgB;AAAA,YAEJ,UAAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;"}

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

	@@ -0,0 +1,2 @@
1	+ "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("../../context/RemoteModulesContext.cjs.js");require("../../context/DetailsPanelContext.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 _=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 q=M.forwardRef(({label:r,icon:i,img:n,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 a=N.isArray(r)?r:[r],{powerLicense:f,isLoading:k}=_.usePowerpack(),s=!f&&I,x=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,"aria-label":a.join(", "),children:[(i\|\|s)&&e.jsxRuntimeExports.jsx(t.Icon,{icon:s?"bolt":i}),n&&e.jsxRuntimeExports.jsx(m.Img,{src:n,alt:`${r} icon`}),a.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:x}):x});q.displayName="MenuItem";module.exports=q;
2	+ //# sourceMappingURL=MenuItem.cjs.js.map

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

@@ -0,0 +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, 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 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","isLoading","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":"6hCA2BA,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,aAAYE,EAAY,KAAK,IAAI,EAE/B,SAAA,EAAAhB,GAAQqB,IAAoBK,EAAAA,kBAAAA,IAAAC,EAAA,KAAA,CAAK,KAAMN,EAAiB,OAASrB,EAAO,EACzEC,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 → shared/src/components/Menu}/MenuItem.es.js RENAMED Viewed

@@ -5,26 +5,28 @@ 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 "../../context/RemoteModulesContext.es.js";
+import "../../context/DetailsPanelContext.es.js";
+import "../../context/ThumbnailUploaderContext.es.js";
+import "../../context/SettingsPanelContext.es.js";
+import "../../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";
-import "../../../../shared/src/context/WebsocketContext.es.js";
-import "../../../../shared/src/context/GlobalContext.es.js";
-import "../../../../shared/src/context/ProjectContext.es.js";
+import "../../context/pip/PiPWrapper.es.js";
+import "../../context/AddonProjectContext.es.js";
+import "../../context/AddonContext.es.js";
+import { usePowerpack as F } from "../../context/PowerpackContext.es.js";
+import "../../context/MoveEntityContext.es.js";
+import "../../context/MenuContext.es.js";
+import "../../context/WebsocketContext.es.js";
+import "../../context/GlobalContext.es.js";
+import "../../context/ProjectContext.es.js";
+import "../../context/ProjectFoldersContext.es.js";
+import "../../context/UriContext.es.js";
 const S = P(
   ({
     label: t,
-    icon: e,
-    img: m,
+    icon: m,
+    img: e,
     highlighted: l,
     notification: f,
     selected: x,
@@ -33,11 +35,11 @@ const S = P(
     className: g,
     isLink: s,
     isDev: u,
-    shortcut: n,
+    shortcut: p,
     disabled: h,
     powerFeature: w,
     active: I,
-    ...p
+    ...n
   }, y) => {
     const a = b(t) ? t : [t], { powerLicense: A, isLoading: L } = F(), o = !A && w, c = /* @__PURE__ */ r.jsxs(
       R,
@@ -56,19 +58,19 @@ const S = P(
           },
           g
         ),
-        ...p,
-        label: a.join(", "),
+        ...n,
+        "aria-label": a.join(", "),
         children: [
-          (e || o) && /* @__PURE__ */ r.jsx(i, { icon: o ? "bolt" : e }),
-          m && /* @__PURE__ */ r.jsx($, { src: m, alt: `${t} icon` }),
+          (m || o) && /* @__PURE__ */ r.jsx(i, { icon: o ? "bolt" : m }),
+          e && /* @__PURE__ */ r.jsx($, { src: e, alt: `${t} icon` }),
           a.map((N, k) => /* @__PURE__ */ r.jsx("span", { children: N }, k)),
-          n && /* @__PURE__ */ r.jsx(M, { style: { minWidth: 22, textAlign: "center" }, align: "right", children: n }),
+          p && /* @__PURE__ */ r.jsx(M, { style: { minWidth: 22, textAlign: "center" }, align: "right", children: p }),
           I && /* @__PURE__ */ r.jsx(i, { icon: "check", style: { marginLeft: "auto" } }),
           !!j.length && /* @__PURE__ */ r.jsx(i, { icon: "arrow_right", className: "more" })
         ]
       }
     );
-    return s ? /* @__PURE__ */ r.jsx(v, { to: s, target: p.target, children: c }) : c;
+    return s ? /* @__PURE__ */ r.jsx(v, { to: s, target: n.target, children: c }) : c;
   }
 );
 S.displayName = "MenuItem";

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

@@ -0,0 +1 @@

+ {"version":3,"file":"MenuItem.es.js","sources":["../../../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { usePowerpack } from '@shared/context'\nimport { MenuItemType } from './Menu'\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n label?: string | string[]\n icon?: string\n img?: string\n highlighted?: boolean\n notification?: boolean\n selected?: boolean\n danger?: boolean\n items?: MenuItemType[]\n isLink?: string\n isDev?: boolean\n shortcut?: string\n disabled?: boolean\n powerFeature?: string\n active?: boolean\n target?: string\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n (\n {\n label,\n icon,\n img,\n highlighted,\n notification,\n selected,\n danger,\n items = [],\n className,\n isLink,\n isDev,\n shortcut,\n disabled,\n powerFeature,\n active,\n ...props\n },\n ref,\n ) => {\n const labelsArray = isArray(label) ? label : [label]\n const { powerLicense, 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 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","isLoading","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,IAAWC;AAAA,EACf,CACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,KAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ,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,cAAYE,EAAY,KAAK,IAAI;AAAA,QAE/B,UAAA;AAAA,WAAAhB,KAAQqB,MAAoBK,gBAAAA,EAAAA,IAAAC,GAAA,EAAK,MAAMN,IAAiB,SAASrB,GAAO;AAAA,UACzEC,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/shared/src/components/Menu/MenuList.cjs.js ADDED Viewed

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"MenuList.cjs.js","sources":["../../../../../src/components/Menu/MenuList.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport MenuItem from './MenuItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './Menu.styled'\nimport { PowerpackFeature, usePowerpack } from '@shared/context'\nimport type { MenuItemType } from './Menu'\n\ninterface MenuListProps {\n items: MenuItemType[]\n handleClick: (\n e: React.MouseEvent,\n onClick?: (e: React.MouseEvent) => void,\n url?: string,\n disableClose?: boolean,\n ) => void\n onSubMenu?: (e: React.MouseEvent, menu: any) => void\n subMenu?: boolean\n level: number\n id?: string\n parentRef?: HTMLElement | null\n style?: React.CSSProperties\n onClose?: (id?: string) => void\n onMenuClose?: () => void\n itemClassName?: string\n itemStyle?: React.CSSProperties\n setPowerpackDialog?: (feature: PowerpackFeature) => void\n [key: string]: any\n}\n\nexport const MenuList: React.FC<MenuListProps> = ({\n items,\n handleClick,\n onSubMenu,\n subMenu,\n level,\n id = 'root-menu',\n parentRef,\n style,\n onClose,\n onMenuClose,\n itemClassName,\n itemStyle,\n setPowerpackDialog,\n ...props\n}) => {\n const itemRefs = useRef<{ [key: string]: HTMLElement | null }>({})\n const menuRef = useRef<HTMLDivElement>(null)\n\n const handleSubMenu = (e: React.MouseEvent, id: string, items: MenuItemType[]) => {\n if (!itemRefs.current[id] || !menuRef.current) return\n onSubMenu?.(e, {\n id,\n style: {\n top: itemRefs.current[id]!.offsetTop + ((style?.top as number) || 0) - 4,\n right: menuRef.current.getBoundingClientRect().width + ((style?.right as number) || 0) - 12,\n },\n items,\n level: level,\n })\n }\n\n const handleMouseLeave = (e: React.MouseEvent) => {\n if (subMenu) {\n onSubMenu?.(e, { id: 'parent', items: [] })\n }\n }\n\n // when a subMenu open, set focus on the first item\n useEffect(() => {\n if (subMenu && menuRef.current) {\n const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n first?.focus()\n }\n }, [subMenu])\n\n return (\n <Styled.MenuWrapper\n style={{ paddingRight: subMenu ? 16 : 0, ...style }}\n className={subMenu ? 'sub-menu' : 'menu-list'}\n id={id}\n onMouseLeave={handleMouseLeave}\n {...props}\n ref={menuRef}\n >\n <Styled.Menu>\n {items\n .filter((item) => !item.hidden)\n .map((item, i) => {\n // if item is a node, return it\n if (item.node) {\n return item.node\n }\n\n if (item?.id === 'divider') return <hr key={i} />\n\n const {\n label,\n icon,\n img,\n highlighted,\n onClick,\n link,\n items = [],\n id,\n disableClose,\n selected,\n disabled,\n powerFeature,\n active,\n ...props\n } = item\n\n const { powerLicense } = usePowerpack()\n const isPowerFeature = !powerLicense && powerFeature\n\n const handleClickPowerFeature = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n if (powerFeature) {\n setPowerpackDialog?.(powerFeature)\n }\n\n // close the menu\n onMenuClose?.()\n }\n\n return (\n <MenuItem\n tabIndex={0}\n key={`${id}-${i}`}\n {...{\n label,\n icon,\n img,\n highlighted,\n items,\n selected,\n disabled,\n powerFeature,\n active,\n }}\n isLink={link}\n onClick={(e) =>\n isPowerFeature\n ? handleClickPowerFeature(e)\n : items.length\n ? handleSubMenu(e, id, items)\n : handleClick(e, onClick, link, disableClose)\n }\n onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Enter') {\n if (isPowerFeature) {\n handleClickPowerFeature(e as any)\n } else if (items.length) {\n handleSubMenu(e as any, id, items)\n } else {\n handleClick(e as any, onClick, link)\n }\n }\n const isLastChild = !(e.target as HTMLElement).nextSibling\n if (e.key === 'Tab' && isLastChild && !e.shiftKey) {\n e.preventDefault()\n e.stopPropagation()\n // when at bottom of list, tab goes to top\n const first = menuRef.current?.querySelectorAll('li, button')[0] as HTMLElement\n first?.focus()\n }\n // when a submenu is open, esc closes it and sets focus on the parent\n if (e.key === 'Escape' && subMenu && parentRef) {\n e.preventDefault()\n e.stopPropagation()\n parentRef.focus()\n onClose?.(id)\n }\n }}\n style={{ paddingRight: items.length ? '0' : '16px', ...itemStyle }}\n ref={(e) => (itemRefs.current[id] = e)}\n onMouseEnter={(e) => handleSubMenu(e, id, items)}\n onMouseLeave={(e) => handleSubMenu(e, id, [])}\n className={`${itemClassName} ${props.className || ''}`}\n {...props}\n >\n {!!items.length && <Icon icon=\"arrow_right\" style={{ marginLeft: 'auto' }} />}\n </MenuItem>\n )\n })}\n </Styled.Menu>\n </Styled.MenuWrapper>\n )\n}\n"],"names":["MenuList","items","handleClick","onSubMenu","subMenu","level","id","parentRef","style","onClose","onMenuClose","itemClassName","itemStyle","setPowerpackDialog","props","itemRefs","useRef","menuRef","handleSubMenu","e","handleMouseLeave","useEffect","first","jsx","Styled.MenuWrapper","Styled.Menu","item","i","label","icon","img","highlighted","onClick","link","disableClose","selected","disabled","powerFeature","active","powerLicense","usePowerpack","isPowerFeature","handleClickPowerFeature","MenuItem","isLastChild","_a","Icon"],"mappings":"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"}

package/dist/shared/src/components/Menu/MenuList.es.js ADDED Viewed

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

package/dist/shared/src/components/Menu/MenuList.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MenuList.es.js","sources":["../../../../../src/components/Menu/MenuList.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport MenuItem from './MenuItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './Menu.styled'\nimport { PowerpackFeature, usePowerpack } from '@shared/context'\nimport type { MenuItemType } from './Menu'\n\ninterface MenuListProps {\n items: MenuItemType[]\n handleClick: (\n e: React.MouseEvent,\n onClick?: (e: React.MouseEvent) => void,\n url?: string,\n disableClose?: boolean,\n ) => void\n onSubMenu?: (e: React.MouseEvent, menu: any) => void\n subMenu?: boolean\n level: number\n id?: string\n parentRef?: HTMLElement | null\n style?: React.CSSProperties\n onClose?: (id?: string) => void\n onMenuClose?: () => void\n itemClassName?: string\n itemStyle?: React.CSSProperties\n setPowerpackDialog?: (feature: PowerpackFeature) => void\n [key: string]: any\n}\n\nexport const MenuList: React.FC<MenuListProps> = ({\n items,\n handleClick,\n onSubMenu,\n subMenu,\n level,\n id = 'root-menu',\n parentRef,\n style,\n onClose,\n onMenuClose,\n itemClassName,\n itemStyle,\n setPowerpackDialog,\n ...props\n}) => {\n const itemRefs = useRef<{ [key: string]: HTMLElement | null }>({})\n const menuRef = useRef<HTMLDivElement>(null)\n\n const handleSubMenu = (e: React.MouseEvent, id: string, items: MenuItemType[]) => {\n if (!itemRefs.current[id] || !menuRef.current) return\n onSubMenu?.(e, {\n id,\n style: {\n top: itemRefs.current[id]!.offsetTop + ((style?.top as number) || 0) - 4,\n right: menuRef.current.getBoundingClientRect().width + ((style?.right as number) || 0) - 12,\n },\n items,\n level: level,\n })\n }\n\n const handleMouseLeave = (e: React.MouseEvent) => {\n if (subMenu) {\n onSubMenu?.(e, { id: 'parent', items: [] })\n }\n }\n\n // when a subMenu open, set focus on the first item\n useEffect(() => {\n if (subMenu && menuRef.current) {\n const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n first?.focus()\n }\n }, [subMenu])\n\n return (\n <Styled.MenuWrapper\n style={{ paddingRight: subMenu ? 16 : 0, ...style }}\n className={subMenu ? 'sub-menu' : 'menu-list'}\n id={id}\n onMouseLeave={handleMouseLeave}\n {...props}\n ref={menuRef}\n >\n <Styled.Menu>\n {items\n .filter((item) => !item.hidden)\n .map((item, i) => {\n // if item is a node, return it\n if (item.node) {\n return item.node\n }\n\n if (item?.id === 'divider') return <hr key={i} />\n\n const {\n label,\n icon,\n img,\n highlighted,\n onClick,\n link,\n items = [],\n id,\n disableClose,\n selected,\n disabled,\n powerFeature,\n active,\n ...props\n } = item\n\n const { powerLicense } = usePowerpack()\n const isPowerFeature = !powerLicense && powerFeature\n\n const handleClickPowerFeature = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n if (powerFeature) {\n setPowerpackDialog?.(powerFeature)\n }\n\n // close the menu\n onMenuClose?.()\n }\n\n return (\n <MenuItem\n tabIndex={0}\n key={`${id}-${i}`}\n {...{\n label,\n icon,\n img,\n highlighted,\n items,\n selected,\n disabled,\n powerFeature,\n active,\n }}\n isLink={link}\n onClick={(e) =>\n isPowerFeature\n ? handleClickPowerFeature(e)\n : items.length\n ? handleSubMenu(e, id, items)\n : handleClick(e, onClick, link, disableClose)\n }\n onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Enter') {\n if (isPowerFeature) {\n handleClickPowerFeature(e as any)\n } else if (items.length) {\n handleSubMenu(e as any, id, items)\n } else {\n handleClick(e as any, onClick, link)\n }\n }\n const isLastChild = !(e.target as HTMLElement).nextSibling\n if (e.key === 'Tab' && isLastChild && !e.shiftKey) {\n e.preventDefault()\n e.stopPropagation()\n // when at bottom of list, tab goes to top\n const first = menuRef.current?.querySelectorAll('li, button')[0] as HTMLElement\n first?.focus()\n }\n // when a submenu is open, esc closes it and sets focus on the parent\n if (e.key === 'Escape' && subMenu && parentRef) {\n e.preventDefault()\n e.stopPropagation()\n parentRef.focus()\n onClose?.(id)\n }\n }}\n style={{ paddingRight: items.length ? '0' : '16px', ...itemStyle }}\n ref={(e) => (itemRefs.current[id] = e)}\n onMouseEnter={(e) => handleSubMenu(e, id, items)}\n onMouseLeave={(e) => handleSubMenu(e, id, [])}\n className={`${itemClassName} ${props.className || ''}`}\n {...props}\n >\n {!!items.length && <Icon icon=\"arrow_right\" style={{ marginLeft: 'auto' }} />}\n </MenuItem>\n )\n })}\n </Styled.Menu>\n </Styled.MenuWrapper>\n )\n}\n"],"names":["MenuList","items","handleClick","onSubMenu","subMenu","level","id","parentRef","style","onClose","onMenuClose","itemClassName","itemStyle","setPowerpackDialog","props","itemRefs","useRef","menuRef","handleSubMenu","e","handleMouseLeave","useEffect","first","jsx","Styled.MenuWrapper","Styled.Menu","item","i","label","icon","img","highlighted","onClick","link","disableClose","selected","disabled","powerFeature","active","powerLicense","usePowerpack","isPowerFeature","handleClickPowerFeature","MenuItem","isLastChild","_a","Icon"],"mappings":"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"}

package/dist/shared/src/components/Menu/useMenuPosition.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react");function w(f,i,a="right"){if(!f)return null;const o=f.getBoundingClientRect(),s=i==null?void 0:i.getBoundingClientRect(),t=(s==null?void 0:s.width)\|\|200,n=(s==null?void 0:s.height)\|\|300,e=8,l=window.innerWidth,h=window.innerHeight;let d=o.bottom+8-42,r;if(d+n>h-e){const c=o.top-8-n;c>=e?d=c:d=Math.min(d,h-n-e)}if(a==="right"){const c=o.right-t;c>=e?r=c:r=o.left}else{const c=o.left;c+t<=l-e?r=c:r=o.right-t}return r!==void 0&&(r=Math.max(e,Math.min(r,l-t-e))),{top:d,left:r}}function v(f,i,a="right"){const[o,s]=u.useState(null),t=u.useRef(null),n=u.useCallback(()=>{let e=f;if(!e&&i&&(e=document.getElementById(i)),!e){i&&console.warn(`Target element with id '${i}' not found`);return}if(!t.current)return;const l=w(e,t.current,a);l&&s(l)},[f,i,a]);return u.useLayoutEffect(()=>{n()},[n]),u.useEffect(()=>{const e=()=>requestAnimationFrame(n);return window.addEventListener("resize",e,{passive:!0}),window.addEventListener("scroll",e,{passive:!0}),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e)}},[n]),u.useEffect(()=>{if(!t.current)return;const e=new ResizeObserver(()=>{n()});return e.observe(t.current),()=>{e.disconnect()}},[n]),{position:o,menuRef:t}}exports.useMenuPosition=v;
2	+ //# sourceMappingURL=useMenuPosition.cjs.js.map

package/dist/shared/src/components/Menu/useMenuPosition.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useMenuPosition.cjs.js","sources":["../../../../../src/components/Menu/useMenuPosition.ts"],"sourcesContent":["import { useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react'\n\ninterface MenuPosition {\n top: number\n left?: number\n right?: number\n bottom?: number\n}\n\nfunction calculateMenuPosition(\n targetElement: HTMLElement | null,\n menuElement: HTMLElement | null,\n align: 'left' | 'right' = 'right',\n): MenuPosition | null {\n if (!targetElement) return null\n\n const targetRect = targetElement.getBoundingClientRect()\n const menuRect = menuElement?.getBoundingClientRect()\n const menuWidth = menuRect?.width || 200\n const menuHeight = menuRect?.height || 300\n const padding = 8 // Minimum distance from screen edges\n const viewportWidth = window.innerWidth\n const viewportHeight = window.innerHeight\n\n // Default position (below the target)\n let top = targetRect.bottom + 8 - 42\n let left: number | undefined\n let right: number | undefined\n let bottom: number | undefined\n\n // Check if menu fits below, otherwise flip to above\n if (top + menuHeight > viewportHeight - padding) {\n // If it doesn't fit below, check if it fits above\n const topAbove = targetRect.top - 8 - menuHeight\n if (topAbove >= padding) {\n top = topAbove\n } else {\n // If it fits neither, prefer the side with more space or clamp\n // For now, let's clamp to bottom of viewport\n top = Math.min(top, viewportHeight - menuHeight - padding)\n // Or if we want to stick to bottom edge:\n // bottom = padding\n // top = undefined\n }\n }\n\n // Horizontal positioning\n if (align === 'right') {\n // Align right edge of menu with right edge of target\n // left position would be: targetRect.right - menuWidth\n const potentialLeft = targetRect.right - menuWidth\n\n if (potentialLeft >= padding) {\n // Fits on the left side\n left = potentialLeft\n } else {\n // Doesn't fit, try aligning left edge with target left\n left = targetRect.left\n }\n } else {\n // Align left edge of menu with left edge of target\n const potentialLeft = targetRect.left\n if (potentialLeft + menuWidth <= viewportWidth - padding) {\n left = potentialLeft\n } else {\n // Doesn't fit, try aligning right edge with target right\n left = targetRect.right - menuWidth\n }\n }\n\n // Final clamp for horizontal to ensure it doesn't overflow viewport\n if (left !== undefined) {\n left = Math.max(padding, Math.min(left, viewportWidth - menuWidth - padding))\n }\n\n // Convert to CSS properties.\n // Note: We are using fixed positioning relative to viewport usually,\n // but if the dialog is in a portal, top/left are relative to the window.\n // If we want to support 'right' CSS property for better resizing behavior:\n if (align === 'right' && left !== undefined) {\n // If we aligned to right, maybe we want to set 'right' property instead of 'left'?\n // But 'left' is easier to clamp. Let's stick to 'left' and 'top' for simplicity unless 'right' is explicitly needed.\n }\n\n return { top, left }\n}\n\ninterface UseMenuPositionReturn {\n position: MenuPosition | null\n menuRef: React.RefObject<HTMLDivElement>\n}\n\nexport function useMenuPosition(\n target: HTMLElement | null,\n targetId: string,\n align: 'left' | 'right' = 'right',\n): UseMenuPositionReturn {\n const [position, setPosition] = useState<MenuPosition | null>(null)\n const menuRef = useRef<HTMLDivElement>(null)\n\n const updatePosition = useCallback(() => {\n let targetElement: HTMLElement | null = target\n\n if (!targetElement && targetId) {\n targetElement = document.getElementById(targetId)\n }\n\n if (!targetElement) {\n // Only warn if we expected a target but didn't find one\n if (targetId) console.warn(`Target element with id '${targetId}' not found`)\n return\n }\n\n // We need the menu element to calculate its dimensions\n if (!menuRef.current) return\n\n const newPosition = calculateMenuPosition(targetElement, menuRef.current, align)\n if (newPosition) {\n setPosition(newPosition)\n }\n }, [target, targetId, align])\n\n // Initial position update\n useLayoutEffect(() => {\n updatePosition()\n }, [updatePosition])\n\n // Update on resize and scroll\n useEffect(() => {\n const handleEvent = () => requestAnimationFrame(updatePosition)\n\n window.addEventListener('resize', handleEvent, { passive: true })\n window.addEventListener('scroll', handleEvent, { passive: true })\n\n return () => {\n window.removeEventListener('resize', handleEvent)\n window.removeEventListener('scroll', handleEvent)\n }\n }, [updatePosition])\n\n // Observe menu size changes\n useEffect(() => {\n if (!menuRef.current) return\n\n const resizeObserver = new ResizeObserver(() => {\n updatePosition()\n })\n\n resizeObserver.observe(menuRef.current)\n\n return () => {\n resizeObserver.disconnect()\n }\n }, [updatePosition])\n\n return { position, menuRef }\n}\n"],"names":["calculateMenuPosition","targetElement","menuElement","align","targetRect","menuRect","menuWidth","menuHeight","padding","viewportWidth","viewportHeight","top","left","topAbove","potentialLeft","useMenuPosition","target","targetId","position","setPosition","useState","menuRef","useRef","updatePosition","useCallback","newPosition","useLayoutEffect","useEffect","handleEvent","resizeObserver"],"mappings":"yGASA,SAASA,EACPC,EACAC,EACAC,EAA0B,QACL,CACjB,GAAA,CAACF,EAAsB,OAAA,KAErB,MAAAG,EAAaH,EAAc,sBAAsB,EACjDI,EAAWH,GAAA,YAAAA,EAAa,wBACxBI,GAAYD,GAAA,YAAAA,EAAU,QAAS,IAC/BE,GAAaF,GAAA,YAAAA,EAAU,SAAU,IACjCG,EAAU,EACVC,EAAgB,OAAO,WACvBC,EAAiB,OAAO,YAG1B,IAAAC,EAAMP,EAAW,OAAS,EAAI,GAC9BQ,EAKA,GAAAD,EAAMJ,EAAaG,EAAiBF,EAAS,CAEzC,MAAAK,EAAWT,EAAW,IAAM,EAAIG,EAClCM,GAAYL,EACRG,EAAAE,EAINF,EAAM,KAAK,IAAIA,EAAKD,EAAiBH,EAAaC,CAAO,CAI3D,CAIF,GAAIL,IAAU,QAAS,CAGf,MAAAW,EAAgBV,EAAW,MAAQE,EAErCQ,GAAiBN,EAEZI,EAAAE,EAGPF,EAAOR,EAAW,IACpB,KACK,CAEL,MAAMU,EAAgBV,EAAW,KAC7BU,EAAgBR,GAAaG,EAAgBD,EACxCI,EAAAE,EAGPF,EAAOR,EAAW,MAAQE,CAC5B,CAIF,OAAIM,IAAS,SACJA,EAAA,KAAK,IAAIJ,EAAS,KAAK,IAAII,EAAMH,EAAgBH,EAAYE,CAAO,CAAC,GAYvE,CAAE,IAAAG,EAAK,KAAAC,CAAK,CACrB,CAOO,SAASG,EACdC,EACAC,EACAd,EAA0B,QACH,CACvB,KAAM,CAACe,EAAUC,CAAW,EAAIC,EAAAA,SAA8B,IAAI,EAC5DC,EAAUC,SAAuB,IAAI,EAErCC,EAAiBC,EAAAA,YAAY,IAAM,CACvC,IAAIvB,EAAoCe,EAMxC,GAJI,CAACf,GAAiBgB,IACJhB,EAAA,SAAS,eAAegB,CAAQ,GAG9C,CAAChB,EAAe,CAEdgB,GAAU,QAAQ,KAAK,2BAA2BA,CAAQ,aAAa,EAC3E,MAAA,CAIE,GAAA,CAACI,EAAQ,QAAS,OAEtB,MAAMI,EAAczB,EAAsBC,EAAeoB,EAAQ,QAASlB,CAAK,EAC3EsB,GACFN,EAAYM,CAAW,CAExB,EAAA,CAACT,EAAQC,EAAUd,CAAK,CAAC,EAG5BuB,OAAAA,EAAAA,gBAAgB,IAAM,CACLH,EAAA,CAAA,EACd,CAACA,CAAc,CAAC,EAGnBI,EAAAA,UAAU,IAAM,CACR,MAAAC,EAAc,IAAM,sBAAsBL,CAAc,EAE9D,cAAO,iBAAiB,SAAUK,EAAa,CAAE,QAAS,GAAM,EAChE,OAAO,iBAAiB,SAAUA,EAAa,CAAE,QAAS,GAAM,EAEzD,IAAM,CACJ,OAAA,oBAAoB,SAAUA,CAAW,EACzC,OAAA,oBAAoB,SAAUA,CAAW,CAClD,CAAA,EACC,CAACL,CAAc,CAAC,EAGnBI,EAAAA,UAAU,IAAM,CACV,GAAA,CAACN,EAAQ,QAAS,OAEhB,MAAAQ,EAAiB,IAAI,eAAe,IAAM,CAC/BN,EAAA,CAAA,CAChB,EAEc,OAAAM,EAAA,QAAQR,EAAQ,OAAO,EAE/B,IAAM,CACXQ,EAAe,WAAW,CAC5B,CAAA,EACC,CAACN,CAAc,CAAC,EAEZ,CAAE,SAAAL,EAAU,QAAAG,CAAQ,CAC7B"}