@ynput/ayon-frontend-shared 0.4.3 → 0.4.4

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

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=o.dialog`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=42,e=8,n=r+e,t=o.dialog`
   position: fixed;
   margin: 0;
   inset: 0;
-  top: 42px;
+  top: ${r}px;
   width: auto;
   height: auto;
   z-index: 1000;
@@ -20,7 +20,7 @@
     display: none;
   }
   padding-bottom: 60px;
-`,e=o.keyframes`
+`,i=o.keyframes`
     from {
         scale: 0.95;
         opacity: 0.6;
@@ -29,10 +29,11 @@
         scale: 1;
         opacity: 1;
     }
-`,n=o.div`
+`,a=o.div`
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-large);
+  min-height: 0;
 
   /* position */
   position: absolute;
@@ -42,7 +43,7 @@
   z-index: 30;
 
   /* animate */
-  animation: ${e} 0.03s ease-in forwards;
+  animation: ${i} 0.03s ease-in forwards;
 
   /* transform origin based on alignment */
   &.right {
@@ -66,10 +67,11 @@
       color: var(--md-sys-color-on-surface, #fff) !important;
     }
   }
-`,t=o.section`
+`,s=o.section`
   position: relative;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 
   padding: 0px;
   border-radius: 8px;
@@ -78,9 +80,16 @@
   color: var(--md-sys-color-on-surface);
   z-index: 10;
   overflow: hidden;
-`,i=o.div`
+`,c=o.div`
   position: relative;
   border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  & > * {
+    min-height: 0;
+  }
 
   /* sub menu */
   &.sub-menu {
@@ -92,10 +101,10 @@
 
     & > * {
       border-radius: 8px;
-      overflow: hidden;
+      overflow-x: hidden;
     }
   }
-`,a=o.menu`
+`,l=o.menu`
   /* reset defaults */
   display: flex;
   list-style-type: none;
@@ -109,6 +118,9 @@
   flex-direction: column;
   gap: var(--base-gap-large);
   padding: 8px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
 
   /* shrink the padding when compact */
   &.compact {
@@ -127,7 +139,7 @@
     opacity: 0.5;
     border-color: var(--md-sys-color-surface-container-highest);
   }
-`,s=o.li`
+`,d=o.li`
   display: flex;
   padding: 6px 16px 6px 12px;
   justify-content: flex-start;
@@ -146,6 +158,19 @@
   &:hover {
     background-color: var(--md-sys-color-surface-container-highest);
   }
+  
+  .hover-swap {
+    display: none;
+    cursor: grab;
+  }
+  &:hover {
+    .hover-swap-default {
+      display: none;
+    }
+    .hover-swap {
+      display: inline-block;
+    }
+  }
 
   .more {
     margin-left: auto;
@@ -229,11 +254,11 @@
     }
     background-color: unset;
   }
-`,c=o.img`
+`,p=o.img`
   width: 18px;
   height: 18px;
   object-fit: contain;
-`,l=o.footer`
+`,g=o.footer`
   position: relative;
   display: flex;
   padding: 8px;
@@ -262,5 +287,5 @@
       display: flex;
     }
   }
-`;exports.Dialog=r;exports.DialogContent=n;exports.Footer=l;exports.Img=c;exports.Item=s;exports.Menu=a;exports.MenuWrapper=i;exports.Section=t;
+`;exports.DIALOG_TOP_OFFSET=r;exports.Dialog=t;exports.DialogContent=a;exports.Footer=g;exports.Img=p;exports.Item=d;exports.MENU_EDGE_PADDING=e;exports.MENU_TOP_BOUND=n;exports.Menu=l;exports.MenuWrapper=c;exports.Section=s;
 //# sourceMappingURL=Menu.styled.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.styled.cjs.js","sources":["../../../../../src/components/Menu/Menu.styled.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\n// DIALOG (CONTAINER)\nexport const Dialog = styled.dialog`\n  position: fixed;\n  margin: 0;\n  inset: 0;\n  top: 42px;\n  width: auto;\n  height: auto;\n  z-index: 1000;\n  border: none;\n  background-color: unset;\n  padding: 0;\n\n  user-select: none;\n\n  overflow: auto;\n  /* remove scroll bar */\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  padding-bottom: 60px;\n`\n\nconst DialogOpenAnimation = keyframes`\n    from {\n        scale: 0.95;\n        opacity: 0.6;\n    }\n    to {\n        scale: 1;\n        opacity: 1;\n    }\n`\n\nexport const DialogContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n\n  /* position */\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: fit-content;\n  z-index: 30;\n\n  /* animate */\n  animation: ${DialogOpenAnimation} 0.03s ease-in forwards;\n\n  /* transform origin based on alignment */\n  &.right {\n    transform-origin: top right;\n  }\n  &.left {\n    transform-origin: top left;\n  }\n\n  /* add shadow to each item */\n  & > *:not(.sub-menu),\n  .sub-menu menu {\n    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);\n  }\n\n  /* theme support */\n  &.dark {\n    color: var(--md-sys-color-on-surface, #fff);\n    /* override children backgrounds if needed */\n    & > * {\n      color: var(--md-sys-color-on-surface, #fff) !important;\n    }\n  }\n`\n\n// MENULIST\nexport const Section = styled.section`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  padding: 0px;\n  border-radius: 8px;\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n  color: var(--md-sys-color-on-surface);\n  z-index: 10;\n  overflow: hidden;\n`\nexport const MenuWrapper = styled.div`\n  position: relative;\n  border-radius: 8px;\n\n  /* sub menu */\n  &.sub-menu {\n    position: absolute;\n\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,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAWfC,EAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAarBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BrBG,EAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAajBK,EAAcL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBrBM,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"}
