@servicetitan/anvil2 1.27.2 → 1.28.0

package/dist/Menu-IEBrkdoN.js

@@ -0,0 +1,1090 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { forwardRef, useContext, createContext, useState, useRef, useEffect, useMemo, useId, useCallback, useLayoutEffect } from 'react';
+import { useTrackingId } from './useTrackingId.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb-Bz9MqbHb.js';
+import { c as cx } from './index-tZvMCc77.js';
+import { e as DialogContext } from './Dialog-CUK5YvVY-Dv5edacC.js';
+import { B as Button } from './Button-Ce--YZ9L-Csh0Zzuf.js';
+import { S as SvgArrowDropDown } from './arrow_drop_down-ChAdBDux.js';
+import { I as Icon } from './Icon-DbHA5GV1-DwO2aGkj.js';
+import { s as supportsPopover } from './supportsPopover-8aJR37cf-8aJR37cf.js';
+import { v as useListItem, w as useFloatingTree, x as useFloatingNodeId, y as useFloatingParentNodeId, d as useFloating, o as offset, f as flip, s as shift, l as limitShift, r as size, e as autoUpdate, h as useHover, i as safePolygon, t as useClick, m as useRole, k as useDismiss, z as useListNavigation, A as useTypeahead, n as useInteractions, B as FloatingNode, C as FloatingList, F as FloatingPortal, q as FloatingFocusManager, D as FloatingTree, p as computePosition } from './floating-ui.react-4AwURJA3.js';
+import { a as PortalProviderContext } from './PortalProvider-9lXkQ0xY-BKoGegS1.js';
+import { e as DrawerContext } from './Drawer-CrXiK2w0-BMzKuNFt.js';
+import { a as ThemeProviderContext, T as ThemeProvider } from './ThemeProvider-CioBp3gk-B6HyDICa.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+
+import './Menu.css';const SvgArrowDropUp = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M8.71 12.29 11.3 9.7a.996.996 0 0 1 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71z" }));
+
+const SvgNavigateNext = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9.31 6.71a.996.996 0 0 0 0 1.41L13.19 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.72 6.7c-.38-.38-1.02-.38-1.41.01z" }));
+
+const item$1 = "_item_1q43b_5";
+const menu = "_menu_1q43b_49";
+const scroll = "_scroll_1q43b_60";
+const disabled$1 = "_disabled_1q43b_108";
+const styles$1 = {
+	"nested-menu": "_nested-menu_1q43b_4",
+	item: item$1,
+	menu: menu,
+	scroll: scroll,
+	"arrow-down": "_arrow-down_1q43b_70",
+	"arrow-up": "_arrow-up_1q43b_71",
+	"arrow-icon": "_arrow-icon_1q43b_83",
+	disabled: disabled$1
+};
+
+const MenuLegacyItem = forwardRef(({ label, disabled, icon, className, ...props }, forwardedRef) => {
+  const MenuLegacy = useContext(MenuLegacyContext);
+  const item = useListItem({
+    label: disabled ? null : childrenToString(label)
+  });
+  const tree = useFloatingTree();
+  const isActive = item.index === MenuLegacy.activeIndex;
+  const itemCx = cx([styles$1["item"]], className);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref: useMergeRefs([item.ref, forwardedRef]),
+      type: "button",
+      role: "menuitem",
+      "data-anv": "menu-item",
+      className: itemCx,
+      tabIndex: isActive ? 0 : -1,
+      disabled,
+      ...MenuLegacy.getItemProps({
+        onClick(event) {
+          props.onClick?.(event);
+          tree?.events.emit("click");
+        },
+        onFocus(event) {
+          props.onFocus?.(event);
+          MenuLegacy.setHasFocusInside?.(true);
+        }
+      }),
+      children: [
+        icon ? /* @__PURE__ */ jsx(Icon, { inherit: true, "aria-hidden": true, svg: icon }) : null,
+        label
+      ]
+    }
+  );
+});
+MenuLegacyItem.displayName = "MenuLegacyItem";
+
+const MenuLegacyContext = createContext({
+  getItemProps: () => ({}),
+  activeIndex: null,
+  isOpen: false
+});
+const MenuLegacyComponent = forwardRef(
+  ({
+    children,
+    disableAutoHeight,
+    open,
+    icon,
+    root,
+    placement = "bottom-start",
+    ...props
+  }, forwardedRef) => {
+    const [isOpen, setIsOpen] = useState(!!open || false);
+    const [hasFocusInside, setHasFocusInside] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const scrollRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [menuHeight, setMenuLegacyHeight] = useState(null);
+    const [arrowStart, setArrowStart] = useState(false);
+    const [arrowEnd, setArrowEnd] = useState(false);
+    const elementsRef = useRef([]);
+    const labelsRef = useRef([]);
+    const parent = useContext(MenuLegacyContext);
+    const { root: portalRoot } = useContext(PortalProviderContext);
+    const tree = useFloatingTree();
+    const nodeId = useFloatingNodeId();
+    const parentId = useFloatingParentNodeId();
+    const item = useListItem();
+    const isNested = parentId != null;
+    const { theme, mode = "light" } = useContext(ThemeProviderContext);
+    const dialogContext = useContext(DialogContext);
+    const drawerContext = useContext(DrawerContext);
+    const fallbackArr = () => {
+      if (!isNested) {
+        if (placement.startsWith("top")) {
+          return disableAutoHeight ? placement : ["top-start", "top-end", "bottom-start", "bottom-end"];
+        }
+        return disableAutoHeight ? placement : ["bottom-start", "bottom-end", "top-start", "top-end"];
+      }
+      return parent.disableAutoHeight ? ["right-start"] : ["right-start", "right-end", "left-start", "left-end"];
+    };
+    const handleIsOpenChange = (internalOpen) => {
+      if (typeof open === "boolean") {
+        setIsOpen(open);
+        return;
+      }
+      setIsOpen(internalOpen);
+    };
+    const { floatingStyles, refs, context } = useFloating({
+      nodeId,
+      open: isOpen,
+      onOpenChange: handleIsOpenChange,
+      placement: isNested ? "right-start" : placement,
+      middleware: [
+        offset({
+          mainAxis: isNested ? 0 : 4,
+          alignmentAxis: isNested ? -4 : 0
+        }),
+        flip({
+          fallbackStrategy: "bestFit",
+          fallbackPlacements: fallbackArr()
+        }),
+        shift({
+          mainAxis: !parent.disableAutoHeight,
+          crossAxis: false,
+          limiter: limitShift({
+            mainAxis: !parent.disableAutoHeight
+          })
+        }),
+        size({
+          padding: 8,
+          apply({ availableWidth, availableHeight, elements }) {
+            if (disableAutoHeight ?? parent.disableAutoHeight) return;
+            setMenuLegacyHeight(availableHeight);
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+              maxHeight: `${availableHeight}px`
+            });
+          }
+        })
+      ],
+      whileElementsMounted: autoUpdate
+    });
+    const [hoverEnabled, setHoverEnabled] = useState(false);
+    const hover = useHover(context, {
+      enabled: hoverEnabled,
+      delay: { open: 75 },
+      handleClose: safePolygon({ blockPointerEvents: true })
+    });
+    const click = useClick(context, {
+      event: "mousedown",
+      toggle: !isNested,
+      ignoreMouse: isNested
+    });
+    const role = useRole(context, { role: "menu" });
+    const dismiss = useDismiss(context, { bubbles: true });
+    const listNavigation = useListNavigation(context, {
+      listRef: elementsRef,
+      activeIndex,
+      nested: isNested,
+      onNavigate: setActiveIndex
+    });
+    const typeahead = useTypeahead(context, {
+      listRef: labelsRef,
+      onMatch: isOpen ? setActiveIndex : undefined,
+      activeIndex
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([hover, click, role, dismiss, listNavigation, typeahead]);
+    useEffect(() => {
+      if (!tree) return;
+      function handleTreeClick() {
+        setIsOpen(!!open || false);
+      }
+      function onSubMenuLegacyOpen(event) {
+        if (event.nodeId === nodeId || event.parentId !== parentId) {
+          return;
+        }
+        setIsOpen(!!open || false);
+      }
+      tree.events.on("click", handleTreeClick);
+      tree.events.on("menuopen", onSubMenuLegacyOpen);
+      return () => {
+        tree.events.off("click", handleTreeClick);
+        tree.events.off("menuopen", onSubMenuLegacyOpen);
+      };
+    }, [tree, nodeId, parentId]);
+    useEffect(() => {
+      if (disableAutoHeight ?? parent.disableAutoHeight) return;
+      if (!isOpen) {
+        setMenuLegacyHeight(null);
+        return;
+      }
+      setTimeout(() => {
+        if (!scrollRef.current || !refs.floating.current) return;
+        setMenuLegacyHeight(refs.floating.current.clientHeight);
+        const isOverflow = scrollRef.current.scrollHeight > refs.floating.current.clientHeight;
+        if (!isOverflow) return;
+        const showTop = scrollRef.current.scrollTop > 0;
+        const showBottom = scrollRef.current.scrollHeight - refs.floating.current.clientHeight - scrollTop - 16 > 0;
+        setArrowStart(showTop);
+        setArrowEnd(showBottom);
+      }, 0);
+    }, [
+      disableAutoHeight,
+      isOpen,
+      parent.disableAutoHeight,
+      refs.floating,
+      scrollTop
+    ]);
+    useEffect(() => {
+      if (!isOpen || !tree) return;
+      tree.events.emit("menuopen", { parentId, nodeId });
+    }, [tree, isOpen, nodeId, parentId]);
+    const menuComponentCX = cx({
+      [styles$1["nested-menu"]]: isNested,
+      [styles$1["item"]]: !isNested
+    });
+    const menuRefs = useMergeRefs([refs.setReference, item.ref, forwardedRef]);
+    const triggerProps = {
+      "data-open": isOpen,
+      "data-focus-inside": hasFocusInside,
+      ref: menuRefs,
+      ...getReferenceProps(
+        parent.getItemProps({
+          ...props,
+          // This is to allow any type of element to be used as a custom trigger element
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          onFocus(event) {
+            props.onFocus?.(event);
+            setHasFocusInside(false);
+            parent.setHasFocusInside?.(true);
+          }
+          // This is to allow any type of element to be used as a custom trigger element
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        })
+      )
+    };
+    const value = useMemo(
+      () => ({
+        activeIndex,
+        setActiveIndex,
+        getItemProps,
+        setHasFocusInside,
+        isOpen,
+        disableAutoHeight: disableAutoHeight ?? parent.disableAutoHeight
+      }),
+      [
+        activeIndex,
+        disableAutoHeight,
+        getItemProps,
+        isOpen,
+        parent.disableAutoHeight
+      ]
+    );
+    return /* @__PURE__ */ jsxs(FloatingNode, { id: nodeId, children: [
+      isNested ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: menuRefs,
+          tabIndex: parent.activeIndex === item.index ? 0 : -1,
+          role: "menuitem",
+          "data-anv": "menu-item",
+          "data-open": isOpen ? "" : undefined,
+          "data-nested": "",
+          "data-focus-inside": hasFocusInside ? "" : undefined,
+          className: menuComponentCX,
+          ...getReferenceProps(
+            parent.getItemProps({
+              ...props,
+              onFocus(event) {
+                props.onFocus?.(event);
+                setHasFocusInside(false);
+                parent.setHasFocusInside?.(true);
+              },
+              onMouseEnter: () => setHoverEnabled(true)
+            })
+          ),
+          children: [
+            icon ? /* @__PURE__ */ jsx(Icon, { inherit: true, "aria-hidden": true, svg: icon }) : null,
+            "label" in props && props.label,
+            /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
+            /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, svg: SvgNavigateNext })
+          ]
+        }
+      ) : "trigger" in props ? props.trigger?.(triggerProps) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          ...triggerProps,
+          ...getReferenceProps({
+            onFocus: (event) => props.onFocus?.(event)
+          }),
+          icon,
+          "data-anv": "menu",
+          children: "label" in props && props.label
+        }
+      ),
+      /* @__PURE__ */ jsx(MenuLegacyContext.Provider, { value, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, labelsRef, children: isOpen && (dialogContext == null || dialogContext?.ref?.current != null) && /* @__PURE__ */ jsx(
+        FloatingPortal,
+        {
+          root: root ?? dialogContext?.ref?.current ?? drawerContext?.ref?.current ?? portalRoot,
+          children: /* @__PURE__ */ jsx(
+            FloatingFocusManager,
+            {
+              context,
+              modal: false,
+              initialFocus: isNested ? -1 : 0,
+              returnFocus: !isNested,
+              children: /* @__PURE__ */ jsx(ThemeProvider, { theme, mode, children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: refs.setFloating,
+                  className: styles$1["menu"],
+                  style: floatingStyles,
+                  ...getFloatingProps({
+                    onMouseEnter: () => {
+                      setHoverEnabled(false);
+                    },
+                    onKeyDown: (e) => {
+                      if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
+                        e.stopPropagation();
+                      }
+                    }
+                  }),
+                  children: [
+                    arrowStart && /* @__PURE__ */ jsx("div", { className: styles$1["arrow-up"], "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        svg: SvgArrowDropUp,
+                        size: "xlarge",
+                        className: styles$1["arrow-icon"]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: scrollRef,
+                        className: styles$1["scroll"],
+                        style: {
+                          position: "relative",
+                          maxHeight: menuHeight ?? "inherit"
+                        },
+                        onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+                        children
+                      }
+                    ),
+                    arrowEnd && /* @__PURE__ */ jsx("div", { className: styles$1["arrow-down"], "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        svg: SvgArrowDropDown,
+                        size: "xlarge",
+                        className: styles$1["arrow-icon"]
+                      }
+                    ) })
+                  ]
+                }
+              ) })
+            }
+          )
+        }
+      ) }) })
+    ] });
+  }
+);
+MenuLegacyComponent.displayName = "MenuLegacyComponent";
+const MenuLegacyElement = forwardRef(
+  (props, ref) => {
+    const parentId = useFloatingParentNodeId();
+    if (parentId === null) {
+      return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(MenuLegacyComponent, { ...props, ref }) });
+    }
+    return /* @__PURE__ */ jsx(MenuLegacyComponent, { ...props, ref });
+  }
+);
+MenuLegacyElement.displayName = "MenuLegacy";
+Object.assign(MenuLegacyElement, {
+  Item: MenuLegacyItem
+});
+
+const item = "_item_hid8p_3";
+const content = "_content_hid8p_16";
+const scroller = "_scroller_hid8p_46";
+const disabled = "_disabled_hid8p_124";
+const styles = {
+	item: item,
+	content: content,
+	scroller: scroller,
+	"arrow-down": "_arrow-down_hid8p_62",
+	"arrow-up": "_arrow-up_hid8p_63",
+	"arrow-icon": "_arrow-icon_hid8p_75",
+	"no-padding": "_no-padding_hid8p_117",
+	disabled: disabled
+};
+
+const MenuItem$1 = forwardRef((props, ref) => {
+  const {
+    label,
+    disabled,
+    icon,
+    className,
+    onClick,
+    onMouseEnter,
+    id: idProp,
+    ...rest
+  } = props;
+  const menuContext = useContext(MenuContext);
+  const uid = useId();
+  const buttonRef = useRef(null);
+  const combinedRef = useMergeRefs([buttonRef, ref]);
+  const [tabIndex, setTabIndex] = useState(-1);
+  const itemCx = cx([styles["item"]], className);
+  const onClickHandler = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick?.(e);
+    menuContext?.closeRootMenu();
+  };
+  const onMouseEnterHandler = (e) => {
+    onMouseEnter?.(e);
+    buttonRef.current?.focus();
+  };
+  const onFocusHandler = () => {
+    setTabIndex(0);
+  };
+  const onBlurHandler = () => {
+    setTabIndex(-1);
+  };
+  if (!supportsPopover()) return /* @__PURE__ */ jsx(MenuLegacyItem, { ...props, ref });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      ref: combinedRef,
+      type: "button",
+      role: "menuitem",
+      "data-anv": "menu-item",
+      id: idProp ?? `menuitem-${uid.replace(/:/g, "")}`,
+      className: itemCx,
+      tabIndex,
+      "aria-disabled": disabled,
+      onClick: onClickHandler,
+      onMouseEnter: onMouseEnterHandler,
+      onFocus: onFocusHandler,
+      onBlur: onBlurHandler,
+      children: [
+        icon ? /* @__PURE__ */ jsx(Icon, { inherit: true, "aria-hidden": true, svg: icon }) : null,
+        label
+      ]
+    }
+  );
+});
+MenuItem$1.displayName = "MenuItem";
+
+const MenuNested = (props) => {
+  const { children, open, defaultOpen = false, label, className, icon } = props;
+  const uid = useId();
+  const [tabIndex, setTabIndex] = useState(-1);
+  const [openState, setOpenState] = useState(open ?? defaultOpen);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [menuHeight, setMenuHeight] = useState(null);
+  const [arrowStart, setArrowStart] = useState(false);
+  const [arrowEnd, setArrowEnd] = useState(false);
+  const invokerRef = useRef(null);
+  const menuRef = useRef(null);
+  const childrenRef = useRef(null);
+  const containerRef = useRef(null);
+  const [focusItems, setFocusItems] = useState();
+  const menuContext = useContext(MenuContext);
+  const fallbackArr = useCallback(() => {
+    return menuContext?.disableAutoHeight ? ["right-start"] : ["right-start", "right-end", "left-start", "left-end"];
+  }, [menuContext?.disableAutoHeight]);
+  const updatePosition = useCallback(() => {
+    if (!invokerRef.current || !menuRef.current) return;
+    computePosition(invokerRef.current, menuRef.current, {
+      placement: "right-start",
+      middleware: [
+        offset({
+          mainAxis: 0,
+          alignmentAxis: -4
+        }),
+        flip({
+          fallbackStrategy: "bestFit",
+          fallbackPlacements: fallbackArr()
+        }),
+        shift({
+          mainAxis: !menuContext?.disableAutoHeight,
+          crossAxis: false,
+          limiter: limitShift({
+            mainAxis: !menuContext?.disableAutoHeight
+          })
+        }),
+        size({
+          padding: 8,
+          apply({ availableWidth, availableHeight, elements }) {
+            if (menuContext?.disableAutoHeight) return;
+            setMenuHeight(availableHeight);
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth - 16}px`,
+              maxHeight: `${availableHeight - 16}px`
+            });
+          }
+        })
+      ]
+    }).then(({ x, y }) => {
+      if (!menuRef.current) return;
+      Object.assign(menuRef.current.style, {
+        left: `${x}px`,
+        top: `${y + 8}px`
+      });
+    });
+  }, [fallbackArr, menuContext?.disableAutoHeight]);
+  const menuReference = useRef(null);
+  useLayoutEffect(() => {
+    if (!openState) {
+      setMenuHeight(null);
+      setScrollTop(0);
+      return;
+    }
+    if (!menuRef.current) return;
+    menuReference.current = menuRef.current;
+    const observer = new ResizeObserver((entries) => {
+      /* istanbul ignore next -- @preserve */
+      setTimeout(() => {
+        if (!childrenRef.current || !menuReference.current) return;
+        setMenuHeight(menuReference.current.clientHeight);
+        const isOverflow = childrenRef.current.scrollHeight > menuReference.current.clientHeight;
+        if (!isOverflow) return;
+        const showTop = childrenRef.current.scrollTop > 0;
+        const showBottom = childrenRef.current.scrollHeight - menuReference.current.clientHeight - scrollTop - 16 > 0;
+        setArrowStart(showTop);
+        setArrowEnd(showBottom);
+      }, 100);
+    });
+    if (menuReference.current) {
+      observer.observe(menuReference.current);
+    }
+    return () => {
+      if (menuReference.current) {
+        observer.unobserve(menuReference.current);
+      }
+      observer.disconnect();
+    };
+  }, [openState, scrollTop]);
+  useLayoutEffect(() => {
+    if (!menuRef.current || !invokerRef.current) return;
+    const cleanup = autoUpdate(invokerRef.current, menuRef.current, () => {
+      updatePosition();
+    });
+    return () => {
+      cleanup();
+    };
+  }, [updatePosition]);
+  const popoverHoverTriggered = useRef();
+  const openMenu = useCallback(async () => {
+    popoverHoverTriggered.current = true;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    if (!popoverHoverTriggered.current || !menuRef.current || !childrenRef.current)
+      return;
+    menuRef.current.showPopover();
+    setOpenState(true);
+    const focusables = Array.from(
+      childrenRef.current.querySelectorAll(
+        `#scroller-${uid.replace(/:/g, "")} > button, #scroller-${uid.replace(/:/g, "")} > div[data-nested="true"] > button, #scroller-${uid.replace(/:/g, "")} > a[href]`
+      )
+    );
+    setFocusItems(focusables);
+  }, [uid]);
+  const closeMenu = useCallback(async (fn) => {
+    popoverHoverTriggered.current = false;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    if (popoverHoverTriggered.current || !menuRef.current) return;
+    fn?.();
+    menuRef.current.hidePopover();
+    setOpenState(false);
+  }, []);
+  const isControlled = typeof open !== "undefined";
+  const initialRender = useRef(true);
+  useEffect(() => {
+    if (!isControlled) return;
+    if (initialRender.current === true) {
+      open && menuRef.current && openMenu();
+      initialRender.current = false;
+      return;
+    }
+    setOpenState(open);
+    open ? openMenu() : closeMenu();
+  }, [closeMenu, isControlled, open, openMenu]);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const nestedContainer = containerRef.current;
+    nestedContainer.addEventListener("focusin", (e) => {
+      openMenu();
+    });
+    nestedContainer.addEventListener("focusout", () => closeMenu());
+    return () => {
+      nestedContainer.removeEventListener("focusin", () => openMenu());
+      nestedContainer.removeEventListener("focusout", () => closeMenu());
+    };
+  }, [closeMenu, openMenu]);
+  const onKeyDownHandler = (e) => {
+    if (!openState || !childrenRef.current) return;
+    const currentActiveIndex = focusItems?.findIndex(
+      (item) => item.id === document.activeElement?.id
+    );
+    const firstItem = focusItems?.[0];
+    const lastItem = focusItems?.[focusItems.length - 1];
+    if (e.code === "Escape") {
+      menuContext?.closeRootMenu();
+    }
+    if (e.code === "ArrowLeft") {
+      e.stopPropagation();
+      e.preventDefault();
+      invokerRef.current?.focus();
+      closeMenu();
+    }
+    if (e.code === "ArrowDown") {
+      e.stopPropagation();
+      if (currentActiveIndex === (focusItems?.length ?? 0) - 1) {
+        firstItem.focus();
+        return;
+      }
+      const nextItem = focusItems?.[(currentActiveIndex ?? 0) + 1];
+      nextItem.focus();
+      return;
+    }
+    if (e.code === "ArrowUp") {
+      e.stopPropagation();
+      e.preventDefault();
+      if (currentActiveIndex === 0) {
+        lastItem.focus();
+        return;
+      }
+      const prevItem = focusItems?.[(currentActiveIndex ?? 0) - 1];
+      prevItem.focus();
+      return;
+    }
+  };
+  const onFocusHandler = () => {
+    setTabIndex(0);
+  };
+  const onBlurHandler = () => {
+    setTabIndex(-1);
+  };
+  const MenuButtonOnKeyDownHandler = (e) => {
+    if (e.code === "ArrowRight") {
+      e.stopPropagation();
+      e.preventDefault();
+      openMenu();
+      const firstItem = menuRef.current?.querySelectorAll(
+        `#scroller-${uid.replace(/:/g, "")} > button, #scroller-${uid.replace(/:/g, "")} > a[href]`
+      )[0];
+      firstItem.focus();
+    }
+  };
+  const MenuButtonOnClick = () => {
+    if (isControlled) return;
+    openMenu();
+  };
+  const itemCx = cx([styles["item"]], className);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, "data-nested": "true", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        role: "menuitem",
+        "data-anv": "menu-item",
+        "data-state": openState ? "open" : "close",
+        ref: invokerRef,
+        id: `menuitem-${uid.replace(/:/g, "")}`,
+        "aria-expanded": openState,
+        onMouseEnter: (e) => {
+          e.currentTarget.focus();
+        },
+        onKeyDown: MenuButtonOnKeyDownHandler,
+        onFocus: onFocusHandler,
+        onBlur: onBlurHandler,
+        onClick: MenuButtonOnClick,
+        "aria-haspopup": true,
+        "aria-controls": `menu-${uid.replace(/:/g, "")}`,
+        className: itemCx,
+        tabIndex,
+        children: [
+          icon ? /* @__PURE__ */ jsx(Icon, { inherit: true, "aria-hidden": true, svg: icon }) : null,
+          label,
+          /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
+          /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, svg: SvgNavigateNext })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        popover: "auto",
+        id: `menu-${uid.replace(/:/g, "")}`,
+        "data-anv": "menu-content",
+        className: styles.content,
+        ref: menuRef,
+        role: "presentation",
+        onKeyDown: onKeyDownHandler,
+        children: [
+          arrowStart && /* @__PURE__ */ jsx("div", { className: styles["arrow-up"], "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowDropUp, size: "xlarge", className: styles["arrow-icon"] }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.scroller,
+              tabIndex: -1,
+              ref: childrenRef,
+              style: {
+                position: "relative",
+                maxHeight: menuHeight ?? "inherit"
+              },
+              onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+              role: "menu",
+              id: `scroller-${uid.replace(/:/g, "")}`,
+              children
+            }
+          ),
+          arrowEnd && /* @__PURE__ */ jsx("div", { className: styles["arrow-down"], "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowDropDown, size: "xlarge", className: styles["arrow-icon"] }) })
+        ]
+      }
+    )
+  ] });
+};
+
+const MenuContext = createContext(null);
+const MenuElement$1 = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      placement = "bottom-start",
+      open,
+      defaultOpen = false,
+      disableAutoHeight,
+      label,
+      onOutsidePress,
+      trigger,
+      ...rest
+    } = props;
+    const uid = useId();
+    const [openState, setOpenState] = useState(open ?? defaultOpen);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [menuHeight, setMenuHeight] = useState(null);
+    const [arrowStart, setArrowStart] = useState(false);
+    const [arrowEnd, setArrowEnd] = useState(false);
+    const invokerRef = useRef(null);
+    const menuRef = useRef(null);
+    const childrenRef = useRef(null);
+    const [focusItems, setFocusItems] = useState();
+    const dialogContext = useContext(DialogContext);
+    const menuContext = useContext(MenuContext);
+    const fallbackArr = useCallback(() => {
+      if (placement.startsWith("top")) {
+        return disableAutoHeight ? placement : ["top-start", "top-end", "bottom-start", "bottom-end"];
+      }
+      return disableAutoHeight ? placement : ["bottom-start", "bottom-end", "top-start", "top-end"];
+    }, [disableAutoHeight, placement]);
+    const updatePosition = useCallback(() => {
+      if (!invokerRef.current || !menuRef.current) return;
+      computePosition(invokerRef.current, menuRef.current, {
+        placement,
+        middleware: [
+          offset({
+            mainAxis: 5,
+            alignmentAxis: 0
+          }),
+          flip({
+            fallbackStrategy: "bestFit",
+            fallbackPlacements: fallbackArr()
+          }),
+          shift({
+            mainAxis: !menuContext?.disableAutoHeight,
+            crossAxis: false,
+            limiter: limitShift({
+              mainAxis: !menuContext?.disableAutoHeight
+            })
+          }),
+          size({
+            padding: 8,
+            apply({ availableWidth, availableHeight, elements }) {
+              if (disableAutoHeight ?? menuContext?.disableAutoHeight) return;
+              setMenuHeight(availableHeight);
+              Object.assign(elements.floating.style, {
+                maxWidth: `${availableWidth - 16}px`,
+                maxHeight: `${availableHeight - 16}px`
+              });
+            }
+          })
+        ]
+      }).then(({ x, y }) => {
+        if (!menuRef.current) return;
+        Object.assign(menuRef.current.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+      });
+    }, [
+      placement,
+      fallbackArr,
+      menuContext?.disableAutoHeight,
+      disableAutoHeight
+    ]);
+    const menuReference = useRef(null);
+    useLayoutEffect(() => {
+      if (!openState) {
+        setMenuHeight(null);
+        setScrollTop(0);
+        return;
+      }
+      if (!menuRef.current) return;
+      menuReference.current = menuRef.current;
+      /* istanbul ignore next -- @preserve */
+      const observer = new ResizeObserver((entries) => {
+        if (!childrenRef.current || !menuReference.current) return;
+        setMenuHeight(menuReference.current.clientHeight);
+        const isOverflow = childrenRef.current.scrollHeight > menuReference.current.clientHeight;
+        if (!isOverflow) return;
+        const showTop = childrenRef.current.scrollTop > 0;
+        const showBottom = childrenRef.current.scrollHeight - menuReference.current.clientHeight - scrollTop - 16 > 0;
+        setArrowStart(showTop);
+        setArrowEnd(showBottom);
+      });
+      observer.observe(menuReference.current);
+      return () => {
+        if (menuReference.current) {
+          observer.unobserve(menuReference.current);
+        }
+        observer.disconnect();
+      };
+    }, [openState, scrollTop]);
+    useLayoutEffect(() => {
+      if (!menuRef.current || !invokerRef.current) return;
+      const cleanup = autoUpdate(invokerRef.current, menuRef.current, () => {
+        updatePosition();
+      });
+      return () => {
+        cleanup();
+      };
+    }, [updatePosition]);
+    const openMenu = useCallback(async () => {
+      if (!menuRef.current || !childrenRef.current) return;
+      menuRef.current.showPopover();
+      const focusables = Array.from(
+        childrenRef.current.querySelectorAll(
+          `#scroller-${uid.replace(/:/g, "")} > button, #scroller-${uid.replace(/:/g, "")} > div[data-nested="true"] > button, #scroller-${uid.replace(/:/g, "")} > a[href]`
+        )
+      );
+      setOpenState(true);
+      setFocusItems(focusables);
+      dialogContext?.setHasOpenPopover?.(true);
+    }, [dialogContext, uid]);
+    const closeMenu = useCallback(
+      async (fn) => {
+        if (!menuRef.current || !openState) return;
+        fn?.();
+        setOpenState(false);
+        menuRef.current.hidePopover();
+        dialogContext?.setHasOpenPopover?.(false);
+        invokerRef.current?.focus();
+      },
+      [openState, dialogContext]
+    );
+    const isControlled = typeof open !== "undefined";
+    const initialRender = useRef(true);
+    useEffect(() => {
+      if (!isControlled) return;
+      if (initialRender.current === true) {
+        open && menuRef.current && openMenu();
+        initialRender.current = false;
+        return;
+      }
+      if (open) {
+        openMenu();
+      } else {
+        closeMenu();
+      }
+    }, [closeMenu, isControlled, open, openMenu, dialogContext]);
+    useEffect(() => {
+      if (typeof document === "undefined") return;
+      let isClosable = false;
+      const onMouseDownHandler = (e) => {
+        if (!invokerRef.current || !menuRef.current) return;
+        const isInvoker = e.composedPath().includes(invokerRef.current);
+        const isPopover = e.composedPath().includes(menuRef.current);
+        if (!isInvoker && !isPopover && openState) {
+          onOutsidePress?.(e);
+          isClosable = true;
+        }
+      };
+      const onMouseUpHandler = (e) => {
+        if (!invokerRef.current || !menuRef.current) return;
+        const isInvoker = e.composedPath().includes(invokerRef.current);
+        const isPopover = e.composedPath().includes(menuRef.current);
+        if (!isInvoker && !isPopover && openState) {
+          if (isControlled || !isClosable || !openState) return;
+          closeMenu();
+        }
+      };
+      document.addEventListener("mousedown", onMouseDownHandler);
+      document.addEventListener("mouseup", onMouseUpHandler);
+      return () => {
+        document.removeEventListener("mousedown", onMouseDownHandler);
+        document.removeEventListener("mouseup", onMouseUpHandler);
+      };
+    }, [isControlled, openState, onOutsidePress, closeMenu]);
+    const closeRootMenu = useCallback(() => {
+      closeMenu();
+    }, [closeMenu]);
+    const onKeyDownHandler = (e) => {
+      if (!openState || !childrenRef.current || menuContext) return;
+      if (e.code === "Escape") {
+        e.stopPropagation();
+        e.preventDefault();
+        closeMenu();
+      }
+      const currentActiveIndex = focusItems?.findIndex(
+        (item) => item.id === document.activeElement?.id
+      );
+      const firstItem = focusItems?.[0];
+      const lastItem = focusItems?.[focusItems.length - 1];
+      if (e.code === "ArrowDown") {
+        e.stopPropagation();
+        e.preventDefault();
+        if (currentActiveIndex === (focusItems?.length ?? 0) - 1) {
+          firstItem.focus();
+          return;
+        }
+        const nextItem = focusItems?.[(currentActiveIndex ?? 0) + 1];
+        nextItem.focus();
+        return;
+      }
+      if (e.code === "ArrowUp") {
+        e.stopPropagation();
+        e.preventDefault();
+        if (currentActiveIndex === 0) {
+          lastItem.focus();
+          return;
+        }
+        const prevItem = focusItems?.[(currentActiveIndex ?? 0) - 1];
+        prevItem.focus();
+        return;
+      }
+    };
+    const value = useMemo(() => {
+      return {
+        disableAutoHeight,
+        closeRootMenu
+      };
+    }, [disableAutoHeight, closeRootMenu]);
+    const MenuButtonOnKeyDownHandler = (e) => {
+      if (e.code === "ArrowDown") {
+        focusItems?.[0].focus();
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    const MenuButtonOnClick = () => {
+      if (isControlled) return;
+      if (openState) {
+        closeMenu();
+        return;
+      }
+      openMenu();
+    };
+    if (!supportsPopover())
+      return /* @__PURE__ */ jsx(MenuLegacyComponent, { ...props, ref });
+    if (menuContext) {
+      return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsx(
+        MenuNested,
+        {
+          open,
+          defaultOpen,
+          className: props.className,
+          icon: props.icon,
+          label,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxs(MenuContext.Provider, { value, children: [
+      trigger ? trigger({
+        ref: invokerRef,
+        onClick: () => MenuButtonOnClick(),
+        "aria-haspopup": true,
+        "aria-controls": `menu-${uid.replace(/:/g, "")}`,
+        "aria-expanded": openState,
+        "data-state": openState ? "open" : "close"
+      }) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref: invokerRef,
+          onClick: MenuButtonOnClick,
+          onKeyDown: MenuButtonOnKeyDownHandler,
+          "aria-haspopup": true,
+          "aria-controls": `menu-${uid.replace(/:/g, "")}`,
+          "data-state": openState ? "open" : "close",
+          "aria-expanded": openState,
+          ...rest,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          popover: "manual",
+          id: `menu-${uid.replace(/:/g, "")}`,
+          "data-anv": "menu-content",
+          className: styles.content,
+          onKeyDown: onKeyDownHandler,
+          ref: menuRef,
+          role: "presentation",
+          children: [
+            arrowStart && /* @__PURE__ */ jsx("div", { className: styles["arrow-up"], "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowDropUp, size: "xlarge", className: styles["arrow-icon"] }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.scroller,
+                tabIndex: -1,
+                ref: childrenRef,
+                style: {
+                  position: "relative",
+                  maxHeight: menuHeight ?? "inherit"
+                },
+                onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+                role: "menu",
+                id: `scroller-${uid.replace(/:/g, "")}`,
+                children
+              }
+            ),
+            arrowEnd && /* @__PURE__ */ jsx("div", { className: styles["arrow-down"], "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowDropDown, size: "xlarge", className: styles["arrow-icon"] }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+MenuElement$1.displayName = "Menu";
+const Menu$1 = Object.assign(MenuElement$1, {
+  Item: MenuItem$1
+});
+
+const MenuElement = (props) => {
+  const data = {
+    value: props.value,
+    ariaLabel: props["aria-label"]
+  };
+  const trackingId = useTrackingId({
+    name: "Menu",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  return /* @__PURE__ */ jsx(Menu$1, { "data-tracking-id": trackingId, ...props });
+};
+const MenuItem = forwardRef(
+  (props, ref) => {
+    const data = {
+      label: childrenToString(props.label)
+    };
+    const trackingId = useTrackingId({
+      name: "MenuItem",
+      data,
+      hasOverride: !!props["data-tracking-id"]
+    });
+    return /* @__PURE__ */ jsx(MenuItem$1, { ref, "data-tracking-id": trackingId, ...props });
+  }
+);
+const Menu = Object.assign(MenuElement, {
+  Item: MenuItem
+});
+
+export { Menu as M, MenuItem as a };
+//# sourceMappingURL=Menu-IEBrkdoN.js.map