@servicetitan/anvil2 2.7.0 → 2.8.0

package/dist/{Menu-BXsmCP20.js → Menu-CPbuIsqC.js}

@@ -3,15 +3,14 @@ import * as React from 'react';
 import { createContext, forwardRef, useContext, useId, useRef, useState, useCallback, useLayoutEffect, useEffect, useMemo } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { S as SvgArrowDropDown } from './arrow_drop_down-ChAdBDux.js';
-import { B as Button } from './Button-CVsGhVJz.js';
+import { B as Button } from './Button-a_D7tUgM.js';
 import { D as DialogContext } from './DialogContext-DBgtApl9.js';
 import { I as Icon } from './Icon-DuIlne4x.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
-import { k as computePosition, o as offset, m as flip, s as shift, q as size, p as limitShift, l as autoUpdate } from './floating-ui.react-dom-imrk9N49.js';
+import { c as computePosition, o as offset, f as flip, d as shift, g as size, l as limitShift, a as autoUpdate, s as safeShowPopover, b as safeHidePopover } from './floating-ui.react-dom-CHrYz13o.js';
 import { g as getActiveElement } from './getActiveElement-BcSyVE7S.js';
-import { s as safeShowPopover, a as safeHidePopover } from './safePopover-BDso-xSH.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" }));
 
@@ -428,43 +427,155 @@ const MenuNested = (props) => {
   ] });
 };
 
