@ynput/ayon-frontend-shared 0.4.2 → 0.4.4

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 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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"}
+{"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 { MENU_TOP_BOUND } 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  /** consumed here so the spread below doesn't leak it onto the DOM wrapper */\n  parentEl?: 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  parentEl: _parentEl,\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    // sub-menus may run all the way to the bottom of the window and scroll from there\n    const estimatedHeight = Math.min(\n      items.length * 36 + 16,\n      viewportHeight - MENU_TOP_BOUND - padding,\n    )\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 = viewportHeight - estimatedHeight - padding\n    }\n    // above the dialog's own box the menu is clipped and can't be scrolled back into view\n    viewportTop = Math.max(MENU_TOP_BOUND, viewportTop)\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        maxHeight: viewportHeight - viewportTop - padding,\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\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    const contentHeight = ownVisibleEl.scrollHeight\n    let viewportTop = wrapperRect.top + deltaY\n    if (viewportTop + contentHeight > viewportHeight - padding) {\n      const fittedHeight = Math.min(contentHeight, viewportHeight - MENU_TOP_BOUND - padding)\n      viewportTop = viewportHeight - fittedHeight - padding\n    }\n    // above the dialog's own box the menu is clipped and can't be scrolled back into view\n    viewportTop = Math.max(MENU_TOP_BOUND, viewportTop)\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(\n        id,\n        { top: targetTop, left: targetLeft, maxHeight: viewportHeight - viewportTop - padding },\n        nextPlacement,\n      )\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              reserveActiveSlot,\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                  reserveActiveSlot,\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","_parentEl","style","placement","onClose","onMenuClose","itemClassName","itemStyle","setPowerpackDialog","props","itemRefs","useRef","menuRef","handleSubMenu","itemEl","parentMenuEl","offsetParentRect","itemRect","parentVisibleRect","viewportWidth","viewportHeight","padding","estimatedWidth","estimatedHeight","MENU_TOP_BOUND","gap","computeLeftSide","computeRightSide","fitsRight","fitsLeft","nextPlacement","viewportLeft","viewportTop","wrapperLeft","handleMouseLeave","useEffect","useLayoutEffect","wrapperEl","parentItemEl","ownVisibleEl","parentVisibleEl","wrapperRect","ownVisibleRect","parentItemRect","subMenuPaddingLeft","visibleWidth","firstItemRect","desiredFirstItemTop","currentFirstItemTop","deltaY","contentHeight","fittedHeight","targetTop","targetLeft","currentTop","currentLeft","jsx","Styled.MenuWrapper","Styled.Menu","item","i","label","icon","img","highlighted","onClick","link","disableClose","selected","disabled","powerFeature","active","reserveActiveSlot","powerLicense","usePowerpack","isPowerFeature","handleClickPowerFeature","e","MenuItem","isLastChild","Icon"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuList.es.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":";;;;;;AAoCO,MAAMA,KAAoC,CAAC;AAAA,EAChD,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAWC,EAA8C,EAAE,GAC3DC,IAAUD,EAAuB,IAAI,GAErCE,IAAgB,CAAC,GAAqBb,GAAYN,MAA0B;AAChF,UAAMoB,IAASJ,EAAS,QAAQV,CAAE,GAC5Be,IAAeH,EAAQ;AAC7B,QAAI,CAACE,KAAU,CAACC,EAAc;AAM9B,UAAMC,KADgBD,EAAa,gBAAuC,SAAS,MAC7C,sBAAA,GAChCE,IAAWH,EAAO,sBAAA,GAKlBI,KADHH,EAAa,cAAc,MAAM,KAA4BA,GACtB,sBAAA,GAEpCI,IAAgB,OAAO,YACvBC,IAAiB,OAAO,aACxBC,IAAU,GAGVC,IAAiB,KAAK,IAAI,KAAKJ,EAAkB,KAAK,GACtDK,IAAkB,KAAK,IAAI7B,EAAM,SAAS,KAAK,IAAI,GAAG,GAMtD8B,IAAM,GACNC,IAAkB,MAAM,KAAK,IAAIJ,GAASH,EAAkB,OAAOI,IAAiBE,CAAG,GACvFE,IAAmB,MAAMR,EAAkB,QAAQM,GACnDG,IAAYD,EAAA,IAAqBJ,KAAkBH,IAAgBE,GACnEO,IAAWH,OAAqBJ;AAEtC,QAAIQ,GACAC;AACJ,IAAI3B,MAAc,UAAUyB,KAC1BC,IAAgB,QAChBC,IAAeL,EAAA,KACNE,KACTE,IAAgB,SAChBC,IAAeJ,EAAA,KACNE,KACTC,IAAgB,QAChBC,IAAeL,EAAA,MAGfI,IAAgB,QAChBC,IAAe,KAAK,IAAIT,GAASF,IAAgBG,IAAiBD,CAAO;AAM3E,QAAIU,IAAcd,EAAS,MADJ;AAEvB,IAAIc,IAAcR,IAAkBH,IAAiBC,MACnDU,IAAc,KAAK,IAAIV,GAASD,IAAiBG,IAAkBF,CAAO;AAQ5E,UAAMW,IAAcH,MAAkB,SAASC,IADpB,KACwDA;AAEnF,IAAAlC,IAAY,GAAG;AAAA,MACb,IAAAI;AAAAA,MACA,OAAO;AAAA,QACL,KAAK+B,IAAcf,EAAiB;AAAA,QACpC,MAAMgB,IAAchB,EAAiB;AAAA,MAAA;AAAA,MAEvC,OAAAtB;AAAAA,MACA,OAAAK;AAAA,MACA,WAAW8B;AAAA;AAAA;AAAA,MAGX,UAAUf;AAAA,IAAA,CACX;AAAA,EACH,GAEMmB,IAAmB,CAAC,MAAwB;AAChD,IAAInC,KACFF,IAAY,GAAG,EAAE,IAAI,UAAU,OAAO,CAAA,GAAI;AAAA,EAE9C;AAGA,SAAAsC,GAAU,MAAM;AACd,IAAIpC,KAAWc,EAAQ,WACPA,EAAQ,QAAQ,iBAAiB,YAAY,EAAE,CAAC,GACvD,MAAA;AAAA,EAEX,GAAG,CAACd,CAAO,CAAC,GAIZqC,GAAgB,MAAM;AACpB,QAAI,CAACrC,KAAW,CAACc,EAAQ,WAAW,CAACX,KAAa,CAACJ,KAAmB,CAACG,EAAI;AAC3E,UAAMoC,IAAYxB,EAAQ,SACpByB,IAAepC,GACfc,IAAesB,EAAa,QAAQ,uBAAuB;AACjE,QAAI,CAACtB,EAAc;AAInB,UAAMuB,IAAgBF,EAAU,cAAc,MAAM,KAA4BA,GAC1EG,IACHxB,EAAa,cAAc,MAAM,KAA4BA,GAG1DC,KADgBoB,EAAU,gBAAuC,SAAS,MAC1C,sBAAA,GAChCI,IAAcJ,EAAU,sBAAA,GACxBK,IAAiBH,EAAa,sBAAA,GAC9BpB,IAAoBqB,EAAgB,sBAAA,GACpCG,IAAiBL,EAAa,sBAAA,GAI9BM,IAAqBF,EAAe,OAAOD,EAAY,MACvDI,IAAeH,EAAe,OAC9BI,IAAgBJ,EAAe,QAE/BtB,IAAgB,OAAO,YACvBC,IAAiB,OAAO,aACxBC,IAAU,GAEVG,IAAM,GACNC,IAAkB,MAAM,KAAK,IAAIJ,GAASH,EAAkB,OAAO0B,IAAepB,CAAG,GACrFE,IAAmB,MAAMR,EAAkB,QAAQM,GACnDG,IAAYD,EAAA,IAAqBkB,KAAgBzB,IAAgBE,GACjEO,IAAWH,OAAqBJ;AAEtC,QAAIQ,GACAC;AACJ,IAAI3B,MAAc,UAAUyB,KAC1BC,IAAgB,QAChBC,IAAeL,EAAA,KACNE,KACTE,IAAgB,SAChBC,IAAeJ,EAAA,KACNE,KACTC,IAAgB,QAChBC,IAAeL,EAAA,MAEfI,IAAgB,QAChBC,IAAe,KAAK,IAAIT,GAASF,IAAgByB,IAAevB,CAAO;AAOzE,UAAMyB,IADcR,EAAa,cAAc,aAAa,GACzB,sBAAA,GAG7BS,IAAsBL,EAAe,KACrCM,IAAsBF,IAAgBA,EAAc,MAAMN,EAAY,MAAM,GAC5ES,IAASF,IAAsBC;AACrC,QAAIjB,IAAcS,EAAY,MAAMS;AACpC,IAAIlB,IAAcc,IAAgBzB,IAAiBC,MACjDU,IAAc,KAAK,IAAIV,GAASD,IAAiByB,IAAgBxB,CAAO;AAI1E,UAAMW,KAAcH,MAAkB,SAASC,IAAea,IAAqBb,GAE7EoB,IAAYnB,IAAcf,EAAiB,KAC3CmC,IAAanB,KAAchB,EAAiB,MAC5CoC,KAAa,OAAOlD,GAAO,OAAQ,WAAWA,EAAM,MAAM,WAAW,OAAOA,GAAO,GAAG,CAAC,GACvFmD,KACJ,OAAOnD,GAAO,QAAS,WAAWA,EAAM,OAAO,WAAW,OAAOA,GAAO,IAAI,CAAC;AAO/E,KAAI,KAAK,IAAIgD,IAAYE,EAAU,IAAI,KAAK,KAAK,IAAID,IAAaE,EAAW,IAAI,MAC/ExD,EAAgBG,GAAI,EAAE,KAAKkD,GAAW,MAAMC,EAAA,GAActB,CAAa;AAAA,EAE3E,GAAG,CAAC/B,GAASJ,GAAOO,GAAWD,GAAIG,GAAWD,GAAO,KAAKA,GAAO,MAAML,CAAe,CAAC,GAGrFyD,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAO,EAAE,aAAazD,IAAU,KAAK,GAAG,GAAGI,EAAA;AAAA,MAC3C,WAAWJ,IAAU,aAAa;AAAA,MAClC,IAAAE;AAAA,MACA,cAAciC;AAAA,MACb,GAAGxB;AAAA,MACJ,KAAKG;AAAA,MAEL,UAAA0C,gBAAAA,EAAAA,IAACE,IAAA,EACE,YACE,OAAO,CAACC,MAAS,CAACA,EAAK,MAAM,EAC7B,IAAI,CAACA,GAAMC,MAAM;AAEhB,YAAID,EAAK;AACP,iBAAOA,EAAK;AAGd,YAAIA,GAAM,OAAO,aAAaA,GAAM,UAAW,QAAOH,gBAAAA,MAAC,UAAQI,CAAG;AAElE,cAAM;AAAA,UACJ,OAAAC;AAAA,UACA,MAAAC;AAAA,UACA,KAAAC;AAAA,UACA,aAAAC;AAAA,UACA,SAAAC;AAAA,UACA,MAAAC;AAAA,UACA,OAAAtE,IAAQ,CAAA;AAAA,UACR,IAAAM;AAAAA,UACA,cAAAiE;AAAA,UACA,UAAAC;AAAA,UACA,UAAAC;AAAA,UACA,cAAAC;AAAA,UACA,QAAAC;AAAA,UACA,GAAG5D;AAAAA,QAAA,IACDgD,GAEE,EAAE,cAAAa,EAAA,IAAiBC,GAAA,GACnBC,IAAiB,CAACF,KAAgBF,GAElCK,IAA0B,CAACC,MAAwB;AACvD,UAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA,GACEN,KACF5D,IAAqB4D,CAAY,GAInC/D,IAAA;AAAA,QACF;AAEA,eACEiD,gBAAAA,EAAAA;AAAAA,UAACqB;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAGR,OAAAhB;AAAA,YACA,MAAAC;AAAA,YACA,KAAAC;AAAA,YACA,aAAAC;AAAA,YACA,OAAApE;AAAAA,YACA,UAAAwE;AAAA,YACA,UAAAC;AAAA,YACA,cAAAC;AAAA,YACA,QAAAC;AAAA,YAEF,QAAQL;AAAA,YACR,SAAS,CAACU,MACRF,IACIC,EAAwBC,CAAC,IACzBhF,EAAM,SACNmB,EAAc6D,GAAG1E,GAAIN,CAAK,IAC1BC,EAAY+E,GAAGX,GAASC,GAAMC,CAAY;AAAA,YAEhD,WAAW,CAACS,MAAwC;AAClD,cAAIA,EAAE,QAAQ,YACRF,IACFC,EAAwBC,CAAQ,IACvBhF,EAAM,SACfmB,EAAc6D,GAAU1E,GAAIN,CAAK,IAEjCC,EAAY+E,GAAUX,GAASC,CAAI;AAGvC,oBAAMY,IAAc,CAAEF,EAAE,OAAuB;AAC/C,cAAIA,EAAE,QAAQ,SAASE,KAAe,CAACF,EAAE,aACvCA,EAAE,eAAA,GACFA,EAAE,gBAAA,GAEY9D,EAAQ,SAAS,iBAAiB,YAAY,EAAE,CAAC,GACxD,MAAA,IAGL8D,EAAE,QAAQ,YAAY5E,KAAWG,MACnCyE,EAAE,eAAA,GACFA,EAAE,gBAAA,GACFzE,EAAU,MAAA,GACVG,IAAUJ,CAAE;AAAA,YAEhB;AAAA,YACA,OAAO,EAAE,cAAcN,EAAM,SAAS,MAAM,QAAQ,GAAGa,EAAA;AAAA,YACvD,KAAK,CAACmE,MAAOhE,EAAS,QAAQV,CAAE,IAAI0E;AAAA,YACpC,cAAc,CAACA,MAAM7D,EAAc6D,GAAG1E,GAAIN,CAAK;AAAA,YAC/C,cAAc,CAACgF,MAAM7D,EAAc6D,GAAG1E,GAAI,CAAA,CAAE;AAAA,YAC5C,WAAW,GAAGM,CAAa,IAAIG,EAAM,aAAa,EAAE;AAAA,YACnD,GAAGA;AAAAA,YAEH,UAAA,CAAC,CAACf,EAAM,UAAU4D,gBAAAA,EAAAA,IAACuB,IAAA,EAAK,MAAK,eAAc,OAAO,EAAE,YAAY,OAAA,EAAO,CAAG;AAAA,UAAA;AAAA,UArDtE,GAAG7E,CAAE,IAAI0D,CAAC;AAAA,QAAA;AAAA,MAwDrB,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"MenuList.es.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 { MENU_TOP_BOUND } 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  /** consumed here so the spread below doesn't leak it onto the DOM wrapper */\n  parentEl?: 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  parentEl: _parentEl,\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    // sub-menus may run all the way to the bottom of the window and scroll from there\n    const estimatedHeight = Math.min(\n      items.length * 36 + 16,\n      viewportHeight - MENU_TOP_BOUND - padding,\n    )\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 = viewportHeight - estimatedHeight - padding\n    }\n    // above the dialog's own box the menu is clipped and can't be scrolled back into view\n    viewportTop = Math.max(MENU_TOP_BOUND, viewportTop)\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        maxHeight: viewportHeight - viewportTop - padding,\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\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    const contentHeight = ownVisibleEl.scrollHeight\n    let viewportTop = wrapperRect.top + deltaY\n    if (viewportTop + contentHeight > viewportHeight - padding) {\n      const fittedHeight = Math.min(contentHeight, viewportHeight - MENU_TOP_BOUND - padding)\n      viewportTop = viewportHeight - fittedHeight - padding\n    }\n    // above the dialog's own box the menu is clipped and can't be scrolled back into view\n    viewportTop = Math.max(MENU_TOP_BOUND, viewportTop)\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(\n        id,\n        { top: targetTop, left: targetLeft, maxHeight: viewportHeight - viewportTop - padding },\n        nextPlacement,\n      )\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              reserveActiveSlot,\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                  reserveActiveSlot,\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","_parentEl","style","placement","onClose","onMenuClose","itemClassName","itemStyle","setPowerpackDialog","props","itemRefs","useRef","menuRef","handleSubMenu","itemEl","parentMenuEl","offsetParentRect","itemRect","parentVisibleRect","viewportWidth","viewportHeight","padding","estimatedWidth","estimatedHeight","MENU_TOP_BOUND","gap","computeLeftSide","computeRightSide","fitsRight","fitsLeft","nextPlacement","viewportLeft","viewportTop","wrapperLeft","handleMouseLeave","useEffect","useLayoutEffect","wrapperEl","parentItemEl","ownVisibleEl","parentVisibleEl","wrapperRect","ownVisibleRect","parentItemRect","subMenuPaddingLeft","visibleWidth","firstItemRect","desiredFirstItemTop","currentFirstItemTop","deltaY","contentHeight","fittedHeight","targetTop","targetLeft","currentTop","currentLeft","jsx","Styled.MenuWrapper","Styled.Menu","item","i","label","icon","img","highlighted","onClick","link","disableClose","selected","disabled","powerFeature","active","reserveActiveSlot","powerLicense","usePowerpack","isPowerFeature","handleClickPowerFeature","e","MenuItem","isLastChild","Icon"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useMenuPosition.cjs.js","sources":["../../../../../src/components/Menu/useMenuPosition.ts"],"sourcesContent":["import { useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react'\n\ninterface MenuPosition {\n  top: number\n  left?: number\n  right?: number\n  bottom?: number\n}\n\nfunction calculateMenuPosition(\n  targetElement: HTMLElement | null,\n  menuElement: HTMLElement | null,\n  align: 'left' | 'right' = 'right',\n): MenuPosition | null {\n  if (!targetElement) return null\n\n  const targetRect = targetElement.getBoundingClientRect()\n  const menuRect = menuElement?.getBoundingClientRect()\n  const menuWidth = menuRect?.width || 200\n  const menuHeight = menuRect?.height || 300\n  const padding = 8 // Minimum distance from screen edges\n  const viewportWidth = window.innerWidth\n  const viewportHeight = window.innerHeight\n\n  // Default position (below the target)\n  let top = targetRect.bottom + 8 - 42\n  let left: number | undefined\n  let right: number | undefined\n  let bottom: number | undefined\n\n  // Check if menu fits below, otherwise flip to above\n  if (top + menuHeight > viewportHeight - padding) {\n    // If it doesn't fit below, check if it fits above\n    const topAbove = targetRect.top - 8 - menuHeight\n    if (topAbove >= padding) {\n      top = topAbove\n    } else {\n      // If it fits neither, prefer the side with more space or clamp\n      // For now, let's clamp to bottom of viewport\n      top = Math.min(top, viewportHeight - menuHeight - padding)\n      // Or if we want to stick to bottom edge:\n      // bottom = padding\n      // top = undefined\n    }\n  }\n\n  // Horizontal positioning\n  if (align === 'right') {\n    // Align right edge of menu with right edge of target\n    // left position would be: targetRect.right - menuWidth\n    const potentialLeft = targetRect.right - menuWidth\n\n    if (potentialLeft >= padding) {\n      // Fits on the left side\n      left = potentialLeft\n    } else {\n      // Doesn't fit, try aligning left edge with target left\n      left = targetRect.left\n    }\n  } else {\n    // Align left edge of menu with left edge of target\n    const potentialLeft = targetRect.left\n    if (potentialLeft + menuWidth <= viewportWidth - padding) {\n      left = potentialLeft\n    } else {\n      // Doesn't fit, try aligning right edge with target right\n      left = targetRect.right - menuWidth\n    }\n  }\n\n  // Final clamp for horizontal to ensure it doesn't overflow viewport\n  if (left !== undefined) {\n    left = Math.max(padding, Math.min(left, viewportWidth - menuWidth - padding))\n  }\n\n  // Convert to CSS properties.\n  // Note: We are using fixed positioning relative to viewport usually,\n  // but if the dialog is in a portal, top/left are relative to the window.\n  // If we want to support 'right' CSS property for better resizing behavior:\n  if (align === 'right' && left !== undefined) {\n    // If we aligned to right, maybe we want to set 'right' property instead of 'left'?\n    // But 'left' is easier to clamp. Let's stick to 'left' and 'top' for simplicity unless 'right' is explicitly needed.\n  }\n\n  return { top, left }\n}\n\ninterface UseMenuPositionReturn {\n  position: MenuPosition | null\n  menuRef: React.RefObject<HTMLDivElement>\n}\n\nexport function useMenuPosition(\n  target: HTMLElement | null,\n  targetId: string,\n  align: 'left' | 'right' = 'right',\n): UseMenuPositionReturn {\n  const [position, setPosition] = useState<MenuPosition | null>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const updatePosition = useCallback(() => {\n    let targetElement: HTMLElement | null = target\n\n    if (!targetElement && targetId) {\n      targetElement = document.getElementById(targetId)\n    }\n\n    if (!targetElement) {\n      // Only warn if we expected a target but didn't find one\n      if (targetId) console.warn(`Target element with id '${targetId}' not found`)\n      return\n    }\n\n    // We need the menu element to calculate its dimensions\n    if (!menuRef.current) return\n\n    const newPosition = calculateMenuPosition(targetElement, menuRef.current, align)\n    if (newPosition) {\n      setPosition(newPosition)\n    }\n  }, [target, targetId, align])\n\n  // Initial position update\n  useLayoutEffect(() => {\n    updatePosition()\n  }, [updatePosition])\n\n  // Update on resize and scroll\n  useEffect(() => {\n    const handleEvent = () => requestAnimationFrame(updatePosition)\n\n    window.addEventListener('resize', handleEvent, { passive: true })\n    window.addEventListener('scroll', handleEvent, { passive: true })\n\n    return () => {\n      window.removeEventListener('resize', handleEvent)\n      window.removeEventListener('scroll', handleEvent)\n    }\n  }, [updatePosition])\n\n  // Observe menu size changes\n  useEffect(() => {\n    if (!menuRef.current) return\n\n    const resizeObserver = new ResizeObserver(() => {\n      updatePosition()\n    })\n\n    resizeObserver.observe(menuRef.current)\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [updatePosition])\n\n  return { position, menuRef }\n}\n"],"names":["calculateMenuPosition","targetElement","menuElement","align","targetRect","menuRect","menuWidth","menuHeight","padding","viewportWidth","viewportHeight","top","left","topAbove","potentialLeft","useMenuPosition","target","targetId","position","setPosition","useState","menuRef","useRef","updatePosition","useCallback","newPosition","useLayoutEffect","useEffect","handleEvent","resizeObserver"],"mappings":"yGASA,SAASA,EACPC,EACAC,EACAC,EAA0B,QACL,CACrB,GAAI,CAACF,EAAe,OAAO,KAE3B,MAAMG,EAAaH,EAAc,sBAAA,EAC3BI,EAAWH,GAAa,sBAAA,EACxBI,EAAYD,GAAU,OAAS,IAC/BE,EAAaF,GAAU,QAAU,IACjCG,EAAU,EACVC,EAAgB,OAAO,WACvBC,EAAiB,OAAO,YAG9B,IAAIC,EAAMP,EAAW,OAAS,EAAI,GAC9BQ,EAKJ,GAAID,EAAMJ,EAAaG,EAAiBF,EAAS,CAE/C,MAAMK,EAAWT,EAAW,IAAM,EAAIG,EAClCM,GAAYL,EACdG,EAAME,EAINF,EAAM,KAAK,IAAIA,EAAKD,EAAiBH,EAAaC,CAAO,CAK7D,CAGA,GAAIL,IAAU,QAAS,CAGrB,MAAMW,EAAgBV,EAAW,MAAQE,EAErCQ,GAAiBN,EAEnBI,EAAOE,EAGPF,EAAOR,EAAW,IAEtB,KAAO,CAEL,MAAMU,EAAgBV,EAAW,KAC7BU,EAAgBR,GAAaG,EAAgBD,EAC/CI,EAAOE,EAGPF,EAAOR,EAAW,MAAQE,CAE9B,CAGA,OAAIM,IAAS,SACXA,EAAO,KAAK,IAAIJ,EAAS,KAAK,IAAII,EAAMH,EAAgBH,EAAYE,CAAO,CAAC,GAYvE,CAAE,IAAAG,EAAK,KAAAC,CAAA,CAChB,CAOO,SAASG,EACdC,EACAC,EACAd,EAA0B,QACH,CACvB,KAAM,CAACe,EAAUC,CAAW,EAAIC,EAAAA,SAA8B,IAAI,EAC5DC,EAAUC,EAAAA,OAAuB,IAAI,EAErCC,EAAiBC,EAAAA,YAAY,IAAM,CACvC,IAAIvB,EAAoCe,EAMxC,GAJI,CAACf,GAAiBgB,IACpBhB,EAAgB,SAAS,eAAegB,CAAQ,GAG9C,CAAChB,EAAe,CAEdgB,GAAU,QAAQ,KAAK,2BAA2BA,CAAQ,aAAa,EAC3E,MACF,CAGA,GAAI,CAACI,EAAQ,QAAS,OAEtB,MAAMI,EAAczB,EAAsBC,EAAeoB,EAAQ,QAASlB,CAAK,EAC3EsB,GACFN,EAAYM,CAAW,CAE3B,EAAG,CAACT,EAAQC,EAAUd,CAAK,CAAC,EAG5BuB,OAAAA,EAAAA,gBAAgB,IAAM,CACpBH,EAAA,CACF,EAAG,CAACA,CAAc,CAAC,EAGnBI,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAc,IAAM,sBAAsBL,CAAc,EAE9D,cAAO,iBAAiB,SAAUK,EAAa,CAAE,QAAS,GAAM,EAChE,OAAO,iBAAiB,SAAUA,EAAa,CAAE,QAAS,GAAM,EAEzD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAW,EAChD,OAAO,oBAAoB,SAAUA,CAAW,CAClD,CACF,EAAG,CAACL,CAAc,CAAC,EAGnBI,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,EAAQ,QAAS,OAEtB,MAAMQ,EAAiB,IAAI,eAAe,IAAM,CAC9CN,EAAA,CACF,CAAC,EAED,OAAAM,EAAe,QAAQR,EAAQ,OAAO,EAE/B,IAAM,CACXQ,EAAe,WAAA,CACjB,CACF,EAAG,CAACN,CAAc,CAAC,EAEZ,CAAE,SAAAL,EAAU,QAAAG,CAAA,CACrB"}
+{"version":3,"file":"useMenuPosition.cjs.js","sources":["../../../../../src/components/Menu/useMenuPosition.ts"],"sourcesContent":["import { useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react'\nimport { DIALOG_TOP_OFFSET, MENU_TOP_BOUND } from './Menu.styled'\n\ninterface MenuPosition {\n  top: number\n  left?: number\n  right?: number\n  bottom?: number\n  maxHeight?: number\n}\n\nfunction calculateMenuPosition(\n  targetElement: HTMLElement | null,\n  menuElement: HTMLElement | null,\n  align: 'left' | 'right' = 'right',\n): MenuPosition | null {\n  if (!targetElement) return null\n\n  const targetRect = targetElement.getBoundingClientRect()\n  const menuRect = menuElement?.getBoundingClientRect()\n  const menuWidth = menuRect?.width || 200\n  const menuHeight = menuRect?.height || 300\n  const padding = 8 // Minimum distance from screen edges\n  const viewportWidth = window.innerWidth\n  const viewportHeight = window.innerHeight\n\n  // Default position (below the target)\n  let top = targetRect.bottom + 8 - DIALOG_TOP_OFFSET\n  let left: number | undefined\n  let right: number | undefined\n  let bottom: number | undefined\n\n  // top is relative to the dialog, which starts below the app header\n  const minTop = MENU_TOP_BOUND - DIALOG_TOP_OFFSET\n\n  // Check if menu fits below, otherwise flip to above\n  if (top + DIALOG_TOP_OFFSET + menuHeight > viewportHeight - padding) {\n    // If it doesn't fit below, check if it fits above\n    const topAbove = targetRect.top - 8 - menuHeight - DIALOG_TOP_OFFSET\n    // Fits neither way: keep it below the target and let it scroll to the window bottom\n    if (topAbove >= minTop) top = topAbove\n  }\n\n  // above the dialog's own box the menu is clipped and can't be scrolled back into view\n  top = Math.max(minTop, top)\n\n  // Horizontal positioning\n  if (align === 'right') {\n    // Align right edge of menu with right edge of target\n    // left position would be: targetRect.right - menuWidth\n    const potentialLeft = targetRect.right - menuWidth\n\n    if (potentialLeft >= padding) {\n      // Fits on the left side\n      left = potentialLeft\n    } else {\n      // Doesn't fit, try aligning left edge with target left\n      left = targetRect.left\n    }\n  } else {\n    // Align left edge of menu with left edge of target\n    const potentialLeft = targetRect.left\n    if (potentialLeft + menuWidth <= viewportWidth - padding) {\n      left = potentialLeft\n    } else {\n      // Doesn't fit, try aligning right edge with target right\n      left = targetRect.right - menuWidth\n    }\n  }\n\n  // Final clamp for horizontal to ensure it doesn't overflow viewport\n  if (left !== undefined) {\n    left = Math.max(padding, Math.min(left, viewportWidth - menuWidth - padding))\n  }\n\n  // Convert to CSS properties.\n  // Note: We are using fixed positioning relative to viewport usually,\n  // but if the dialog is in a portal, top/left are relative to the window.\n  // If we want to support 'right' CSS property for better resizing behavior:\n  if (align === 'right' && left !== undefined) {\n    // If we aligned to right, maybe we want to set 'right' property instead of 'left'?\n    // But 'left' is easier to clamp. Let's stick to 'left' and 'top' for simplicity unless 'right' is explicitly needed.\n  }\n\n  return { top, left, maxHeight: viewportHeight - (top + DIALOG_TOP_OFFSET) - padding }\n}\n\ninterface UseMenuPositionReturn {\n  position: MenuPosition | null\n  menuRef: React.RefObject<HTMLDivElement>\n}\n\nexport function useMenuPosition(\n  target: HTMLElement | null,\n  targetId: string,\n  align: 'left' | 'right' = 'right',\n): UseMenuPositionReturn {\n  const [position, setPosition] = useState<MenuPosition | null>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const updatePosition = useCallback(() => {\n    let targetElement: HTMLElement | null = target\n\n    if (!targetElement && targetId) {\n      targetElement = document.getElementById(targetId)\n    }\n\n    if (!targetElement) {\n      // Only warn if we expected a target but didn't find one\n      if (targetId) console.warn(`Target element with id '${targetId}' not found`)\n      return\n    }\n\n    // We need the menu element to calculate its dimensions\n    if (!menuRef.current) return\n\n    const newPosition = calculateMenuPosition(targetElement, menuRef.current, align)\n    if (!newPosition) return\n\n    setPosition((prev) =>\n      prev &&\n      Math.abs(prev.top - newPosition.top) < 1 &&\n      Math.abs((prev.left ?? 0) - (newPosition.left ?? 0)) < 1 &&\n      Math.abs((prev.maxHeight ?? 0) - (newPosition.maxHeight ?? 0)) < 1\n        ? prev\n        : newPosition,\n    )\n  }, [target, targetId, align])\n\n  // Initial position update\n  useLayoutEffect(() => {\n    updatePosition()\n  }, [updatePosition])\n\n  // Update on resize and scroll\n  useEffect(() => {\n    const handleEvent = () => requestAnimationFrame(updatePosition)\n\n    window.addEventListener('resize', handleEvent, { passive: true })\n    window.addEventListener('scroll', handleEvent, { passive: true })\n\n    return () => {\n      window.removeEventListener('resize', handleEvent)\n      window.removeEventListener('scroll', handleEvent)\n    }\n  }, [updatePosition])\n\n  // Observe menu size changes\n  useEffect(() => {\n    if (!menuRef.current) return\n\n    const resizeObserver = new ResizeObserver(() => {\n      updatePosition()\n    })\n\n    resizeObserver.observe(menuRef.current)\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [updatePosition])\n\n  return { position, menuRef }\n}\n"],"names":["calculateMenuPosition","targetElement","menuElement","align","targetRect","menuRect","menuWidth","menuHeight","padding","viewportWidth","viewportHeight","top","DIALOG_TOP_OFFSET","left","minTop","MENU_TOP_BOUND","topAbove","potentialLeft","useMenuPosition","target","targetId","position","setPosition","useState","menuRef","useRef","updatePosition","useCallback","newPosition","prev","useLayoutEffect","useEffect","handleEvent","resizeObserver"],"mappings":"2IAWA,SAASA,EACPC,EACAC,EACAC,EAA0B,QACL,CACrB,GAAI,CAACF,EAAe,OAAO,KAE3B,MAAMG,EAAaH,EAAc,sBAAA,EAC3BI,EAAWH,GAAa,sBAAA,EACxBI,EAAYD,GAAU,OAAS,IAC/BE,EAAaF,GAAU,QAAU,IACjCG,EAAU,EACVC,EAAgB,OAAO,WACvBC,EAAiB,OAAO,YAG9B,IAAIC,EAAMP,EAAW,OAAS,EAAIQ,EAAAA,kBAC9BC,EAKJ,MAAMC,EAASC,EAAAA,eAAiBH,EAAAA,kBAGhC,GAAID,EAAMC,EAAAA,kBAAoBL,EAAaG,EAAiBF,EAAS,CAEnE,MAAMQ,EAAWZ,EAAW,IAAM,EAAIG,EAAaK,EAAAA,kBAE/CI,GAAYF,IAAQH,EAAMK,EAChC,CAMA,GAHAL,EAAM,KAAK,IAAIG,EAAQH,CAAG,EAGtBR,IAAU,QAAS,CAGrB,MAAMc,EAAgBb,EAAW,MAAQE,EAErCW,GAAiBT,EAEnBK,EAAOI,EAGPJ,EAAOT,EAAW,IAEtB,KAAO,CAEL,MAAMa,EAAgBb,EAAW,KAC7Ba,EAAgBX,GAAaG,EAAgBD,EAC/CK,EAAOI,EAGPJ,EAAOT,EAAW,MAAQE,CAE9B,CAGA,OAAIO,IAAS,SACXA,EAAO,KAAK,IAAIL,EAAS,KAAK,IAAIK,EAAMJ,EAAgBH,EAAYE,CAAO,CAAC,GAYvE,CAAE,IAAAG,EAAK,KAAAE,EAAM,UAAWH,GAAkBC,EAAMC,EAAAA,mBAAqBJ,CAAA,CAC9E,CAOO,SAASU,EACdC,EACAC,EACAjB,EAA0B,QACH,CACvB,KAAM,CAACkB,EAAUC,CAAW,EAAIC,EAAAA,SAA8B,IAAI,EAC5DC,EAAUC,EAAAA,OAAuB,IAAI,EAErCC,EAAiBC,EAAAA,YAAY,IAAM,CACvC,IAAI1B,EAAoCkB,EAMxC,GAJI,CAAClB,GAAiBmB,IACpBnB,EAAgB,SAAS,eAAemB,CAAQ,GAG9C,CAACnB,EAAe,CAEdmB,GAAU,QAAQ,KAAK,2BAA2BA,CAAQ,aAAa,EAC3E,MACF,CAGA,GAAI,CAACI,EAAQ,QAAS,OAEtB,MAAMI,EAAc5B,EAAsBC,EAAeuB,EAAQ,QAASrB,CAAK,EAC1EyB,GAELN,EAAaO,GACXA,GACA,KAAK,IAAIA,EAAK,IAAMD,EAAY,GAAG,EAAI,GACvC,KAAK,KAAKC,EAAK,MAAQ,IAAMD,EAAY,MAAQ,EAAE,EAAI,GACvD,KAAK,KAAKC,EAAK,WAAa,IAAMD,EAAY,WAAa,EAAE,EAAI,EAC7DC,EACAD,CAAA,CAER,EAAG,CAACT,EAAQC,EAAUjB,CAAK,CAAC,EAG5B2B,OAAAA,EAAAA,gBAAgB,IAAM,CACpBJ,EAAA,CACF,EAAG,CAACA,CAAc,CAAC,EAGnBK,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAc,IAAM,sBAAsBN,CAAc,EAE9D,cAAO,iBAAiB,SAAUM,EAAa,CAAE,QAAS,GAAM,EAChE,OAAO,iBAAiB,SAAUA,EAAa,CAAE,QAAS,GAAM,EAEzD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAW,EAChD,OAAO,oBAAoB,SAAUA,CAAW,CAClD,CACF,EAAG,CAACN,CAAc,CAAC,EAGnBK,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,EAAQ,QAAS,OAEtB,MAAMS,EAAiB,IAAI,eAAe,IAAM,CAC9CP,EAAA,CACF,CAAC,EAED,OAAAO,EAAe,QAAQT,EAAQ,OAAO,EAE/B,IAAM,CACXS,EAAe,WAAA,CACjB,CACF,EAAG,CAACP,CAAc,CAAC,EAEZ,CAAE,SAAAL,EAAU,QAAAG,CAAA,CACrB"}