@react-md/core 1.0.0-next.0

package/dist/menu/MenuSheet.d.ts

@@ -0,0 +1,68 @@
+import { type CSSProperties, type ReactElement, type ReactNode } from "react";
+import { type BaseSheetProps } from "../sheet/Sheet.js";
+import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
+import { type RenderMenuAsSheet } from "./MenuConfigurationProvider.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MenuSheetConvenienceProps {
+    /**
+     * This can be used to apply additional props to the `Sheet` component when
+     * the `Menu` is being rendered as a `Sheet`.
+     *
+     * Note: You can override the `style` and `className` using
+     * {@link sheetStyle} and {@link sheetClassName} instead for convenience.
+     *
+     * @example
+     * ```tsx
+     * <Menu
+     *   {...props}
+     *   sheetProps={{
+     *     style: {
+     *       // custom inline style
+     *     },
+     *     className: "come-class-name",
+     *   }}
+     * />
+     * ```
+     */
+    sheetProps?: PropsWithRef<BaseSheetProps, HTMLDivElement>;
+    /**
+     * Convenience prop to apply custom style to the `Sheet` component when the
+     * `Menu` is being rendered as a `Sheet`.
+     */
+    sheetStyle?: CSSProperties;
+    /**
+     * Convenience prop to apply custom class name to the `Sheet` component when
+     * the `Menu` is being rendered as a `Sheet`.
+     */
+    sheetClassName?: string;
+}
+/**
+ * @internal
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 Updated to use the latest menu API.
+ */
+export interface MenuSheetProps extends BaseSheetProps {
+    /** {@inheritDoc MenuConfiguration.sheetHeader} */
+    header?: ReactNode;
+    /** {@inheritDoc MenuConfiguration.sheetFooter} */
+    footer?: ReactNode;
+    children: ReactNode;
+    /** @remarks \@since 6.0.0 */
+    enabled: RenderMenuAsSheet;
+}
+/**
+ * **Client Component**
+ *
+ * Implements a `Menu` using the `Sheet` component that probably shouldn't
+ * really be used externally.
+ *
+ * @internal
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 Added the `enabled` prop and does not render a custom `Menu`
+ * implementation.
+ */
+export declare function MenuSheet(props: LabelRequiredForA11y<MenuSheetProps>): ReactElement;

package/dist/menu/MenuSheet.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Sheet } from "../sheet/Sheet.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * **Client Component**
+ *
+ * Implements a `Menu` using the `Sheet` component that probably shouldn't
+ * really be used externally.
+ *
+ * @internal
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 Added the `enabled` prop and does not render a custom `Menu`
+ * implementation.
+ */ export function MenuSheet(props) {
+    const { header, footer, children, onClick = noop, overlayProps, enabled, ...remaining } = props;
+    const { onRequestClose } = props;
+    if (!enabled) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Sheet, {
+        ...remaining,
+        onClick: (event)=>{
+            onClick(event);
+            // Prevent closing parent sheet/menus if an element in the header or
+            // footer is clicked
+            if (!(event.target instanceof HTMLElement) || event.target.closest('.rmd-menu,[role="dialog"]')?.getAttribute("role") === "dialog") {
+                event.stopPropagation();
+            }
+        },
+        overlayProps: {
+            ...overlayProps,
+            onClick: (event)=>{
+                overlayProps?.onClick?.(event);
+                // prevent closing parent menus if the overlay element is clicked.
+                event.stopPropagation();
+                onRequestClose();
+            }
+        },
+        children: [
+            header,
+            children,
+            footer
+        ]
+    });
+}
+
+//# sourceMappingURL=MenuSheet.js.map

