@ynput/ayon-frontend-shared 0.2.29 → 0.2.30

package/dist/shared/src/hooks/useUserProjectConfig.es.js

@@ -54,6 +54,7 @@ import "../api/queries/entityLists/getLists.es.js";
 import "../api/queries/entityLists/updateLists.es.js";
 import "../api/queries/entityLists/getListsAttributes.es.js";
 import "../api/queries/entityLists/updateListsAttributes.es.js";
+import "../api/queries/entityLists/listFolders.es.js";
 import "../api/queries/folders/getFolders.es.js";
 import "../api/queries/grouping/getGrouping.es.js";
 import "../api/queries/links/updateLinks.es.js";
@@ -77,7 +78,7 @@ import "../api/queries/views/getViews.es.js";
 import "../api/queries/views/updateViews.es.js";
 import "../api/queries/watchers/getWatchers.es.js";
 import { toast as y } from "react-toastify";
-const Xt = ({ selectors: f = [], init: u }) => {
+const Yt = ({ selectors: f = [], init: u }) => {
   const { data: i, isSuccess: l } = U(), { data: { frontendPreferences: m = {} } = {} } = i || {}, e = f.filter((t) => t != null).map((t) => t.replace(/\s/g, ""));
   let r = m;
   for (const t of e)
@@ -109,6 +110,6 @@ const Xt = ({ selectors: f = [], init: u }) => {
   }, { isSuccess: l }];
 };
 export {
-  Xt as useUserProjectConfig
+  Yt as useUserProjectConfig
 };
 //# sourceMappingURL=useUserProjectConfig.es.js.map

