@ynput/ayon-frontend-shared 0.4.0 → 0.4.2

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

@@ -1 +1 @@
-{"version":3,"file":"MenuList.cjs.js","sources":["../../../../../src/components/Menu/MenuList.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react'\nimport MenuItem from './MenuItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './Menu.styled'\nimport { PowerpackFeature, usePowerpack } from '@shared/context'\nimport type { MenuItemType } from './Menu'\n\ninterface MenuListProps {\n  items: MenuItemType[]\n  handleClick: (\n    e: React.MouseEvent,\n    onClick?: (e: React.MouseEvent) => void,\n    url?: string,\n    disableClose?: boolean,\n  ) => void\n  onSubMenu?: (e: React.MouseEvent, menu: any) => void\n  /** Called by a sub-menu after it mounts, with its real measured style. Lets the parent\n   *  refit using actual width/height instead of the open-time estimate. */\n  onSubMenuLayout?: (id: string, style: React.CSSProperties, placement: 'left' | 'right') => void\n  subMenu?: boolean\n  level: number\n  id?: string\n  parentRef?: HTMLElement | null\n  style?: React.CSSProperties\n  /** Placement of THIS menu relative to its parent. Inherited by descendants so once\n   *  a chain flips to one side it stays there. */\n  placement?: 'left' | 'right'\n  onClose?: (id?: string) => void\n  onMenuClose?: () => void\n  itemClassName?: string\n  itemStyle?: React.CSSProperties\n  setPowerpackDialog?: (feature: PowerpackFeature) => void\n  [key: string]: any\n}\n\nexport const MenuList: React.FC<MenuListProps> = ({\n  items,\n  handleClick,\n  onSubMenu,\n  onSubMenuLayout,\n  subMenu,\n  level,\n  id = 'root-menu',\n  parentRef,\n  style,\n  placement,\n  onClose,\n  onMenuClose,\n  itemClassName,\n  itemStyle,\n  setPowerpackDialog,\n  ...props\n}) => {\n  const itemRefs = useRef<{ [key: string]: HTMLElement | null }>({})\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const handleSubMenu = (e: React.MouseEvent, id: string, items: MenuItemType[]) => {\n    const itemEl = itemRefs.current[id]\n    const parentMenuEl = menuRef.current\n    if (!itemEl || !parentMenuEl) return\n\n    // Sub-menus render absolute inside DialogContent. Compute viewport-anchored coords\n    // from this item's bounding rect, then translate into the offsetParent's coord space.\n    // Each level computes independently — no inherited offsets that drift across depth.\n    const offsetParent = (parentMenuEl.offsetParent as HTMLElement | null) ?? document.body\n    const offsetParentRect = offsetParent.getBoundingClientRect()\n    const itemRect = itemEl.getBoundingClientRect()\n    // Use the visible inner <menu> element if present — the wrapper has 16px paddingLeft\n    // for sub-menus which would otherwise produce a phantom gap on flip-left chains.\n    const parentVisibleEl = (parentMenuEl.querySelector('menu') as HTMLElement | null) ?? parentMenuEl\n    const parentVisibleRect = parentVisibleEl.getBoundingClientRect()\n\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n    const padding = 8\n    // Use the parent's visible width as the initial estimate — sub-menus tend to be\n    // similar size or smaller. Falls back to 240 if parent is unusually narrow.\n    const estimatedWidth = Math.max(240, parentVisibleRect.width)\n    const estimatedHeight = Math.min(items.length * 36 + 16, 480)\n\n    // Choose horizontal placement. If an ancestor sub-menu has already flipped to the\n    // left, every descendant sub-menu also goes left — DetailsPanel scenarios put the\n    // root menu near the right edge of the screen, so flipping flip-flop on each level\n    // would push deep menus back into the panel content.\n    const gap = 4\n    const computeLeftSide = () => Math.max(padding, parentVisibleRect.left - estimatedWidth - gap)\n    const computeRightSide = () => parentVisibleRect.right + gap\n    const fitsRight = computeRightSide() + estimatedWidth <= viewportWidth - padding\n    const fitsLeft = computeLeftSide() >= padding\n\n    let nextPlacement: 'left' | 'right'\n    let viewportLeft: number\n    if (placement === 'left' && fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else if (fitsRight) {\n      nextPlacement = 'right'\n      viewportLeft = computeRightSide()\n    } else if (fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else {\n      // Neither side fits cleanly — clamp to viewport, prefer left.\n      nextPlacement = 'left'\n      viewportLeft = Math.max(padding, viewportWidth - estimatedWidth - padding)\n    }\n\n    // Align first sub-menu item with the hovered parent item. The visible <menu> has\n    // 8px top padding, so the wrapper top sits 8px above the item top.\n    const innerTopOffset = 8\n    let viewportTop = itemRect.top - innerTopOffset\n    if (viewportTop + estimatedHeight > viewportHeight - padding) {\n      viewportTop = Math.max(padding, viewportHeight - estimatedHeight - padding)\n    }\n\n    // Sub-menu wrappers carry 16px paddingLeft (so their wrapper rect is wider than\n    // the visible menu). When we anchor on the LEFT side, the visible menu sits 16px\n    // inside the wrapper — pull the wrapper left so the visible right edge lines up\n    // with parentVisibleRect.left.\n    const subMenuPaddingLeft = 16\n    const wrapperLeft = nextPlacement === 'left' ? viewportLeft - subMenuPaddingLeft : viewportLeft\n\n    onSubMenu?.(e, {\n      id,\n      style: {\n        top: viewportTop - offsetParentRect.top,\n        left: wrapperLeft - offsetParentRect.left,\n      },\n      items,\n      level: level,\n      placement: nextPlacement,\n      // Pass the actual menu-item element so sub-menu measurement uses the <li>\n      // instead of whatever inner span the mouse event bubbled from.\n      parentEl: itemEl,\n    })\n  }\n\n  const handleMouseLeave = (e: React.MouseEvent) => {\n    if (subMenu) {\n      onSubMenu?.(e, { id: 'parent', items: [] })\n    }\n  }\n\n  //   when a subMenu open, set focus on the first item\n  useEffect(() => {\n    if (subMenu && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n      first?.focus()\n    }\n  }, [subMenu])\n\n  // Sub-menus open with an estimated width — once mounted, measure for real and refit.\n  // Reuses the same flip/clamp rules as handleSubMenu but with the actual rendered size.\n  useLayoutEffect(() => {\n    if (!subMenu || !menuRef.current || !parentRef || !onSubMenuLayout || !id) return\n    const wrapperEl = menuRef.current\n    const parentItemEl = parentRef\n    const parentMenuEl = parentItemEl.closest('.menu-list, .sub-menu') as HTMLElement | null\n    if (!parentMenuEl) return\n    // Measure visible boxes (the inner <menu> tag), not wrappers. Sub-menu wrappers\n    // carry 16px paddingLeft which inflates the rect on the left side and would\n    // otherwise produce phantom gaps when flipping left.\n    const ownVisibleEl = (wrapperEl.querySelector('menu') as HTMLElement | null) ?? wrapperEl\n    const parentVisibleEl = (parentMenuEl.querySelector('menu') as HTMLElement | null) ?? parentMenuEl\n\n    const offsetParent = (wrapperEl.offsetParent as HTMLElement | null) ?? document.body\n    const offsetParentRect = offsetParent.getBoundingClientRect()\n    const wrapperRect = wrapperEl.getBoundingClientRect()\n    const ownVisibleRect = ownVisibleEl.getBoundingClientRect()\n    const parentVisibleRect = parentVisibleEl.getBoundingClientRect()\n    const parentItemRect = parentItemEl.getBoundingClientRect()\n\n    // Some wrappers have 16px left padding (sub-menus). Track it so we can place the\n    // wrapper such that the visible-menu edge — not the wrapper edge — lines up.\n    const subMenuPaddingLeft = ownVisibleRect.left - wrapperRect.left\n    const visibleWidth = ownVisibleRect.width\n    const visibleHeight = ownVisibleRect.height\n\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n    const padding = 8\n\n    const gap = 4\n    const computeLeftSide = () => Math.max(padding, parentVisibleRect.left - visibleWidth - gap)\n    const computeRightSide = () => parentVisibleRect.right + gap\n    const fitsRight = computeRightSide() + visibleWidth <= viewportWidth - padding\n    const fitsLeft = computeLeftSide() >= padding\n\n    let nextPlacement: 'left' | 'right'\n    let viewportLeft: number\n    if (placement === 'left' && fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else if (fitsRight) {\n      nextPlacement = 'right'\n      viewportLeft = computeRightSide()\n    } else if (fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else {\n      nextPlacement = 'left'\n      viewportLeft = Math.max(padding, viewportWidth - visibleWidth - padding)\n    }\n\n    // Align this sub-menu's first <li> with the hovered parent item.\n    // Direct DOM measurement is more robust than computed-style math across nested\n    // levels — picks up any box-sizing / margin quirks that pure padding values miss.\n    const firstItemEl = ownVisibleEl.querySelector(':scope > li') as HTMLElement | null\n    const firstItemRect = firstItemEl?.getBoundingClientRect()\n    // Move the wrapper by exactly the delta between where the first <li> currently is\n    // and where we want it (parent item's top). Avoids any cascading offset arithmetic.\n    const desiredFirstItemTop = parentItemRect.top\n    const currentFirstItemTop = firstItemRect ? firstItemRect.top : wrapperRect.top + 8\n    const deltaY = desiredFirstItemTop - currentFirstItemTop\n    let viewportTop = wrapperRect.top + deltaY\n    if (viewportTop + visibleHeight > viewportHeight - padding) {\n      viewportTop = Math.max(padding, viewportHeight - visibleHeight - padding)\n    }\n\n    // Wrapper origin: visible target minus the wrapper's left padding when on the left.\n    const wrapperLeft =\n      nextPlacement === 'left' ? viewportLeft - subMenuPaddingLeft : viewportLeft\n\n    const targetTop = viewportTop - offsetParentRect.top\n    const targetLeft = wrapperLeft - offsetParentRect.left\n    const currentTop = typeof style?.top === 'number' ? style.top : parseFloat(String(style?.top))\n    const currentLeft =\n      typeof style?.left === 'number' ? style.left : parseFloat(String(style?.left))\n\n    // Idempotent guard: only emit a layout update when the target differs by >1px\n    // from what's already applied. This makes the effect safe to re-run on every\n    // dependency change — including `style`, which we update from inside this effect.\n    // After a successful update, the new style flows back as props, the effect runs\n    // once more, current ≈ target, and the guard is a no-op. No infinite loop.\n    if (Math.abs(targetTop - currentTop) > 1 || Math.abs(targetLeft - currentLeft) > 1) {\n      onSubMenuLayout(id, { top: targetTop, left: targetLeft }, nextPlacement)\n    }\n  }, [subMenu, items, parentRef, id, placement, style?.top, style?.left, onSubMenuLayout])\n\n  return (\n    <Styled.MenuWrapper\n      style={{ paddingLeft: subMenu ? 16 : 0, ...style }}\n      className={subMenu ? 'sub-menu' : 'menu-list'}\n      id={id}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n      ref={menuRef}\n    >\n      <Styled.Menu>\n        {items\n          .filter((item) => !item.hidden)\n          .map((item, i) => {\n            // if item is a node, return it\n            if (item.node) {\n              return item.node\n            }\n\n            if (item?.id === 'divider' || item?.separator ) return <hr key={i} />\n\n            const {\n              label,\n              icon,\n              img,\n              highlighted,\n              onClick,\n              link,\n              items = [],\n              id,\n              disableClose,\n              selected,\n              disabled,\n              powerFeature,\n              active,\n              ...props\n            } = item\n\n            const { powerLicense } = usePowerpack()\n            const isPowerFeature = !powerLicense && powerFeature\n\n            const handleClickPowerFeature = (e: React.MouseEvent) => {\n              e.preventDefault()\n              e.stopPropagation()\n              if (powerFeature) {\n                setPowerpackDialog?.(powerFeature)\n              }\n\n              // close the menu\n              onMenuClose?.()\n            }\n\n            return (\n              <MenuItem\n                tabIndex={0}\n                key={`${id}-${i}`}\n                {...{\n                  label,\n                  icon,\n                  img,\n                  highlighted,\n                  items,\n                  selected,\n                  disabled,\n                  powerFeature,\n                  active,\n                }}\n                isLink={link}\n                onClick={(e) =>\n                  isPowerFeature\n                    ? handleClickPowerFeature(e)\n                    : items.length\n                    ? handleSubMenu(e, id, items)\n                    : handleClick(e, onClick, link, disableClose)\n                }\n                onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {\n                  if (e.key === 'Enter') {\n                    if (isPowerFeature) {\n                      handleClickPowerFeature(e as any)\n                    } else if (items.length) {\n                      handleSubMenu(e as any, id, items)\n                    } else {\n                      handleClick(e as any, onClick, link)\n                    }\n                  }\n                  const isLastChild = !(e.target as HTMLElement).nextSibling\n                  if (e.key === 'Tab' && isLastChild && !e.shiftKey) {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    //   when at bottom of list, tab goes to top\n                    const first = menuRef.current?.querySelectorAll('li, button')[0] as HTMLElement\n                    first?.focus()\n                  }\n                  //   when a submenu is open, esc closes it and sets focus on the parent\n                  if (e.key === 'Escape' && subMenu && parentRef) {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    parentRef.focus()\n                    onClose?.(id)\n                  }\n                }}\n                style={{ paddingRight: items.length ? '0' : '16px', ...itemStyle }}\n                ref={(e) => (itemRefs.current[id] = e)}\n                onMouseEnter={(e) => handleSubMenu(e, id, items)}\n                onMouseLeave={(e) => handleSubMenu(e, id, [])}\n                className={`${itemClassName} ${props.className || ''}`}\n                {...props}\n              >\n                {!!items.length && <Icon icon=\"arrow_right\" style={{ marginLeft: 'auto' }} />}\n              </MenuItem>\n            )\n          })}\n      </Styled.Menu>\n    </Styled.MenuWrapper>\n  )\n}\n"],"names":["MenuList","items","handleClick","onSubMenu","onSubMenuLayout","subMenu","level","id","parentRef","style","placement","onClose","onMenuClose","itemClassName","itemStyle","setPowerpackDialog","props","itemRefs","useRef","menuRef","handleSubMenu","e","itemEl","parentMenuEl","offsetParentRect","itemRect","parentVisibleRect","viewportWidth","viewportHeight","padding","estimatedWidth","estimatedHeight","gap","computeLeftSide","computeRightSide","fitsRight","fitsLeft","nextPlacement","viewportLeft","viewportTop","wrapperLeft","handleMouseLeave","useEffect","useLayoutEffect","wrapperEl","parentItemEl","ownVisibleEl","parentVisibleEl","wrapperRect","ownVisibleRect","parentItemRect","subMenuPaddingLeft","visibleWidth","visibleHeight","firstItemRect","desiredFirstItemTop","currentFirstItemTop","deltaY","targetTop","targetLeft","currentTop","currentLeft","jsx","Styled.MenuWrapper","Styled.Menu","item","i","label","icon","img","highlighted","onClick","link","disableClose","selected","disabled","powerFeature","active","powerLicense","usePowerpack","isPowerFeature","handleClickPowerFeature","MenuItem","isLastChild","Icon"],"mappings":"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"}
+{"version":3,"file":"MenuList.cjs.js","sources":["../../../../../src/components/Menu/MenuList.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react'\nimport MenuItem from './MenuItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './Menu.styled'\nimport type { PowerpackFeature } from '@shared/context/PowerpackContext'\nimport { usePowerpack } from '@shared/context/PowerpackContext'\nimport type { MenuItemType } from './Menu'\n\ninterface MenuListProps {\n  items: MenuItemType[]\n  handleClick: (\n    e: React.MouseEvent,\n    onClick?: (e: React.MouseEvent) => void,\n    url?: string,\n    disableClose?: boolean,\n  ) => void\n  onSubMenu?: (e: React.MouseEvent, menu: any) => void\n  /** Called by a sub-menu after it mounts, with its real measured style. Lets the parent\n   *  refit using actual width/height instead of the open-time estimate. */\n  onSubMenuLayout?: (id: string, style: React.CSSProperties, placement: 'left' | 'right') => void\n  subMenu?: boolean\n  level: number\n  id?: string\n  parentRef?: HTMLElement | null\n  style?: React.CSSProperties\n  /** Placement of THIS menu relative to its parent. Inherited by descendants so once\n   *  a chain flips to one side it stays there. */\n  placement?: 'left' | 'right'\n  onClose?: (id?: string) => void\n  onMenuClose?: () => void\n  itemClassName?: string\n  itemStyle?: React.CSSProperties\n  setPowerpackDialog?: (feature: PowerpackFeature) => void\n  [key: string]: any\n}\n\nexport const MenuList: React.FC<MenuListProps> = ({\n  items,\n  handleClick,\n  onSubMenu,\n  onSubMenuLayout,\n  subMenu,\n  level,\n  id = 'root-menu',\n  parentRef,\n  style,\n  placement,\n  onClose,\n  onMenuClose,\n  itemClassName,\n  itemStyle,\n  setPowerpackDialog,\n  ...props\n}) => {\n  const itemRefs = useRef<{ [key: string]: HTMLElement | null }>({})\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const handleSubMenu = (e: React.MouseEvent, id: string, items: MenuItemType[]) => {\n    const itemEl = itemRefs.current[id]\n    const parentMenuEl = menuRef.current\n    if (!itemEl || !parentMenuEl) return\n\n    // Sub-menus render absolute inside DialogContent. Compute viewport-anchored coords\n    // from this item's bounding rect, then translate into the offsetParent's coord space.\n    // Each level computes independently — no inherited offsets that drift across depth.\n    const offsetParent = (parentMenuEl.offsetParent as HTMLElement | null) ?? document.body\n    const offsetParentRect = offsetParent.getBoundingClientRect()\n    const itemRect = itemEl.getBoundingClientRect()\n    // Use the visible inner <menu> element if present — the wrapper has 16px paddingLeft\n    // for sub-menus which would otherwise produce a phantom gap on flip-left chains.\n    const parentVisibleEl =\n      (parentMenuEl.querySelector('menu') as HTMLElement | null) ?? parentMenuEl\n    const parentVisibleRect = parentVisibleEl.getBoundingClientRect()\n\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n    const padding = 8\n    // Use the parent's visible width as the initial estimate — sub-menus tend to be\n    // similar size or smaller. Falls back to 240 if parent is unusually narrow.\n    const estimatedWidth = Math.max(240, parentVisibleRect.width)\n    const estimatedHeight = Math.min(items.length * 36 + 16, 480)\n\n    // Choose horizontal placement. If an ancestor sub-menu has already flipped to the\n    // left, every descendant sub-menu also goes left — DetailsPanel scenarios put the\n    // root menu near the right edge of the screen, so flipping flip-flop on each level\n    // would push deep menus back into the panel content.\n    const gap = 4\n    const computeLeftSide = () => Math.max(padding, parentVisibleRect.left - estimatedWidth - gap)\n    const computeRightSide = () => parentVisibleRect.right + gap\n    const fitsRight = computeRightSide() + estimatedWidth <= viewportWidth - padding\n    const fitsLeft = computeLeftSide() >= padding\n\n    let nextPlacement: 'left' | 'right'\n    let viewportLeft: number\n    if (placement === 'left' && fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else if (fitsRight) {\n      nextPlacement = 'right'\n      viewportLeft = computeRightSide()\n    } else if (fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else {\n      // Neither side fits cleanly — clamp to viewport, prefer left.\n      nextPlacement = 'left'\n      viewportLeft = Math.max(padding, viewportWidth - estimatedWidth - padding)\n    }\n\n    // Align first sub-menu item with the hovered parent item. The visible <menu> has\n    // 8px top padding, so the wrapper top sits 8px above the item top.\n    const innerTopOffset = 8\n    let viewportTop = itemRect.top - innerTopOffset\n    if (viewportTop + estimatedHeight > viewportHeight - padding) {\n      viewportTop = Math.max(padding, viewportHeight - estimatedHeight - padding)\n    }\n\n    // Sub-menu wrappers carry 16px paddingLeft (so their wrapper rect is wider than\n    // the visible menu). When we anchor on the LEFT side, the visible menu sits 16px\n    // inside the wrapper — pull the wrapper left so the visible right edge lines up\n    // with parentVisibleRect.left.\n    const subMenuPaddingLeft = 16\n    const wrapperLeft = nextPlacement === 'left' ? viewportLeft - subMenuPaddingLeft : viewportLeft\n\n    onSubMenu?.(e, {\n      id,\n      style: {\n        top: viewportTop - offsetParentRect.top,\n        left: wrapperLeft - offsetParentRect.left,\n      },\n      items,\n      level: level,\n      placement: nextPlacement,\n      // Pass the actual menu-item element so sub-menu measurement uses the <li>\n      // instead of whatever inner span the mouse event bubbled from.\n      parentEl: itemEl,\n    })\n  }\n\n  const handleMouseLeave = (e: React.MouseEvent) => {\n    if (subMenu) {\n      onSubMenu?.(e, { id: 'parent', items: [] })\n    }\n  }\n\n  //   when a subMenu open, set focus on the first item\n  useEffect(() => {\n    if (subMenu && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0] as HTMLElement\n      first?.focus()\n    }\n  }, [subMenu])\n\n  // Sub-menus open with an estimated width — once mounted, measure for real and refit.\n  // Reuses the same flip/clamp rules as handleSubMenu but with the actual rendered size.\n  useLayoutEffect(() => {\n    if (!subMenu || !menuRef.current || !parentRef || !onSubMenuLayout || !id) return\n    const wrapperEl = menuRef.current\n    const parentItemEl = parentRef\n    const parentMenuEl = parentItemEl.closest('.menu-list, .sub-menu') as HTMLElement | null\n    if (!parentMenuEl) return\n    // Measure visible boxes (the inner <menu> tag), not wrappers. Sub-menu wrappers\n    // carry 16px paddingLeft which inflates the rect on the left side and would\n    // otherwise produce phantom gaps when flipping left.\n    const ownVisibleEl = (wrapperEl.querySelector('menu') as HTMLElement | null) ?? wrapperEl\n    const parentVisibleEl =\n      (parentMenuEl.querySelector('menu') as HTMLElement | null) ?? parentMenuEl\n\n    const offsetParent = (wrapperEl.offsetParent as HTMLElement | null) ?? document.body\n    const offsetParentRect = offsetParent.getBoundingClientRect()\n    const wrapperRect = wrapperEl.getBoundingClientRect()\n    const ownVisibleRect = ownVisibleEl.getBoundingClientRect()\n    const parentVisibleRect = parentVisibleEl.getBoundingClientRect()\n    const parentItemRect = parentItemEl.getBoundingClientRect()\n\n    // Some wrappers have 16px left padding (sub-menus). Track it so we can place the\n    // wrapper such that the visible-menu edge — not the wrapper edge — lines up.\n    const subMenuPaddingLeft = ownVisibleRect.left - wrapperRect.left\n    const visibleWidth = ownVisibleRect.width\n    const visibleHeight = ownVisibleRect.height\n\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n    const padding = 8\n\n    const gap = 4\n    const computeLeftSide = () => Math.max(padding, parentVisibleRect.left - visibleWidth - gap)\n    const computeRightSide = () => parentVisibleRect.right + gap\n    const fitsRight = computeRightSide() + visibleWidth <= viewportWidth - padding\n    const fitsLeft = computeLeftSide() >= padding\n\n    let nextPlacement: 'left' | 'right'\n    let viewportLeft: number\n    if (placement === 'left' && fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else if (fitsRight) {\n      nextPlacement = 'right'\n      viewportLeft = computeRightSide()\n    } else if (fitsLeft) {\n      nextPlacement = 'left'\n      viewportLeft = computeLeftSide()\n    } else {\n      nextPlacement = 'left'\n      viewportLeft = Math.max(padding, viewportWidth - visibleWidth - padding)\n    }\n\n    // Align this sub-menu's first <li> with the hovered parent item.\n    // Direct DOM measurement is more robust than computed-style math across nested\n    // levels — picks up any box-sizing / margin quirks that pure padding values miss.\n    const firstItemEl = ownVisibleEl.querySelector(':scope > li') as HTMLElement | null\n    const firstItemRect = firstItemEl?.getBoundingClientRect()\n    // Move the wrapper by exactly the delta between where the first <li> currently is\n    // and where we want it (parent item's top). Avoids any cascading offset arithmetic.\n    const desiredFirstItemTop = parentItemRect.top\n    const currentFirstItemTop = firstItemRect ? firstItemRect.top : wrapperRect.top + 8\n    const deltaY = desiredFirstItemTop - currentFirstItemTop\n    let viewportTop = wrapperRect.top + deltaY\n    if (viewportTop + visibleHeight > viewportHeight - padding) {\n      viewportTop = Math.max(padding, viewportHeight - visibleHeight - padding)\n    }\n\n    // Wrapper origin: visible target minus the wrapper's left padding when on the left.\n    const wrapperLeft = nextPlacement === 'left' ? viewportLeft - subMenuPaddingLeft : viewportLeft\n\n    const targetTop = viewportTop - offsetParentRect.top\n    const targetLeft = wrapperLeft - offsetParentRect.left\n    const currentTop = typeof style?.top === 'number' ? style.top : parseFloat(String(style?.top))\n    const currentLeft =\n      typeof style?.left === 'number' ? style.left : parseFloat(String(style?.left))\n\n    // Idempotent guard: only emit a layout update when the target differs by >1px\n    // from what's already applied. This makes the effect safe to re-run on every\n    // dependency change — including `style`, which we update from inside this effect.\n    // After a successful update, the new style flows back as props, the effect runs\n    // once more, current ≈ target, and the guard is a no-op. No infinite loop.\n    if (Math.abs(targetTop - currentTop) > 1 || Math.abs(targetLeft - currentLeft) > 1) {\n      onSubMenuLayout(id, { top: targetTop, left: targetLeft }, nextPlacement)\n    }\n  }, [subMenu, items, parentRef, id, placement, style?.top, style?.left, onSubMenuLayout])\n\n  return (\n    <Styled.MenuWrapper\n      style={{ paddingLeft: subMenu ? 16 : 0, ...style }}\n      className={subMenu ? 'sub-menu' : 'menu-list'}\n      id={id}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n      ref={menuRef}\n    >\n      <Styled.Menu>\n        {items\n          .filter((item) => !item.hidden)\n          .map((item, i) => {\n            // if item is a node, return it\n            if (item.node) {\n              return item.node\n            }\n\n            if (item?.id === 'divider' || item?.separator) return <hr key={i} />\n\n            const {\n              label,\n              icon,\n              img,\n              highlighted,\n              onClick,\n              link,\n              items = [],\n              id,\n              disableClose,\n              selected,\n              disabled,\n              powerFeature,\n              active,\n              ...props\n            } = item\n\n            const { powerLicense } = usePowerpack()\n            const isPowerFeature = !powerLicense && powerFeature\n\n            const handleClickPowerFeature = (e: React.MouseEvent) => {\n              e.preventDefault()\n              e.stopPropagation()\n              if (powerFeature) {\n                setPowerpackDialog?.(powerFeature)\n              }\n\n              // close the menu\n              onMenuClose?.()\n            }\n\n            return (\n              <MenuItem\n                tabIndex={0}\n                key={`${id}-${i}`}\n                {...{\n                  label,\n                  icon,\n                  img,\n                  highlighted,\n                  items,\n                  selected,\n                  disabled,\n                  powerFeature,\n                  active,\n                }}\n                isLink={link}\n                onClick={(e) =>\n                  isPowerFeature\n                    ? handleClickPowerFeature(e)\n                    : items.length\n                    ? handleSubMenu(e, id, items)\n                    : handleClick(e, onClick, link, disableClose)\n                }\n                onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {\n                  if (e.key === 'Enter') {\n                    if (isPowerFeature) {\n                      handleClickPowerFeature(e as any)\n                    } else if (items.length) {\n                      handleSubMenu(e as any, id, items)\n                    } else {\n                      handleClick(e as any, onClick, link)\n                    }\n                  }\n                  const isLastChild = !(e.target as HTMLElement).nextSibling\n                  if (e.key === 'Tab' && isLastChild && !e.shiftKey) {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    //   when at bottom of list, tab goes to top\n                    const first = menuRef.current?.querySelectorAll('li, button')[0] as HTMLElement\n                    first?.focus()\n                  }\n                  //   when a submenu is open, esc closes it and sets focus on the parent\n                  if (e.key === 'Escape' && subMenu && parentRef) {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    parentRef.focus()\n                    onClose?.(id)\n                  }\n                }}\n                style={{ paddingRight: items.length ? '0' : '16px', ...itemStyle }}\n                ref={(e) => (itemRefs.current[id] = e)}\n                onMouseEnter={(e) => handleSubMenu(e, id, items)}\n                onMouseLeave={(e) => handleSubMenu(e, id, [])}\n                className={`${itemClassName} ${props.className || ''}`}\n                {...props}\n              >\n                {!!items.length && <Icon icon=\"arrow_right\" style={{ marginLeft: 'auto' }} />}\n              </MenuItem>\n            )\n          })}\n      </Styled.Menu>\n    </Styled.MenuWrapper>\n  )\n}\n"],"names":["MenuList","items","handleClick","onSubMenu","onSubMenuLayout","subMenu","level","id","parentRef","style","placement","onClose","onMenuClose","itemClassName","itemStyle","setPowerpackDialog","props","itemRefs","useRef","menuRef","handleSubMenu","itemEl","parentMenuEl","offsetParentRect","itemRect","parentVisibleRect","viewportWidth","viewportHeight","padding","estimatedWidth","estimatedHeight","gap","computeLeftSide","computeRightSide","fitsRight","fitsLeft","nextPlacement","viewportLeft","viewportTop","wrapperLeft","handleMouseLeave","useEffect","useLayoutEffect","wrapperEl","parentItemEl","ownVisibleEl","parentVisibleEl","wrapperRect","ownVisibleRect","parentItemRect","subMenuPaddingLeft","visibleWidth","visibleHeight","firstItemRect","desiredFirstItemTop","currentFirstItemTop","deltaY","targetTop","targetLeft","currentTop","currentLeft","jsx","Styled.MenuWrapper","Styled.Menu","item","i","label","icon","img","highlighted","onClick","link","disableClose","selected","disabled","powerFeature","active","powerLicense","usePowerpack","isPowerFeature","handleClickPowerFeature","e","MenuItem","isLastChild","Icon"],"mappings":"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"}

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