package/dist/menu/MenuSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menu/MenuSheet.tsx"],"sourcesContent":["\"use client\";\nimport { type CSSProperties, type ReactElement, type ReactNode } from \"react\";\nimport { Sheet, type BaseSheetProps } from \"../sheet/Sheet.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { type RenderMenuAsSheet } from \"./MenuConfigurationProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuSheetConvenienceProps {\n  /**\n   * This can be used to apply additional props to the `Sheet` component when\n   * the `Menu` is being rendered as a `Sheet`.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link sheetStyle} and {@link sheetClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <Menu\n   *   {...props}\n   *   sheetProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *   }}\n   * />\n   * ```\n   */\n  sheetProps?: PropsWithRef<BaseSheetProps, HTMLDivElement>;\n\n  /**\n   * Convenience prop to apply custom style to the `Sheet` component when the\n   * `Menu` is being rendered as a `Sheet`.\n   */\n  sheetStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Sheet` component when\n   * the `Menu` is being rendered as a `Sheet`.\n   */\n  sheetClassName?: string;\n}\n\n/**\n * @internal\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use the latest menu API.\n */\nexport interface MenuSheetProps extends BaseSheetProps {\n  /** {@inheritDoc MenuConfiguration.sheetHeader} */\n  header?: ReactNode;\n  /** {@inheritDoc MenuConfiguration.sheetFooter} */\n  footer?: ReactNode;\n  children: ReactNode;\n\n  /** @remarks \\@since 6.0.0 */\n  enabled: RenderMenuAsSheet;\n}\n\n/**\n * **Client Component**\n *\n * Implements a `Menu` using the `Sheet` component that probably shouldn't\n * really be used externally.\n *\n * @internal\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Added the `enabled` prop and does not render a custom `Menu`\n * implementation.\n */\nexport function MenuSheet(\n  props: LabelRequiredForA11y<MenuSheetProps>\n): ReactElement {\n  const {\n    header,\n    footer,\n    children,\n    onClick = noop,\n    overlayProps,\n    enabled,\n    ...remaining\n  } = props;\n  const { onRequestClose } = props;\n\n  if (!enabled) {\n    return <>{children}</>;\n  }\n\n  return (\n    <Sheet\n      {...remaining}\n      onClick={(event) => {\n        onClick(event);\n\n        // Prevent closing parent sheet/menus if an element in the header or\n        // footer is clicked\n        if (\n          !(event.target instanceof HTMLElement) ||\n          event.target\n            .closest('.rmd-menu,[role=\"dialog\"]')\n            ?.getAttribute(\"role\") === \"dialog\"\n        ) {\n          event.stopPropagation();\n        }\n      }}\n      overlayProps={{\n        ...overlayProps,\n        onClick: (event) => {\n          overlayProps?.onClick?.(event);\n\n          // prevent closing parent menus if the overlay element is clicked.\n          event.stopPropagation();\n          onRequestClose();\n        },\n      }}\n    >\n      {header}\n      {children}\n      {footer}\n    </Sheet>\n  );\n}\n"],"names":["Sheet","noop","MenuSheet","props","header","footer","children","onClick","overlayProps","enabled","remaining","onRequestClose","event","target","HTMLElement","closest","getAttribute","stopPropagation"],"mappings":"AAAA;;AAEA,SAASA,KAAK,QAA6B,oBAAoB;AAI/D,MAAMC,OAAO;AACX,aAAa;AACf;AA0DA;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,UACdC,KAA2C;IAE3C,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,UAAUN,IAAI,EACdO,YAAY,EACZC,OAAO,EACP,GAAGC,WACJ,GAAGP;IACJ,MAAM,EAAEQ,cAAc,EAAE,GAAGR;IAE3B,IAAI,CAACM,SAAS;QACZ,qBAAO;sBAAGH;;IACZ;IAEA,qBACE,MAACN;QACE,GAAGU,SAAS;QACbH,SAAS,CAACK;YACRL,QAAQK;YAER,oEAAoE;YACpE,oBAAoB;YACpB,IACE,CAAEA,CAAAA,MAAMC,MAAM,YAAYC,WAAU,KACpCF,MAAMC,MAAM,CACTE,OAAO,CAAC,8BACPC,aAAa,YAAY,UAC7B;gBACAJ,MAAMK,eAAe;YACvB;QACF;QACAT,cAAc;YACZ,GAAGA,YAAY;YACfD,SAAS,CAACK;gBACRJ,cAAcD,UAAUK;gBAExB,kEAAkE;gBAClEA,MAAMK,eAAe;gBACrBN;YACF;QACF;;YAECP;YACAE;YACAD;;;AAGP"}