+{"version":3,"file":"Menu.styled.cjs.js","sources":["../../../../../src/components/Menu/Menu.styled.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\n// the dialog starts below the app header, so menus positioned above it are clipped and unscrollable\nexport const DIALOG_TOP_OFFSET = 42\nexport const MENU_EDGE_PADDING = 8\n// highest viewport y a menu may occupy\nexport const MENU_TOP_BOUND = DIALOG_TOP_OFFSET + MENU_EDGE_PADDING\n\n// DIALOG (CONTAINER)\nexport const Dialog = styled.dialog`\n  position: fixed;\n  margin: 0;\n  inset: 0;\n  top: ${DIALOG_TOP_OFFSET}px;\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  min-height: 0;\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  min-height: 0;\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  display: flex;\n  flex-direction: column;\n  min-height: 0;\n\n  & > * {\n    min-height: 0;\n  }\n\n  /* sub menu */\n  &.sub-menu {\n    position: absolute;\n\n    border-radius: 8px;\n    width: max-content;\n    z-index: 30;\n\n    & > * {\n      border-radius: 8px;\n      overflow-x: 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  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\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  .hover-swap {\n    display: none;\n    cursor: grab;\n  }\n  &:hover {\n    .hover-swap-default {\n      display: none;\n    }\n    .hover-swap {\n      display: inline-block;\n    }\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_TOP_OFFSET","MENU_EDGE_PADDING","MENU_TOP_BOUND","Dialog","styled","DialogOpenAnimation","keyframes","DialogContent","Section","MenuWrapper","Menu","Item","Img","Footer"],"mappings":"qHAGaA,EAAoB,GACpBC,EAAoB,EAEpBC,EAAiBF,EAAoBC,EAGrCE,EAASC,EAAO;AAAA;AAAA;AAAA;AAAA,SAIpBJ,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBpBK,EAAsBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAWfC,EAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAcrBC,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;AAAA,EAcjBK,EAAcL,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,EA0BrBM,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;AAAA;AAAA;AAAA,EAqCdO,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqHdQ,EAAMR,EAAO;AAAA;AAAA;AAAA;AAAA,EAMbS,EAAST,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

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

@@ -1,9 +1,9 @@
-import o, { keyframes as r } from "styled-components";
-const t = o.dialog`
+import o, { keyframes as e } from "styled-components";
+const r = 42, n = 8, a = r + n, s = o.dialog`
   position: fixed;
   margin: 0;
   inset: 0;
-  top: 42px;
+  top: ${r}px;
   width: auto;
   height: auto;
   z-index: 1000;
@@ -21,7 +21,7 @@ const t = o.dialog`
     display: none;
   }
   padding-bottom: 60px;
-`, e = r`
+`, t = e`
     from {
         scale: 0.95;
         opacity: 0.6;
@@ -30,10 +30,11 @@ const t = o.dialog`
         scale: 1;
         opacity: 1;
     }
-`, i = o.div`
+`, c = o.div`
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-large);
+  min-height: 0;
 
   /* position */
   position: absolute;
@@ -43,7 +44,7 @@ const t = o.dialog`
   z-index: 30;
 
   /* animate */
-  animation: ${e} 0.03s ease-in forwards;
+  animation: ${t} 0.03s ease-in forwards;
 
   /* transform origin based on alignment */
   &.right {
@@ -67,10 +68,11 @@ const t = o.dialog`
       color: var(--md-sys-color-on-surface, #fff) !important;
     }
   }
-`, a = o.section`
+`, l = o.section`
   position: relative;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 
   padding: 0px;
   border-radius: 8px;
@@ -79,9 +81,16 @@ const t = o.dialog`
   color: var(--md-sys-color-on-surface);
   z-index: 10;
   overflow: hidden;
-`, s = o.div`
+`, d = o.div`
   position: relative;
   border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  & > * {
+    min-height: 0;
+  }
 
   /* sub menu */
   &.sub-menu {
@@ -93,10 +102,10 @@ const t = o.dialog`
 
     & > * {
       border-radius: 8px;
-      overflow: hidden;
+      overflow-x: hidden;
     }
   }
-`, c = o.menu`
+`, p = o.menu`
   /* reset defaults */
   display: flex;
   list-style-type: none;
@@ -110,6 +119,9 @@ const t = o.dialog`
   flex-direction: column;
   gap: var(--base-gap-large);
   padding: 8px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
 
   /* shrink the padding when compact */
   &.compact {
@@ -128,7 +140,7 @@ const t = o.dialog`
     opacity: 0.5;
     border-color: var(--md-sys-color-surface-container-highest);
   }
-`, l = o.li`
+`, g = o.li`
   display: flex;
   padding: 6px 16px 6px 12px;
   justify-content: flex-start;
