@react-md/core 1.0.0-next.0

package/dist/menu/Menu.js

@@ -0,0 +1,260 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef, useEffect, useRef } from "react";
+import { useFocusContainer } from "../focus/useFocusContainer.js";
+import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
+import { useAppSize } from "../media-queries/AppSizeProvider.js";
+import { Portal } from "../portal/Portal.js";
+import { useFixedPositioning } from "../positioning/useFixedPositioning.js";
+import { useScrollLock } from "../scroll/useScrollLock.js";
+import { useScaleTransition } from "../transition/useScaleTransition.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { MenuConfigurationProvider, useMenuConfiguration } from "./MenuConfigurationProvider.js";
+import { MenuSheet } from "./MenuSheet.js";
+import { MenuWidget } from "./MenuWidget.js";
+import { useMenuBarContext } from "./useMenuBarProvider.js";
+import { getDefaultAnchor } from "./utils.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * **Client Component**
+ *
+ * This component should generally only be used to implement context menus with
+ * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be
+ * used.
+ *
+ * @see The `useContextMenu` hook for an example.
+ *
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 Updated this component to implement all the `Menu`
+ * functionality instead of requiring the `useMenu` hook and `MenuWidget`
+ * component. In addition, the `renderAsSheet` behavior has been moved into this
+ * implementation so that the `MenuRenderer` is no longer required and context
+ * menus can appear as a `Sheet`.
+ */ export const Menu = /*#__PURE__*/ forwardRef(function Menu(props, propRef) {
+    const { id: propId, style: propStyle, role = "menu", children, horizontal: _horizontal, sheetHeader: _sheetHeader, sheetFooter: _sheetFooter, renderAsSheet: _renderAsSheet, sheetPosition: _sheetPosition, sheetVerticalSize: _sheetVerticalSize, sheetProps, sheetStyle, sheetClassName, menuStyle, menuClassName, disableElevation = false, temporary = true, tabIndex = -1, fixedTo, className, classNames, timeout, appear, enter, exit, onEnter, onEntering = noop, onEntered = noop, onExit, onExiting, onExited = noop, onKeyDown = noop, listProps, listStyle, listClassName, visible, onRequestClose, anchor, closeOnResize = false, closeOnScroll = false, preventScroll = false, vwMargin, vhMargin, xMargin, yMargin, width, transformOrigin = true, preventOverlap, disableSwapping, disableVHBounds, initialX, initialY, getFixedPositionOptions, disablePortal: propDisablePortal, disableTransition, ...remaining } = props;
+    const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
+    const id = useEnsuredId(propId, "menu");
+    const { root, menubar, menuitem, activeId, animatedOnceRef, hoverTimeoutRef, disableHoverMode } = useMenuBarContext();
+    const { horizontal, sheetHeader, sheetFooter, renderAsSheet, sheetPosition, sheetVerticalSize } = useMenuConfiguration(props);
+    const { isPhone } = useAppSize();
+    const isSheet = renderAsSheet === true || renderAsSheet === "phone" && isPhone;
+    const entered = useRef(false);
+    const cancelUnmountFocus = useRef(false);
+    const hideWithoutRefocus = ()=>{
+        cancelUnmountFocus.current = true;
+        onRequestClose();
+    };
+    const mode = useUserInteractionMode();
+    const mouse = mode === "mouse";
+    const { eventHandlers, transitionOptions } = useFocusContainer({
+        nodeRef: propRef,
+        activate: visible,
+        onKeyDown (event) {
+            onKeyDown(event);
+            // when a menu is within a sheet, it should not trigger the custom
+            // keyboard behavior
+            if (isSheet) {
+                return;
+            }
+            switch(event.key){
+                case "Escape":
+                    // prevent parent components that have an "Escape" keypress event
+                    // from being triggered as well
+                    event.stopPropagation();
+                    disableHoverMode();
+                    onRequestClose();
+                    break;
+                case "Tab":
+                    // since menus are portalled, tab index is kinda broke so just close
+                    // the menu instead of doing default tab behavior
+                    event.preventDefault();
+                    if (!menuitem) {
+                        // pressing the tab key should still cascade close all menus
+                        event.stopPropagation();
+                    }
+                    disableHoverMode();
+                    onRequestClose();
+                    break;
+                case "ArrowUp":
+                    if (!root && menuitem && horizontal) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        onRequestClose();
+                    }
+                    break;
+                case "ArrowLeft":
+                    if (!root && menuitem && !horizontal) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        onRequestClose();
+                    }
+                    break;
+            }
+        },
+        onEntering (appearing) {
+            onEntering(appearing);
+            entered.current = true;
+        },
+        onEntered (appearing) {
+            onEntered(appearing);
+            entered.current = true;
+            cancelUnmountFocus.current = false;
+            animatedOnceRef.current = true;
+        },
+        onExited () {
+            onExited();
+            entered.current = false;
+        },
+        onExiting,
+        disableTransition,
+        isFocusTypeDisabled (type) {
+            if (role === "listbox") {
+                return !isSheet;
+            }
+            if (type === "keyboard") {
+                return isSheet;
+            }
+            const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;
+            if (type === "mount") {
+                return isHoverDisabled;
+            }
+            return isHoverDisabled || cancelUnmountFocus.current || root && !!activeId && id !== activeId;
+        }
+    });
+    const { ref, style, callbacks } = useFixedPositioning({
+        ...transitionOptions,
+        onEnter,
+        style: isSheet ? propStyle : menuStyle,
+        fixedTo,
+        anchor: getDefaultAnchor({
+            anchor,
+            menubar,
+            menuitem: !root && menuitem,
+            horizontal
+        }),
+        vwMargin,
+        vhMargin,
+        xMargin,
+        yMargin,
+        width,
+        transformOrigin,
+        preventOverlap,
+        disableSwapping,
+        disableVHBounds,
+        initialX,
+        initialY,
+        getFixedPositionOptions,
+        onResize: closeOnResize ? hideWithoutRefocus : undefined,
+        onScroll (_event, data) {
+            if (!data.visible || closeOnScroll) {
+                hideWithoutRefocus();
+            }
+        }
+    });
+    const { rendered, disablePortal, elementProps } = useScaleTransition({
+        nodeRef: ref,
+        className: cnb(!isSheet && menuClassName, className),
+        transitionIn: visible,
+        vertical: !horizontal,
+        temporary,
+        timeout: isSheet || disableTransition ? 0 : timeout,
+        classNames,
+        appear,
+        enter,
+        exit,
+        onExit,
+        onExiting: transitionOptions.onExiting,
+        exitedHidden: true,
+        ...callbacks
+    });
+    useScrollLock(visible && preventScroll);
+    // need to make sure that the useEffect does not refire for hiding on click
+    // events because of the `window.requestAnimationFrame`. It'll make it so
+    // that menu items that update state are unable to close when clicked
+    const hide = useRef(onRequestClose);
+    useEffect(()=>{
+        hide.current = onRequestClose;
+    });
+    useEffect(()=>{
+        if (!visible) {
+            return;
+        }
+        const callback = (event)=>{
+            // this is required for when the transition is disabled
+            if (!entered.current) {
+                return;
+            }
+            // if the user clicks outside of the menu to close it, the toggle button
+            // should not be focused. instead the nearest focusable element from the
+            // click event should be focused when Tab or Shift + tab is pressed
+            cancelUnmountFocus.current = !(event.target instanceof HTMLElement) || !event.target.closest(`[role="${role}"]`);
+            // this won't be called if `event.stopPropagation()` is called
+            hide.current();
+            disableHoverMode();
+        };
+        // wait an animation frame so the initial click event that caused the menu
+        // to become visible does not immediately close the menu
+        const frame = window.requestAnimationFrame(()=>{
+            window.addEventListener("click", callback);
+        });
+        return ()=>{
+            window.cancelAnimationFrame(frame);
+            window.removeEventListener("click", callback);
+        };
+    }, [
+        disableHoverMode,
+        role,
+        visible
+    ]);
+    return /*#__PURE__*/ _jsx(MenuConfigurationProvider, {
+        horizontal: horizontal,
+        renderAsSheet: renderAsSheet,
+        sheetFooter: sheetFooter,
+        sheetHeader: sheetHeader,
+        sheetPosition: sheetPosition,
+        sheetVerticalSize: sheetVerticalSize,
+        children: /*#__PURE__*/ _jsx(MenuSheet, {
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            header: sheetHeader,
+            footer: sheetFooter,
+            position: sheetPosition,
+            verticalSize: sheetVerticalSize,
+            visible: visible,
+            enabled: isSheet,
+            onRequestClose: onRequestClose,
+            style: sheetStyle,
+            className: sheetClassName,
+            disablePortal: propDisablePortal,
+            temporary: temporary,
+            disableTransition: disableTransition,
+            ...sheetProps,
+            children: /*#__PURE__*/ _jsx(Portal, {
+                disabled: isSheet || (propDisablePortal ?? disablePortal),
+                children: (rendered || isSheet) && /*#__PURE__*/ _jsx(MenuWidget, {
+                    ...remaining,
+                    ...elementProps,
+                    ...eventHandlers,
+                    id: id,
+                    role: role,
+                    style: isSheet ? propStyle : style,
+                    isSheet: isSheet,
+                    tabIndex: tabIndex,
+                    horizontal: horizontal,
+                    listProps: listProps,
+                    listStyle: listStyle,
+                    listClassName: listClassName,
+                    disableElevation: disableElevation,
+                    cancelUnmountFocus: cancelUnmountFocus,
+                    children: children
+                })
+            })
+        })
+    });
+});
+
+//# sourceMappingURL=Menu.js.map

