@ynput/ayon-frontend-shared 0.2.37 → 0.2.39

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

@@ -1,6 +1,6 @@
 import { j as h } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as E, useMemo as b, useEffect as v, useCallback as S } from "react";
-import { DetailsPanelAttributesEditor as x } from "../DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
+import { useState as E, useMemo as b, useEffect as v, useCallback as x } from "react";
+import { DetailsPanelAttributesEditor as C } from "../DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
 import "../../api/base/client.es.js";
 import "../../api/generated/graphql.es.js";
 import "../../api/generated/graphqlLinks.es.js";
@@ -47,7 +47,7 @@ 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 { useGetAttributeListQuery as C } from "../../api/queries/attributes/getAttributes.es.js";
+import { useGetAttributeListQuery as S } from "../../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";
@@ -69,7 +69,7 @@ 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 { useGetProjectQuery as V } from "../../api/queries/project/getProject.es.js";
+import "../../api/queries/project/getProject.es.js";
 import "../../api/queries/project/updateProject.es.js";
 import "../../api/queries/review/getReview.es.js";
 import "../../api/queries/review/updateReview.es.js";
@@ -83,18 +83,36 @@ 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 { toast as w } from "react-toastify";
-const nr = ({
-  projectName: c,
+import "../../api/queries/uris/getUris.es.js";
+import { toast as V } from "react-toastify";
+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 "../../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 { useProjectContext as j } from "../../context/ProjectContext.es.js";
+import "../../context/ProjectFoldersContext.es.js";
+import "../../context/UriContext.es.js";
+const Sr = ({
+  projectName: d,
   list: t,
   isLoading: l,
   attributes: m = []
 }) => {
-  const [f, d] = E({
+  const [f, c] = E({
     label: "",
     tags: [],
     active: !1
-  }), g = ((t == null ? void 0 : t.accessLevel) || 0) >= 30, { data: e } = V({ projectName: c }), { data: s = [] } = C(), p = b(
+  }), g = ((t == null ? void 0 : t.accessLevel) || 0) >= 30, { tags: n } = j(), { data: s = [] } = S(), p = b(
     () => s.filter((r) => {
       var o;
       return (o = r.scope) == null ? void 0 : o.includes("list");
@@ -104,76 +122,73 @@ const nr = ({
     })),
     [s]
   ), A = b(
-    () => {
-      var r;
-      return [
-        { name: "label", data: { type: "string", title: "Label" } },
-        {
-          name: "tags",
-          data: {
-            type: "list_of_strings",
-            title: "Tags",
-            enum: (r = e == null ? void 0 : e.tags) == null ? void 0 : r.map((o) => ({ value: o.name, label: o.name, color: o.color })),
-            enableCustomValues: !0,
-            enableSearch: !0
-          }
-        },
-        ...p,
-        { name: "active", data: { type: "boolean", title: "Active" } },
-        ...m
-      ];
-    },
-    [e == null ? void 0 : e.tags, p, m]
+    () => [
+      { name: "label", data: { type: "string", title: "Label" } },
+      {
+        name: "tags",
+        data: {
+          type: "list_of_strings",
+          title: "Tags",
+          enum: n == null ? void 0 : n.map((r) => ({ value: r.name, label: r.name, color: r.color })),
+          enableCustomValues: !0,
+          enableSearch: !0
+        }
+      },
+      ...p,
+      { name: "active", data: { type: "boolean", title: "Active" } },
+      ...m
+    ],
+    [n, p, m]
   );
   v(() => {
     if (t) {
-      const r = t.attrib || {}, a = [...p, ...m].reduce((i, { name: n }) => {
-        const L = r[n];
-        return i[n] = L || "", i;
+      const r = t.attrib || {}, e = [...p, ...m].reduce((i, { name: a }) => {
+        const L = r[a];
+        return i[a] = L || "", i;
       }, {});
-      d({
+      c({
         label: (t == null ? void 0 : t.label) || "",
         tags: (t == null ? void 0 : t.tags) || [],
         active: (t == null ? void 0 : t.active) ?? !1,
-        ...a
+        ...e
       });
     }
   }, [t, JSON.stringify(m), JSON.stringify(p)]);
-  const [u] = P(), y = (r) => m.some((o) => o.name === r) || p.some((o) => o.name === r), F = S(
+  const [u] = P(), y = (r) => m.some((o) => o.name === r) || p.some((o) => o.name === r), F = x(
     async (r, o) => {
       if (!(t != null && t.id)) return console.warn("No list ID provided");
-      let a;
+      let e;
       if (y(r)) {
         const i = t.attrib || {};
-        o === "" && r === "category" ? a = {
+        o === "" && r === "category" ? e = {
           attrib: {
             ...i,
             [r]: null
           }
-        } : a = {
+        } : e = {
           attrib: {
             ...i,
             [r]: o
           }
-        }, d((n) => ({ ...n, [r]: o }));
+        }, c((a) => ({ ...a, [r]: o }));
       } else {
         const i = { [r]: o };
-        a = i, d((n) => ({ ...n, ...i }));
+        e = i, c((a) => ({ ...a, ...i }));
       }
       try {
         await u({
           listId: t.id,
-          projectName: c,
-          entityListPatchModel: a
+          projectName: d,
+          entityListPatchModel: e
         });
       } catch (i) {
-        console.error(i), w.error("Failed to update list attribute: ", i.attrib.detail);
+        console.error(i), V.error("Failed to update list attribute: ", i.attrib.detail);
       }
     },
-    [t == null ? void 0 : t.id, t == null ? void 0 : t.attrib, c, u, p, m]
+    [t == null ? void 0 : t.id, t == null ? void 0 : t.attrib, d, u, p, m]
   );
   return /* @__PURE__ */ h.jsx(
-    x,
+    C,
     {
       enableEditing: g,
       fields: A,
@@ -185,6 +200,6 @@ const nr = ({
   );
 };
 export {
-  nr as ListAttributeForm
+  Sr as ListAttributeForm
 };
 //# sourceMappingURL=ListAttributeForm.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListAttributeForm.es.js","sources":["../../../../../src/components/ListAttributeForm/ListAttributeForm.tsx"],"sourcesContent":["import { FC, useCallback, useEffect, useState, useMemo } from 'react'\nimport { AttributeField, DetailsPanelAttributesEditor } from '../DetailsPanelAttributes'\nimport {\n  EntityListModel,\n  useGetProjectQuery,\n  useUpdateEntityListMutation,\n  useGetAttributeListQuery,\n} from '@shared/api'\nimport { toast } from 'react-toastify'\n\ninterface ListAttributeFormProps {\n  projectName: string\n  list?: EntityListModel\n  isLoading?: boolean\n  attributes?: AttributeField[]\n}\n\n// explicit type for the form state\ntype FormValue = string | number | boolean | any[] | Record<string, any> | Date | null | undefined\n\ninterface ListFormData {\n  label: string\n  tags: string[]\n  active: boolean\n  // index signature so the object is compatible with DetailsPanelAttributesEditor expected form shape\n  [key: string]: FormValue\n}\n\nexport const ListAttributeForm: FC<ListAttributeFormProps> = ({\n  projectName,\n  list,\n  isLoading,\n  attributes = [],\n}) => {\n  const [form, setForm] = useState<ListFormData>({\n    label: '',\n    tags: [],\n    active: false,\n  })\n\n  // You must be an admin to edit the list itself\n  const canEdit = (list?.accessLevel || 0) >= 30\n\n  const { data: project } = useGetProjectQuery({ projectName })\n\n  // Fetch list-scoped attributes\n  const { data: allAttributes = [] } = useGetAttributeListQuery()\n  const listScopedAttributes = useMemo(\n    () =>\n      allAttributes\n        .filter((attr) => attr.scope?.includes('list'))\n        .map((attr) => ({\n          name: attr.name,\n          data: attr.data,\n        })),\n    [allAttributes],\n  )\n\n  const fields: AttributeField[] = useMemo(\n    () => [\n      { name: 'label', data: { type: 'string', title: 'Label' } },\n      {\n        name: 'tags',\n        data: {\n          type: 'list_of_strings',\n          title: 'Tags',\n          enum: project?.tags?.map((t) => ({ value: t.name, label: t.name, color: t.color })),\n          enableCustomValues: true,\n          enableSearch: true,\n        },\n      },\n      ...listScopedAttributes,\n      { name: 'active', data: { type: 'boolean', title: 'Active' } },\n      ...attributes,\n    ],\n    [project?.tags, listScopedAttributes, attributes],\n  )\n\n  useEffect(() => {\n    if (list) {\n      const parsedAttrib = list.attrib || {}\n\n      // get the data for all attrib fields (list-scoped and passed attributes)\n      const allAttribFields = [...listScopedAttributes, ...attributes]\n      const attribFieldValues = allAttribFields.reduce((acc, { name }) => {\n        const fieldValue = (parsedAttrib as Record<string, any>)[name]\n        // Default to empty string for all attrib fields\n        acc[name] = fieldValue || ''\n        return acc\n      }, {} as Record<string, any>)\n\n      setForm({\n        label: list?.label || '',\n        tags: list?.tags || [],\n        active: list?.active ?? false,\n        ...attribFieldValues,\n      })\n    }\n  }, [list, JSON.stringify(attributes), JSON.stringify(listScopedAttributes)])\n\n  const [updateList] = useUpdateEntityListMutation()\n\n  const isAttribField = (fieldName: string): boolean => {\n    return (\n      attributes.some((attr) => attr.name === fieldName) ||\n      listScopedAttributes.some((attr) => attr.name === fieldName)\n    )\n  }\n\n  const handleChange = useCallback(\n    async (key: string, value: any) => {\n      if (!list?.id) return console.warn('No list ID provided')\n\n      let updatePayload: any\n\n      if (isAttribField(key)) {\n        const currentAttrib = list.attrib || {}\n\n        // If the value is empty string for category, set it to null to clear it\n        if (value === '' && key === 'category') {\n          updatePayload = {\n            attrib: {\n              ...currentAttrib,\n              [key]: null,\n            },\n          }\n        } else {\n          updatePayload = {\n            attrib: {\n              ...currentAttrib,\n              [key]: value,\n            },\n          }\n        }\n\n        // Update local form state\n        setForm((prev) => ({ ...prev, [key]: value }))\n      } else {\n        // For other fields, update normally\n        const newValue = { [key]: value }\n        updatePayload = newValue\n        // Update local form state\n        setForm((prev) => ({ ...prev, ...newValue }))\n      }\n\n      // update the list in the database in the background\n      try {\n        await updateList({\n          listId: list.id,\n          projectName,\n          entityListPatchModel: updatePayload,\n        })\n      } catch (error: any) {\n        console.error(error)\n        toast.error('Failed to update list attribute: ', error.attrib.detail)\n      }\n    },\n    [list?.id, list?.attrib, projectName, updateList, listScopedAttributes, attributes],\n  )\n\n  return (\n    <DetailsPanelAttributesEditor\n      enableEditing={canEdit}\n      fields={fields}\n      form={form}\n      isLoading={isLoading}\n      onChange={handleChange}\n      title=\"Attributes\"\n    />\n  )\n}\n"],"names":["ListAttributeForm","projectName","list","isLoading","attributes","form","setForm","useState","canEdit","project","useGetProjectQuery","allAttributes","useGetAttributeListQuery","listScopedAttributes","useMemo","attr","_a","fields","t","useEffect","parsedAttrib","attribFieldValues","acc","name","fieldValue","updateList","useUpdateEntityListMutation","isAttribField","fieldName","handleChange","useCallback","key","value","updatePayload","currentAttrib","prev","newValue","error","toast","jsx","DetailsPanelAttributesEditor"],"mappings":"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"}
+{"version":3,"file":"ListAttributeForm.es.js","sources":["../../../../../src/components/ListAttributeForm/ListAttributeForm.tsx"],"sourcesContent":["import { FC, useCallback, useEffect, useState, useMemo } from 'react'\nimport { AttributeField, DetailsPanelAttributesEditor } from '../DetailsPanelAttributes'\nimport { EntityListModel, useUpdateEntityListMutation, useGetAttributeListQuery } from '@shared/api'\nimport { toast } from 'react-toastify'\nimport { useProjectContext } from '@shared/context'\n\ninterface ListAttributeFormProps {\n  projectName: string\n  list?: EntityListModel\n  isLoading?: boolean\n  attributes?: AttributeField[]\n}\n\n// explicit type for the form state\ntype FormValue = string | number | boolean | any[] | Record<string, any> | Date | null | undefined\n\ninterface ListFormData {\n  label: string\n  tags: string[]\n  active: boolean\n  // index signature so the object is compatible with DetailsPanelAttributesEditor expected form shape\n  [key: string]: FormValue\n}\n\nexport const ListAttributeForm: FC<ListAttributeFormProps> = ({\n  projectName,\n  list,\n  isLoading,\n  attributes = [],\n}) => {\n  const [form, setForm] = useState<ListFormData>({\n    label: '',\n    tags: [],\n    active: false,\n  })\n\n  // You must be an admin to edit the list itself\n  const canEdit = (list?.accessLevel || 0) >= 30\n  const { tags } = useProjectContext()\n\n  // Fetch list-scoped attributes\n  const { data: allAttributes = [] } = useGetAttributeListQuery()\n  const listScopedAttributes = useMemo(\n    () =>\n      allAttributes\n        .filter((attr) => attr.scope?.includes('list'))\n        .map((attr) => ({\n          name: attr.name,\n          data: attr.data,\n        })),\n    [allAttributes],\n  )\n\n  const fields: AttributeField[] = useMemo(\n    () => [\n      { name: 'label', data: { type: 'string', title: 'Label' } },\n      {\n        name: 'tags',\n        data: {\n          type: 'list_of_strings',\n          title: 'Tags',\n          enum: tags?.map((t) => ({ value: t.name, label: t.name, color: t.color })),\n          enableCustomValues: true,\n          enableSearch: true,\n        },\n      },\n      ...listScopedAttributes,\n      { name: 'active', data: { type: 'boolean', title: 'Active' } },\n      ...attributes,\n    ],\n    [tags, listScopedAttributes, attributes],\n  )\n\n  useEffect(() => {\n    if (list) {\n      const parsedAttrib = list.attrib || {}\n\n      // get the data for all attrib fields (list-scoped and passed attributes)\n      const allAttribFields = [...listScopedAttributes, ...attributes]\n      const attribFieldValues = allAttribFields.reduce((acc, { name }) => {\n        const fieldValue = (parsedAttrib as Record<string, any>)[name]\n        // Default to empty string for all attrib fields\n        acc[name] = fieldValue || ''\n        return acc\n      }, {} as Record<string, any>)\n\n      setForm({\n        label: list?.label || '',\n        tags: list?.tags || [],\n        active: list?.active ?? false,\n        ...attribFieldValues,\n      })\n    }\n  }, [list, JSON.stringify(attributes), JSON.stringify(listScopedAttributes)])\n\n  const [updateList] = useUpdateEntityListMutation()\n\n  const isAttribField = (fieldName: string): boolean => {\n    return (\n      attributes.some((attr) => attr.name === fieldName) ||\n      listScopedAttributes.some((attr) => attr.name === fieldName)\n    )\n  }\n\n  const handleChange = useCallback(\n    async (key: string, value: any) => {\n      if (!list?.id) return console.warn('No list ID provided')\n\n      let updatePayload: any\n\n      if (isAttribField(key)) {\n        const currentAttrib = list.attrib || {}\n\n        // If the value is empty string for category, set it to null to clear it\n        if (value === '' && key === 'category') {\n          updatePayload = {\n            attrib: {\n              ...currentAttrib,\n              [key]: null,\n            },\n          }\n        } else {\n          updatePayload = {\n            attrib: {\n              ...currentAttrib,\n              [key]: value,\n            },\n          }\n        }\n\n        // Update local form state\n        setForm((prev) => ({ ...prev, [key]: value }))\n      } else {\n        // For other fields, update normally\n        const newValue = { [key]: value }\n        updatePayload = newValue\n        // Update local form state\n        setForm((prev) => ({ ...prev, ...newValue }))\n      }\n\n      // update the list in the database in the background\n      try {\n        await updateList({\n          listId: list.id,\n          projectName,\n          entityListPatchModel: updatePayload,\n        })\n      } catch (error: any) {\n        console.error(error)\n        toast.error('Failed to update list attribute: ', error.attrib.detail)\n      }\n    },\n    [list?.id, list?.attrib, projectName, updateList, listScopedAttributes, attributes],\n  )\n\n  return (\n    <DetailsPanelAttributesEditor\n      enableEditing={canEdit}\n      fields={fields}\n      form={form}\n      isLoading={isLoading}\n      onChange={handleChange}\n      title=\"Attributes\"\n    />\n  )\n}\n"],"names":["ListAttributeForm","projectName","list","isLoading","attributes","form","setForm","useState","canEdit","tags","useProjectContext","allAttributes","useGetAttributeListQuery","listScopedAttributes","useMemo","attr","_a","fields","t","useEffect","parsedAttrib","attribFieldValues","acc","name","fieldValue","updateList","useUpdateEntityListMutation","isAttribField","fieldName","handleChange","useCallback","key","value","updatePayload","currentAttrib","prev","newValue","error","toast","jsx","DetailsPanelAttributesEditor"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../../_virtual/jsx-runtime.cjs.js"),b=require("react"),v=require("./Menu.styled.cjs.js"),y=require("./MenuList.cjs.js");require("lodash");require("react-toastify");const m=require("../../util/copyToClipboard.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");const S=require("@ynput/ayon-react-components");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 E=require("../../context/PowerpackContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");const T=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 h=({menu:R=[],onClose:s,header:c,footer:o=""})=>{const{setPowerpackDialog:d}=E.usePowerpack(),{setMenuOpen:q}=T.useMenuContext(),[i,u]=b.useState([]),p=(t,e,r,l)=>{if(r)return s==null?void 0:s();e==null||e(t),!l&&s&&s()},x=(t,e)=>{e.items.length?i.find(r=>r.id===e.id)||u([...i.filter(r=>r.level<(e.level||0)+1),{...e,id:e.id,level:(e.level||0)+1,parentRef:t.target}]):u(i.filter(r=>r.level<=(e.level||0)))},g=(t,e={})=>{var f,j;const r=(f=t.relatedTarget)==null?void 0:f.id,l=i.find(a=>a.id===r);if(((j=t.relatedTarget)==null?void 0:j.tagName)==="DIALOG")return u([]);l||u(i.filter(a=>a.level<=(e.level||0)+1))},M=(t,e)=>{t.type==="mouseenter"||t.type==="keydown"?x(t,e):t.type==="mouseleave"&&g(t,e)};return n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsxs(v.Section,{children:[c&&c,n.jsxRuntimeExports.jsx(y.MenuList,{items:R,handleClick:p,onSubMenu:M,level:0,setPowerpackDialog:d,onMenuClose:()=>q(!1)}),o&&n.jsxRuntimeExports.jsxs(v.Footer,{children:[o,n.jsxRuntimeExports.jsx(S.Button,{icon:"content_copy",variant:"text",onClick:()=>m.copyToClipboard(o)})]})]}),i.map((t,e)=>n.jsxRuntimeExports.jsx(y.MenuList,{...t,parentRef:t.parentRef||null,style:t.style||{},handleClick:p,subMenu:!0,onSubMenu:M,onClose:()=>u(i.filter(r=>r.id!==t.id)),onMenuClose:()=>q(!1),onChange:x,setPowerpackDialog:d,itemClassName:void 0,itemStyle:void 0},e))]})};exports.Menu=h;
+//# sourceMappingURL=Menu.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.cjs.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":"8tCA2Ca,MAAAA,EAA4B,CAAC,CAAE,KAAAC,EAAO,GAAI,QAAAC,EAAS,OAAAC,EAAQ,OAAAC,EAAS,MAAS,CAClF,KAAA,CAAE,mBAAAC,CAAmB,EAAIC,eAAa,EACtC,CAAE,YAAAC,CAAY,EAAIC,iBAAe,EAEjC,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAoB,CAAA,CAAE,EAEhDC,EAAc,CAClBC,EACAC,EACAC,EACAC,IACG,CAEC,GAAAD,SAAYb,GAAA,YAAAA,IAEhBY,GAAA,MAAAA,EAAUD,GAEN,CAACG,GAAgBd,GAAiBA,EAAA,CACxC,EAEMe,EAAc,CAACJ,EAAqBZ,IAAuD,CAE3FA,EAAK,MAAM,OAGRQ,EAAS,KAAMS,GAAMA,EAAE,KAAOjB,EAAK,EAAE,GAE5BS,EAAA,CACV,GAAGD,EAAS,OAAQS,GAAMA,EAAE,OAASjB,EAAK,OAAS,GAAK,CAAC,EACzD,CACE,GAAGA,EACH,GAAIA,EAAK,GACT,OAAQA,EAAK,OAAS,GAAK,EAC3B,UAAWY,EAAE,MAAA,CACf,CACD,EAISH,EAAAD,EAAS,OAAQS,GAAMA,EAAE,QAAUjB,EAAK,OAAS,EAAE,CAAC,CAEpE,EAEMkB,EAAc,CAACN,EAAqBZ,EAAyB,CAAA,IAAO,SAElE,MAAAmB,GAAmBC,EAAAR,EAAE,gBAAF,YAAAQ,EAAiC,GACpDC,EAAuBb,EAAS,KAAMS,GAAMA,EAAE,KAAOE,CAAe,EAE1E,KAAKG,EAAAV,EAAE,gBAAF,YAAAU,EAAiC,WAAY,SAAiB,OAAAb,EAAY,EAAE,EAE5EY,GACSZ,EAAAD,EAAS,OAAQS,GAAMA,EAAE,QAAUjB,EAAK,OAAS,GAAK,CAAC,CAAC,CAGxE,EAEMuB,EAAgB,CACpBX,EACAZ,IACG,CACCY,EAAE,OAAS,cAAgBA,EAAE,OAAS,UAAWI,EAAYJ,EAAGZ,CAAI,EAC/DY,EAAE,OAAS,cAAcM,EAAYN,EAAGZ,CAAI,CACvD,EAEA,OAEIwB,EAAA,kBAAA,KAAAC,6BAAA,CAAA,SAAA,CAACD,yBAAAE,EAAAA,QAAA,CACE,SAAA,CAAUxB,GAAAA,EACXyB,EAAA,kBAAA,IAACC,EAAA,SAAA,CACC,MAAO5B,EACP,YAAAW,EACA,UAAWY,EACX,MAAO,EACP,mBAAAnB,EACA,YAAa,IAAME,EAAY,EAAK,CAAA,CACtC,EACCH,GACCqB,EAAA,kBAAA,KAACK,SAAA,CACE,SAAA,CAAA1B,EACDwB,EAAAA,kBAAAA,IAACG,EAAO,OAAA,CAAA,KAAK,eAAe,QAAQ,OAAO,QAAS,IAAMC,kBAAgB5B,CAAM,CAAG,CAAA,CAAA,CACrF,CAAA,CAAA,EAEJ,EACCK,EAAS,IAAI,CAACR,EAAMgC,IACnBL,EAAA,kBAAA,IAACC,EAAA,SAAA,CAEE,GAAG5B,EACJ,UAAWA,EAAK,WAAa,KAC7B,MAAOA,EAAK,OAAS,CAAC,EACtB,YAAAW,EACA,QAAO,GACP,UAAWY,EACX,QAAS,IAAMd,EAAYD,EAAS,OAAQS,GAAMA,EAAE,KAAOjB,EAAK,EAAE,CAAC,EACnE,YAAa,IAAMM,EAAY,EAAK,EACpC,SAAUU,EACV,mBAAAZ,EACA,cAAe,OACf,UAAW,MAAA,EAZN4B,CAcR,CAAA,CAAA,EACH,CAEJ"}

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,2 @@
+"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;
+//# sourceMappingURL=MenuContainer.cjs.js.map

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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,2 @@
+"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;
+//# sourceMappingURL=MenuItem.cjs.js.map

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

@@ -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"}