-const MenuElement = (props) => {
-  const {
-    children,
-    placement = "bottom-start",
-    open,
-    defaultOpen = false,
-    disableAutoHeight,
-    label,
-    onOutsidePress,
-    trigger,
-    contentClassName,
-    maxHeight,
-    ...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;
-    const timeoutId = setTimeout(() => {
+const Menu = Object.assign(
+  function MenuInner(props) {
+    const {
+      children,
+      placement = "bottom-start",
+      open,
+      defaultOpen = false,
+      disableAutoHeight,
+      label,
+      onOutsidePress,
+      trigger,
+      contentClassName,
+      maxHeight,
+      ...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, {
+      const timeoutId = setTimeout(() => {
+        if (!invokerRef.current || !menuRef.current) return;
+        computePosition(invokerRef.current, menuRef.current, {
+          placement,
+          middleware: [
+            offset({
+              mainAxis: 5,
+              alignmentAxis: 0
+            }),
+            flip({
+              fallbackStrategy: "bestFit",
+              fallbackPlacements: fallbackArr(),
+              padding: 50
+              // Setting to 50px as it is the size of menu with 1 item in it
+            }),
+            shift({
+              mainAxis: !menuContext?.disableAutoHeight,
+              crossAxis: false,
+              limiter: limitShift({
+                mainAxis: !menuContext?.disableAutoHeight
+              })
+            }),
+            size({
+              padding: 8,
+              apply({ availableWidth, availableHeight, elements }) {
+                if (disableAutoHeight ?? menuContext?.disableAutoHeight) return;
+                const newHeight = availableHeight - 16;
+                if (Math.abs((menuHeight ?? 0) - newHeight) > 1) {
+                  setMenuHeight(newHeight);
+                  Object.assign(elements.floating.style, {
+                    maxWidth: `${availableWidth - 16}px`,
+                    maxHeight: maxHeight ? `${Math.min(newHeight, typeof maxHeight === "number" ? maxHeight : parseInt(maxHeight.toString()))}px` : `${newHeight}px`
+                  });
+                }
+              }
+            })
+          ]
+        }).then(({ x, y }) => {
+          if (!menuRef.current) return;
+          Object.assign(menuRef.current.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+          menuRef.current.dataset.positioned = "true";
+        });
+      }, 50);
+      return () => clearTimeout(timeoutId);
+    }, [
+      placement,
+      fallbackArr,
+      menuContext?.disableAutoHeight,
+      disableAutoHeight,
+      menuHeight,
+      maxHeight
+    ]);
+    const menuReference = useRef(null);
+    useLayoutEffect(() => {
+      if (!openState) {
+        setMenuHeight(null);
+        setScrollTop(0);
+        return;
+      }
+      if (!menuRef.current) return;
+      menuReference.current = menuRef.current;
+      let resizeTimeout = null;
+      ({
+        height: menuReference.current.clientHeight,
+        scrollHeight: childrenRef.current?.scrollHeight ?? 0
+      });
+      const updateArrows = (height, scrollHeight) => {
+        if (!childrenRef.current) return;
+        const isOverflow = scrollHeight > height;
+        setArrowStart(isOverflow && childrenRef.current.scrollTop > 0);
+        setArrowEnd(isOverflow && scrollHeight - height - scrollTop - 16 > 0);
+      };
+      const observer = new ResizeObserver(() => {
+        if (!childrenRef.current || !menuReference.current) return;
+        if (resizeTimeout) {
+          window.clearTimeout(resizeTimeout);
+        }
+        resizeTimeout = window.setTimeout(() => {
+          const newHeight = menuReference.current?.clientHeight ?? 0;
+          const newScrollHeight = childrenRef.current?.scrollHeight ?? 0;
+          if (!newHeight) return;
+          updateArrows(newHeight, newScrollHeight);
+        }, 150);
+      });
+      if (menuReference.current) {
+        observer.observe(menuReference.current);
+      }
+      return () => {
+        if (resizeTimeout) {
+          window.clearTimeout(resizeTimeout);
+        }
+        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;
+      safeShowPopover(menuRef.current);
+      if (!invokerRef.current || !menuRef.current) return;
+      await computePosition(invokerRef.current, menuRef.current, {
         placement,
         middleware: [
           offset({
@@ -483,20 +594,6 @@ const MenuElement = (props) => {
             limiter: limitShift({
               mainAxis: !menuContext?.disableAutoHeight
             })
-          }),
-          size({
-            padding: 8,
-            apply({ availableWidth, availableHeight, elements }) {
-              if (disableAutoHeight ?? menuContext?.disableAutoHeight) return;
-              const newHeight = availableHeight - 16;
-              if (Math.abs((menuHeight ?? 0) - newHeight) > 1) {
-                setMenuHeight(newHeight);
-                Object.assign(elements.floating.style, {
-                  maxWidth: `${availableWidth - 16}px`,
-                  maxHeight: maxHeight ? `${Math.min(newHeight, typeof maxHeight === "number" ? maxHeight : parseInt(maxHeight.toString()))}px` : `${newHeight}px`
-                });
-              }
-            }
           })
         ]
       }).then(({ x, y }) => {
@@ -507,337 +604,240 @@ const MenuElement = (props) => {
         });
         menuRef.current.dataset.positioned = "true";
       });
-    }, 50);
-    return () => clearTimeout(timeoutId);
-  }, [
-    placement,
-    fallbackArr,
-    menuContext?.disableAutoHeight,
-    disableAutoHeight,
-    menuHeight,
-    maxHeight
-  ]);
-  const menuReference = useRef(null);
-  useLayoutEffect(() => {
-    if (!openState) {
-      setMenuHeight(null);
-      setScrollTop(0);
-      return;
-    }
-    if (!menuRef.current) return;
-    menuReference.current = menuRef.current;
-    let resizeTimeout = null;
-    ({
-      height: menuReference.current.clientHeight,
-      scrollHeight: childrenRef.current?.scrollHeight ?? 0
-    });
-    const updateArrows = (height, scrollHeight) => {
-      if (!childrenRef.current) return;
-      const isOverflow = scrollHeight > height;
-      setArrowStart(isOverflow && childrenRef.current.scrollTop > 0);
-      setArrowEnd(isOverflow && scrollHeight - height - scrollTop - 16 > 0);
-    };
-    const observer = new ResizeObserver(() => {
-      if (!childrenRef.current || !menuReference.current) return;
-      if (resizeTimeout) {
-        window.clearTimeout(resizeTimeout);
+      setOpenState(true);
+      requestAnimationFrame(() => {
+        if (!childrenRef.current) return;
+        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);
+      });
+      dialogContext?.setHasOpenPopover?.(true);
+    }, [
+      dialogContext,
+      uid,
+      placement,
+      fallbackArr,
+      menuContext?.disableAutoHeight
+    ]);
+    const closeMenu = useCallback(
+      async (fn, options) => {
+        if (!menuRef.current || !openState) return;
+        fn?.();
+        setOpenState(false);
+        safeHidePopover(menuRef.current);
+        dialogContext?.setHasOpenPopover?.(false);
+        if (!options?.skipInvokerRefocus) {
+          invokerRef.current?.focus();
+        }
+      },
+      [openState, dialogContext]
+    );
+    const isControlled = typeof open !== "undefined";
+    const initialRender = useRef(true);
+    useEffect(() => {
+      if (!isControlled) return;
+      if (initialRender.current === true) {
+        if (open && menuRef.current) {
+          openMenu();
+        }
+        initialRender.current = false;
+        return;
       }
-      resizeTimeout = window.setTimeout(() => {
-        const newHeight = menuReference.current?.clientHeight ?? 0;
-        const newScrollHeight = childrenRef.current?.scrollHeight ?? 0;
-        if (!newHeight) return;
-        updateArrows(newHeight, newScrollHeight);
-      }, 150);
-    });
-    if (menuReference.current) {
-      observer.observe(menuReference.current);
-    }
-    return () => {
-      if (resizeTimeout) {
-        window.clearTimeout(resizeTimeout);
+      if (open) {
+        openMenu();
+      } else {
+        closeMenu(void 0, { skipInvokerRefocus: true });
       }
-      if (menuReference.current) {
-        observer.unobserve(menuReference.current);
+    }, [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(void 0, { skipInvokerRefocus: true });
+        }
+      };
+      document.addEventListener("mousedown", onMouseDownHandler);
+      document.addEventListener("mouseup", onMouseUpHandler);
+      return () => {
+        document.removeEventListener("mousedown", onMouseDownHandler);
+        document.removeEventListener("mouseup", onMouseUpHandler);
+      };
+    }, [isControlled, openState, onOutsidePress, closeMenu]);
+    const onKeyDownHandler = (e) => {
+      if (!openState || !childrenRef.current || menuContext) return;
+      if (e.code === "Escape") {
+        e.stopPropagation();
+        e.preventDefault();
+        closeMenu();
       }
-      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;
-    safeShowPopover(menuRef.current);
-    if (!invokerRef.current || !menuRef.current) return;
-    await computePosition(invokerRef.current, menuRef.current, {
-      placement,
-      middleware: [
-        offset({
-          mainAxis: 5,
-          alignmentAxis: 0
-        }),
-        flip({
-          fallbackStrategy: "bestFit",
-          fallbackPlacements: fallbackArr(),
-          padding: 50
-          // Setting to 50px as it is the size of menu with 1 item in it
-        }),
-        shift({
-          mainAxis: !menuContext?.disableAutoHeight,
-          crossAxis: false,
-          limiter: limitShift({
-            mainAxis: !menuContext?.disableAutoHeight
-          })
-        })
-      ]
-    }).then(({ x, y }) => {
-      if (!menuRef.current) return;
-      Object.assign(menuRef.current.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-      menuRef.current.dataset.positioned = "true";
-    });
-    setOpenState(true);
-    requestAnimationFrame(() => {
-      if (!childrenRef.current) return;
-      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]`
-        )
+      const currentActiveIndex = focusItems?.findIndex(
+        (item) => item.id === getActiveElement(document)?.id
       );
-      setFocusItems(focusables);
-    });
-    dialogContext?.setHasOpenPopover?.(true);
-  }, [
-    dialogContext,
-    uid,
-    placement,
-    fallbackArr,
-    menuContext?.disableAutoHeight
-  ]);
-  const closeMenu = useCallback(
-    async (fn, options) => {
-      if (!menuRef.current || !openState) return;
-      fn?.();
-      setOpenState(false);
-      safeHidePopover(menuRef.current);
-      dialogContext?.setHasOpenPopover?.(false);
-      if (!options?.skipInvokerRefocus) {
-        invokerRef.current?.focus();
-      }
-    },
-    [openState, dialogContext]
-  );
-  const isControlled = typeof open !== "undefined";
-  const initialRender = useRef(true);
-  useEffect(() => {
-    if (!isControlled) return;
-    if (initialRender.current === true) {
-      if (open && menuRef.current) {
-        openMenu();
+      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;
       }
-      initialRender.current = false;
-      return;
-    }
-    if (open) {
-      openMenu();
-    } else {
-      closeMenu(void 0, { skipInvokerRefocus: true });
-    }
-  }, [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;
+      if (e.code === "ArrowUp") {
+        e.stopPropagation();
+        e.preventDefault();
+        if (currentActiveIndex === 0) {
+          lastItem.focus();
+          return;
+        }
+        const prevItem = focusItems?.[(currentActiveIndex ?? 0) - 1];
+        prevItem.focus();
+        return;
       }
     };
-    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(void 0, { skipInvokerRefocus: true });
+    const value = useMemo(() => {
+      return {
+        disableAutoHeight,
+        closeRootMenu: menuContext?.closeRootMenu ?? closeMenu
+      };
+    }, [disableAutoHeight, menuContext, closeMenu]);
+    const MenuButtonOnKeyDownHandler = (e) => {
+      if (e.code === "ArrowDown") {
+        focusItems?.[0].focus();
+        e.stopPropagation();
+        e.preventDefault();
       }
     };
-    document.addEventListener("mousedown", onMouseDownHandler);
-    document.addEventListener("mouseup", onMouseUpHandler);
-    return () => {
-      document.removeEventListener("mousedown", onMouseDownHandler);
-      document.removeEventListener("mouseup", onMouseUpHandler);
-    };
-  }, [isControlled, openState, onOutsidePress, 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 === getActiveElement(document)?.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();
+    const MenuButtonOnClick = () => {
+      if (isControlled) return;
+      if (openState) {
+        closeMenu();
         return;
       }
-      const prevItem = focusItems?.[(currentActiveIndex ?? 0) - 1];
-      prevItem.focus();
-      return;
-    }
-  };
-  const value = useMemo(() => {
-    return {
-      disableAutoHeight,
-      closeRootMenu: menuContext?.closeRootMenu ?? closeMenu
+      openMenu();
     };
-  }, [disableAutoHeight, menuContext, closeMenu]);
-  const MenuButtonOnKeyDownHandler = (e) => {
-    if (e.code === "ArrowDown") {
-      focusItems?.[0].focus();
-      e.stopPropagation();
-      e.preventDefault();
-    }
-  };
-  const MenuButtonOnClick = () => {
-    if (isControlled) return;
-    if (openState) {
-      closeMenu();
-      return;
+    const data = {
+      label: childrenToString(props.label)
+    };
+    const trackingId = useTrackingId({
+      name: "Menu",
+      data,
+      hasOverride: !!props["data-tracking-id"]
+    });
+    if (menuContext) {
+      return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsx(
+        MenuNested,
+        {
+          "data-tracking-id": trackingId,
+          open,
+          defaultOpen,
+          className: props.className,
+          icon: props.icon,
+          label,
+          children
+        }
+      ) });
     }
-    openMenu();
-  };
-  const data = {
-    label: childrenToString(props.label)
-  };
-  const trackingId = useTrackingId({
-    name: "Menu",
-    data,
-    hasOverride: !!props["data-tracking-id"]
-  });
-  if (menuContext) {
-    return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsx(
-      MenuNested,
-      {
-        "data-tracking-id": trackingId,
-        open,
-        defaultOpen,
-        className: props.className,
-        icon: props.icon,
-        label,
-        children
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs(MenuContext.Provider, { value, children: [
-    trigger ? trigger({
-      ref: invokerRef,
-      onClick: () => MenuButtonOnClick(),
-      onKeyDown: MenuButtonOnKeyDownHandler,
-      "aria-haspopup": true,
-      "aria-controls": `menu-${uid.replace(/:/g, "")}`,
-      "aria-expanded": openState,
-      "data-state": openState ? "open" : "close"
-    }) : /* @__PURE__ */ jsx(
-      Button,
-      {
+    return /* @__PURE__ */ jsxs(MenuContext.Provider, { value, children: [
+      trigger ? trigger({
         ref: invokerRef,
-        onClick: MenuButtonOnClick,
+        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: cx(styles.content, contentClassName),
-        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: maxHeight ? `${Math.min(menuHeight ?? Infinity, typeof maxHeight === "number" ? maxHeight : parseInt(maxHeight.toString()))}px` : 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.displayName = "Menu";
-const Menu = Object.assign(MenuElement, {
-  /**
-   * MenuItem component for individual menu options.
-   *
-   * Features:
-   * - Supports icons and labels
-   * - Keyboard navigation support
-   * - Disabled state handling
-   * - Automatic menu closing on selection
-   * - Fully accessible with proper ARIA attributes
-   * - Focus management and tab index handling
-   * - Click and mouse enter event handling
-   *
-   * @example
-   * <Menu.Item
-   *   label="Edit Profile"
-   *   icon={EditIcon}
-   *   onClick={() => console.log('Edit profile clicked')}
-   * />
-   */
-  Item: MenuItem
-});
+        "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: cx(styles.content, contentClassName),
+          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: maxHeight ? `${Math.min(menuHeight ?? Infinity, typeof maxHeight === "number" ? maxHeight : parseInt(maxHeight.toString()))}px` : 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"] }) })
+          ]
+        }
+      )
+    ] });
+  },
+  {
+    /**
+     * MenuItem component for individual menu options.
+     *
+     * Features:
+     * - Supports icons and labels
+     * - Keyboard navigation support
+     * - Disabled state handling
+     * - Automatic menu closing on selection
+     * - Fully accessible with proper ARIA attributes
+     * - Focus management and tab index handling
+     * - Click and mouse enter event handling
+     *
+     * @example
+     * <Menu.Item
+     *   label="Edit Profile"
+     *   icon={EditIcon}
+     *   onClick={() => console.log('Edit profile clicked')}
+     * />
+     */
+    Item: MenuItem
+  }
+);
 
 export { Menu as M };
-//# sourceMappingURL=Menu-BXsmCP20.js.map
+//# sourceMappingURL=Menu-CPbuIsqC.js.map