package/dist/menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n  useFixedPositioning,\n  type FixedPositioningOptions,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  useScaleTransition,\n  type ScaleTransitionHookOptions,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  MenuConfigurationProvider,\n  useMenuConfiguration,\n  type MenuConfiguration,\n  type MenuOrientationProps,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-menu-background-color\"?: string;\n    \"--rmd-menu-color\"?: string;\n    \"--rmd-menu-min-width\"?: string | number;\n    \"--rmd-menu-spacing\"?: string | number;\n  }\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @remarks \\@since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n  ScaleTransitionHookOptions<HTMLDivElement>,\n  \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n  /**\n   * @see {@link ScaleTransitionHookOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Boolean if the menu should not gain the elevation styles and should only be\n   * set to `true` when rendering within a `Sheet`.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.transformOrigin}\n   * @defaultValue `true`\n   */\n  transformOrigin?: boolean;\n\n  /**\n   * Boolean if the menu should close if the page is scrolled. The default\n   * behavior is to just update the position of the menu relative to the menu\n   * button until it can no longer be visible within the viewport.\n   *\n   * @defaultValue `false`\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Boolean if the page should no longer be scrollable while the menu is\n   * visible.\n   *\n   * @defaultValue `false`\n   */\n  preventScroll?: boolean;\n\n  /**\n   * Boolean if the menu should close instead of repositioning itself if the\n   * browser window is resized.\n   *\n   * @defaultValue `false`\n   */\n  closeOnResize?: boolean;\n\n  /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n  getFixedPositionOptions?(): CalculateFixedPositionOptions;\n}\n\n/**\n * @remarks\n * \\@since 5.1.0\n * \\@since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n  /**\n   * An optional style to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listStyle?: CSSProperties;\n\n  /**\n   * An optional className to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listClassName?: string;\n\n  /**\n   * Any additional props to pass to the `List` component that surrounds the\n   * `Menu`'s `MenuItem`s.\n   */\n  listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">, ListElement>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n  /**\n   * This can be used to apply additional props to the `Menu` component.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link menuStyle} and {@link menuClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <DropdownMenu\n   *   {...props}\n   *   menuProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     getFixedPositionOptions: () => ({\n   *       preventOverlap: true,\n   *     }),\n   *   }}\n   * />\n   * ```\n   */\n  menuProps?: PropsWithRef<\n    Omit<\n      MenuProps,\n      | \"children\"\n      | \"fixedTo\"\n      | \"visible\"\n      | \"onRequestClose\"\n      | \"getDefaultFocusedIndex\"\n    >,\n    HTMLDivElement\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `Menu` component.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Menu` component.\n   */\n  menuClassName?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n  FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n  \"onScroll\" | \"onResize\"\n>;\n\n/**\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuConfiguration,\n    MenuConfigurationProps,\n    MenuFixedPositioningOptions,\n    MenuOrientationProps,\n    MenuTransitionProps,\n    MenuListConvenienceProps,\n    MenuSheetConvenienceProps {\n  visible: boolean;\n  onRequestClose(): void;\n\n  /**\n   * @defaultValue `\"menu-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the default focus index when the menu is visible.\n   *\n   * @internal\n   */\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n  /**\n   * Custom style that should be applied to the menu only while not rendered\n   * within a sheet since the {@link style} would be applied to both versions.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Custom class name that should be applied only while not rendered within a\n   * sheet.\n   */\n  menuClassName?: string;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n  function Menu(props, propRef) {\n    const {\n      id: propId,\n      style: propStyle,\n      role = \"menu\",\n      children,\n      horizontal: _horizontal,\n      sheetHeader: _sheetHeader,\n      sheetFooter: _sheetFooter,\n      renderAsSheet: _renderAsSheet,\n      sheetPosition: _sheetPosition,\n      sheetVerticalSize: _sheetVerticalSize,\n      sheetProps,\n      sheetStyle,\n      sheetClassName,\n      menuStyle,\n      menuClassName,\n      disableElevation = false,\n      temporary = true,\n      tabIndex = -1,\n      fixedTo,\n      className,\n      classNames,\n      timeout,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering = noop,\n      onEntered = noop,\n      onExit,\n      onExiting,\n      onExited = noop,\n      onKeyDown = noop,\n      listProps,\n      listStyle,\n      listClassName,\n      visible,\n      onRequestClose,\n      anchor,\n      closeOnResize = false,\n      closeOnScroll = false,\n      preventScroll = false,\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin = true,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      disablePortal: propDisablePortal,\n      disableTransition,\n      ...remaining\n    } = props;\n    const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n      props;\n\n    const id = useEnsuredId(propId, \"menu\");\n    const {\n      root,\n      menubar,\n      menuitem,\n      activeId,\n      animatedOnceRef,\n      hoverTimeoutRef,\n      disableHoverMode,\n    } = useMenuBarContext();\n    const {\n      horizontal,\n      sheetHeader,\n      sheetFooter,\n      renderAsSheet,\n      sheetPosition,\n      sheetVerticalSize,\n    } = useMenuConfiguration(props);\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n    const entered = useRef(false);\n    const cancelUnmountFocus = useRef(false);\n    const hideWithoutRefocus = (): void => {\n      cancelUnmountFocus.current = true;\n      onRequestClose();\n    };\n    const mode = useUserInteractionMode();\n    const mouse = mode === \"mouse\";\n\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: propRef,\n      activate: visible,\n      onKeyDown(event) {\n        onKeyDown(event);\n\n        // when a menu is within a sheet, it should not trigger the custom\n        // keyboard behavior\n        if (isSheet) {\n          return;\n        }\n\n        switch (event.key) {\n          case \"Escape\":\n            // prevent parent components that have an \"Escape\" keypress event\n            // from being triggered as well\n            event.stopPropagation();\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"Tab\":\n            // since menus are portalled, tab index is kinda broke so just close\n            // the menu instead of doing default tab behavior\n            event.preventDefault();\n\n            if (!menuitem) {\n              // pressing the tab key should still cascade close all menus\n              event.stopPropagation();\n            }\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"ArrowUp\":\n            if (!root && menuitem && horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n          case \"ArrowLeft\":\n            if (!root && menuitem && !horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n        }\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        entered.current = true;\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        entered.current = true;\n        cancelUnmountFocus.current = false;\n        animatedOnceRef.current = true;\n      },\n      onExited() {\n        onExited();\n        entered.current = false;\n      },\n      onExiting,\n      disableTransition,\n      isFocusTypeDisabled(type) {\n        if (role === \"listbox\") {\n          return !isSheet;\n        }\n\n        if (type === \"keyboard\") {\n          return isSheet;\n        }\n\n        const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n        if (type === \"mount\") {\n          return isHoverDisabled;\n        }\n\n        return (\n          isHoverDisabled ||\n          cancelUnmountFocus.current ||\n          (root && !!activeId && id !== activeId)\n        );\n      },\n    });\n\n    const { ref, style, callbacks } = useFixedPositioning({\n      ...transitionOptions,\n      onEnter,\n      style: isSheet ? propStyle : menuStyle,\n      fixedTo,\n      anchor: getDefaultAnchor({\n        anchor,\n        menubar,\n        menuitem: !root && menuitem,\n        horizontal,\n      }),\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      onResize: closeOnResize ? hideWithoutRefocus : undefined,\n      onScroll(_event, data) {\n        if (!data.visible || closeOnScroll) {\n          hideWithoutRefocus();\n        }\n      },\n    });\n    const { rendered, disablePortal, elementProps } = useScaleTransition({\n      nodeRef: ref,\n      className: cnb(!isSheet && menuClassName, className),\n      transitionIn: visible,\n      vertical: !horizontal,\n      temporary,\n      timeout: isSheet || disableTransition ? 0 : timeout,\n      classNames,\n      appear,\n      enter,\n      exit,\n      onExit,\n      onExiting: transitionOptions.onExiting,\n      exitedHidden: true,\n      ...callbacks,\n    });\n    useScrollLock(visible && preventScroll);\n\n    // need to make sure that the useEffect does not refire for hiding on click\n    // events because of the `window.requestAnimationFrame`. It'll make it so\n    // that menu items that update state are unable to close when clicked\n    const hide = useRef(onRequestClose);\n    useEffect(() => {\n      hide.current = onRequestClose;\n    });\n    useEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      const callback = (event: globalThis.MouseEvent): void => {\n        // this is required for when the transition is disabled\n        if (!entered.current) {\n          return;\n        }\n\n        // if the user clicks outside of the menu to close it, the toggle button\n        // should not be focused. instead the nearest focusable element from the\n        // click event should be focused when Tab or Shift + tab is pressed\n        cancelUnmountFocus.current =\n          !(event.target instanceof HTMLElement) ||\n          !event.target.closest(`[role=\"${role}\"]`);\n\n        // this won't be called if `event.stopPropagation()` is called\n        hide.current();\n        disableHoverMode();\n      };\n\n      // wait an animation frame so the initial click event that caused the menu\n      // to become visible does not immediately close the menu\n      const frame = window.requestAnimationFrame(() => {\n        window.addEventListener(\"click\", callback);\n      });\n\n      return () => {\n        window.cancelAnimationFrame(frame);\n        window.removeEventListener(\"click\", callback);\n      };\n    }, [disableHoverMode, role, visible]);\n\n    return (\n      <MenuConfigurationProvider\n        horizontal={horizontal}\n        renderAsSheet={renderAsSheet}\n        sheetFooter={sheetFooter}\n        sheetHeader={sheetHeader}\n        sheetPosition={sheetPosition}\n        sheetVerticalSize={sheetVerticalSize}\n      >\n        <MenuSheet\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy as string}\n          header={sheetHeader}\n          footer={sheetFooter}\n          position={sheetPosition}\n          verticalSize={sheetVerticalSize}\n          visible={visible}\n          enabled={isSheet}\n          onRequestClose={onRequestClose}\n          style={sheetStyle}\n          className={sheetClassName}\n          disablePortal={propDisablePortal}\n          temporary={temporary}\n          disableTransition={disableTransition}\n          {...sheetProps}\n        >\n          <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n            {(rendered || isSheet) && (\n              <MenuWidget\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                style={isSheet ? propStyle : style}\n                isSheet={isSheet}\n                tabIndex={tabIndex}\n                horizontal={horizontal}\n                listProps={listProps}\n                listStyle={listStyle}\n                listClassName={listClassName}\n                disableElevation={disableElevation}\n                cancelUnmountFocus={cancelUnmountFocus}\n              >\n                {children}\n              </MenuWidget>\n            )}\n          </Portal>\n        </MenuSheet>\n      </MenuConfigurationProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled","disabled"],"mappings":"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"}