package/dist/shared/src/hooks/useUserProjectConfig.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUserProjectConfig.es.js","sources":["../../../../src/hooks/useUserProjectConfig.ts"],"sourcesContent":["import { useGetCurrentUserQuery, useSetFrontendPreferencesMutation } from '@shared/api'\nimport { toast } from 'react-toastify'\n\ntype Props = {\n  selectors?: (string | undefined | null)[]\n  init?: any\n}\n\ntype Result = [\n  Record<string, any>,\n  (config: Record<string, any>) => Promise<void>,\n  { isSuccess: boolean },\n]\n\nexport const useUserProjectConfig = ({ selectors = [], init }: Props): Result => {\n  // GET CURRENT USER\n  const { data: user, isSuccess } = useGetCurrentUserQuery()\n  // extract out columns config for project\n  const { data: { frontendPreferences: preferences = {} } = {} } = user || {}\n\n  const configPath = selectors\n    .filter((selector) => selector !== undefined && selector !== null)\n    .map((selector) => selector.replace(/\\s/g, ''))\n  // Start with the root preferences\n  let userConfig = preferences\n  for (const selector of configPath) {\n    userConfig = userConfig?.[selector]\n  }\n\n  userConfig = userConfig || init || {}\n\n  const [updateUserPreferences] = useSetFrontendPreferencesMutation()\n\n  // update the user preferences when the columns config changes\n  const updateProjectConfig = async (config: Record<string, any>) => {\n    try {\n      if (!user?.name) throw { data: { detail: 'User not found' } }\n\n      // Set the updated config at the correct nested path using only selectors\n      let updatedPreferences = { ...preferences }\n\n      // Helper function to set nested value\n      const setNestedValue = (obj: any, path: string[], value: any): any => {\n        if (path.length === 0) return { ...obj, ...value }\n\n        const [first, ...rest] = path\n        const nestedObj = obj?.[first] || {}\n\n        return {\n          ...obj,\n          [first]: setNestedValue(nestedObj, rest, value),\n        }\n      }\n\n      // Use the helper to set the value at the correct path\n      updatedPreferences = setNestedValue(updatedPreferences, configPath, config)\n\n      await updateUserPreferences({\n        userName: user.name,\n        patchData: updatedPreferences,\n        // @ts-expect-error - disableInvalidations is not in the api\n        disableInvalidations: true,\n      }).unwrap()\n    } catch (error: any) {\n      console.error(error)\n      toast.error(error.data?.detail)\n    }\n  }\n\n  return [userConfig, updateProjectConfig, { isSuccess: isSuccess }]\n}\n"],"names":["useUserProjectConfig","selectors","init","user","isSuccess","useGetCurrentUserQuery","preferences","configPath","selector","userConfig","updateUserPreferences","useSetFrontendPreferencesMutation","config","updatedPreferences","setNestedValue","obj","path","value","first","rest","nestedObj","error","toast","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,KAAuB,CAAC,EAAE,WAAAC,IAAY,CAAC,GAAG,MAAAC,QAA0B;AAE/E,QAAM,EAAE,MAAMC,GAAM,WAAAC,EAAA,IAAcC,EAAuB,GAEnD,EAAE,MAAM,EAAE,qBAAqBC,IAAc,CAAA,MAAO,CAAA,MAAOH,KAAQ,CAAC,GAEpEI,IAAaN,EAChB,OAAO,CAACO,MAAuCA,KAAa,IAAI,EAChE,IAAI,CAACA,MAAaA,EAAS,QAAQ,OAAO,EAAE,CAAC;AAEhD,MAAIC,IAAaH;AACjB,aAAWE,KAAYD;AACrB,IAAAE,IAAaA,KAAA,gBAAAA,EAAaD;AAGf,EAAAC,IAAAA,KAAcP,KAAQ,CAAC;AAE9B,QAAA,CAACQ,CAAqB,IAAIC,EAAkC;AAsClE,SAAO,CAACF,GAnCoB,OAAOG,MAAgC;;AAC7D,QAAA;AACE,UAAA,EAACT,KAAA,QAAAA,EAAM,MAAM,OAAM,EAAE,MAAM,EAAE,QAAQ,mBAAmB;AAGxD,UAAAU,IAAqB,EAAE,GAAGP,EAAY;AAG1C,YAAMQ,IAAiB,CAACC,GAAUC,GAAgBC,MAAoB;AAChE,YAAAD,EAAK,WAAW,EAAG,QAAO,EAAE,GAAGD,GAAK,GAAGE,EAAM;AAEjD,cAAM,CAACC,GAAO,GAAGC,CAAI,IAAIH,GACnBI,KAAYL,KAAA,gBAAAA,EAAMG,OAAU,CAAC;AAE5B,eAAA;AAAA,UACL,GAAGH;AAAA,UACH,CAACG,CAAK,GAAGJ,EAAeM,GAAWD,GAAMF,CAAK;AAAA,QAChD;AAAA,MACF;AAGqB,MAAAJ,IAAAC,EAAeD,GAAoBN,GAAYK,CAAM,GAE1E,MAAMF,EAAsB;AAAA,QAC1B,UAAUP,EAAK;AAAA,QACf,WAAWU;AAAA;AAAA,QAEX,sBAAsB;AAAA,MACvB,CAAA,EAAE,OAAO;AAAA,aACHQ,GAAY;AACnB,cAAQ,MAAMA,CAAK,GACbC,EAAA,OAAMC,IAAAF,EAAM,SAAN,gBAAAE,EAAY,MAAM;AAAA,IAAA;AAAA,EAElC,GAEyC,EAAE,WAAAnB,GAAsB;AACnE;"}
+{"version":3,"file":"useUserProjectConfig.es.js","sources":["../../../../src/hooks/useUserProjectConfig.ts"],"sourcesContent":["import { useGetCurrentUserQuery, useSetFrontendPreferencesMutation } from '@shared/api'\nimport { toast } from 'react-toastify'\n\ntype Props = {\n  selectors?: (string | undefined | null)[]\n  init?: any\n}\n\ntype Result = [\n  Record<string, any>,\n  (config: Record<string, any>) => Promise<void>,\n  { isSuccess: boolean },\n]\n\nexport const useUserProjectConfig = ({ selectors = [], init }: Props): Result => {\n  // GET CURRENT USER\n  const { data: user, isSuccess } = useGetCurrentUserQuery()\n  // extract out columns config for project\n  const { data: { frontendPreferences: preferences = {} } = {} } = user || {}\n\n  const configPath = selectors\n    .filter((selector) => selector !== undefined && selector !== null)\n    .map((selector) => selector.replace(/\\s/g, ''))\n  // Start with the root preferences\n  let userConfig = preferences\n  for (const selector of configPath) {\n    userConfig = userConfig?.[selector]\n  }\n\n  userConfig = userConfig || init || {}\n\n  const [updateUserPreferences] = useSetFrontendPreferencesMutation()\n\n  // update the user preferences when the columns config changes\n  const updateProjectConfig = async (config: Record<string, any>) => {\n    try {\n      if (!user?.name) throw { data: { detail: 'User not found' } }\n\n      // Set the updated config at the correct nested path using only selectors\n      let updatedPreferences = { ...preferences }\n\n      // Helper function to set nested value\n      const setNestedValue = (obj: any, path: string[], value: any): any => {\n        if (path.length === 0) return { ...obj, ...value }\n\n        const [first, ...rest] = path\n        const nestedObj = obj?.[first] || {}\n\n        return {\n          ...obj,\n          [first]: setNestedValue(nestedObj, rest, value),\n        }\n      }\n\n      // Use the helper to set the value at the correct path\n      updatedPreferences = setNestedValue(updatedPreferences, configPath, config)\n\n      await updateUserPreferences({\n        userName: user.name,\n        patchData: updatedPreferences,\n        // @ts-expect-error - disableInvalidations is not in the api\n        disableInvalidations: true,\n      }).unwrap()\n    } catch (error: any) {\n      console.error(error)\n      toast.error(error.data?.detail)\n    }\n  }\n\n  return [userConfig, updateProjectConfig, { isSuccess: isSuccess }]\n}\n"],"names":["useUserProjectConfig","selectors","init","user","isSuccess","useGetCurrentUserQuery","preferences","configPath","selector","userConfig","updateUserPreferences","useSetFrontendPreferencesMutation","config","updatedPreferences","setNestedValue","obj","path","value","first","rest","nestedObj","error","toast","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,KAAuB,CAAC,EAAE,WAAAC,IAAY,CAAC,GAAG,MAAAC,QAA0B;AAE/E,QAAM,EAAE,MAAMC,GAAM,WAAAC,EAAA,IAAcC,EAAuB,GAEnD,EAAE,MAAM,EAAE,qBAAqBC,IAAc,CAAA,MAAO,CAAA,MAAOH,KAAQ,CAAC,GAEpEI,IAAaN,EAChB,OAAO,CAACO,MAAuCA,KAAa,IAAI,EAChE,IAAI,CAACA,MAAaA,EAAS,QAAQ,OAAO,EAAE,CAAC;AAEhD,MAAIC,IAAaH;AACjB,aAAWE,KAAYD;AACrB,IAAAE,IAAaA,KAAA,gBAAAA,EAAaD;AAGf,EAAAC,IAAAA,KAAcP,KAAQ,CAAC;AAE9B,QAAA,CAACQ,CAAqB,IAAIC,EAAkC;AAsClE,SAAO,CAACF,GAnCoB,OAAOG,MAAgC;;AAC7D,QAAA;AACE,UAAA,EAACT,KAAA,QAAAA,EAAM,MAAM,OAAM,EAAE,MAAM,EAAE,QAAQ,mBAAmB;AAGxD,UAAAU,IAAqB,EAAE,GAAGP,EAAY;AAG1C,YAAMQ,IAAiB,CAACC,GAAUC,GAAgBC,MAAoB;AAChE,YAAAD,EAAK,WAAW,EAAG,QAAO,EAAE,GAAGD,GAAK,GAAGE,EAAM;AAEjD,cAAM,CAACC,GAAO,GAAGC,CAAI,IAAIH,GACnBI,KAAYL,KAAA,gBAAAA,EAAMG,OAAU,CAAC;AAE5B,eAAA;AAAA,UACL,GAAGH;AAAA,UACH,CAACG,CAAK,GAAGJ,EAAeM,GAAWD,GAAMF,CAAK;AAAA,QAChD;AAAA,MACF;AAGqB,MAAAJ,IAAAC,EAAeD,GAAoBN,GAAYK,CAAM,GAE1E,MAAMF,EAAsB;AAAA,QAC1B,UAAUP,EAAK;AAAA,QACf,WAAWU;AAAA;AAAA,QAEX,sBAAsB;AAAA,MACvB,CAAA,EAAE,OAAO;AAAA,aACHQ,GAAY;AACnB,cAAQ,MAAMA,CAAK,GACbC,EAAA,OAAMC,IAAAF,EAAM,SAAN,gBAAAE,EAAY,MAAM;AAAA,IAAA;AAAA,EAElC,GAEyC,EAAE,WAAAnB,GAAsB;AACnE;"}

package/dist/shared/src/util/checkName.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=e=>{let c=e;const t=/^[a-zA-Z0-9_]([a-zA-Z0-9_\\.\\-]*[a-zA-Z0-9_])?$/;return e&&!e.match(t)&&(e=e.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g,""),c=e.replace(/[^a-zA-Z0-9]/g,"_")),c};exports.checkName=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("lodash"),o=r=>r?/\s/.test(r)?{valid:!1,error:"Spaces are not allowed in name"}:/^[a-zA-Z0-9_\.\-]+$/.test(r)?/^[.-]/.test(r)?{valid:!1,error:"Name cannot start with dot or dash"}:/[.-]$/.test(r)?{valid:!1,error:"Name cannot end with dot or dash"}:{valid:!0}:{valid:!1,error:"Name can only contain letters, numbers, underscores, dashes or dots"}:{valid:!1,error:"Name is required"},p=r=>r?r.includes("'")?{valid:!1,error:"Label cannot contain single quotes (')"}:{valid:!0}:{valid:!1,error:"Label is required"},f=(r,s={capitalization:"lower",separator:""})=>{const{capitalization:n="lower",separator:i=""}=s;if(!r)return"";const c=r.trim().split(/\s+/).filter(Boolean).map(a=>{let e=a.normalize("NFD");return e=l.deburr(e),e=e.replace(/[^a-zA-Z0-9_\-\.]+/g,""),e=e.replace(/[.-]+$/g,""),e}).filter(Boolean);let t=(a=>{switch(n){case"upper":return a.map(e=>e.toUpperCase());case"pascal":return a.map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase());case"camel":return a.map((e,d)=>d===0?e.toLowerCase():e.charAt(0).toUpperCase()+e.slice(1).toLowerCase());case"keep":return a;case"lower":default:return a.map(e=>e.toLowerCase())}})(c).join(i);t=t.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g,"");const{valid:u}=o(t);return u||(t=l.snakeCase(t)),t};exports.checkLabel=p;exports.checkName=o;exports.default=o;exports.parseAndFormatName=f;
 //# sourceMappingURL=checkName.cjs.js.map