package/dist/menu/MenuVisibilityProvider.d.ts

@@ -0,0 +1,46 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type NonNullMutableRef, type UseStateObject } from "../types.js";
+/**
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 Added the `defaultFocusIndex` ref.
+ */
+export interface MenuVisibilityContext extends UseStateObject<"visible", boolean> {
+    defaultFocusIndex: NonNullMutableRef<number>;
+}
+/**
+ * This hook allows you control the visibility of a parent menu. The main
+ * use-case for this hook is adding a custom sheet header/footer.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * function SheetFooter(): ReactElement {
+ *   const { setVisible } = useMenuVisibility();
+ *
+ *   return (
+ *     <DialogFooter>
+ *       <Button onClick={() => setVisible(false)}>Cancel</Button>
+ *     </DialogFooter>
+ *   );
+ * }
+ * ```
+ *
+ * @returns the {@link MenuVisibilityContext}
+ * @remarks \@since 5.0.0
+ */
+export declare function useMenuVisibility(): Readonly<MenuVisibilityContext>;
+/**
+ * @internal
+ * @remarks \@since 5.0.0
+ */
+export interface MenuVisibilityProviderProps extends MenuVisibilityContext {
+    children: ReactNode;
+}
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @remarks \@since 5.0.0
+ */
+export declare function MenuVisibilityProvider({ visible, setVisible, defaultFocusIndex, children, }: MenuVisibilityProviderProps): ReactElement;

package/dist/menu/MenuVisibilityProvider.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+/**
+ * @internal
+ * @remarks \@since 5.0.0
+ */ const context = /*#__PURE__*/ createContext({
+    visible: false,
+    setVisible () {
+        throw new Error('"MenuVisibilityProvider" must be a parent component');
+    },
+    defaultFocusIndex: {
+        current: 0
+    }
+});
+context.displayName = "MenuVisibility";
+/**
+ * @internal
+ * @remarks \@since 5.0.0
+ */ const { Provider } = context;
+/**
+ * This hook allows you control the visibility of a parent menu. The main
+ * use-case for this hook is adding a custom sheet header/footer.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * function SheetFooter(): ReactElement {
+ *   const { setVisible } = useMenuVisibility();
+ *
+ *   return (
+ *     <DialogFooter>
+ *       <Button onClick={() => setVisible(false)}>Cancel</Button>
+ *     </DialogFooter>
+ *   );
+ * }
+ * ```
+ *
+ * @returns the {@link MenuVisibilityContext}
+ * @remarks \@since 5.0.0
+ */ export function useMenuVisibility() {
+    return useContext(context);
+}
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @remarks \@since 5.0.0
+ */ export function MenuVisibilityProvider({ visible, setVisible, defaultFocusIndex, children }) {
+    const value = useMemo(()=>({
+            visible,
+            setVisible,
+            defaultFocusIndex
+        }), [
+        visible,
+        setVisible,
+        defaultFocusIndex
+    ]);
+    return /*#__PURE__*/ _jsx(Provider, {
+        value: value,
+        children: children
+    });
+}
+
+//# sourceMappingURL=MenuVisibilityProvider.js.map