@@ -147,6 +159,19 @@ const t = o.dialog`
   &:hover {
     background-color: var(--md-sys-color-surface-container-highest);
   }
+  
+  .hover-swap {
+    display: none;
+    cursor: grab;
+  }
+  &:hover {
+    .hover-swap-default {
+      display: none;
+    }
+    .hover-swap {
+      display: inline-block;
+    }
+  }
 
   .more {
     margin-left: auto;
@@ -230,11 +255,11 @@ const t = o.dialog`
     }
     background-color: unset;
   }
-`, d = o.img`
+`, m = o.img`
   width: 18px;
   height: 18px;
   object-fit: contain;
-`, p = o.footer`
+`, u = o.footer`
   position: relative;
   display: flex;
   padding: 8px;
@@ -265,13 +290,16 @@ const t = o.dialog`
   }
 `;
 export {
-  t as Dialog,
-  i as DialogContent,
-  p as Footer,
-  d as Img,
-  l as Item,
-  c as Menu,
-  s as MenuWrapper,
-  a as Section
+  r as DIALOG_TOP_OFFSET,
+  s as Dialog,
+  c as DialogContent,
+  u as Footer,
+  m as Img,
+  g as Item,
+  n as MENU_EDGE_PADDING,
+  a as MENU_TOP_BOUND,
+  p as Menu,
+  d as MenuWrapper,
+  l as Section
 };
 //# sourceMappingURL=Menu.styled.es.js.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs.js","sources":["../../../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { usePowerpack } from '@shared/context/PowerpackContext'\nimport type { MenuItemType } from './Menu'\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label?: string | string[]\n  icon?: string\n  img?: string\n  highlighted?: boolean\n  notification?: boolean\n  selected?: boolean\n  danger?: boolean\n  items?: MenuItemType[]\n  isLink?: string\n  isDev?: boolean\n  shortcut?: string\n  disabled?: boolean\n  powerFeature?: string\n  active?: boolean\n  target?: string\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      label,\n      icon,\n      img,\n      highlighted,\n      notification,\n      selected,\n      danger,\n      items = [],\n      className,\n      isLink,\n      isDev,\n      shortcut,\n      disabled,\n      powerFeature,\n      active,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\n    const { powerLicense } = usePowerpack()\n    const isPowerFeature = !powerLicense && powerFeature\n\n    const Item = (\n      <Styled.Item\n        ref={ref}\n        className={clsx(\n          'menu-item',\n          {\n            highlighted: highlighted,\n            selected: selected,\n            notification: notification,\n            danger: danger,\n            dev: isDev,\n            disabled: disabled,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        aria-label={labelsArray.join(', ')}\n      >\n        {(icon || isPowerFeature) && <Icon icon={isPowerFeature ? 'bolt' : icon!} />}\n        {img && <Styled.Img src={img} alt={`${label} icon`} />}\n        {labelsArray.map((label, index) => (\n          <span key={index}>{label}</span>\n        ))}\n        {shortcut && (\n          <ShortcutTag style={{ minWidth: 22, textAlign: 'center' }} align={'right'}>\n            {shortcut}\n          </ShortcutTag>\n        )}\n        {active && <Icon icon=\"check\" style={{ marginLeft: 'auto' }} />}\n\n        {!!items.length && <Icon icon=\"arrow_right\" className=\"more\" />}\n      </Styled.Item>\n    )\n\n    if (isLink) {\n      return (\n        <Link to={isLink} target={props.target}>\n          {Item}\n        </Link>\n      )\n    } else {\n      return Item\n    }\n  },\n)\n\nMenuItem.displayName = 'MenuItem'\n\nexport default MenuItem\n"],"names":["MenuItem","forwardRef","label","icon","img","highlighted","notification","selected","danger","items","className","isLink","isDev","shortcut","disabled","powerFeature","active","props","ref","labelsArray","isArray","powerLicense","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":"8RA2BMA,EAAWC,EAAAA,WACf,CACE,CACE,MAAAC,EACA,KAAAC,EACA,IAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,CAAA,EACR,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAcC,EAAAA,QAAQlB,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAC7C,CAAE,aAAAmB,CAAA,EAAiBC,eAAA,EACnBC,EAAiB,CAACF,GAAgBN,EAElCS,EACJC,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,IAAAR,EACA,UAAWS,EACT,YACA,CACE,YAAAtB,EACA,SAAAE,EACA,aAAAD,EACA,OAAAE,EACA,IAAKI,EACL,SAAAE,EACA,MAAOS,CAAA,EAETb,CAAA,EAED,GAAGO,EACJ,aAAYE,EAAY,KAAK,IAAI,EAE/B,SAAA,EAAAhB,GAAQoB,IAAmBK,EAAAA,kBAAAA,IAACC,EAAAA,KAAA,CAAK,KAAMN,EAAiB,OAASpB,EAAO,EACzEC,GAAOwB,EAAAA,kBAAAA,IAACE,MAAA,CAAW,IAAK1B,EAAK,IAAK,GAAGF,CAAK,QAAS,EACnDiB,EAAY,IAAI,CAACjB,EAAO6B,4BACtB,OAAA,CAAkB,SAAA7B,CAAAA,EAAR6B,CAAc,CAC1B,EACAlB,GACCe,EAAAA,kBAAAA,IAACI,EAAAA,YAAA,CAAY,MAAO,CAAE,SAAU,GAAI,UAAW,QAAA,EAAY,MAAO,QAC/D,SAAAnB,CAAA,CACH,EAEDG,2BAAWa,EAAAA,KAAA,CAAK,KAAK,QAAQ,MAAO,CAAE,WAAY,MAAA,EAAU,EAE5D,CAAC,CAACpB,EAAM,gCAAWoB,EAAAA,KAAA,CAAK,KAAK,cAAc,UAAU,MAAA,CAAO,CAAA,CAAA,CAAA,EAIjE,OAAIlB,0BAECsB,EAAAA,KAAA,CAAK,GAAItB,EAAQ,OAAQM,EAAM,OAC7B,SAAAO,EACH,EAGKA,CAEX,CACF,EAEAxB,EAAS,YAAc"}