package/dist/shared/src/util/checkName.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkName.cjs.js","sources":["../../../../src/util/checkName.ts"],"sourcesContent":["export const checkName = (name: string) => {\n  let newName = name\n  // check name matches regex\n  const regex = /^[a-zA-Z0-9_]([a-zA-Z0-9_\\\\.\\\\-]*[a-zA-Z0-9_])?$/\n  // if not, convert to snake_case\n  if (name && !name.match(regex)) {\n    // remove any trailing or leading special characters\n    name = name.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g, '')\n    // remove any special characters\n    newName = name.replace(/[^a-zA-Z0-9]/g, '_')\n  }\n\n  return newName\n}\n"],"names":["checkName","name","newName","regex"],"mappings":"gFAAa,MAAAA,EAAaC,GAAiB,CACzC,IAAIC,EAAUD,EAEd,MAAME,EAAQ,mDAEd,OAAIF,GAAQ,CAACA,EAAK,MAAME,CAAK,IAEpBF,EAAAA,EAAK,QAAQ,iCAAkC,EAAE,EAE9CC,EAAAD,EAAK,QAAQ,gBAAiB,GAAG,GAGtCC,CACT"}
+{"version":3,"file":"checkName.cjs.js","sources":["../../../../src/util/checkName.ts"],"sourcesContent":["import { EntityNaming } from '@shared/api'\nimport { snakeCase, deburr } from 'lodash'\n\nexport interface CheckNameResult {\n  valid: boolean\n  error?: string\n}\n\n// Validation ONLY: does not mutate/transform name. Returns validity + human readable error.\nexport const checkName = (name?: string | null): CheckNameResult => {\n  if (!name) return { valid: false, error: 'Name is required' }\n  if (/\\s/.test(name)) return { valid: false, error: 'Spaces are not allowed in name' }\n\n  // Allowed char set (underscore, dash, dot included)\n  const allowed = /^[a-zA-Z0-9_\\.\\-]+$/\n  if (!allowed.test(name)) {\n    return {\n      valid: false,\n      error: 'Name can only contain letters, numbers, underscores, dashes or dots',\n    }\n  }\n\n  // Leading/trailing dot or dash not allowed; underscore IS allowed\n  if (/^[.-]/.test(name)) return { valid: false, error: 'Name cannot start with dot or dash' }\n  if (/[.-]$/.test(name)) return { valid: false, error: 'Name cannot end with dot or dash' }\n\n  return { valid: true }\n}\n\n// Validation for label field: human-readable, more permissive than name\nexport const checkLabel = (label?: string | null): CheckNameResult => {\n  if (!label) return { valid: false, error: 'Label is required' }\n\n  // Check for single quote (apostrophe)\n  if (label.includes(\"'\")) {\n    return { valid: false, error: \"Label cannot contain single quotes (')\" }\n  }\n\n  return { valid: true }\n}\n\n// Formatting + validation helper replacing old behavior of checkName.\n// It will sanitize and then apply capitalization + separator rules.\nexport const parseAndFormatName = (\n  raw: string,\n  config: EntityNaming = { capitalization: 'lower', separator: '' },\n): string => {\n  const { capitalization = 'lower', separator = '' } = config\n\n  if (!raw) return ''\n\n  // trim and split by whitespace first to preserve word boundaries\n  let working = raw.trim()\n  const parts = working.split(/\\s+/).filter(Boolean)\n\n  // Remove disallowed characters from each part\n  const cleanedParts = parts\n    .map((part) => {\n      // Transliterate non-ASCII characters\n      // 1. Normalize Unicode (NFD = decomposed form)\n      // 2. Use lodash deburr to remove diacritics\n      // 3. Replace remaining non-ASCII with empty string\n      let cleaned = part.normalize('NFD')\n      cleaned = deburr(cleaned)\n\n      // Remove disallowed characters, keep _, -, .\n      cleaned = cleaned.replace(/[^a-zA-Z0-9_\\-\\.]+/g, '')\n      // Remove trailing - or .\n      cleaned = cleaned.replace(/[.-]+$/g, '')\n      return cleaned\n    })\n    .filter(Boolean)\n\n  const applyCapitalization = (segments: string[]): string[] => {\n    switch (capitalization) {\n      case 'upper':\n        return segments.map((s) => s.toUpperCase())\n      case 'pascal':\n        return segments.map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())\n      case 'camel':\n        return segments.map((s, i) =>\n          i === 0 ? s.toLowerCase() : s.charAt(0).toUpperCase() + s.slice(1).toLowerCase(),\n        )\n      case 'keep':\n        return segments\n      case 'lower':\n      default:\n        return segments.map((s) => s.toLowerCase())\n    }\n  }\n\n  const transformed = applyCapitalization(cleanedParts)\n\n  // Always join with the provided separator (can be empty string)\n  const resultBase = transformed.join(separator)\n  let result = resultBase\n\n  // final safety pass: remove leading/trailing non-alnum if any appeared\n  result = result.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g, '')\n\n  // ensure validation; if invalid, attempt fallback snake_case\n  const { valid } = checkName(result)\n  if (!valid) {\n    result = snakeCase(result)\n  }\n\n  return result\n}\n\nexport default checkName\n"],"names":["checkName","name","checkLabel","label","parseAndFormatName","raw","config","capitalization","separator","cleanedParts","part","cleaned","deburr","result","segments","s","i","valid","snakeCase"],"mappings":"sIASaA,EAAaC,GACnBA,EACD,KAAK,KAAKA,CAAI,EAAU,CAAE,MAAO,GAAO,MAAO,gCAAiC,EAGpE,sBACH,KAAKA,CAAI,EAQlB,QAAQ,KAAKA,CAAI,EAAU,CAAE,MAAO,GAAO,MAAO,oCAAqC,EACvF,QAAQ,KAAKA,CAAI,EAAU,CAAE,MAAO,GAAO,MAAO,kCAAmC,EAElF,CAAE,MAAO,EAAK,EAVZ,CACL,MAAO,GACP,MAAO,qEACT,EATgB,CAAE,MAAO,GAAO,MAAO,kBAAmB,EAoBjDC,EAAcC,GACpBA,EAGDA,EAAM,SAAS,GAAG,EACb,CAAE,MAAO,GAAO,MAAO,wCAAyC,EAGlE,CAAE,MAAO,EAAK,EAPF,CAAE,MAAO,GAAO,MAAO,mBAAoB,EAYnDC,EAAqB,CAChCC,EACAC,EAAuB,CAAE,eAAgB,QAAS,UAAW,MAClD,CACX,KAAM,CAAE,eAAAC,EAAiB,QAAS,UAAAC,EAAY,EAAO,EAAAF,EAEjD,GAAA,CAACD,EAAY,MAAA,GAOjB,MAAMI,EAJQJ,EAAI,KAAK,EACD,MAAM,KAAK,EAAE,OAAO,OAAO,EAI9C,IAAKK,GAAS,CAKT,IAAAC,EAAUD,EAAK,UAAU,KAAK,EAClC,OAAAC,EAAUC,SAAOD,CAAO,EAGdA,EAAAA,EAAQ,QAAQ,sBAAuB,EAAE,EAEzCA,EAAAA,EAAQ,QAAQ,UAAW,EAAE,EAChCA,CAAA,CACR,EACA,OAAO,OAAO,EAwBjB,IAAIE,GAtByBC,GAAiC,CAC5D,OAAQP,EAAgB,CACtB,IAAK,QACH,OAAOO,EAAS,IAAKC,GAAMA,EAAE,aAAa,EAC5C,IAAK,SACH,OAAOD,EAAS,IAAKC,GAAMA,EAAE,OAAO,CAAC,EAAE,YAAA,EAAgBA,EAAE,MAAM,CAAC,EAAE,aAAa,EACjF,IAAK,QACH,OAAOD,EAAS,IAAI,CAACC,EAAGC,IACtBA,IAAM,EAAID,EAAE,cAAgBA,EAAE,OAAO,CAAC,EAAE,YAAY,EAAIA,EAAE,MAAM,CAAC,EAAE,YAAY,CACjF,EACF,IAAK,OACI,OAAAD,EACT,IAAK,QACL,QACE,OAAOA,EAAS,IAAKC,GAAMA,EAAE,aAAa,CAAA,CAEhD,GAEwCN,CAAY,EAGrB,KAAKD,CAAS,EAIpCK,EAAAA,EAAO,QAAQ,iCAAkC,EAAE,EAG5D,KAAM,CAAE,MAAAI,CAAA,EAAUjB,EAAUa,CAAM,EAClC,OAAKI,IACHJ,EAASK,YAAUL,CAAM,GAGpBA,CACT"}

package/dist/shared/src/util/checkName.es.js

@@ -1,9 +1,39 @@
-const r = (e) => {
-  let c = e;
-  const a = /^[a-zA-Z0-9_]([a-zA-Z0-9_\\.\\-]*[a-zA-Z0-9_])?$/;
-  return e && !e.match(a) && (e = e.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g, ""), c = e.replace(/[^a-zA-Z0-9]/g, "_")), c;
+import { deburr as p, snakeCase as d } from "lodash";
+const u = (r) => r ? /\s/.test(r) ? { valid: !1, error: "Spaces are not allowed in name" } : /^[a-zA-Z0-9_\.\-]+$/.test(r) ? /^[.-]/.test(r) ? { valid: !1, error: "Name cannot start with dot or dash" } : /[.-]$/.test(r) ? { valid: !1, error: "Name cannot end with dot or dash" } : { valid: !0 } : {
+  valid: !1,
+  error: "Name can only contain letters, numbers, underscores, dashes or dots"
+} : { valid: !1, error: "Name is required" }, z = (r) => r ? r.includes("'") ? { valid: !1, error: "Label cannot contain single quotes (')" } : { valid: !0 } : { valid: !1, error: "Label is required" }, A = (r, o = { capitalization: "lower", separator: "" }) => {
+  const { capitalization: s = "lower", separator: l = "" } = o;
+  if (!r) return "";
+  const n = r.trim().split(/\s+/).filter(Boolean).map((a) => {
+    let e = a.normalize("NFD");
+    return e = p(e), e = e.replace(/[^a-zA-Z0-9_\-\.]+/g, ""), e = e.replace(/[.-]+$/g, ""), e;
+  }).filter(Boolean);
+  let t = ((a) => {
+    switch (s) {
+      case "upper":
+        return a.map((e) => e.toUpperCase());
+      case "pascal":
+        return a.map((e) => e.charAt(0).toUpperCase() + e.slice(1).toLowerCase());
+      case "camel":
+        return a.map(
+          (e, c) => c === 0 ? e.toLowerCase() : e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()
+        );
+      case "keep":
+        return a;
+      case "lower":
+      default:
+        return a.map((e) => e.toLowerCase());
+    }
+  })(n).join(l);
+  t = t.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g, "");
+  const { valid: i } = u(t);
+  return i || (t = d(t)), t;
 };
 export {
-  r as checkName
+  z as checkLabel,
+  u as checkName,
+  u as default,
+  A as parseAndFormatName
 };
 //# sourceMappingURL=checkName.es.js.map