package/dist/menu/MenuVisibilityProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menu/MenuVisibilityProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type NonNullMutableRef, type UseStateObject } from \"../types.js\";\n\n/**\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Added the `defaultFocusIndex` ref.\n */\nexport interface MenuVisibilityContext\n  extends UseStateObject<\"visible\", boolean> {\n  defaultFocusIndex: NonNullMutableRef<number>;\n}\n\n/**\n * @internal\n * @remarks \\@since 5.0.0\n */\nconst context = createContext<MenuVisibilityContext>({\n  visible: false,\n  setVisible() {\n    throw new Error('\"MenuVisibilityProvider\" must be a parent component');\n  },\n  defaultFocusIndex: { current: 0 },\n});\ncontext.displayName = \"MenuVisibility\";\n\n/**\n * @internal\n * @remarks \\@since 5.0.0\n */\nconst { Provider } = context;\n\n/**\n * This hook allows you control the visibility of a parent menu. The main\n * use-case for this hook is adding a custom sheet header/footer.\n *\n * @example\n * Simple Example\n * ```tsx\n * function SheetFooter(): ReactElement {\n *   const { setVisible } = useMenuVisibility();\n *\n *   return (\n *     <DialogFooter>\n *       <Button onClick={() => setVisible(false)}>Cancel</Button>\n *     </DialogFooter>\n *   );\n * }\n * ```\n *\n * @returns the {@link MenuVisibilityContext}\n * @remarks \\@since 5.0.0\n */\nexport function useMenuVisibility(): Readonly<MenuVisibilityContext> {\n  return useContext(context);\n}\n\n/**\n * @internal\n * @remarks \\@since 5.0.0\n */\nexport interface MenuVisibilityProviderProps extends MenuVisibilityContext {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @remarks \\@since 5.0.0\n */\nexport function MenuVisibilityProvider({\n  visible,\n  setVisible,\n  defaultFocusIndex,\n  children,\n}: MenuVisibilityProviderProps): ReactElement {\n  const value = useMemo<MenuVisibilityContext>(\n    () => ({\n      visible,\n      setVisible,\n      defaultFocusIndex,\n    }),\n    [visible, setVisible, defaultFocusIndex]\n  );\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","context","visible","setVisible","Error","defaultFocusIndex","current","displayName","Provider","useMenuVisibility","MenuVisibilityProvider","children","value"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,OAAO,QAGF,QAAQ;AAaf;;;CAGC,GACD,MAAMC,wBAAUH,cAAqC;IACnDI,SAAS;IACTC;QACE,MAAM,IAAIC,MAAM;IAClB;IACAC,mBAAmB;QAAEC,SAAS;IAAE;AAClC;AACAL,QAAQM,WAAW,GAAG;AAEtB;;;CAGC,GACD,MAAM,EAAEC,QAAQ,EAAE,GAAGP;AAErB;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASQ;IACd,OAAOV,WAAWE;AACpB;AAUA;;;;;CAKC,GACD,OAAO,SAASS,uBAAuB,EACrCR,OAAO,EACPC,UAAU,EACVE,iBAAiB,EACjBM,QAAQ,EACoB;IAC5B,MAAMC,QAAQZ,QACZ,IAAO,CAAA;YACLE;YACAC;YACAE;QACF,CAAA,GACA;QAACH;QAASC;QAAYE;KAAkB;IAG1C,qBAAO,KAACG;QAASI,OAAOA;kBAAQD;;AAClC"}