package/dist/menu/MenuBar.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { type ListProps } from "../list/List.js";
+export interface MenuBarProps extends Omit<ListProps, "role"> {
+    /**
+     * @defaultValue `true`
+     */
+    horizontal?: boolean;
+    /**
+     * Set this to a number greater than 0 to allow opening dropdown menus within
+     * the menubar after hovering for the duration in milliseconds. Once a menu
+     * becomes visible within the menubar, all subsequent menus will become
+     * visible immediately on hover as well until the hover mode is ended.
+     *
+     * For example:
+     *
+     * - `0` - the dropdown menus become visible immediately on hover
+     * - `1000` - the first dropdown menu becomes visible after hovering for 1
+     *   second
+     * - `undefined` - the hover mode can only be activate after a click with
+     *   mouse, touch, or keyboard
+     *
+     * @defaultValue `undefined`
+     */
+    hoverTimeout?: number;
+}
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { DropdownMenu, MenuBar, MenuItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * export function SimpleExample(): ReactElement {
+ *   return (
+ *     <MenuBar>
+ *       <DropdownMenu buttonChildren="Item 1">
+ *         <MenuItem>Menu Item 1</MenuItem>
+ *         <MenuItem>Menu Item 2</MenuItem>
+ *         <MenuItem>Menu Item 3</MenuItem>
+ *       </DropdownMenu>
+ *       <DropdownMenu buttonChildren="Item 2">
+ *         <MenuItem>Menu Item 1</MenuItem>
+ *         <MenuItem>Menu Item 2</MenuItem>
+ *         <MenuItem>Menu Item 3</MenuItem>
+ *       </DropdownMenu>
+ *       <DropdownMenu buttonChildren="Item 3">
+ *         <MenuItem>Menu Item 1</MenuItem>
+ *         <MenuItem>Menu Item 2</MenuItem>
+ *         <MenuItem>Menu Item 4</MenuItem>
+ *       </DropdownMenu>
+ *     </MenuBar>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 5.0.0
+ * @remarks \@since 6.0.0 Combined with the previous `MenuBarWidget`
+ */
+export declare const MenuBar: import("react").ForwardRefExoticComponent<MenuBarProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist/menu/MenuBar.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { List } from "../list/List.js";
+import { KeyboardMovementProvider, useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
+import { MenuBarProvider, useMenuBarProvider } from "./useMenuBarProvider.js";
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { DropdownMenu, MenuBar, MenuItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * export function SimpleExample(): ReactElement {
+ *   return (
+ *     <MenuBar>
+ *       <DropdownMenu buttonChildren="Item 1">
+ *         <MenuItem>Menu Item 1</MenuItem>
+ *         <MenuItem>Menu Item 2</MenuItem>
+ *         <MenuItem>Menu Item 3</MenuItem>
+ *       </DropdownMenu>
+ *       <DropdownMenu buttonChildren="Item 2">
+ *         <MenuItem>Menu Item 1</MenuItem>
+ *         <MenuItem>Menu Item 2</MenuItem>
+ *         <MenuItem>Menu Item 3</MenuItem>
+ *       </DropdownMenu>
+ *       <DropdownMenu buttonChildren="Item 3">
+ *         <MenuItem>Menu Item 1</MenuItem>
+ *         <MenuItem>Menu Item 2</MenuItem>
+ *         <MenuItem>Menu Item 4</MenuItem>
+ *       </DropdownMenu>
+ *     </MenuBar>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 5.0.0
+ * @remarks \@since 6.0.0 Combined with the previous `MenuBarWidget`
+ */ export const MenuBar = /*#__PURE__*/ forwardRef(function MenuBar(props, ref) {
+    const { onClick, onFocus, onKeyDown, horizontal = true, hoverTimeout, children, ...remaining } = props;
+    const menuBarContext = useMenuBarProvider({
+        root: true,
+        menubar: true,
+        hoverTimeout
+    });
+    const { activeId, enableHoverMode } = menuBarContext;
+    const { movementProps, movementContext } = useKeyboardMovementProvider({
+        onClick,
+        onFocus,
+        onKeyDown,
+        loopable: true,
+        searchable: true,
+        horizontal,
+        includeDisabled: true,
+        tabIndexBehavior: "roving",
+        onFocusChange (event) {
+            if (activeId) {
+                enableHoverMode(event.element.id);
+            }
+        }
+    });
+    return /*#__PURE__*/ _jsx(KeyboardMovementProvider, {
+        value: movementContext,
+        children: /*#__PURE__*/ _jsx(MenuBarProvider, {
+            value: menuBarContext,
+            children: /*#__PURE__*/ _jsx(List, {
+                ...remaining,
+                ...movementProps,
+                ref: ref,
+                role: "menubar",
+                horizontal: horizontal,
+                children: children
+            })
+        })
+    });
+});
+
+//# sourceMappingURL=MenuBar.js.map

package/dist/menu/MenuBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menu/MenuBar.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { List, type ListProps } from \"../list/List.js\";\nimport {\n  KeyboardMovementProvider,\n  useKeyboardMovementProvider,\n} from \"../movement/useKeyboardMovementProvider.js\";\nimport { MenuBarProvider, useMenuBarProvider } from \"./useMenuBarProvider.js\";\n\nexport interface MenuBarProps extends Omit<ListProps, \"role\"> {\n  /**\n   * @defaultValue `true`\n   */\n  horizontal?: boolean;\n\n  /**\n   * Set this to a number greater than 0 to allow opening dropdown menus within\n   * the menubar after hovering for the duration in milliseconds. Once a menu\n   * becomes visible within the menubar, all subsequent menus will become\n   * visible immediately on hover as well until the hover mode is ended.\n   *\n   * For example:\n   *\n   * - `0` - the dropdown menus become visible immediately on hover\n   * - `1000` - the first dropdown menu becomes visible after hovering for 1\n   *   second\n   * - `undefined` - the hover mode can only be activate after a click with\n   *   mouse, touch, or keyboard\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { DropdownMenu, MenuBar, MenuItem } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export function SimpleExample(): ReactElement {\n *   return (\n *     <MenuBar>\n *       <DropdownMenu buttonChildren=\"Item 1\">\n *         <MenuItem>Menu Item 1</MenuItem>\n *         <MenuItem>Menu Item 2</MenuItem>\n *         <MenuItem>Menu Item 3</MenuItem>\n *       </DropdownMenu>\n *       <DropdownMenu buttonChildren=\"Item 2\">\n *         <MenuItem>Menu Item 1</MenuItem>\n *         <MenuItem>Menu Item 2</MenuItem>\n *         <MenuItem>Menu Item 3</MenuItem>\n *       </DropdownMenu>\n *       <DropdownMenu buttonChildren=\"Item 3\">\n *         <MenuItem>Menu Item 1</MenuItem>\n *         <MenuItem>Menu Item 2</MenuItem>\n *         <MenuItem>Menu Item 4</MenuItem>\n *       </DropdownMenu>\n *     </MenuBar>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 5.0.0\n * @remarks \\@since 6.0.0 Combined with the previous `MenuBarWidget`\n */\nexport const MenuBar = forwardRef<HTMLUListElement, MenuBarProps>(\n  function MenuBar(props, ref) {\n    const {\n      onClick,\n      onFocus,\n      onKeyDown,\n      horizontal = true,\n      hoverTimeout,\n      children,\n      ...remaining\n    } = props;\n    const menuBarContext = useMenuBarProvider({\n      root: true,\n      menubar: true,\n      hoverTimeout,\n    });\n    const { activeId, enableHoverMode } = menuBarContext;\n    const { movementProps, movementContext } = useKeyboardMovementProvider({\n      onClick,\n      onFocus,\n      onKeyDown,\n      loopable: true,\n      searchable: true,\n      horizontal,\n      includeDisabled: true,\n      tabIndexBehavior: \"roving\",\n      onFocusChange(event) {\n        if (activeId) {\n          enableHoverMode(event.element.id);\n        }\n      },\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <MenuBarProvider value={menuBarContext}>\n          <List\n            {...remaining}\n            {...movementProps}\n            ref={ref}\n            role=\"menubar\"\n            horizontal={horizontal}\n          >\n            {children}\n          </List>\n        </MenuBarProvider>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","List","KeyboardMovementProvider","useKeyboardMovementProvider","MenuBarProvider","useMenuBarProvider","MenuBar","props","ref","onClick","onFocus","onKeyDown","horizontal","hoverTimeout","children","remaining","menuBarContext","root","menubar","activeId","enableHoverMode","movementProps","movementContext","loopable","searchable","includeDisabled","tabIndexBehavior","onFocusChange","event","element","id","value","role"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SACEC,wBAAwB,EACxBC,2BAA2B,QACtB,6CAA6C;AACpD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,0BAA0B;AA2B9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,MAAMC,wBAAUN,WACrB,SAASM,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,aAAa,IAAI,EACjBC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMS,iBAAiBX,mBAAmB;QACxCY,MAAM;QACNC,SAAS;QACTL;IACF;IACA,MAAM,EAAEM,QAAQ,EAAEC,eAAe,EAAE,GAAGJ;IACtC,MAAM,EAAEK,aAAa,EAAEC,eAAe,EAAE,GAAGnB,4BAA4B;QACrEM;QACAC;QACAC;QACAY,UAAU;QACVC,YAAY;QACZZ;QACAa,iBAAiB;QACjBC,kBAAkB;QAClBC,eAAcC,KAAK;YACjB,IAAIT,UAAU;gBACZC,gBAAgBQ,MAAMC,OAAO,CAACC,EAAE;YAClC;QACF;IACF;IAEA,qBACE,KAAC5B;QAAyB6B,OAAOT;kBAC/B,cAAA,KAAClB;YAAgB2B,OAAOf;sBACtB,cAAA,KAACf;gBACE,GAAGc,SAAS;gBACZ,GAAGM,aAAa;gBACjBb,KAAKA;gBACLwB,MAAK;gBACLpB,YAAYA;0BAEXE;;;;AAKX,GACA"}

package/dist/menu/MenuButton.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { type ButtonProps } from "../button/Button.js";
+import { type IconRotatorProps } from "../icon/IconRotator.js";
+import { type TextIconSpacingProps } from "../icon/TextIconSpacing.js";
+/** @remarks \@since 5.0.0 */
+export type MenuButtonTextIconSpacingProps = Pick<TextIconSpacingProps, "icon" | "iconAfter">;
+/** @remarks \@since 5.0.0 */
+export type MenuButtonIconRotatorProps = Omit<IconRotatorProps, "children" | "rotated">;
+/**
+ * @remarks \@since 5.0.0
+ * @remarks \@since 6.0.0 No longer extends the {@link ButtonProps}, no longer
+ * requires an `id`, and no longer supports `textIconSpacingProps`.
+ */
+export interface BaseMenuButtonProps extends MenuButtonTextIconSpacingProps {
+    /**
+     * Any additional props to pass to the {@link IconRotator} component that
+     * surrounds the {@link buttonChildren}
+     */
+    iconRotatorProps?: Readonly<MenuButtonIconRotatorProps>;
+    /**
+     * Boolean if the dropdown icon should be included with the button children.
+     *
+     * @defaultValue `buttonType === "icon"`
+     */
+    disableDropdownIcon?: boolean;
+}
+/**
+ * @remarks \@since 5.0.0
+ * @remarks \@since 6.0.0 See {@link BaseMenuButtonProps} for breaking changes.
+ */
+export interface MenuButtonProps extends ButtonProps, BaseMenuButtonProps {
+}
+/**
+ * **Client Component**
+ *
+ * An internal component that handles rendering a button for the `DropdownMenu`
+ * while implementing the correct accessibility and keyboard movement.
+ *
+ * @remarks \@since 5.0.0
+ * @remarks \@since 6.0.0 See {@link BaseMenuButtonProps} for breaking changes.
+ */
+export declare const MenuButton: import("react").ForwardRefExoticComponent<MenuButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/menu/MenuButton.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button } from "../button/Button.js";
+import { getIcon } from "../icon/iconConfig.js";
+import { IconRotator } from "../icon/IconRotator.js";
+import { useAppSize } from "../media-queries/AppSizeProvider.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
+import { useMenuVisibility } from "./MenuVisibilityProvider.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * **Client Component**
+ *
+ * An internal component that handles rendering a button for the `DropdownMenu`
+ * while implementing the correct accessibility and keyboard movement.
+ *
+ * @remarks \@since 5.0.0
+ * @remarks \@since 6.0.0 See {@link BaseMenuButtonProps} for breaking changes.
+ */ export const MenuButton = /*#__PURE__*/ forwardRef(function MenuButton(props, ref) {
+    const { id: propId, onClick = noop, onKeyDown = noop, icon: propIcon, iconAfter = true, iconRotatorProps, floating, buttonType = floating ? "icon" : "text", disableDropdownIcon = buttonType === "icon", children, ...remaining } = props;
+    const id = useEnsuredId(propId, "menubutton");
+    const { visible, setVisible, defaultFocusIndex } = useMenuVisibility();
+    const { renderAsSheet } = useMenuConfiguration();
+    const { isPhone } = useAppSize();
+    const isSheet = renderAsSheet === true || renderAsSheet === "phone" && isPhone;
+    const dropdownIcon = getIcon("dropdown", propIcon);
+    let icon = propIcon;
+    if (!disableDropdownIcon) {
+        icon = /*#__PURE__*/ _jsx(IconRotator, {
+            ...iconRotatorProps,
+            rotated: visible,
+            children: dropdownIcon
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Button, {
+        ...remaining,
+        "aria-haspopup": isSheet ? "dialog" : "menu",
+        "aria-expanded": visible || undefined,
+        id: id,
+        ref: ref,
+        floating: floating,
+        buttonType: buttonType,
+        onClick: (event)=>{
+            onClick(event);
+            defaultFocusIndex.current = 0;
+            setVisible((prevVisible)=>!prevVisible);
+        },
+        onKeyDown: (event)=>{
+            onKeyDown(event);
+            switch(event.key){
+                case "ArrowDown":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    defaultFocusIndex.current = 0;
+                    setVisible(true);
+                    break;
+                case "ArrowUp":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    defaultFocusIndex.current = -1;
+                    setVisible(true);
+                    break;
+            }
+        },
+        children: [
+            !iconAfter && icon,
+            children,
+            iconAfter && icon
+        ]
+    });
+});
+
+//# sourceMappingURL=MenuButton.js.map

package/dist/menu/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menu/MenuButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type TextIconSpacingProps } from \"../icon/TextIconSpacing.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\nimport { useMenuVisibility } from \"./MenuVisibilityProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @remarks \\@since 5.0.0 */\nexport type MenuButtonTextIconSpacingProps = Pick<\n  TextIconSpacingProps,\n  \"icon\" | \"iconAfter\"\n>;\n\n/** @remarks \\@since 5.0.0 */\nexport type MenuButtonIconRotatorProps = Omit<\n  IconRotatorProps,\n  \"children\" | \"rotated\"\n>;\n\n/**\n * @remarks \\@since 5.0.0\n * @remarks \\@since 6.0.0 No longer extends the {@link ButtonProps}, no longer\n * requires an `id`, and no longer supports `textIconSpacingProps`.\n */\nexport interface BaseMenuButtonProps extends MenuButtonTextIconSpacingProps {\n  /**\n   * Any additional props to pass to the {@link IconRotator} component that\n   * surrounds the {@link buttonChildren}\n   */\n  iconRotatorProps?: Readonly<MenuButtonIconRotatorProps>;\n\n  /**\n   * Boolean if the dropdown icon should be included with the button children.\n   *\n   * @defaultValue `buttonType === \"icon\"`\n   */\n  disableDropdownIcon?: boolean;\n}\n\n/**\n * @remarks \\@since 5.0.0\n * @remarks \\@since 6.0.0 See {@link BaseMenuButtonProps} for breaking changes.\n */\nexport interface MenuButtonProps extends ButtonProps, BaseMenuButtonProps {}\n\n/**\n * **Client Component**\n *\n * An internal component that handles rendering a button for the `DropdownMenu`\n * while implementing the correct accessibility and keyboard movement.\n *\n * @remarks \\@since 5.0.0\n * @remarks \\@since 6.0.0 See {@link BaseMenuButtonProps} for breaking changes.\n */\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(props, ref) {\n    const {\n      id: propId,\n      onClick = noop,\n      onKeyDown = noop,\n      icon: propIcon,\n      iconAfter = true,\n      iconRotatorProps,\n      floating,\n      buttonType = floating ? \"icon\" : \"text\",\n      disableDropdownIcon = buttonType === \"icon\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"menubutton\");\n    const { visible, setVisible, defaultFocusIndex } = useMenuVisibility();\n    const { renderAsSheet } = useMenuConfiguration();\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n    const dropdownIcon = getIcon(\"dropdown\", propIcon);\n    let icon = propIcon;\n    if (!disableDropdownIcon) {\n      icon = (\n        <IconRotator {...iconRotatorProps} rotated={visible}>\n          {dropdownIcon}\n        </IconRotator>\n      );\n    }\n\n    return (\n      <Button\n        {...remaining}\n        aria-haspopup={isSheet ? \"dialog\" : \"menu\"}\n        aria-expanded={visible || undefined}\n        id={id}\n        ref={ref}\n        floating={floating}\n        buttonType={buttonType}\n        onClick={(event) => {\n          onClick(event);\n\n          defaultFocusIndex.current = 0;\n          setVisible((prevVisible) => !prevVisible);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n\n          switch (event.key) {\n            case \"ArrowDown\":\n              event.preventDefault();\n              event.stopPropagation();\n              defaultFocusIndex.current = 0;\n              setVisible(true);\n              break;\n            case \"ArrowUp\":\n              event.preventDefault();\n              event.stopPropagation();\n              defaultFocusIndex.current = -1;\n              setVisible(true);\n              break;\n          }\n        }}\n      >\n        {!iconAfter && icon}\n        {children}\n        {iconAfter && icon}\n      </Button>\n    );\n  }\n);\n"],"names":["forwardRef","Button","getIcon","IconRotator","useAppSize","useEnsuredId","useMenuConfiguration","useMenuVisibility","noop","MenuButton","props","ref","id","propId","onClick","onKeyDown","icon","propIcon","iconAfter","iconRotatorProps","floating","buttonType","disableDropdownIcon","children","remaining","visible","setVisible","defaultFocusIndex","renderAsSheet","isPhone","isSheet","dropdownIcon","rotated","aria-haspopup","aria-expanded","undefined","event","current","prevVisible","key","preventDefault","stopPropagation"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,WAAW,QAA+B,yBAAyB;AAE5E,SAASC,UAAU,QAAQ,sCAAsC;AACjE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,iCAAiC;AACtE,SAASC,iBAAiB,QAAQ,8BAA8B;AAEhE,MAAMC,OAAO;AACX,aAAa;AACf;AAwCA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAAaT,WACxB,SAASS,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,YAAYP,IAAI,EAChBQ,MAAMC,QAAQ,EACdC,YAAY,IAAI,EAChBC,gBAAgB,EAChBC,QAAQ,EACRC,aAAaD,WAAW,SAAS,MAAM,EACvCE,sBAAsBD,eAAe,MAAM,EAC3CE,QAAQ,EACR,GAAGC,WACJ,GAAGd;IACJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAM,EAAEY,OAAO,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGpB;IACnD,MAAM,EAAEqB,aAAa,EAAE,GAAGtB;IAC1B,MAAM,EAAEuB,OAAO,EAAE,GAAGzB;IACpB,MAAM0B,UACJF,kBAAkB,QAASA,kBAAkB,WAAWC;IAE1D,MAAME,eAAe7B,QAAQ,YAAYe;IACzC,IAAID,OAAOC;IACX,IAAI,CAACK,qBAAqB;QACxBN,qBACE,KAACb;YAAa,GAAGgB,gBAAgB;YAAEa,SAASP;sBACzCM;;IAGP;IAEA,qBACE,MAAC9B;QACE,GAAGuB,SAAS;QACbS,iBAAeH,UAAU,WAAW;QACpCI,iBAAeT,WAAWU;QAC1BvB,IAAIA;QACJD,KAAKA;QACLS,UAAUA;QACVC,YAAYA;QACZP,SAAS,CAACsB;YACRtB,QAAQsB;YAERT,kBAAkBU,OAAO,GAAG;YAC5BX,WAAW,CAACY,cAAgB,CAACA;QAC/B;QACAvB,WAAW,CAACqB;YACVrB,UAAUqB;YAEV,OAAQA,MAAMG,GAAG;gBACf,KAAK;oBACHH,MAAMI,cAAc;oBACpBJ,MAAMK,eAAe;oBACrBd,kBAAkBU,OAAO,GAAG;oBAC5BX,WAAW;oBACX;gBACF,KAAK;oBACHU,MAAMI,cAAc;oBACpBJ,MAAMK,eAAe;oBACrBd,kBAAkBU,OAAO,GAAG,CAAC;oBAC7BX,WAAW;oBACX;YACJ;QACF;;YAEC,CAACR,aAAaF;YACdO;YACAL,aAAaF;;;AAGpB,GACA"}