package/dist/shared/src/util/checkName.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkName.es.js","sources":["../../../../src/util/checkName.ts"],"sourcesContent":["export const checkName = (name: string) => {\n  let newName = name\n  // check name matches regex\n  const regex = /^[a-zA-Z0-9_]([a-zA-Z0-9_\\\\.\\\\-]*[a-zA-Z0-9_])?$/\n  // if not, convert to snake_case\n  if (name && !name.match(regex)) {\n    // remove any trailing or leading special characters\n    name = name.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g, '')\n    // remove any special characters\n    newName = name.replace(/[^a-zA-Z0-9]/g, '_')\n  }\n\n  return newName\n}\n"],"names":["checkName","name","newName","regex"],"mappings":"AAAa,MAAAA,IAAY,CAACC,MAAiB;AACzC,MAAIC,IAAUD;AAEd,QAAME,IAAQ;AAEd,SAAIF,KAAQ,CAACA,EAAK,MAAME,CAAK,MAEpBF,IAAAA,EAAK,QAAQ,kCAAkC,EAAE,GAE9CC,IAAAD,EAAK,QAAQ,iBAAiB,GAAG,IAGtCC;AACT;"}
+{"version":3,"file":"checkName.es.js","sources":["../../../../src/util/checkName.ts"],"sourcesContent":["import { EntityNaming } from '@shared/api'\nimport { snakeCase, deburr } from 'lodash'\n\nexport interface CheckNameResult {\n  valid: boolean\n  error?: string\n}\n\n// Validation ONLY: does not mutate/transform name. Returns validity + human readable error.\nexport const checkName = (name?: string | null): CheckNameResult => {\n  if (!name) return { valid: false, error: 'Name is required' }\n  if (/\\s/.test(name)) return { valid: false, error: 'Spaces are not allowed in name' }\n\n  // Allowed char set (underscore, dash, dot included)\n  const allowed = /^[a-zA-Z0-9_\\.\\-]+$/\n  if (!allowed.test(name)) {\n    return {\n      valid: false,\n      error: 'Name can only contain letters, numbers, underscores, dashes or dots',\n    }\n  }\n\n  // Leading/trailing dot or dash not allowed; underscore IS allowed\n  if (/^[.-]/.test(name)) return { valid: false, error: 'Name cannot start with dot or dash' }\n  if (/[.-]$/.test(name)) return { valid: false, error: 'Name cannot end with dot or dash' }\n\n  return { valid: true }\n}\n\n// Validation for label field: human-readable, more permissive than name\nexport const checkLabel = (label?: string | null): CheckNameResult => {\n  if (!label) return { valid: false, error: 'Label is required' }\n\n  // Check for single quote (apostrophe)\n  if (label.includes(\"'\")) {\n    return { valid: false, error: \"Label cannot contain single quotes (')\" }\n  }\n\n  return { valid: true }\n}\n\n// Formatting + validation helper replacing old behavior of checkName.\n// It will sanitize and then apply capitalization + separator rules.\nexport const parseAndFormatName = (\n  raw: string,\n  config: EntityNaming = { capitalization: 'lower', separator: '' },\n): string => {\n  const { capitalization = 'lower', separator = '' } = config\n\n  if (!raw) return ''\n\n  // trim and split by whitespace first to preserve word boundaries\n  let working = raw.trim()\n  const parts = working.split(/\\s+/).filter(Boolean)\n\n  // Remove disallowed characters from each part\n  const cleanedParts = parts\n    .map((part) => {\n      // Transliterate non-ASCII characters\n      // 1. Normalize Unicode (NFD = decomposed form)\n      // 2. Use lodash deburr to remove diacritics\n      // 3. Replace remaining non-ASCII with empty string\n      let cleaned = part.normalize('NFD')\n      cleaned = deburr(cleaned)\n\n      // Remove disallowed characters, keep _, -, .\n      cleaned = cleaned.replace(/[^a-zA-Z0-9_\\-\\.]+/g, '')\n      // Remove trailing - or .\n      cleaned = cleaned.replace(/[.-]+$/g, '')\n      return cleaned\n    })\n    .filter(Boolean)\n\n  const applyCapitalization = (segments: string[]): string[] => {\n    switch (capitalization) {\n      case 'upper':\n        return segments.map((s) => s.toUpperCase())\n      case 'pascal':\n        return segments.map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())\n      case 'camel':\n        return segments.map((s, i) =>\n          i === 0 ? s.toLowerCase() : s.charAt(0).toUpperCase() + s.slice(1).toLowerCase(),\n        )\n      case 'keep':\n        return segments\n      case 'lower':\n      default:\n        return segments.map((s) => s.toLowerCase())\n    }\n  }\n\n  const transformed = applyCapitalization(cleanedParts)\n\n  // Always join with the provided separator (can be empty string)\n  const resultBase = transformed.join(separator)\n  let result = resultBase\n\n  // final safety pass: remove leading/trailing non-alnum if any appeared\n  result = result.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g, '')\n\n  // ensure validation; if invalid, attempt fallback snake_case\n  const { valid } = checkName(result)\n  if (!valid) {\n    result = snakeCase(result)\n  }\n\n  return result\n}\n\nexport default checkName\n"],"names":["checkName","name","checkLabel","label","parseAndFormatName","raw","config","capitalization","separator","cleanedParts","part","cleaned","deburr","result","segments","s","i","valid","snakeCase"],"mappings":";AASa,MAAAA,IAAY,CAACC,MACnBA,IACD,KAAK,KAAKA,CAAI,IAAU,EAAE,OAAO,IAAO,OAAO,iCAAiC,IAGpE,sBACH,KAAKA,CAAI,IAQlB,QAAQ,KAAKA,CAAI,IAAU,EAAE,OAAO,IAAO,OAAO,qCAAqC,IACvF,QAAQ,KAAKA,CAAI,IAAU,EAAE,OAAO,IAAO,OAAO,mCAAmC,IAElF,EAAE,OAAO,GAAK,IAVZ;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AACT,IATgB,EAAE,OAAO,IAAO,OAAO,mBAAmB,GAoBjDC,IAAa,CAACC,MACpBA,IAGDA,EAAM,SAAS,GAAG,IACb,EAAE,OAAO,IAAO,OAAO,yCAAyC,IAGlE,EAAE,OAAO,GAAK,IAPF,EAAE,OAAO,IAAO,OAAO,oBAAoB,GAYnDC,IAAqB,CAChCC,GACAC,IAAuB,EAAE,gBAAgB,SAAS,WAAW,SAClD;AACX,QAAM,EAAE,gBAAAC,IAAiB,SAAS,WAAAC,IAAY,GAAO,IAAAF;AAEjD,MAAA,CAACD,EAAY,QAAA;AAOjB,QAAMI,IAJQJ,EAAI,KAAK,EACD,MAAM,KAAK,EAAE,OAAO,OAAO,EAI9C,IAAI,CAACK,MAAS;AAKT,QAAAC,IAAUD,EAAK,UAAU,KAAK;AAClC,WAAAC,IAAUC,EAAOD,CAAO,GAGdA,IAAAA,EAAQ,QAAQ,uBAAuB,EAAE,GAEzCA,IAAAA,EAAQ,QAAQ,WAAW,EAAE,GAChCA;AAAA,EAAA,CACR,EACA,OAAO,OAAO;AAwBjB,MAAIE,KAtBwB,CAACC,MAAiC;AAC5D,YAAQP,GAAgB;AAAA,MACtB,KAAK;AACH,eAAOO,EAAS,IAAI,CAACC,MAAMA,EAAE,aAAa;AAAA,MAC5C,KAAK;AACH,eAAOD,EAAS,IAAI,CAACC,MAAMA,EAAE,OAAO,CAAC,EAAE,YAAA,IAAgBA,EAAE,MAAM,CAAC,EAAE,aAAa;AAAA,MACjF,KAAK;AACH,eAAOD,EAAS;AAAA,UAAI,CAACC,GAAGC,MACtBA,MAAM,IAAID,EAAE,gBAAgBA,EAAE,OAAO,CAAC,EAAE,YAAY,IAAIA,EAAE,MAAM,CAAC,EAAE,YAAY;AAAA,QACjF;AAAA,MACF,KAAK;AACI,eAAAD;AAAA,MACT,KAAK;AAAA,MACL;AACE,eAAOA,EAAS,IAAI,CAACC,MAAMA,EAAE,aAAa;AAAA,IAAA;AAAA,EAEhD,GAEwCN,CAAY,EAGrB,KAAKD,CAAS;AAIpC,EAAAK,IAAAA,EAAO,QAAQ,kCAAkC,EAAE;AAG5D,QAAM,EAAE,OAAAI,EAAA,IAAUjB,EAAUa,CAAM;AAClC,SAAKI,MACHJ,IAASK,EAAUL,CAAM,IAGpBA;AACT;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport * as Styled from './Menu.styled'\nimport MenuList from './MenuList'\nimport { copyToClipboard } from '@shared/util'\nimport { Button } from '@ynput/ayon-react-components'\n\nconst Menu = ({ menu = [], onClose, header, footer = '' }) => {\n  const [subMenus, setSubMenus] = useState([])\n  //   When a menu item is clicked, the following happens:\n  const handleClick = (e, onClick, url, disableClose) => {\n    // this is handled by Link component inside the MenuItem\n    if (url) return onClose()\n\n    onClick && onClick(e)\n\n    !disableClose && onClose && onClose()\n  }\n\n  const onMenuEnter = (e, menu = {}) => {\n    // check to see if we need to open a submenu\n    if (menu.items.length) {\n      // yes, there is a submenu\n      // open it if it is not already open\n      if (!subMenus.find((m) => m.id === menu.id)) {\n        // also close any other submenus on the same level\n        setSubMenus([\n          ...subMenus.filter((m) => m.level < menu.level + 1),\n          { ...menu, id: menu.id, level: menu.level + 1, parentRef: e.target },\n        ])\n      }\n    } else {\n      // no items for this menu, so close all submenus on the higher levels\n      setSubMenus(subMenus.filter((m) => m.level <= menu.level))\n    }\n  }\n\n  const onMenuLeave = (e, menu = {}) => {\n    // target where we are going\n    const relatedTargetId = e.relatedTarget?.id\n    const relatedTargetSubMenu = subMenus.find((m) => m.id === relatedTargetId)\n\n    if (e.relatedTarget?.tagName === 'DIALOG') return setSubMenus([])\n\n    if (!relatedTargetSubMenu) {\n      setSubMenus(subMenus.filter((m) => m.level <= (menu.level || 0) + 1))\n    }\n    //   if (menu.items.length) {\n  }\n\n  const handleSubMenu = (e, menu = {}) => {\n    if (e.type === 'mouseenter' || e.type === 'keydown') onMenuEnter(e, menu)\n    else if (e.type === 'mouseleave') onMenuLeave(e, menu)\n  }\n\n  return (\n    <>\n      <Styled.Section>\n        {header && header}\n        <MenuList items={menu} handleClick={handleClick} onSubMenu={handleSubMenu} level={0} />\n        {footer && (\n          <Styled.Footer>\n            {footer}\n            <Button icon=\"content_copy\" variant=\"text\" onClick={() => copyToClipboard(footer)} />\n          </Styled.Footer>\n        )}\n      </Styled.Section>\n      {subMenus.map((menu, i) => (\n        <MenuList\n          key={i}\n          items={menu.items}\n          handleClick={handleClick}\n          {...menu}\n          subMenu\n          onSubMenu={handleSubMenu}\n          onClose={() => setSubMenus(subMenus.filter((m) => m.id !== menu.id))}\n          onChange={onMenuEnter}\n        />\n      ))}\n    </>\n  )\n}\n\nexport default Menu\n"],"names":["Menu","menu","onClose","header","footer","subMenus","setSubMenus","useState","handleClick","e","onClick","url","disableClose","onMenuEnter","m","onMenuLeave","relatedTargetId","_a","relatedTargetSubMenu","_b","handleSubMenu","jsxs","Fragment","Styled.Section","jsx","MenuList","Styled.Footer","Button","copyToClipboard","i"],"mappings":"mYAMMA,EAAO,CAAC,CAAE,KAAAC,EAAO,GAAI,QAAAC,EAAS,OAAAC,EAAQ,OAAAC,EAAS,MAAS,CAC5D,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAS,CAAA,CAAE,EAErCC,EAAc,CAACC,EAAGC,EAASC,EAAKC,IAAiB,CAEjD,GAAAD,SAAYT,EAAQ,EAExBQ,GAAWA,EAAQD,CAAC,EAEnB,CAAAG,GAAgBV,GAAWA,EAAQ,CACtC,EAEMW,EAAc,CAACJ,EAAGR,EAAO,CAAA,IAAO,CAEhCA,EAAK,MAAM,OAGRI,EAAS,KAAMS,GAAMA,EAAE,KAAOb,EAAK,EAAE,GAE5BK,EAAA,CACV,GAAGD,EAAS,OAAQS,GAAMA,EAAE,MAAQb,EAAK,MAAQ,CAAC,EAClD,CAAE,GAAGA,EAAM,GAAIA,EAAK,GAAI,MAAOA,EAAK,MAAQ,EAAG,UAAWQ,EAAE,MAAO,CAAA,CACpE,EAISH,EAAAD,EAAS,OAAQS,GAAMA,EAAE,OAASb,EAAK,KAAK,CAAC,CAE7D,EAEMc,EAAc,CAACN,EAAGR,EAAO,CAAA,IAAO,SAE9B,MAAAe,GAAkBC,EAAAR,EAAE,gBAAF,YAAAQ,EAAiB,GACnCC,EAAuBb,EAAS,KAAMS,GAAMA,EAAE,KAAOE,CAAe,EAE1E,KAAIG,EAAAV,EAAE,gBAAF,YAAAU,EAAiB,WAAY,SAAiB,OAAAb,EAAY,EAAE,EAE3DY,GACSZ,EAAAD,EAAS,OAAQS,GAAMA,EAAE,QAAUb,EAAK,OAAS,GAAK,CAAC,CAAC,CAGxE,EAEMmB,EAAgB,CAACX,EAAGR,EAAO,CAAA,IAAO,CAClCQ,EAAE,OAAS,cAAgBA,EAAE,OAAS,UAAWI,EAAYJ,EAAGR,CAAI,EAC/DQ,EAAE,OAAS,cAAcM,EAAYN,EAAGR,CAAI,CACvD,EAEA,OAEIoB,EAAA,kBAAA,KAAAC,6BAAA,CAAA,SAAA,CAACD,yBAAAE,EAAAA,QAAA,CACE,SAAA,CAAUpB,GAAAA,EACXqB,wBAACC,GAAS,MAAOxB,EAAM,YAAAO,EAA0B,UAAWY,EAAe,MAAO,EAAG,EACpFhB,GACCiB,EAAA,kBAAA,KAACK,SAAA,CACE,SAAA,CAAAtB,EACDoB,EAAAA,kBAAAA,IAACG,EAAO,OAAA,CAAA,KAAK,eAAe,QAAQ,OAAO,QAAS,IAAMC,kBAAgBxB,CAAM,CAAG,CAAA,CAAA,CACrF,CAAA,CAAA,EAEJ,EACCC,EAAS,IAAI,CAACJ,EAAM4B,IACnBL,EAAA,kBAAA,IAACC,EAAA,CAEC,MAAOxB,EAAK,MACZ,YAAAO,EACC,GAAGP,EACJ,QAAO,GACP,UAAWmB,EACX,QAAS,IAAMd,EAAYD,EAAS,OAAQS,GAAMA,EAAE,KAAOb,EAAK,EAAE,CAAC,EACnE,SAAUY,CAAA,EAPLgB,CASR,CAAA,CAAA,EACH,CAEJ"}
+{"version":3,"file":"Menu.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport * as Styled from './Menu.styled'\nimport MenuList from './MenuList'\nimport { copyToClipboard } from '@shared/util'\nimport { Button } from '@ynput/ayon-react-components'\nimport { useMenuContext, usePowerpack } from '@shared/context'\n\nconst Menu = ({ menu = [], onClose, header, footer = '' }) => {\n  const { setPowerpackDialog } = usePowerpack()\n  const { setMenuOpen } = useMenuContext()\n\n  const [subMenus, setSubMenus] = useState([])\n  //   When a menu item is clicked, the following happens:\n  const handleClick = (e, onClick, url, disableClose) => {\n    // this is handled by Link component inside the MenuItem\n    if (url) return onClose()\n\n    onClick && onClick(e)\n\n    !disableClose && onClose && onClose()\n  }\n\n  const onMenuEnter = (e, menu = {}) => {\n    // check to see if we need to open a submenu\n    if (menu.items.length) {\n      // yes, there is a submenu\n      // open it if it is not already open\n      if (!subMenus.find((m) => m.id === menu.id)) {\n        // also close any other submenus on the same level\n        setSubMenus([\n          ...subMenus.filter((m) => m.level < menu.level + 1),\n          { ...menu, id: menu.id, level: menu.level + 1, parentRef: e.target },\n        ])\n      }\n    } else {\n      // no items for this menu, so close all submenus on the higher levels\n      setSubMenus(subMenus.filter((m) => m.level <= menu.level))\n    }\n  }\n\n  const onMenuLeave = (e, menu = {}) => {\n    // target where we are going\n    const relatedTargetId = e.relatedTarget?.id\n    const relatedTargetSubMenu = subMenus.find((m) => m.id === relatedTargetId)\n\n    if (e.relatedTarget?.tagName === 'DIALOG') return setSubMenus([])\n\n    if (!relatedTargetSubMenu) {\n      setSubMenus(subMenus.filter((m) => m.level <= (menu.level || 0) + 1))\n    }\n    //   if (menu.items.length) {\n  }\n\n  const handleSubMenu = (e, menu = {}) => {\n    if (e.type === 'mouseenter' || e.type === 'keydown') onMenuEnter(e, menu)\n    else if (e.type === 'mouseleave') onMenuLeave(e, menu)\n  }\n\n  return (\n    <>\n      <Styled.Section>\n        {header && header}\n        <MenuList\n          items={menu}\n          handleClick={handleClick}\n          onSubMenu={handleSubMenu}\n          level={0}\n          setPowerpackDialog={setPowerpackDialog}\n          onMenuClose={() => setMenuOpen(false)}\n        />\n        {footer && (\n          <Styled.Footer>\n            {footer}\n            <Button icon=\"content_copy\" variant=\"text\" onClick={() => copyToClipboard(footer)} />\n          </Styled.Footer>\n        )}\n      </Styled.Section>\n      {subMenus.map((menu, i) => (\n        <MenuList\n          key={i}\n          items={menu.items}\n          handleClick={handleClick}\n          {...menu}\n          subMenu\n          onSubMenu={handleSubMenu}\n          onClose={() => setSubMenus(subMenus.filter((m) => m.id !== menu.id))}\n          onMenuClose={() => setMenuOpen(false)}\n          onChange={onMenuEnter}\n          setPowerpackDialog={setPowerpackDialog}\n        />\n      ))}\n    </>\n  )\n}\n\nexport default Menu\n"],"names":["Menu","menu","onClose","header","footer","setPowerpackDialog","usePowerpack","setMenuOpen","useMenuContext","subMenus","setSubMenus","useState","handleClick","e","onClick","url","disableClose","onMenuEnter","m","onMenuLeave","relatedTargetId","_a","relatedTargetSubMenu","_b","handleSubMenu","jsxs","Fragment","Styled.Section","jsx","MenuList","Styled.Footer","Button","copyToClipboard","i"],"mappings":"yoCAOMA,EAAO,CAAC,CAAE,KAAAC,EAAO,GAAI,QAAAC,EAAS,OAAAC,EAAQ,OAAAC,EAAS,MAAS,CACtD,KAAA,CAAE,mBAAAC,CAAmB,EAAIC,eAAa,EACtC,CAAE,YAAAC,CAAY,EAAIC,iBAAe,EAEjC,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAS,CAAA,CAAE,EAErCC,EAAc,CAACC,EAAGC,EAASC,EAAKC,IAAiB,CAEjD,GAAAD,SAAYb,EAAQ,EAExBY,GAAWA,EAAQD,CAAC,EAEnB,CAAAG,GAAgBd,GAAWA,EAAQ,CACtC,EAEMe,EAAc,CAACJ,EAAGZ,EAAO,CAAA,IAAO,CAEhCA,EAAK,MAAM,OAGRQ,EAAS,KAAMS,GAAMA,EAAE,KAAOjB,EAAK,EAAE,GAE5BS,EAAA,CACV,GAAGD,EAAS,OAAQS,GAAMA,EAAE,MAAQjB,EAAK,MAAQ,CAAC,EAClD,CAAE,GAAGA,EAAM,GAAIA,EAAK,GAAI,MAAOA,EAAK,MAAQ,EAAG,UAAWY,EAAE,MAAO,CAAA,CACpE,EAISH,EAAAD,EAAS,OAAQS,GAAMA,EAAE,OAASjB,EAAK,KAAK,CAAC,CAE7D,EAEMkB,EAAc,CAACN,EAAGZ,EAAO,CAAA,IAAO,SAE9B,MAAAmB,GAAkBC,EAAAR,EAAE,gBAAF,YAAAQ,EAAiB,GACnCC,EAAuBb,EAAS,KAAMS,GAAMA,EAAE,KAAOE,CAAe,EAE1E,KAAIG,EAAAV,EAAE,gBAAF,YAAAU,EAAiB,WAAY,SAAiB,OAAAb,EAAY,EAAE,EAE3DY,GACSZ,EAAAD,EAAS,OAAQS,GAAMA,EAAE,QAAUjB,EAAK,OAAS,GAAK,CAAC,CAAC,CAGxE,EAEMuB,EAAgB,CAACX,EAAGZ,EAAO,CAAA,IAAO,CAClCY,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,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,CAEC,MAAO5B,EAAK,MACZ,YAAAW,EACC,GAAGX,EACJ,QAAO,GACP,UAAWuB,EACX,QAAS,IAAMd,EAAYD,EAAS,OAAQS,GAAMA,EAAE,KAAOjB,EAAK,EAAE,CAAC,EACnE,YAAa,IAAMM,EAAY,EAAK,EACpC,SAAUU,EACV,mBAAAZ,CAAA,EATK4B,CAWR,CAAA,CAAA,EACH,CAEJ"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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