package/dist/menu/MenuWidget.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from "react";
+import { type GetDefaultFocusedIndex } from "../movement/types.js";
+import { type NonNullMutableRef } from "../types.js";
+import { type MenuListConvenienceProps } from "./Menu.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MenuClassNameOptions {
+    className?: string;
+    horizontal?: boolean;
+    elevated?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function menu(options?: MenuClassNameOptions): string;
+/**
+ * @internal
+ */
+export interface MenuWidgetProps extends HTMLAttributes<HTMLDivElement>, MenuListConvenienceProps {
+    isSheet: boolean;
+    horizontal: boolean;
+    disableElevation?: boolean;
+    cancelUnmountFocus: NonNullMutableRef<boolean>;
+    getDefaultFocusedIndex?: GetDefaultFocusedIndex;
+}
+/**
+ * **Client Component**
+ *
+ * This component was added to support the listbox role and the `useId()` hook.
+ * If the `temporary` prop is set, the `MenuItem`'s ids will not be the same the
+ * next time the menu opens, so the aria-activedescendant will point to a
+ * non-existing id
+ *
+ * @internal
+ */
+export declare const MenuWidget: import("react").ForwardRefExoticComponent<MenuWidgetProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/menu/MenuWidget.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef, useRef, useState } from "react";
+import { List } from "../list/List.js";
+import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
+import { bem } from "../utils/bem.js";
+import { MenuWidgetKeyboardProvider } from "./MenuWidgetKeyboardProvider.js";
+import { MenuBarProvider, useMenuBarContext, useMenuBarProvider } from "./useMenuBarProvider.js";
+const styles = bem("rmd-menu");
+const noop = ()=>{
+// do nothing
+};
+/**
+ * @remarks \@since 6.0.0
+ */ export function menu(options = {}) {
+    const { className, horizontal, elevated } = options;
+    return cnb(styles({
+        horizontal,
+        elevated
+    }), className);
+}
+/**
+ * **Client Component**
+ *
+ * This component was added to support the listbox role and the `useId()` hook.
+ * If the `temporary` prop is set, the `MenuItem`'s ids will not be the same the
+ * next time the menu opens, so the aria-activedescendant will point to a
+ * non-existing id
+ *
+ * @internal
+ */ export const MenuWidget = /*#__PURE__*/ forwardRef(function MenuWidget(props, ref) {
+    const { id, role = "menu", className, listStyle, listClassName, listProps, children, onClick, onBlur = noop, onFocus = noop, onKeyDown = noop, tabIndex = -1, isSheet, horizontal, disableElevation, cancelUnmountFocus, getDefaultFocusedIndex, ...remaining } = props;
+    const isListbox = role === "listbox";
+    const { menubar } = useMenuBarContext();
+    // Since there is the possibility of other tab focusable elements within the
+    // sheet and the menu items are programmatically focused, the menu's
+    // tabIndex needs to be set to `-1` while one of the child menu items are
+    // focused. This allows Shift+Tab correctly focuses the previous focusable
+    // element within the sheet. Since `onFocus` and `onBlur` will be bubbled up
+    // to the menu widget each time a new MenuItem is focused, only disable the
+    // focused state if the blur event is fired without another focus event
+    // within an animation frame.
+    const [sheetMenuFocused, setSheetMenuFocused] = useState(false);
+    const sheetBlurredFame = useRef(0);
+    const menuBarContext = useMenuBarProvider({
+        root: false,
+        menubar,
+        hoverTimeout: menubar ? 0 : undefined,
+        defaultActiveId: id
+    });
+    const { movementProps, movementContext } = useKeyboardMovementProvider({
+        onClick,
+        onFocus (event) {
+            onFocus(event);
+            if (!isSheet) {
+                return;
+            }
+            window.cancelAnimationFrame(sheetBlurredFame.current);
+            setSheetMenuFocused(true);
+        },
+        onKeyDown,
+        horizontal,
+        loopable: true,
+        searchable: true,
+        programmatic: true,
+        includeDisabled: true,
+        getDefaultFocusedIndex
+    });
+    return /*#__PURE__*/ _jsx(MenuWidgetKeyboardProvider, {
+        disabled: isListbox,
+        value: movementContext,
+        children: /*#__PURE__*/ _jsx(MenuBarProvider, {
+            value: menuBarContext,
+            children: /*#__PURE__*/ _jsx("div", {
+                "aria-orientation": horizontal ? "horizontal" : undefined,
+                ...remaining,
+                ...isListbox ? {
+                    onClick,
+                    onFocus,
+                    onKeyDown
+                } : movementProps,
+                id: id,
+                ref: ref,
+                role: role,
+                className: menu({
+                    className,
+                    elevated: !disableElevation && !isSheet,
+                    horizontal
+                }),
+                tabIndex: isSheet && !sheetMenuFocused ? 0 : tabIndex,
+                onBlur: (event)=>{
+                    onBlur(event);
+                    if (!isSheet) {
+                        return;
+                    }
+                    sheetBlurredFame.current = window.requestAnimationFrame(()=>{
+                        setSheetMenuFocused(false);
+                    });
+                },
+                children: /*#__PURE__*/ _jsx(List, {
+                    ...listProps,
+                    style: listStyle ?? listProps?.style,
+                    className: listClassName || listProps?.className,
+                    horizontal: horizontal,
+                    onClick: (event)=>{
+                        listProps?.onClick?.(event);
+                        // this makes it so you can click on the menu/list without
+                        // closing the menu
+                        if (event.target === event.currentTarget) {
+                            event.stopPropagation();
+                        }
+                        // This might be a test only workaround since clicking links move focus
+                        // somewhere else
+                        if (event.target instanceof HTMLElement) {
+                            cancelUnmountFocus.current = event.currentTarget.contains(event.target.closest("a"));
+                        }
+                    },
+                    children: children
+                })
+            })
+        })
+    });
+});
+
+//# sourceMappingURL=MenuWidget.js.map