+{"version":3,"file":"MenuItem.cjs.js","sources":["../../../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { usePowerpack } from '@shared/context/PowerpackContext'\nimport type { MenuItemType } from './Menu'\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label?: string | string[]\n  icon?: string\n  hoverIcon?: string\n  img?: string\n  highlighted?: boolean\n  notification?: boolean\n  selected?: boolean\n  danger?: boolean\n  items?: MenuItemType[]\n  isLink?: string\n  isDev?: boolean\n  shortcut?: string\n  disabled?: boolean\n  powerFeature?: string\n  active?: boolean\n  // keeps the checkmark slot when unchecked so toggling doesn't resize the menu\n  reserveActiveSlot?: boolean\n  target?: string\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      label,\n      icon,\n      hoverIcon,\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      reserveActiveSlot,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\n    const { powerLicense } = usePowerpack()\n    const isPowerFeature = !powerLicense && powerFeature\n\n    const Item = (\n      <Styled.Item\n        ref={ref}\n        className={clsx(\n          'menu-item',\n          {\n            highlighted: highlighted,\n            selected: selected,\n            notification: notification,\n            danger: danger,\n            dev: isDev,\n            disabled: disabled,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        aria-label={labelsArray.join(', ')}\n      >\n        {(icon || isPowerFeature) && (\n          <Icon\n            icon={isPowerFeature ? 'bolt' : icon!}\n            className={hoverIcon && !isPowerFeature ? 'hover-swap-default' : undefined}\n          />\n        )}\n        {hoverIcon && !isPowerFeature && <Icon icon={hoverIcon} className=\"hover-swap\" />}\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 || reserveActiveSlot) && (\n          <Icon\n            icon=\"check\"\n            style={{ marginLeft: 'auto', visibility: active ? 'visible' : 'hidden' }}\n          />\n        )}\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","hoverIcon","img","highlighted","notification","selected","danger","items","className","isLink","isDev","shortcut","disabled","powerFeature","active","reserveActiveSlot","props","ref","labelsArray","isArray","powerLicense","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":"8RA8BMA,EAAWC,EAAAA,WACf,CACE,CACE,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,IAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,CAAA,EACR,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,kBAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAcC,EAAAA,QAAQpB,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAC7C,CAAE,aAAAqB,CAAA,EAAiBC,eAAA,EACnBC,EAAiB,CAACF,GAAgBP,EAElCU,EACJC,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,IAAAR,EACA,UAAWS,EACT,YACA,CACE,YAAAvB,EACA,SAAAE,EACA,aAAAD,EACA,OAAAE,EACA,IAAKI,EACL,SAAAE,EACA,MAAOU,CAAA,EAETd,CAAA,EAED,GAAGQ,EACJ,aAAYE,EAAY,KAAK,IAAI,EAE/B,SAAA,EAAAlB,GAAQsB,IACRK,EAAAA,kBAAAA,IAACC,EAAAA,KAAA,CACC,KAAMN,EAAiB,OAAStB,EAChC,UAAWC,GAAa,CAACqB,EAAiB,qBAAuB,MAAA,CAAA,EAGpErB,GAAa,CAACqB,GAAkBK,EAAAA,kBAAAA,IAACC,EAAAA,MAAK,KAAM3B,EAAW,UAAU,aAAa,EAC9EC,GAAOyB,EAAAA,kBAAAA,IAACE,MAAA,CAAW,IAAK3B,EAAK,IAAK,GAAGH,CAAK,QAAS,EACnDmB,EAAY,IAAI,CAACnB,EAAO+B,4BACtB,OAAA,CAAkB,SAAA/B,CAAAA,EAAR+B,CAAc,CAC1B,EACAnB,GACCgB,EAAAA,kBAAAA,IAACI,EAAAA,YAAA,CAAY,MAAO,CAAE,SAAU,GAAI,UAAW,QAAA,EAAY,MAAO,QAC/D,SAAApB,CAAA,CACH,GAEAG,GAAUC,IACVY,EAAAA,kBAAAA,IAACC,EAAAA,KAAA,CACC,KAAK,QACL,MAAO,CAAE,WAAY,OAAQ,WAAYd,EAAS,UAAY,QAAA,CAAS,CAAA,EAI1E,CAAC,CAACP,EAAM,gCAAWqB,EAAAA,KAAA,CAAK,KAAK,cAAc,UAAU,MAAA,CAAO,CAAA,CAAA,CAAA,EAIjE,OAAInB,0BAECuB,EAAAA,KAAA,CAAK,GAAIvB,EAAQ,OAAQO,EAAM,OAC7B,SAAAO,EACH,EAGKA,CAEX,CACF,EAEA1B,EAAS,YAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.es.js","sources":["../../../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { usePowerpack } from '@shared/context/PowerpackContext'\nimport type { MenuItemType } from './Menu'\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label?: string | string[]\n  icon?: string\n  img?: string\n  highlighted?: boolean\n  notification?: boolean\n  selected?: boolean\n  danger?: boolean\n  items?: MenuItemType[]\n  isLink?: string\n  isDev?: boolean\n  shortcut?: string\n  disabled?: boolean\n  powerFeature?: string\n  active?: boolean\n  target?: string\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      label,\n      icon,\n      img,\n      highlighted,\n      notification,\n      selected,\n      danger,\n      items = [],\n      className,\n      isLink,\n      isDev,\n      shortcut,\n      disabled,\n      powerFeature,\n      active,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\n    const { powerLicense } = usePowerpack()\n    const isPowerFeature = !powerLicense && powerFeature\n\n    const Item = (\n      <Styled.Item\n        ref={ref}\n        className={clsx(\n          'menu-item',\n          {\n            highlighted: highlighted,\n            selected: selected,\n            notification: notification,\n            danger: danger,\n            dev: isDev,\n            disabled: disabled,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        aria-label={labelsArray.join(', ')}\n      >\n        {(icon || isPowerFeature) && <Icon icon={isPowerFeature ? 'bolt' : icon!} />}\n        {img && <Styled.Img src={img} alt={`${label} icon`} />}\n        {labelsArray.map((label, index) => (\n          <span key={index}>{label}</span>\n        ))}\n        {shortcut && (\n          <ShortcutTag style={{ minWidth: 22, textAlign: 'center' }} align={'right'}>\n            {shortcut}\n          </ShortcutTag>\n        )}\n        {active && <Icon icon=\"check\" style={{ marginLeft: 'auto' }} />}\n\n        {!!items.length && <Icon icon=\"arrow_right\" className=\"more\" />}\n      </Styled.Item>\n    )\n\n    if (isLink) {\n      return (\n        <Link to={isLink} target={props.target}>\n          {Item}\n        </Link>\n      )\n    } else {\n      return Item\n    }\n  },\n)\n\nMenuItem.displayName = 'MenuItem'\n\nexport default MenuItem\n"],"names":["MenuItem","forwardRef","label","icon","img","highlighted","notification","selected","danger","items","className","isLink","isDev","shortcut","disabled","powerFeature","active","props","ref","labelsArray","isArray","powerLicense","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":";;;;;;;;AA2BA,MAAMA,IAAWC;AAAA,EACf,CACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,KAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ,CAAA;AAAA,IACR,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAcC,EAAQlB,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAC7C,EAAE,cAAAmB,EAAA,IAAiBC,EAAA,GACnBC,IAAiB,CAACF,KAAgBN,GAElCS,IACJC,gBAAAA,EAAAA;AAAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,WAAWS;AAAA,UACT;AAAA,UACA;AAAA,YACE,aAAAtB;AAAA,YACA,UAAAE;AAAA,YACA,cAAAD;AAAA,YACA,QAAAE;AAAA,YACA,KAAKI;AAAA,YACL,UAAAE;AAAA,YACA,OAAOS;AAAA,UAAA;AAAA,UAETb;AAAA,QAAA;AAAA,QAED,GAAGO;AAAA,QACJ,cAAYE,EAAY,KAAK,IAAI;AAAA,QAE/B,UAAA;AAAA,WAAAhB,KAAQoB,MAAmBK,gBAAAA,EAAAA,IAACC,GAAA,EAAK,MAAMN,IAAiB,SAASpB,GAAO;AAAA,UACzEC,KAAOwB,gBAAAA,EAAAA,IAACE,GAAA,EAAW,KAAK1B,GAAK,KAAK,GAAGF,CAAK,SAAS;AAAA,UACnDiB,EAAY,IAAI,CAACjB,GAAO6B,4BACtB,QAAA,EAAkB,UAAA7B,EAAAA,GAAR6B,CAAc,CAC1B;AAAA,UACAlB,KACCe,gBAAAA,EAAAA,IAACI,GAAA,EAAY,OAAO,EAAE,UAAU,IAAI,WAAW,SAAA,GAAY,OAAO,SAC/D,UAAAnB,EAAA,CACH;AAAA,UAEDG,2BAAWa,GAAA,EAAK,MAAK,SAAQ,OAAO,EAAE,YAAY,OAAA,GAAU;AAAA,UAE5D,CAAC,CAACpB,EAAM,gCAAWoB,GAAA,EAAK,MAAK,eAAc,WAAU,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIjE,WAAIlB,0BAECsB,GAAA,EAAK,IAAItB,GAAQ,QAAQM,EAAM,QAC7B,UAAAO,GACH,IAGKA;AAAAA,EAEX;AACF;AAEAxB,EAAS,cAAc;"}
+{"version":3,"file":"MenuItem.es.js","sources":["../../../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport { usePowerpack } from '@shared/context/PowerpackContext'\nimport type { MenuItemType } from './Menu'\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label?: string | string[]\n  icon?: string\n  hoverIcon?: string\n  img?: string\n  highlighted?: boolean\n  notification?: boolean\n  selected?: boolean\n  danger?: boolean\n  items?: MenuItemType[]\n  isLink?: string\n  isDev?: boolean\n  shortcut?: string\n  disabled?: boolean\n  powerFeature?: string\n  active?: boolean\n  // keeps the checkmark slot when unchecked so toggling doesn't resize the menu\n  reserveActiveSlot?: boolean\n  target?: string\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      label,\n      icon,\n      hoverIcon,\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      reserveActiveSlot,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\n    const { powerLicense } = usePowerpack()\n    const isPowerFeature = !powerLicense && powerFeature\n\n    const Item = (\n      <Styled.Item\n        ref={ref}\n        className={clsx(\n          'menu-item',\n          {\n            highlighted: highlighted,\n            selected: selected,\n            notification: notification,\n            danger: danger,\n            dev: isDev,\n            disabled: disabled,\n            power: isPowerFeature,\n          },\n          className,\n        )}\n        {...props}\n        aria-label={labelsArray.join(', ')}\n      >\n        {(icon || isPowerFeature) && (\n          <Icon\n            icon={isPowerFeature ? 'bolt' : icon!}\n            className={hoverIcon && !isPowerFeature ? 'hover-swap-default' : undefined}\n          />\n        )}\n        {hoverIcon && !isPowerFeature && <Icon icon={hoverIcon} className=\"hover-swap\" />}\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 || reserveActiveSlot) && (\n          <Icon\n            icon=\"check\"\n            style={{ marginLeft: 'auto', visibility: active ? 'visible' : 'hidden' }}\n          />\n        )}\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","hoverIcon","img","highlighted","notification","selected","danger","items","className","isLink","isDev","shortcut","disabled","powerFeature","active","reserveActiveSlot","props","ref","labelsArray","isArray","powerLicense","usePowerpack","isPowerFeature","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":";;;;;;;;AA8BA,MAAMA,IAAWC;AAAA,EACf,CACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,KAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ,CAAA;AAAA,IACR,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAcC,EAAQpB,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAC7C,EAAE,cAAAqB,EAAA,IAAiBC,EAAA,GACnBC,IAAiB,CAACF,KAAgBP,GAElCU,IACJC,gBAAAA,EAAAA;AAAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,WAAWS;AAAA,UACT;AAAA,UACA;AAAA,YACE,aAAAvB;AAAA,YACA,UAAAE;AAAA,YACA,cAAAD;AAAA,YACA,QAAAE;AAAA,YACA,KAAKI;AAAA,YACL,UAAAE;AAAA,YACA,OAAOU;AAAA,UAAA;AAAA,UAETd;AAAA,QAAA;AAAA,QAED,GAAGQ;AAAA,QACJ,cAAYE,EAAY,KAAK,IAAI;AAAA,QAE/B,UAAA;AAAA,WAAAlB,KAAQsB,MACRK,gBAAAA,EAAAA;AAAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAMN,IAAiB,SAAStB;AAAA,cAChC,WAAWC,KAAa,CAACqB,IAAiB,uBAAuB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGpErB,KAAa,CAACqB,KAAkBK,gBAAAA,EAAAA,IAACC,KAAK,MAAM3B,GAAW,WAAU,cAAa;AAAA,UAC9EC,KAAOyB,gBAAAA,EAAAA,IAACE,GAAA,EAAW,KAAK3B,GAAK,KAAK,GAAGH,CAAK,SAAS;AAAA,UACnDmB,EAAY,IAAI,CAACnB,GAAO+B,4BACtB,QAAA,EAAkB,UAAA/B,EAAAA,GAAR+B,CAAc,CAC1B;AAAA,UACAnB,KACCgB,gBAAAA,EAAAA,IAACI,GAAA,EAAY,OAAO,EAAE,UAAU,IAAI,WAAW,SAAA,GAAY,OAAO,SAC/D,UAAApB,EAAA,CACH;AAAA,WAEAG,KAAUC,MACVY,gBAAAA,EAAAA;AAAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,EAAE,YAAY,QAAQ,YAAYd,IAAS,YAAY,SAAA;AAAA,YAAS;AAAA,UAAA;AAAA,UAI1E,CAAC,CAACP,EAAM,gCAAWqB,GAAA,EAAK,MAAK,eAAc,WAAU,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIjE,WAAInB,0BAECuB,GAAA,EAAK,IAAIvB,GAAQ,QAAQO,EAAM,QAC7B,UAAAO,GACH,IAGKA;AAAAA,EAEX;AACF;AAEA1B,EAAS,cAAc;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../../../../_virtual/jsx-runtime.cjs.js"),I=require("react"),it=require("./MenuItem.cjs.js"),st=require("@ynput/ayon-react-components"),O=require("./Menu.styled.cjs.js"),rt=require("../../context/PowerpackContext.cjs.js"),ct=({items:V,handleClick:W,onSubMenu:H,onSubMenuLayout:T,subMenu:u,level:A,id:S="root-menu",parentRef:C,style:a,placement:k,onClose:K,onMenuClose:_,itemClassName:Y,itemStyle:z,setPowerpackDialog:G,...J})=>{const D=I.useRef({}),L=I.useRef(null),j=(e,d,g)=>{const h=D.current[d],m=L.current;if(!h||!m)return;const w=(m.offsetParent??document.body).getBoundingClientRect(),p=h.getBoundingClientRect(),n=(m.querySelector("menu")??m).getBoundingClientRect(),v=window.innerWidth,M=window.innerHeight,o=8,r=Math.max(240,n.width),b=Math.min(g.length*36+16,480),R=4,i=()=>Math.max(o,n.left-r-R),x=()=>n.right+R,E=x()+r<=v-o,t=i()>=o;let c,l;k==="left"&&t?(c="left",l=i()):E?(c="right",l=x()):t?(c="left",l=i()):(c="left",l=Math.max(o,v-r-o));let f=p.top-8;f+b>M-o&&(f=Math.max(o,M-b-o));const q=c==="left"?l-16:l;H?.(e,{id:d,style:{top:f-w.top,left:q-w.left},items:g,level:A,placement:c,parentEl:h})},Q=e=>{u&&H?.(e,{id:"parent",items:[]})};return I.useEffect(()=>{u&&L.current&&L.current.querySelectorAll("li, button")[0]?.focus()},[u]),I.useLayoutEffect(()=>{if(!u||!L.current||!C||!T||!S)return;const e=L.current,d=C,g=d.closest(".menu-list, .sub-menu");if(!g)return;const h=e.querySelector("menu")??e,m=g.querySelector("menu")??g,w=(e.offsetParent??document.body).getBoundingClientRect(),p=e.getBoundingClientRect(),s=h.getBoundingClientRect(),n=m.getBoundingClientRect(),v=d.getBoundingClientRect(),M=s.left-p.left,o=s.width,r=s.height,b=window.innerWidth,R=window.innerHeight,i=8,x=4,E=()=>Math.max(i,n.left-o-x),t=()=>n.right+x,c=t()+o<=b-i,l=E()>=i;let P,f;k==="left"&&l?(P="left",f=E()):c?(P="right",f=t()):l?(P="left",f=E()):(P="left",f=Math.max(i,b-o-i));const q=h.querySelector(":scope > li")?.getBoundingClientRect(),X=v.top,Z=q?q.top:p.top+8,tt=X-Z;let F=p.top+tt;F+r>R-i&&(F=Math.max(i,R-r-i));const et=P==="left"?f-M:f,$=F-w.top,N=et-w.left,nt=typeof a?.top=="number"?a.top:parseFloat(String(a?.top)),ot=typeof a?.left=="number"?a.left:parseFloat(String(a?.left));(Math.abs($-nt)>1||Math.abs(N-ot)>1)&&T(S,{top:$,left:N},P)},[u,V,C,S,k,a?.top,a?.left,T]),y.jsxRuntimeExports.jsx(O.MenuWrapper,{style:{paddingLeft:u?16:0,...a},className:u?"sub-menu":"menu-list",id:S,onMouseLeave:Q,...J,ref:L,children:y.jsxRuntimeExports.jsx(O.Menu,{children:V.filter(e=>!e.hidden).map((e,d)=>{if(e.node)return e.node;if(e?.id==="divider"||e?.separator)return y.jsxRuntimeExports.jsx("hr",{},d);const{label:g,icon:h,img:m,highlighted:B,onClick:w,link:p,items:s=[],id:n,disableClose:v,selected:M,disabled:o,powerFeature:r,active:b,...R}=e,{powerLicense:i}=rt.usePowerpack(),x=!i&&r,E=t=>{t.preventDefault(),t.stopPropagation(),r&&G?.(r),_?.()};return y.jsxRuntimeExports.jsx(it,{tabIndex:0,label:g,icon:h,img:m,highlighted:B,items:s,selected:M,disabled:o,powerFeature:r,active:b,isLink:p,onClick:t=>x?E(t):s.length?j(t,n,s):W(t,w,p,v),onKeyDown:t=>{t.key==="Enter"&&(x?E(t):s.length?j(t,n,s):W(t,w,p));const c=!t.target.nextSibling;t.key==="Tab"&&c&&!t.shiftKey&&(t.preventDefault(),t.stopPropagation(),L.current?.querySelectorAll("li, button")[0]?.focus()),t.key==="Escape"&&u&&C&&(t.preventDefault(),t.stopPropagation(),C.focus(),K?.(n))},style:{paddingRight:s.length?"0":"16px",...z},ref:t=>D.current[n]=t,onMouseEnter:t=>j(t,n,s),onMouseLeave:t=>j(t,n,[]),className:`${Y} ${R.className||""}`,...R,children:!!s.length&&y.jsxRuntimeExports.jsx(st.Icon,{icon:"arrow_right",style:{marginLeft:"auto"}})},`${n}-${d}`)})})})};exports.MenuList=ct;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("../../../../_virtual/jsx-runtime.cjs.js"),q=require("react"),st=require("./MenuItem.cjs.js"),rt=require("@ynput/ayon-react-components"),y=require("./Menu.styled.cjs.js"),ct=require("../../context/PowerpackContext.cjs.js"),lt=({items:k,handleClick:D,onSubMenu:U,onSubMenuLayout:N,subMenu:d,level:A,id:B="root-menu",parentRef:S,parentEl:ft,style:l,placement:O,onClose:K,onMenuClose:Y,itemClassName:z,itemStyle:G,setPowerpackDialog:J,...Q})=>{const F=q.useRef({}),P=q.useRef(null),j=(e,g,h)=>{const f=F.current[g],m=P.current;if(!f||!m)return;const w=(m.offsetParent??document.body).getBoundingClientRect(),a=f.getBoundingClientRect(),i=(m.querySelector("menu")??m).getBoundingClientRect(),v=window.innerWidth,x=window.innerHeight,n=8,c=Math.max(240,i.width),p=Math.min(h.length*36+16,x-y.MENU_TOP_BOUND-n),s=4,u=()=>Math.max(n,i.left-c-s),R=()=>i.right+s,L=R()+c<=v-n,M=u()>=n;let t,o;O==="left"&&M?(t="left",o=u()):L?(t="right",o=R()):M?(t="left",o=u()):(t="left",o=Math.max(n,v-c-n));let b=a.top-8;b+p>x-n&&(b=x-p-n),b=Math.max(y.MENU_TOP_BOUND,b);const I=t==="left"?o-16:o;U?.(e,{id:g,style:{top:b-w.top,left:I-w.left,maxHeight:x-b-n},items:h,level:A,placement:t,parentEl:f})},X=e=>{d&&U?.(e,{id:"parent",items:[]})};return q.useEffect(()=>{d&&P.current&&P.current.querySelectorAll("li, button")[0]?.focus()},[d]),q.useLayoutEffect(()=>{if(!d||!P.current||!S||!N||!B)return;const e=P.current,g=S,h=g.closest(".menu-list, .sub-menu");if(!h)return;const f=e.querySelector("menu")??e,m=h.querySelector("menu")??h,w=(e.offsetParent??document.body).getBoundingClientRect(),a=e.getBoundingClientRect(),r=f.getBoundingClientRect(),i=m.getBoundingClientRect(),v=g.getBoundingClientRect(),x=r.left-a.left,n=r.width,c=window.innerWidth,p=window.innerHeight,s=8,u=4,R=()=>Math.max(s,i.left-n-u),L=()=>i.right+u,M=L()+n<=c-s,t=R()>=s;let o,E;O==="left"&&t?(o="left",E=R()):M?(o="right",E=L()):t?(o="left",E=R()):(o="left",E=Math.max(s,c-n-s));const H=f.querySelector(":scope > li")?.getBoundingClientRect(),I=v.top,Z=H?H.top:a.top+8,tt=I-Z,V=f.scrollHeight;let C=a.top+tt;if(C+V>p-s){const it=Math.min(V,p-y.MENU_TOP_BOUND-s);C=p-it-s}C=Math.max(y.MENU_TOP_BOUND,C);const et=o==="left"?E-x:E,W=C-w.top,$=et-w.left,nt=typeof l?.top=="number"?l.top:parseFloat(String(l?.top)),ot=typeof l?.left=="number"?l.left:parseFloat(String(l?.left));(Math.abs(W-nt)>1||Math.abs($-ot)>1)&&N(B,{top:W,left:$,maxHeight:p-C-s},o)},[d,k,S,B,O,l?.top,l?.left,N]),T.jsxRuntimeExports.jsx(y.MenuWrapper,{style:{paddingLeft:d?16:0,...l},className:d?"sub-menu":"menu-list",id:B,onMouseLeave:X,...Q,ref:P,children:T.jsxRuntimeExports.jsx(y.Menu,{children:k.filter(e=>!e.hidden).map((e,g)=>{if(e.node)return e.node;if(e?.id==="divider"||e?.separator)return T.jsxRuntimeExports.jsx("hr",{},g);const{label:h,icon:f,img:m,highlighted:_,onClick:w,link:a,items:r=[],id:i,disableClose:v,selected:x,disabled:n,powerFeature:c,active:p,reserveActiveSlot:s,...u}=e,{powerLicense:R}=ct.usePowerpack(),L=!R&&c,M=t=>{t.preventDefault(),t.stopPropagation(),c&&J?.(c),Y?.()};return T.jsxRuntimeExports.jsx(st,{tabIndex:0,label:h,icon:f,img:m,highlighted:_,items:r,selected:x,disabled:n,powerFeature:c,active:p,reserveActiveSlot:s,isLink:a,onClick:t=>L?M(t):r.length?j(t,i,r):D(t,w,a,v),onKeyDown:t=>{t.key==="Enter"&&(L?M(t):r.length?j(t,i,r):D(t,w,a));const o=!t.target.nextSibling;t.key==="Tab"&&o&&!t.shiftKey&&(t.preventDefault(),t.stopPropagation(),P.current?.querySelectorAll("li, button")[0]?.focus()),t.key==="Escape"&&d&&S&&(t.preventDefault(),t.stopPropagation(),S.focus(),K?.(i))},style:{paddingRight:r.length?"0":"16px",...G},ref:t=>F.current[i]=t,onMouseEnter:t=>j(t,i,r),onMouseLeave:t=>j(t,i,[]),className:`${z} ${u.className||""}`,...u,children:!!r.length&&T.jsxRuntimeExports.jsx(rt.Icon,{icon:"arrow_right",style:{marginLeft:"auto"}})},`${i}-${g}`)})})})};exports.MenuList=lt;
 //# sourceMappingURL=MenuList.cjs.js.map