@@ -1,315 +1,19 @@
 import { j as S } from "../../../../_virtual/jsx-runtime.es.js";
-import { useRef as N, useEffect as rt, useLayoutEffect as pt } from "react";
-import mt from "./MenuItem.es.js";
-import { Icon as et } from "@ynput/ayon-react-components";
-import { MenuWrapper as nt, Menu as st } from "./Menu.styled.es.js";
-import "../../context/RemoteModulesContext.es.js";
-import { usePowerpack as ct } from "../../context/PowerpackContext.es.js";
-import "../../context/UriContext.es.js";
-import "../../../../_virtual/runtime.es.js";
-import "../../../../_virtual/semver.es.js";
-import "../../api/base/client.es.js";
-import "../../api/generated/graphql.es.js";
-import "../../api/generated/graphqlLinks.es.js";
-import "../../api/generated/access.es.js";
-import "../../api/generated/actions.es.js";
-import "../../api/generated/activityFeed.es.js";
-import "../../api/generated/addons.es.js";
-import "../../api/generated/anatomy.es.js";
-import "../../api/generated/attributes.es.js";
-import "../../api/generated/authentication.es.js";
-import "../../api/generated/bundles.es.js";
-import "../../api/generated/configuration.es.js";
-import "../../api/generated/dataImport.es.js";
-import "../../api/generated/desktop.es.js";
-import "../../api/generated/entityLists.es.js";
-import "../../api/generated/events.es.js";
-import "../../api/generated/files.es.js";
-import "../../api/generated/folders.es.js";
-import "../../api/generated/inbox.es.js";
-import "../../api/generated/links.es.js";
-import "../../api/generated/market.es.js";
-import "../../api/generated/onboarding.es.js";
-import "../../api/generated/operations.es.js";
-import "../../api/generated/products.es.js";
-import "../../api/generated/projectDashboard.es.js";
-import "../../api/generated/projects.es.js";
-import "../../api/generated/projectFolders.es.js";
-import "../../api/generated/reviewables.es.js";
-import "../../api/generated/services.es.js";
-import "../../api/generated/system.es.js";
-import "../../api/generated/tasks.es.js";
-import "../../api/generated/teams.es.js";
-import "../../api/generated/thumbnails.es.js";
-import "../../api/generated/uRIs.es.js";
-import "../../api/generated/users.es.js";
-import "../../api/generated/versions.es.js";
-import "../../api/generated/workfiles.es.js";
-import "../../api/generated/ynputCloud.es.js";
-import "../../api/generated/grouping.es.js";
-import "../../api/generated/views.es.js";
-import "../../api/queries/actions/getActions.es.js";
-import "../../api/queries/activities/getActivities.es.js";
-import "../../api/queries/activities/updateReaction.es.js";
-import "../../api/queries/activities/getMentions.es.js";
-import "../../api/queries/activities/getCategories.es.js";
-import "../../api/queries/addons/getAddons.es.js";
-import "../../api/queries/addons/updateAddons.es.js";
-import "../../api/queries/attributes/getAttributes.es.js";
-import "../../api/queries/attributes/updateAttributes.es.js";
-import "../../api/queries/authentication/getAuthentication.es.js";
-import "../../api/queries/bundles/getBundles.es.js";
-import "../../api/queries/bundles/updateBundles.es.js";
-import "../../api/queries/cloud/cloud.es.js";
-import "../../api/queries/columnStats/metricTargets.es.js";
-import "../../api/queries/columnStats/groupCounts.es.js";
-import "../../api/queries/config/getConfig.es.js";
-import "../../api/queries/config/updateConfig.es.js";
-import "../../api/queries/entities/getEntity.es.js";
-import "../../api/queries/entities/getEntityPanel.es.js";
-import "../../api/queries/overview/getOverview.es.js";
-import "../../api/queries/overview/updateOverview.es.js";
-import "../../api/queries/versions/getVersionsProducts.es.js";
-import "../../api/queries/links/getEntityLinks.es.js";
-import "../../api/queries/entities/updateEntity.es.js";
-import "../../api/queries/entityLists/getLists.es.js";
-import "../../api/queries/entityLists/updateLists.es.js";
-import "../../api/queries/entityLists/getListsAttributes.es.js";
-import "../../api/queries/entityLists/listItemsColumnStats.es.js";
-import "../../api/queries/entityLists/updateListsAttributes.es.js";
-import "../../api/queries/entityLists/listFolders.es.js";
-import "../../api/queries/folders/getFolders.es.js";
-import "../../api/queries/folders/getFolderDeleteInfo.es.js";
-import "../../api/queries/grouping/getGrouping.es.js";
-import "../../api/queries/links/updateLinks.es.js";
-import "../../api/queries/links/getLinks.es.js";
-import "../../api/queries/permissions/getPermissions.es.js";
-import "../../api/queries/products/createProduct.es.js";
-import "../../api/queries/products/getFolderProducts.es.js";
-import "../../api/queries/project/getProject.es.js";
-import "../../api/queries/project/updateProject.es.js";
-import "../../api/queries/projectFolders/projectFolders.es.js";
-import "../../api/queries/review/getReview.es.js";
-import "../../api/queries/review/updateReview.es.js";
-import "../../api/queries/share/share.es.js";
-import "../../api/queries/system/getSystem.es.js";
-import "../../api/queries/tasks/getTasks.es.js";
-import "../../api/queries/tasks/updateTasks.es.js";
-import "../../api/queries/teams/getTeams.es.js";
-import "../../api/queries/userDashboard/getUserDashboard.es.js";
-import "../../api/queries/users/getUsers.es.js";
-import "../../api/queries/users/updateUsers.es.js";
-import "../../api/queries/users/guests.es.js";
-import "../../api/queries/versions/updateVersions.es.js";
-import "../../api/queries/views/getViews.es.js";
-import "../../api/queries/views/updateViews.es.js";
-import "../../api/queries/watchers/getWatchers.es.js";
-import "../../api/queries/uris/getUris.es.js";
-import "lodash";
-import "react-toastify";
-import "react-redux";
-import "custom-protocol-check";
-import "../../containers/ProjectTreeTable/components/GroupSettingsFallback.es.js";
-import "uuid";
-import "../../util/pubsub.es.js";
-import "../../context/DetailsPanelContextInstance.es.js";
-import "../../context/SubtasksModulesContextInstance.es.js";
-import "../../context/ThumbnailUploaderContext.es.js";
-import "../../context/SettingsPanelContext.es.js";
-import "../../context/pip/PiPProvider.es.js";
-import "react-dom";
-import "../../context/pip/PiPWrapper.es.js";
-import "../../context/AddonProjectContext.es.js";
-import "../../context/AddonContext.es.js";
-import "../../context/MenuContext.es.js";
-import "../../context/WebsocketContext.es.js";
-import "../../context/GlobalContext.es.js";
-import "../../context/ProjectContext.es.js";
-import "../../context/ProjectFoldersContextInstance.es.js";
-import "../../context/EntityUpdatesContextInstance.es.js";
-import "../../containers/ContextMenu/ContextMenuContext.es.js";
-/* empty css                                               */
-import "clsx";
-import "../../containers/Feed/context/FeedContext.es.js";
-import "../../containers/Feed/components/Tooltips/UserTooltipItem.es.js";
-import "../../containers/Feed/components/Tooltips/UserTooltip/UserTooltip.styled.es.js";
-import "../../containers/Feed/components/Tooltips/TeamTooltip/TeamTooltip.styled.es.js";
-import "../../containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.styled.es.js";
-import "../../containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.es.js";
-import "../../containers/Feed/components/FileUploadPreview/Mimes/TextMime.es.js";
-import "react-markdown";
-import "remark-emoji";
-import "remark-gfm";
-import "remark-directive";
-import "remark-directive-rehype";
-import "../../containers/Feed/components/CommentInput/CommentInput.es.js";
-import "../../containers/Feed/components/ReactionContainer/Reactions.styled.es.js";
-import "../../containers/Feed/components/FilesGrid/FilesGrid.styled.es.js";
-import "../../containers/Feed/components/FileUploadCard/FileUploadCard.styled.es.js";
-import "../../containers/Feed/components/CommentInput/quillToMarkdown.es.js";
-import "../../containers/Feed/components/ActivityComment/ActivityComment.styled.es.js";
-import "../../containers/Feed/components/ActivityCheckbox/ActivityCheckbox.styled.es.js";
-import "../AddonLoadingScreen/AddonLoadingScreen.es.js";
-import "../../../../node_modules/match-sorter/dist/match-sorter.esm.es.js";
-import "../AccessSearchInput/AccessSearchInput.styled.es.js";
-import "../AccessUser/AccessUser.es.js";
-import "../AttributeEditor/AttributeEditor.es.js";
-import "../AttributeEditor/attributeTypeMap.es.js";
-import "../Badge/Badge.es.js";
-import "../Chips/Chips.es.js";
-import "date-fns";
-import "../DateRangePicker/DateRangePicker.styled.es.js";
-import "../LinksManager/CellEditingDialog.es.js";
-import "../DeleteEntitiesConfirm/DeleteConfirmContent.es.js";
-import "../DeleteEntitiesConfirm/DeleteEntitiesConfirmDialog.styled.es.js";
-import "../../../../_virtual/index.es.js";
-import "../../../../node_modules/refractor/lib/common.es.js";
-import "../../../../node_modules/refractor/lib/all.es.js";
-/* empty css                                                                              */
-import "../DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
-import "../DetailsPanelDetails/DetailsPanelDetails.es.js";
-import "react-quill-ayon";
-import "../DetailsPanelDetails/BorderedSection.es.js";
-import "../QuillListStyles/QuillListStyles.es.js";
-import "../DetailsPanelDetails/DescriptionSection.styles.es.js";
-import "rehype-raw";
-import "../DetailsPanelDetails/hooks/useMentionSystem.es.js";
-import "../../containers/Feed/components/CommentInput/modules/index.es.js";
-import "../DetailsPanelDetails/DetailsSection.es.js";
-import "../DetailsPanelDetails/FieldLabel.es.js";
-import "../DoneCheckbox/DoneCheckbox.es.js";
-import "../EarlyPreview/EarlyPreview.es.js";
-import "../EmptyPlaceholder/EmptyPlaceholder.es.js";
-import "../EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
-import "../InfoMessage/InfoMessage.es.js";
-import "@dnd-kit/core";
-import "@dnd-kit/sortable";
-import "../EnumEditor/EnumEditor.styled.es.js";
-import "../EntityPanelUploader/EntityPanelUploader.styled.es.js";
-import "axios";
-import "../ReviewablesList/ReviewablesList.styled.es.js";
-import "../ReviewablesList/ReviewablesUpload.styled.es.js";
-import "../EntityPath/EntityPath.styled.es.js";
-import "../EntityPath/SegmentProvider.es.js";
-import "../FeaturedVersionOrder/FeaturedVersionOrder.es.js";
-import "../Feedback/FeedbackContextInstance.es.js";
-import "../Feedback/SupportBubble.es.js";
-import "../FileThumbnail/FileThumbnail.es.js";
-import "../LegacyBadge/LegacyBadge.es.js";
-import "../LinksManager/LinksManager.styled.es.js";
-import "../../containers/EntityPickerDialog/EntityPickerDialog.es.js";
-import "../Powerpack/PowerpackButton.es.js";
-import "../Powerpack/FreeTrialLink.es.js";
-import "../Powerpack/PowerpackDialog.styled.es.js";
-import "../Powerpack/CTAButton.es.js";
-import "../Powerpack/RequiredAddonVersion.es.js";
-import "../ProjectTableSettings/ProjectTableSettings.es.js";
-import "../SizeSlider/SizeSlider.es.js";
-import "react-router-dom";
-import "../../containers/Slicer/components/Slicer.es.js";
-import "../../containers/Slicer/context/SlicerContextInstance.es.js";
-import "../../containers/Slicer/components/SlicerDropdownFallback.es.js";
-import "../../containers/NewEntity/components/NewEntity.es.js";
-import "@tanstack/react-virtual";
-import "@tanstack/react-table";
-import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/EnumCellValue.es.js";
-import "../../containers/ProjectTreeTable/widgets/TextWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/MarkdownWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/BooleanWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/CellWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/EntityNameWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/GroupHeaderWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/ThumbnailWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/LinksWidget.es.js";
-import "short-uuid";
-import "../SearchFilter/filterDates.es.js";
-import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
-import "../../containers/ProjectTreeTable/context/SelectionCellsContext.es.js";
-import "../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.es.js";
-import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
-import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
-import "../../containers/ProjectTreeTable/context/SelectedRowsContext.es.js";
-import "../../containers/ProjectTreeTable/context/DetailsPanelEntityContext.es.js";
-import "../../containers/ProjectTreeTable/context/ProjectDataContextInstance.es.js";
-import "../../containers/ProjectTreeTable/context/ProjectTableContextInstance.es.js";
-import "../../containers/ProjectTreeTable/widgets/EmptyWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/ErrorWidget.es.js";
-import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
-import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
-import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
-import "../../containers/ProjectTreeTable/widgets/LoadMoreWidget.es.js";
-import "../../containers/ProjectTreeTable/components/HeaderActionButton.es.js";
-import "../../containers/ProjectTreeTable/components/TableFooterRow.es.js";
-import "../../containers/NewEntity/context/NewEntityContextInstance.es.js";
-import "../../containers/NewEntity/components/NewEntityForm.es.js";
-import "../../containers/Slicer/hooks/useTableDataBySlice.es.js";
-import "../ReviewableCard/ReviewableCard.es.js";
-import "../ReviewableProgressCard/ReviewableProgressCard.styled.es.js";
-import "../SearchFilter/CustomDateRangeDialog.es.js";
-import "../SettingsPanel/SettingsPanel.es.js";
-import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
-import "../ShareOptionIcon/ShareOptionIcon.es.js";
-import "../SimpleFormDialog/SimpleFormDialog.es.js";
-import "../StyledLink/StyledLink.es.js";
-import "../SyncButton/SyncButton.es.js";
-import "../TableGridSwitch/TableGridSwitch.es.js";
-import "../Thumbnail/Thumbnail.styled.es.js";
-import "../Thumbnail/StackedThumbnails.es.js";
-import "../ThumbnailSimple/ThumbnailSimple.es.js";
-import "../VersionUploader/components/UploadVersionDialog.es.js";
-import "../VersionUploader/context/VersionUploadContextInstance.es.js";
-import "../Watchers/Watchers.es.js";
-import "../ReviewablesSelector/ReviewablesSelector.es.js";
-import "../ColumnHeaderMenuUI.es.js";
-import "../../containers/Feed/components/ActivityReference/ActivityReference.styled.es.js";
-import "../../containers/Feed/components/ActivityStatus/ActivityStatus.es.js";
-import "../../containers/Feed/components/ActivityHeader/ActivityHeader.styled.es.js";
-import "../../containers/Feed/components/ActivityDate.es.js";
-import "../../containers/Feed/components/ActivityVersionReview/ActivityVersionReview.styled.es.js";
-import "../../containers/Feed/components/ActivityCategorySelect/ActivityCategorySelect.es.js";
-import "../../containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.es.js";
-import "../../containers/Feed/components/ActivityCategorySelect/CategoryTag.es.js";
-import "../../containers/Feed/components/ActivityFieldChange/ActivityFieldChange.styled.es.js";
-import "../../containers/Feed/components/ActivityFieldChange/FieldValue.es.js";
-import "../../containers/Feed/components/ActivityAssigneeChange/ActivityAssigneeChange.styled.es.js";
-import "../../containers/Feed/components/ActivityVersions/ActivityVersions.styled.es.js";
-import "../../containers/Feed/components/ActivityGroup/ActivityGroup.styled.es.js";
-import "../../containers/Feed/Feed.styled.es.js";
-import "../../containers/Feed/components/FeedSearchFilter.es.js";
-import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
-import "../../containers/DetailsPanel/components/DetailsPanelTabs/DetailsPanelTabs.styled.es.js";
-import "../../containers/DetailsPanel/components/DetailsPanelHeader/LinkedTaskRow.styled.es.js";
-import "../../containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.es.js";
-import "../PlayableIcon/PlayableIcon.es.js";
-import "../../containers/DetailsPanel/components/DetailsPanelFiles/DetailsPanelFiles.es.js";
-import "../../containers/DetailsPanel/components/DetailsPanelMoreMenu/components/ShareDialog.es.js";
-import "../../containers/DetailsPanel/components/TabHeaderAndFilters/TabHeaderAndFilters.styled.es.js";
-import "../../containers/DetailsPanel/components/SubtasksSearchFilter/SubtasksSearchFilter.es.js";
-import "../../containers/DetailsPanel/components/DetailsPanelSlideOut/DetailsPanelSlideOut.styled.es.js";
-import "../../containers/DetailsPanel/components/DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
-import "../../containers/Actions/Actions.styled.es.js";
-import "../../containers/Actions/ActionsDropdown/ActionsDropdown.es.js";
-import "../../containers/Actions/ActionIcon.es.js";
-import "../../containers/Views/ViewsMenu/ViewsMenu.es.js";
-import "../../containers/Views/context/ViewsContextInstance.es.js";
-import "../../containers/Views/Views.styled.es.js";
-import "../../containers/Views/ViewsMenuContainer/ViewsMenuContainer.es.js";
-import "../../containers/ListTable/ListTableRow.es.js";
-import "../../containers/ListTable/ListTable.styled.es.js";
-import "../../context/DeleteEntitiesContext.es.js";
-const Km = ({
+import { useRef as N, useEffect as ot, useLayoutEffect as it } from "react";
+import rt from "./MenuItem.es.js";
+import { Icon as st } from "@ynput/ayon-react-components";
+import { MenuWrapper as ct, Menu as lt } from "./Menu.styled.es.js";
+import { usePowerpack as ft } from "../../context/PowerpackContext.es.js";
+const ht = ({
   items: V,
   handleClick: W,
   onSubMenu: q,
   onSubMenuLayout: T,
-  subMenu: a,
+  subMenu: d,
   level: A,
   id: y = "root-menu",
   parentRef: C,
-  style: l,
+  style: a,
   placement: k,
   onClose: K,
   onMenuClose: O,
@@ -318,111 +22,111 @@ const Km = ({
   setPowerpackDialog: z,
   ...G
 }) => {
-  const H = N({}), b = N(null), I = (o, d, u) => {
-    const g = H.current[d], h = b.current;
-    if (!g || !h) return;
-    const w = (h.offsetParent ?? document.body).getBoundingClientRect(), f = g.getBoundingClientRect(), i = (h.querySelector("menu") ?? h).getBoundingClientRect(), E = window.innerWidth, M = window.innerHeight, r = 8, e = Math.max(240, i.width), P = Math.min(u.length * 36 + 16, 480), R = 4, p = () => Math.max(r, i.left - e - R), L = () => i.right + R, x = L() + e <= E - r, t = p() >= r;
-    let n, s;
-    k === "left" && t ? (n = "left", s = p()) : x ? (n = "right", s = L()) : t ? (n = "left", s = p()) : (n = "left", s = Math.max(r, E - e - r));
-    let c = f.top - 8;
-    c + P > M - r && (c = Math.max(r, M - P - r));
-    const B = n === "left" ? s - 16 : s;
-    q?.(o, {
-      id: d,
+  const H = N({}), b = N(null), I = (e, u, g) => {
+    const m = H.current[u], h = b.current;
+    if (!m || !h) return;
+    const w = (h.offsetParent ?? document.body).getBoundingClientRect(), p = m.getBoundingClientRect(), n = (h.querySelector("menu") ?? h).getBoundingClientRect(), E = window.innerWidth, M = window.innerHeight, o = 8, s = Math.max(240, n.width), P = Math.min(g.length * 36 + 16, 480), R = 4, i = () => Math.max(o, n.left - s - R), L = () => n.right + R, x = L() + s <= E - o, t = i() >= o;
+    let c, l;
+    k === "left" && t ? (c = "left", l = i()) : x ? (c = "right", l = L()) : t ? (c = "left", l = i()) : (c = "left", l = Math.max(o, E - s - o));
+    let f = p.top - 8;
+    f + P > M - o && (f = Math.max(o, M - P - o));
+    const B = c === "left" ? l - 16 : l;
+    q?.(e, {
+      id: u,
       style: {
-        top: c - w.top,
+        top: f - w.top,
         left: B - w.left
       },
-      items: u,
+      items: g,
       level: A,
-      placement: n,
+      placement: c,
       // Pass the actual menu-item element so sub-menu measurement uses the <li>
       // instead of whatever inner span the mouse event bubbled from.
-      parentEl: g
+      parentEl: m
     });
-  }, J = (o) => {
-    a && q?.(o, { id: "parent", items: [] });
+  }, J = (e) => {
+    d && q?.(e, { id: "parent", items: [] });
   };
-  return rt(() => {
-    a && b.current && b.current.querySelectorAll("li, button")[0]?.focus();
-  }, [a]), pt(() => {
-    if (!a || !b.current || !C || !T || !y) return;
-    const o = b.current, d = C, u = d.closest(".menu-list, .sub-menu");
-    if (!u) return;
-    const g = o.querySelector("menu") ?? o, h = u.querySelector("menu") ?? u, w = (o.offsetParent ?? document.body).getBoundingClientRect(), f = o.getBoundingClientRect(), m = g.getBoundingClientRect(), i = h.getBoundingClientRect(), E = d.getBoundingClientRect(), M = m.left - f.left, r = m.width, e = m.height, P = window.innerWidth, R = window.innerHeight, p = 8, L = 4, x = () => Math.max(p, i.left - r - L), t = () => i.right + L, n = t() + r <= P - p, s = x() >= p;
-    let v, c;
-    k === "left" && s ? (v = "left", c = x()) : n ? (v = "right", c = t()) : s ? (v = "left", c = x()) : (v = "left", c = Math.max(p, P - r - p));
-    const B = g.querySelector(":scope > li")?.getBoundingClientRect(), U = E.top, X = B ? B.top : f.top + 8, Z = U - X;
-    let F = f.top + Z;
-    F + e > R - p && (F = Math.max(p, R - e - p));
-    const tt = v === "left" ? c - M : c, D = F - w.top, $ = tt - w.left, ot = typeof l?.top == "number" ? l.top : parseFloat(String(l?.top)), it = typeof l?.left == "number" ? l.left : parseFloat(String(l?.left));
-    (Math.abs(D - ot) > 1 || Math.abs($ - it) > 1) && T(y, { top: D, left: $ }, v);
-  }, [a, V, C, y, k, l?.top, l?.left, T]), /* @__PURE__ */ S.jsx(
-    nt,
+  return ot(() => {
+    d && b.current && b.current.querySelectorAll("li, button")[0]?.focus();
+  }, [d]), it(() => {
+    if (!d || !b.current || !C || !T || !y) return;
+    const e = b.current, u = C, g = u.closest(".menu-list, .sub-menu");
+    if (!g) return;
+    const m = e.querySelector("menu") ?? e, h = g.querySelector("menu") ?? g, w = (e.offsetParent ?? document.body).getBoundingClientRect(), p = e.getBoundingClientRect(), r = m.getBoundingClientRect(), n = h.getBoundingClientRect(), E = u.getBoundingClientRect(), M = r.left - p.left, o = r.width, s = r.height, P = window.innerWidth, R = window.innerHeight, i = 8, L = 4, x = () => Math.max(i, n.left - o - L), t = () => n.right + L, c = t() + o <= P - i, l = x() >= i;
+    let v, f;
+    k === "left" && l ? (v = "left", f = x()) : c ? (v = "right", f = t()) : l ? (v = "left", f = x()) : (v = "left", f = Math.max(i, P - o - i));
+    const B = m.querySelector(":scope > li")?.getBoundingClientRect(), U = E.top, X = B ? B.top : p.top + 8, Z = U - X;
+    let F = p.top + Z;
+    F + s > R - i && (F = Math.max(i, R - s - i));
+    const tt = v === "left" ? f - M : f, D = F - w.top, $ = tt - w.left, et = typeof a?.top == "number" ? a.top : parseFloat(String(a?.top)), nt = typeof a?.left == "number" ? a.left : parseFloat(String(a?.left));
+    (Math.abs(D - et) > 1 || Math.abs($ - nt) > 1) && T(y, { top: D, left: $ }, v);
+  }, [d, V, C, y, k, a?.top, a?.left, T]), /* @__PURE__ */ S.jsx(
+    ct,
     {
-      style: { paddingLeft: a ? 16 : 0, ...l },
-      className: a ? "sub-menu" : "menu-list",
+      style: { paddingLeft: d ? 16 : 0, ...a },
+      className: d ? "sub-menu" : "menu-list",
       id: y,
       onMouseLeave: J,
       ...G,
       ref: b,
-      children: /* @__PURE__ */ S.jsx(st, { children: V.filter((o) => !o.hidden).map((o, d) => {
-        if (o.node)
-          return o.node;
-        if (o?.id === "divider" || o?.separator) return /* @__PURE__ */ S.jsx("hr", {}, d);
+      children: /* @__PURE__ */ S.jsx(lt, { children: V.filter((e) => !e.hidden).map((e, u) => {
+        if (e.node)
+          return e.node;
+        if (e?.id === "divider" || e?.separator) return /* @__PURE__ */ S.jsx("hr", {}, u);
         const {
-          label: u,
-          icon: g,
+          label: g,
+          icon: m,
           img: h,
           highlighted: j,
           onClick: w,
-          link: f,
-          items: m = [],
-          id: i,
+          link: p,
+          items: r = [],
+          id: n,
           disableClose: E,
           selected: M,
-          disabled: r,
-          powerFeature: e,
+          disabled: o,
+          powerFeature: s,
           active: P,
           ...R
-        } = o, { powerLicense: p } = ct(), L = !p && e, x = (t) => {
-          t.preventDefault(), t.stopPropagation(), e && z?.(e), O?.();
+        } = e, { powerLicense: i } = ft(), L = !i && s, x = (t) => {
+          t.preventDefault(), t.stopPropagation(), s && z?.(s), O?.();
         };
         return /* @__PURE__ */ S.jsx(
-          mt,
+          rt,
           {
             tabIndex: 0,
-            label: u,
-            icon: g,
+            label: g,
+            icon: m,
             img: h,
             highlighted: j,
-            items: m,
+            items: r,
             selected: M,
-            disabled: r,
-            powerFeature: e,
+            disabled: o,
+            powerFeature: s,
             active: P,
-            isLink: f,
-            onClick: (t) => L ? x(t) : m.length ? I(t, i, m) : W(t, w, f, E),
+            isLink: p,
+            onClick: (t) => L ? x(t) : r.length ? I(t, n, r) : W(t, w, p, E),
             onKeyDown: (t) => {
-              t.key === "Enter" && (L ? x(t) : m.length ? I(t, i, m) : W(t, w, f));
-              const n = !t.target.nextSibling;
-              t.key === "Tab" && n && !t.shiftKey && (t.preventDefault(), t.stopPropagation(), b.current?.querySelectorAll("li, button")[0]?.focus()), t.key === "Escape" && a && C && (t.preventDefault(), t.stopPropagation(), C.focus(), K?.(i));
+              t.key === "Enter" && (L ? x(t) : r.length ? I(t, n, r) : W(t, w, p));
+              const c = !t.target.nextSibling;
+              t.key === "Tab" && c && !t.shiftKey && (t.preventDefault(), t.stopPropagation(), b.current?.querySelectorAll("li, button")[0]?.focus()), t.key === "Escape" && d && C && (t.preventDefault(), t.stopPropagation(), C.focus(), K?.(n));
             },
-            style: { paddingRight: m.length ? "0" : "16px", ..._ },
-            ref: (t) => H.current[i] = t,
-            onMouseEnter: (t) => I(t, i, m),
-            onMouseLeave: (t) => I(t, i, []),
+            style: { paddingRight: r.length ? "0" : "16px", ..._ },
+            ref: (t) => H.current[n] = t,
+            onMouseEnter: (t) => I(t, n, r),
+            onMouseLeave: (t) => I(t, n, []),
             className: `${Y} ${R.className || ""}`,
             ...R,
-            children: !!m.length && /* @__PURE__ */ S.jsx(et, { icon: "arrow_right", style: { marginLeft: "auto" } })
+            children: !!r.length && /* @__PURE__ */ S.jsx(st, { icon: "arrow_right", style: { marginLeft: "auto" } })
           },
-          `${i}-${d}`
+          `${n}-${u}`
         );
       }) })
     }
   );
 };
 export {
-  Km as MenuList
+  ht as MenuList
 };
 //# sourceMappingURL=MenuList.es.js.map