package/dist/menu/MenuWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menu/MenuWidget.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, useRef, useState, type HTMLAttributes } from \"react\";\nimport { List } from \"../list/List.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type NonNullMutableRef } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type MenuListConvenienceProps } from \"./Menu.js\";\nimport { MenuWidgetKeyboardProvider } from \"./MenuWidgetKeyboardProvider.js\";\nimport {\n  MenuBarProvider,\n  useMenuBarContext,\n  useMenuBarProvider,\n} from \"./useMenuBarProvider.js\";\n\nconst styles = bem(\"rmd-menu\");\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuClassNameOptions {\n  className?: string;\n  horizontal?: boolean;\n  elevated?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menu(options: MenuClassNameOptions = {}): string {\n  const { className, horizontal, elevated } = options;\n\n  return cnb(styles({ horizontal, elevated }), className);\n}\n\n/**\n * @internal\n */\nexport interface MenuWidgetProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuListConvenienceProps {\n  isSheet: boolean;\n  horizontal: boolean;\n  disableElevation?: boolean;\n  cancelUnmountFocus: NonNullMutableRef<boolean>;\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n}\n\n/**\n * **Client Component**\n *\n * This component was added to support the listbox role and the `useId()` hook.\n * If the `temporary` prop is set, the `MenuItem`'s ids will not be the same the\n * next time the menu opens, so the aria-activedescendant will point to a\n * non-existing id\n *\n * @internal\n */\nexport const MenuWidget = forwardRef<HTMLDivElement, MenuWidgetProps>(\n  function MenuWidget(props, ref) {\n    const {\n      id,\n      role = \"menu\",\n      className,\n      listStyle,\n      listClassName,\n      listProps,\n      children,\n      onClick,\n      onBlur = noop,\n      onFocus = noop,\n      onKeyDown = noop,\n      tabIndex = -1,\n      isSheet,\n      horizontal,\n      disableElevation,\n      cancelUnmountFocus,\n      getDefaultFocusedIndex,\n      ...remaining\n    } = props;\n    const isListbox = role === \"listbox\";\n    const { menubar } = useMenuBarContext();\n\n    // Since there is the possibility of other tab focusable elements within the\n    // sheet and the menu items are programmatically focused, the menu's\n    // tabIndex needs to be set to `-1` while one of the child menu items are\n    // focused. This allows Shift+Tab correctly focuses the previous focusable\n    // element within the sheet. Since `onFocus` and `onBlur` will be bubbled up\n    // to the menu widget each time a new MenuItem is focused, only disable the\n    // focused state if the blur event is fired without another focus event\n    // within an animation frame.\n    const [sheetMenuFocused, setSheetMenuFocused] = useState(false);\n    const sheetBlurredFame = useRef(0);\n    const menuBarContext = useMenuBarProvider({\n      root: false,\n      menubar,\n      hoverTimeout: menubar ? 0 : undefined,\n      defaultActiveId: id,\n    });\n    const { movementProps, movementContext } = useKeyboardMovementProvider({\n      onClick,\n      onFocus(event) {\n        onFocus(event);\n\n        if (!isSheet) {\n          return;\n        }\n\n        window.cancelAnimationFrame(sheetBlurredFame.current);\n        setSheetMenuFocused(true);\n      },\n      onKeyDown,\n      horizontal,\n      loopable: true,\n      searchable: true,\n      programmatic: true,\n      includeDisabled: true,\n      getDefaultFocusedIndex,\n    });\n\n    return (\n      <MenuWidgetKeyboardProvider disabled={isListbox} value={movementContext}>\n        <MenuBarProvider value={menuBarContext}>\n          <div\n            aria-orientation={horizontal ? \"horizontal\" : undefined}\n            {...remaining}\n            {...(isListbox ? { onClick, onFocus, onKeyDown } : movementProps)}\n            id={id}\n            ref={ref}\n            role={role}\n            className={menu({\n              className,\n              elevated: !disableElevation && !isSheet,\n              horizontal,\n            })}\n            tabIndex={isSheet && !sheetMenuFocused ? 0 : tabIndex}\n            onBlur={(event) => {\n              onBlur(event);\n              if (!isSheet) {\n                return;\n              }\n\n              sheetBlurredFame.current = window.requestAnimationFrame(() => {\n                setSheetMenuFocused(false);\n              });\n            }}\n          >\n            <List\n              {...listProps}\n              style={listStyle ?? listProps?.style}\n              className={listClassName || listProps?.className}\n              horizontal={horizontal}\n              onClick={(event) => {\n                listProps?.onClick?.(event);\n\n                // this makes it so you can click on the menu/list without\n                // closing the menu\n                if (event.target === event.currentTarget) {\n                  event.stopPropagation();\n                }\n\n                // This might be a test only workaround since clicking links move focus\n                // somewhere else\n                if (event.target instanceof HTMLElement) {\n                  cancelUnmountFocus.current = event.currentTarget.contains(\n                    event.target.closest(\"a\")\n                  );\n                }\n              }}\n            >\n              {children}\n            </List>\n          </div>\n        </MenuBarProvider>\n      </MenuWidgetKeyboardProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useRef","useState","List","useKeyboardMovementProvider","bem","MenuWidgetKeyboardProvider","MenuBarProvider","useMenuBarContext","useMenuBarProvider","styles","noop","menu","options","className","horizontal","elevated","MenuWidget","props","ref","id","role","listStyle","listClassName","listProps","children","onClick","onBlur","onFocus","onKeyDown","tabIndex","isSheet","disableElevation","cancelUnmountFocus","getDefaultFocusedIndex","remaining","isListbox","menubar","sheetMenuFocused","setSheetMenuFocused","sheetBlurredFame","menuBarContext","root","hoverTimeout","undefined","defaultActiveId","movementProps","movementContext","event","window","cancelAnimationFrame","current","loopable","searchable","programmatic","includeDisabled","disabled","value","div","aria-orientation","requestAnimationFrame","style","target","currentTarget","stopPropagation","HTMLElement","contains","closest"],"mappings":"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"}

package/dist/menu/MenuWidgetKeyboardProvider.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type KeyboardMovementContext } from "../movement/types.js";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export interface MenuWidgetKeyboardProviderProps {
+    value: Readonly<KeyboardMovementContext>;
+    disabled: boolean;
+    children: ReactNode;
+}
+/**
+ * **Client Component**
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export declare function MenuWidgetKeyboardProvider(props: MenuWidgetKeyboardProviderProps): ReactElement;

package/dist/menu/MenuWidgetKeyboardProvider.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
+/**
+ * **Client Component**
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export function MenuWidgetKeyboardProvider(props) {
+    const { value, disabled, children } = props;
+    if (disabled) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsx(KeyboardMovementProvider, {
+        value: value,
+        children: children
+    });
+}
+
+//# sourceMappingURL=MenuWidgetKeyboardProvider.js.map

package/dist/menu/MenuWidgetKeyboardProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menu/MenuWidgetKeyboardProvider.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { type KeyboardMovementContext } from \"../movement/types.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface MenuWidgetKeyboardProviderProps {\n  value: Readonly<KeyboardMovementContext>;\n  disabled: boolean;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function MenuWidgetKeyboardProvider(\n  props: MenuWidgetKeyboardProviderProps\n): ReactElement {\n  const { value, disabled, children } = props;\n  if (disabled) {\n    return <>{children}</>;\n  }\n\n  return (\n    <KeyboardMovementProvider value={value}>\n      {children}\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["KeyboardMovementProvider","MenuWidgetKeyboardProvider","props","value","disabled","children"],"mappings":"AAAA;;AAGA,SAASA,wBAAwB,QAAQ,6CAA6C;AAYtF;;;;;CAKC,GACD,OAAO,SAASC,2BACdC,KAAsC;IAEtC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGH;IACtC,IAAIE,UAAU;QACZ,qBAAO;sBAAGC;;IACZ;IAEA,qBACE,KAACL;QAAyBG,OAAOA;kBAC9BE;;AAGP"}

package/dist/menu/_menu.scss

@@ -0,0 +1,137 @@
+@use "sass:map";
+@use "../utils";
+@use "../box-shadows";
+@use "../theme/theme";
+@use "../interaction/interaction";
+@use "../icon/icon";
+
+$disable-everything: false !default;
+$disable-menu-item: false !default;
+$disable-menu-item-group: false !default;
+$disable-focus-outline: false !default;
+$disable-elevation-colors: theme.$disable-dark-elevation !default;
+
+$elevation: 8 !default;
+$background-color: theme.theme-get-var(surface-color) !default;
+$color: theme.theme-get-var(text-primary-color) !default;
+
+$z-index: utils.$temporary-element-z-index !default;
+$min-width: 7rem !default;
+
+$spacing: 1rem !default;
+
+$var-lookup: (
+  background-color: (
+    var: --rmd-menu-background-color,
+    value: $background-color,
+  ),
+  color: (
+    var: --rmd-menu-color,
+    value: $color,
+  ),
+  min-width: (
+    var: --rmd-menu-min-width,
+    value: $min-width,
+  ),
+  spacing: (
+    var: --rmd-menu-spacing,
+    value: $spacing,
+  ),
+);
+
+@function get-var($name, $fallback: null) {
+  $found: utils.validate($var-lookup, $name, "dialog var");
+  $var: map.get($found, var);
+  $value: if($fallback, $fallback, map.get($found, value));
+
+  @if $value {
+    @return var(#{$var}, #{$value});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  $var: map.get(utils.validate($var-lookup, $name, "dialog var"), var);
+
+  #{$var}: #{$value};
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
+@mixin menu-styles {
+  .rmd-menu {
+    outline: none;
+    overflow: auto;
+
+    @if not $disable-focus-outline {
+      @include utils.keyboard-only {
+        &--outline:focus {
+          // Note: Do not use the `interaction-outline` mixin +
+          // `interaction.set-var(interaction.$focus-color)` like normal focus
+          // elements since it'll make all focusable children update with the
+          // outline color as well
+          outline: interaction.get-var(focus-color) solid
+            interaction.get-var(focus-width);
+        }
+      }
+    }
+
+    &--elevated {
+      @include box-shadows.box-shadow(
+        $elevation,
+        $disable-colors: $disable-elevation-colors
+      );
+      @if $disable-elevation-colors {
+        @include use-var(background-color);
+        @include use-var(color);
+      }
+      @include use-var(min-width);
+
+      z-index: $z-index;
+    }
+  }
+}
+
+@mixin menu-item-styles {
+  .rmd-menu-item {
+    @include icon.set-var(spacing, get-var(spacing));
+
+    height: var(--rmd-list-item-height);
+
+    &--focused {
+      @include utils.keyboard-only {
+        @include interaction.set-var(
+          background-color,
+          interaction.get-var(focus-background-color)
+        );
+
+        &::before {
+          @include interaction.focus-styles;
+        }
+      }
+    }
+  }
+}
+
+@mixin menu-item-group-styles {
+  .rmd-menu-item-group {
+    padding: 0;
+  }
+}
+
+@mixin styles {
+  @if not $disable-everything {
+    @include menu-styles;
+
+    @if not $disable-menu-item {
+      @include menu-item-styles;
+    }
+
+    @if not $disable-menu-item-group {
+      @include menu-item-group-styles;
+    }
+  }
+}