@react-md/core 1.0.0-next.0

package/dist/media-queries/appSize.js

@@ -0,0 +1,21 @@
+/** @defaultValue `47.9375em` */ export const DEFAULT_PHONE_MAX_WIDTH = `${767 / 16}em`;
+/** @defaultValue `48em` */ export const DEFAULT_TABLET_MIN_WIDTH = `${768 / 16}em`;
+/** @defaultValue `64em` */ export const DEFAULT_TABLET_MAX_WIDTH = `${1024 / 16}em`;
+/** @defaultValue `64.0625em` */ export const DEFAULT_DESKTOP_MIN_WIDTH = `${1025 / 16}em`;
+/** @defaultValue `80em` */ export const DEFAULT_DESKTOP_LARGE_MIN_WIDTH = `${1280 / 16}em`;
+export const DEFAULT_APP_SIZE_QUERIES = {
+    phoneMaxWidth: DEFAULT_PHONE_MAX_WIDTH,
+    tabletMinWidth: DEFAULT_TABLET_MIN_WIDTH,
+    tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,
+    desktopMinWidth: DEFAULT_DESKTOP_MIN_WIDTH,
+    desktopLargeMinWidth: DEFAULT_DESKTOP_LARGE_MIN_WIDTH
+};
+export const DEFAULT_APP_SIZE = {
+    isPhone: false,
+    isTablet: false,
+    isDesktop: true,
+    isLargeDesktop: false,
+    isLandscape: true
+};
+
+//# sourceMappingURL=appSize.js.map

package/dist/media-queries/appSize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media-queries/appSize.ts"],"sourcesContent":["export type QuerySize = number | `${number}${string}`;\n\n/** @defaultValue `47.9375em` */\nexport const DEFAULT_PHONE_MAX_WIDTH = `${767 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `48em` */\nexport const DEFAULT_TABLET_MIN_WIDTH = `${768 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `64em` */\nexport const DEFAULT_TABLET_MAX_WIDTH = `${1024 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `64.0625em` */\nexport const DEFAULT_DESKTOP_MIN_WIDTH = `${1025 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `80em` */\nexport const DEFAULT_DESKTOP_LARGE_MIN_WIDTH = `${\n  1280 / 16\n}em` satisfies QuerySize;\n\nexport interface AppSizeQueries {\n  /**\n   * The max width to use for phones. This one is a max width unlike the others\n   * since everything from 0 to this value will be considered a phone.\n   *\n   * @defaultValue `47.9375em`\n   * @see {@link DEFAULT_PHONE_MAX_WIDTH}\n   */\n  phoneMaxWidth?: QuerySize;\n\n  /**\n   * The min width for a tablet device.\n   *\n   * @defaultValue `48em`\n   * @see {@link DEFAULT_TABLET_MIN_WIDTH}\n   */\n  tabletMinWidth?: QuerySize;\n\n  /**\n   * The max width for a tablet device. This should normally be `1px` less than\n   * the `desktopMinWidth`, but it can be any value if needed. The tablet has a\n   * range of min to max so that you can have a bit more control.\n   *\n   * @defaultValue `64em`\n   * @see {@link DEFAULT_TABLET_MAX_WIDTH}\n   */\n  tabletMaxWidth?: QuerySize;\n\n  /**\n   * The min width for a desktop screen.\n   *\n   * @defaultValue `64.0625em`\n   * @see {@link DEFAULT_DESKTOP_MIN_WIDTH}\n   */\n  desktopMinWidth?: QuerySize;\n\n  /**\n   * The min width for a large (1440p, 4k, etc) desktop screen.\n   *\n   * @defaultValue `80em`\n   * @see {@link DEFAULT_DESKTOP_LARGE_MIN_WIDTH}\n   */\n  desktopLargeMinWidth?: QuerySize;\n}\n\nexport const DEFAULT_APP_SIZE_QUERIES: Readonly<AppSizeQueries> = {\n  phoneMaxWidth: DEFAULT_PHONE_MAX_WIDTH,\n  tabletMinWidth: DEFAULT_TABLET_MIN_WIDTH,\n  tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,\n  desktopMinWidth: DEFAULT_DESKTOP_MIN_WIDTH,\n  desktopLargeMinWidth: DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n};\n\n/**\n * The current size for your application. This should work both server side and\n * client side, but you will have much better results client side.\n */\nexport interface AppSize {\n  /**\n   * Boolean if currently matching a phone by comparing the max width of the\n   * device.\n   */\n  isPhone: boolean;\n\n  /**\n   * Boolean if currently matching a tablet by comparing the max width of the\n   * device.\n   */\n  isTablet: boolean;\n\n  /**\n   * Boolean if currently matching a desktop screen by comparing the max width\n   * of the device.\n   */\n  isDesktop: boolean;\n\n  /**\n   * Boolean if currently matching a large desktop screen by comparing the max\n   * width of the device.\n   */\n  isLargeDesktop: boolean;\n\n  /**\n   * Boolean if the app is considered to be in landscape mode. This will just\n   * verify that the window width is greater than the window height.\n   *\n   * NOTE: This might not be super accurate on Android devices since the soft\n   * keyboard will change the dimensions of the viewport when it appears. It is\n   * recommended to use the `useOrientation` hook as well if you'd like to get\n   * the current orientation type.\n   */\n  isLandscape: boolean;\n}\n\nexport const DEFAULT_APP_SIZE: AppSize = {\n  isPhone: false,\n  isTablet: false,\n  isDesktop: true,\n  isLargeDesktop: false,\n  isLandscape: true,\n};\n"],"names":["DEFAULT_PHONE_MAX_WIDTH","DEFAULT_TABLET_MIN_WIDTH","DEFAULT_TABLET_MAX_WIDTH","DEFAULT_DESKTOP_MIN_WIDTH","DEFAULT_DESKTOP_LARGE_MIN_WIDTH","DEFAULT_APP_SIZE_QUERIES","phoneMaxWidth","tabletMinWidth","tabletMaxWidth","desktopMinWidth","desktopLargeMinWidth","DEFAULT_APP_SIZE","isPhone","isTablet","isDesktop","isLargeDesktop","isLandscape"],"mappings":"AAEA,8BAA8B,GAC9B,OAAO,MAAMA,0BAA0B,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,CAAqB;AAE3E,yBAAyB,GACzB,OAAO,MAAMC,2BAA2B,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,CAAqB;AAE5E,yBAAyB,GACzB,OAAO,MAAMC,2BAA2B,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC,CAAqB;AAE7E,8BAA8B,GAC9B,OAAO,MAAMC,4BAA4B,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC,CAAqB;AAE9E,yBAAyB,GACzB,OAAO,MAAMC,kCAAkC,CAAC,EAC9C,OAAO,GACR,EAAE,CAAC,CAAqB;AA+CzB,OAAO,MAAMC,2BAAqD;IAChEC,eAAeN;IACfO,gBAAgBN;IAChBO,gBAAgBN;IAChBO,iBAAiBN;IACjBO,sBAAsBN;AACxB,EAAE;AA2CF,OAAO,MAAMO,mBAA4B;IACvCC,SAAS;IACTC,UAAU;IACVC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;AACf,EAAE"}

package/dist/media-queries/useMediaQuery.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { useMediaQuery } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const matches = useMediaQuery("screen and (min-width: 768px)");
+ *
+ *   return <>{matches ? "Matches" : "Doesn't"}</>;
+ * }
+ * ```
+ *
+ * @param query - The media query to use
+ * @param disabled - When `true`, the `window.matchMedia` API will not be
+ * activated and the hook will always return `false`.
+ * @returns `true` if the media query matches
+ * @remarks \@since 6.0.0
+ */
+export declare function useMediaQuery(query: string, disabled?: boolean): boolean;

package/dist/media-queries/useMediaQuery.js

@@ -0,0 +1,50 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useSsr } from "../SsrProvider.js";
+/**
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { useMediaQuery } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const matches = useMediaQuery("screen and (min-width: 768px)");
+ *
+ *   return <>{matches ? "Matches" : "Doesn't"}</>;
+ * }
+ * ```
+ *
+ * @param query - The media query to use
+ * @param disabled - When `true`, the `window.matchMedia` API will not be
+ * activated and the hook will always return `false`.
+ * @returns `true` if the media query matches
+ * @remarks \@since 6.0.0
+ */ export function useMediaQuery(query, disabled = false) {
+    const ssr = useSsr();
+    const [matches, setMatches] = useState(()=>{
+        if (typeof window === "undefined" || disabled || ssr) {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    useEffect(()=>{
+        if (disabled || ssr) {
+            return;
+        }
+        const result = window.matchMedia(query);
+        setMatches(result.matches);
+        const updater = ({ matches })=>setMatches(matches);
+        result.addEventListener("change", updater);
+        return ()=>{
+            result.removeEventListener("change", updater);
+        };
+    }, [
+        disabled,
+        query,
+        ssr
+    ]);
+    return matches;
+}
+
+//# sourceMappingURL=useMediaQuery.js.map

package/dist/media-queries/useMediaQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media-queries/useMediaQuery.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { useMediaQuery } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const matches = useMediaQuery(\"screen and (min-width: 768px)\");\n *\n *   return <>{matches ? \"Matches\" : \"Doesn't\"}</>;\n * }\n * ```\n *\n * @param query - The media query to use\n * @param disabled - When `true`, the `window.matchMedia` API will not be\n * activated and the hook will always return `false`.\n * @returns `true` if the media query matches\n * @remarks \\@since 6.0.0\n */\nexport function useMediaQuery(query: string, disabled = false): boolean {\n  const ssr = useSsr();\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === \"undefined\" || disabled || ssr) {\n      return false;\n    }\n\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (disabled || ssr) {\n      return;\n    }\n\n    const result = window.matchMedia(query);\n    setMatches(result.matches);\n\n    const updater = ({ matches }: MediaQueryListEvent): void =>\n      setMatches(matches);\n\n    result.addEventListener(\"change\", updater);\n    return () => {\n      result.removeEventListener(\"change\", updater);\n    };\n  }, [disabled, query, ssr]);\n\n  return matches;\n}\n"],"names":["useEffect","useState","useSsr","useMediaQuery","query","disabled","ssr","matches","setMatches","window","matchMedia","result","updater","addEventListener","removeEventListener"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,MAAM,QAAQ,oBAAoB;AAE3C;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,cAAcC,KAAa,EAAEC,WAAW,KAAK;IAC3D,MAAMC,MAAMJ;IACZ,MAAM,CAACK,SAASC,WAAW,GAAGP,SAAS;QACrC,IAAI,OAAOQ,WAAW,eAAeJ,YAAYC,KAAK;YACpD,OAAO;QACT;QAEA,OAAOG,OAAOC,UAAU,CAACN,OAAOG,OAAO;IACzC;IAEAP,UAAU;QACR,IAAIK,YAAYC,KAAK;YACnB;QACF;QAEA,MAAMK,SAASF,OAAOC,UAAU,CAACN;QACjCI,WAAWG,OAAOJ,OAAO;QAEzB,MAAMK,UAAU,CAAC,EAAEL,OAAO,EAAuB,GAC/CC,WAAWD;QAEbI,OAAOE,gBAAgB,CAAC,UAAUD;QAClC,OAAO;YACLD,OAAOG,mBAAmB,CAAC,UAAUF;QACvC;IACF,GAAG;QAACP;QAAUD;QAAOE;KAAI;IAEzB,OAAOC;AACT"}

package/dist/menu/DropdownMenu.d.ts

@@ -0,0 +1,77 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type MenuConvenienceProps, type MenuListConvenienceProps } from "./Menu.js";
+import { type MenuButtonProps } from "./MenuButton.js";
+import { type MenuConfiguration } from "./MenuConfigurationProvider.js";
+import { type MenuItemButtonProps } from "./MenuItemButton.js";
+import { type MenuSheetConvenienceProps } from "./MenuSheet.js";
+export interface BaseDropdownMenuProps extends MenuConfiguration, MenuListConvenienceProps, MenuSheetConvenienceProps, MenuConvenienceProps {
+    buttonChildren: ReactNode;
+}
+export interface DropdownMenuButtonProps extends MenuButtonProps, BaseDropdownMenuProps {
+}
+export interface DropdownMenuItemButtonProps extends MenuItemButtonProps, BaseDropdownMenuProps {
+}
+/**
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 Updated to use an `&` instead of `|` to allow autocompletion to
+ * work better by default. It's up to the user to make sure they don't provide
+ * incorrect props.
+ */
+export type DropdownMenuProps = DropdownMenuButtonProps & DropdownMenuItemButtonProps;
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import type { ReactElement } from "react";
+ * import { DropdownMenu, MenuItem } from "@react-md/core";
+ *
+ * function Example() {
+ *   return (
+ *     <DropdownMenu buttonChildren="Dropdown">
+ *       <MenuItem onClick={() => console.log('Clicked Item 1')}>
+ *         Item 1
+ *       </MenuItem>
+ *       <MenuItem onClick={() => console.log('Clicked Item 2')}>
+ *         Item 2
+ *       </MenuItem>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Nested Dropdown Menus
+ * ```tsx
+ * import type { ReactElement } from "react";
+ * import { DropdownMenu, MenuItem } from "@react-md/core";
+ *
+ * function Example() {
+ *   return (
+ *     <DropdownMenu buttonChildren="Dropdown">
+ *       <MenuItem onClick={() => console.log('Clicked Item 1')}>
+ *         Item 1
+ *       </MenuItem>
+ *       <MenuItem onClick={() => console.log('Clicked Item 2')}>
+ *         Item 2
+ *       </MenuItem>
+ *       <DropdownMenu buttonChildren="Nested Dropdown">
+ *         <MenuItem onClick={() => console.log('Clicked Item 1')}>
+ *           Nested Item 1
+ *         </MenuItem>
+ *         <MenuItem onClick={() => console.log('Clicked Item 2')}>
+ *           Nested Item 2
+ *         </MenuItem>
+ *       </DropdownMenu>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 Updated to use the latest menu API.
+ */
+export declare function DropdownMenu(props: DropdownMenuProps): ReactElement;

package/dist/menu/DropdownMenu.js

@@ -0,0 +1,178 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
+import { getLastFocusableIndex } from "../movement/utils.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { Menu } from "./Menu.js";
+import { MenuButton } from "./MenuButton.js";
+import { MenuConfigurationProvider } from "./MenuConfigurationProvider.js";
+import { MenuItemButton } from "./MenuItemButton.js";
+import { MenuVisibilityProvider } from "./MenuVisibilityProvider.js";
+import { useMenuBarContext } from "./useMenuBarProvider.js";
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import type { ReactElement } from "react";
+ * import { DropdownMenu, MenuItem } from "@react-md/core";
+ *
+ * function Example() {
+ *   return (
+ *     <DropdownMenu buttonChildren="Dropdown">
+ *       <MenuItem onClick={() => console.log('Clicked Item 1')}>
+ *         Item 1
+ *       </MenuItem>
+ *       <MenuItem onClick={() => console.log('Clicked Item 2')}>
+ *         Item 2
+ *       </MenuItem>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Nested Dropdown Menus
+ * ```tsx
+ * import type { ReactElement } from "react";
+ * import { DropdownMenu, MenuItem } from "@react-md/core";
+ *
+ * function Example() {
+ *   return (
+ *     <DropdownMenu buttonChildren="Dropdown">
+ *       <MenuItem onClick={() => console.log('Clicked Item 1')}>
+ *         Item 1
+ *       </MenuItem>
+ *       <MenuItem onClick={() => console.log('Clicked Item 2')}>
+ *         Item 2
+ *       </MenuItem>
+ *       <DropdownMenu buttonChildren="Nested Dropdown">
+ *         <MenuItem onClick={() => console.log('Clicked Item 1')}>
+ *           Nested Item 1
+ *         </MenuItem>
+ *         <MenuItem onClick={() => console.log('Clicked Item 2')}>
+ *           Nested Item 2
+ *         </MenuItem>
+ *       </DropdownMenu>
+ *     </DropdownMenu>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 Updated to use the latest menu API.
+ */ export function DropdownMenu(props) {
+    const { id: propId, horizontal, sheetHeader, sheetFooter, renderAsSheet, sheetPosition, sheetVerticalSize, buttonChildren, iconRotatorProps: propIconRotatorProps, disableTransition: propDisableTransition, anchor, vwMargin, vhMargin, xMargin, yMargin, initialX, initialY, width, transformOrigin, preventOverlap, disableSwapping, disableVHBounds, preventScroll, closeOnResize, closeOnScroll, getFixedPositionOptions, children, temporary, disablePortal, disableElevation, menuProps, menuStyle, menuClassName, sheetProps, sheetStyle, sheetClassName, ...remaining } = props;
+    const fixedTo = useRef(null);
+    const defaultFocusIndex = useRef(0);
+    const [visible, setVisible] = useState(false);
+    const { menubar, menuitem, activeIdRef, animatedOnceRef } = useMenuBarContext();
+    const id = useEnsuredId(propId, `menu${menuitem ? "item" : "button"}`);
+    const mode = useUserInteractionMode();
+    const mouse = mode === "mouse";
+    const keyboard = mode === "keyboard";
+    const disableTransition = propDisableTransition ?? (animatedOnceRef.current && menubar && !!activeIdRef.current && (mouse || keyboard));
+    const onRequestClose = useCallback(()=>{
+        setVisible(false);
+    }, []);
+    let iconRotatorProps = propIconRotatorProps;
+    if (disableTransition) {
+        iconRotatorProps = {
+            disableTransition,
+            ...propIconRotatorProps
+        };
+    }
+    let toggle;
+    if (menuitem) {
+        toggle = /*#__PURE__*/ _jsx(MenuItemButton, {
+            ...remaining,
+            id: id,
+            ref: fixedTo,
+            iconRotatorProps: iconRotatorProps,
+            children: buttonChildren
+        });
+    } else {
+        toggle = /*#__PURE__*/ _jsx(MenuButton, {
+            ...remaining,
+            id: id,
+            ref: fixedTo,
+            iconRotatorProps: iconRotatorProps,
+            children: buttonChildren
+        });
+    }
+    return /*#__PURE__*/ _jsxs(MenuVisibilityProvider, {
+        visible: visible,
+        setVisible: setVisible,
+        defaultFocusIndex: defaultFocusIndex,
+        children: [
+            /*#__PURE__*/ _jsx(MenuConfigurationProvider, {
+                horizontal: horizontal,
+                renderAsSheet: renderAsSheet,
+                sheetFooter: sheetFooter,
+                sheetHeader: sheetHeader,
+                sheetPosition: sheetPosition,
+                sheetVerticalSize: sheetVerticalSize,
+                children: toggle
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                "aria-labelledby": menuProps?.["aria-label"] ? undefined : id,
+                style: menuStyle,
+                className: menuClassName,
+                sheetProps: sheetProps,
+                sheetStyle: sheetStyle,
+                sheetClassName: sheetClassName,
+                temporary: temporary,
+                disablePortal: disablePortal,
+                disableElevation: disableElevation,
+                disableTransition: disableTransition,
+                anchor: anchor,
+                vwMargin: vwMargin,
+                vhMargin: vhMargin,
+                xMargin: xMargin,
+                yMargin: yMargin,
+                initialX: initialX,
+                initialY: initialY,
+                width: width,
+                transformOrigin: transformOrigin,
+                preventOverlap: preventOverlap,
+                disableSwapping: disableSwapping,
+                disableVHBounds: disableVHBounds,
+                preventScroll: preventScroll,
+                closeOnResize: closeOnResize,
+                closeOnScroll: closeOnScroll,
+                getFixedPositionOptions: getFixedPositionOptions,
+                horizontal: horizontal,
+                sheetHeader: sheetHeader,
+                sheetFooter: sheetFooter,
+                renderAsSheet: renderAsSheet,
+                sheetPosition: sheetPosition,
+                sheetVerticalSize: sheetVerticalSize,
+                ...menuProps,
+                fixedTo: fixedTo,
+                visible: visible,
+                getDefaultFocusedIndex: (options)=>{
+                    const defaultIndex = defaultFocusIndex.current;
+                    if (defaultIndex < 0) {
+                        return getLastFocusableIndex(options);
+                    }
+                    return defaultIndex;
+                },
+                onRequestClose: onRequestClose,
+                onEntered: (appearing)=>{
+                    menuProps?.onEntered?.(appearing);
+                    // this will be called before `getDefaultFocusedIndex`
+                    if (disableTransition) {
+                        return;
+                    }
+                    defaultFocusIndex.current = 0;
+                },
+                children: children
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/menu/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menu/DropdownMenu.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { getLastFocusableIndex } from \"../movement/utils.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  Menu,\n  type MenuConvenienceProps,\n  type MenuListConvenienceProps,\n} from \"./Menu.js\";\nimport { MenuButton, type MenuButtonProps } from \"./MenuButton.js\";\nimport {\n  MenuConfigurationProvider,\n  type MenuConfiguration,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuItemButton, type MenuItemButtonProps } from \"./MenuItemButton.js\";\nimport { type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuVisibilityProvider } from \"./MenuVisibilityProvider.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\n\nexport interface BaseDropdownMenuProps\n  extends MenuConfiguration,\n    MenuListConvenienceProps,\n    MenuSheetConvenienceProps,\n    MenuConvenienceProps {\n  buttonChildren: ReactNode;\n}\n\nexport interface DropdownMenuButtonProps\n  extends MenuButtonProps,\n    BaseDropdownMenuProps {}\n\nexport interface DropdownMenuItemButtonProps\n  extends MenuItemButtonProps,\n    BaseDropdownMenuProps {}\n\n/**\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use an `&` instead of `|` to allow autocompletion to\n * work better by default. It's up to the user to make sure they don't provide\n * incorrect props.\n */\nexport type DropdownMenuProps = DropdownMenuButtonProps &\n  DropdownMenuItemButtonProps;\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { DropdownMenu, MenuItem } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <DropdownMenu buttonChildren=\"Dropdown\">\n *       <MenuItem onClick={() => console.log('Clicked Item 1')}>\n *         Item 1\n *       </MenuItem>\n *       <MenuItem onClick={() => console.log('Clicked Item 2')}>\n *         Item 2\n *       </MenuItem>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @example\n * Nested Dropdown Menus\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { DropdownMenu, MenuItem } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <DropdownMenu buttonChildren=\"Dropdown\">\n *       <MenuItem onClick={() => console.log('Clicked Item 1')}>\n *         Item 1\n *       </MenuItem>\n *       <MenuItem onClick={() => console.log('Clicked Item 2')}>\n *         Item 2\n *       </MenuItem>\n *       <DropdownMenu buttonChildren=\"Nested Dropdown\">\n *         <MenuItem onClick={() => console.log('Clicked Item 1')}>\n *           Nested Item 1\n *         </MenuItem>\n *         <MenuItem onClick={() => console.log('Clicked Item 2')}>\n *           Nested Item 2\n *         </MenuItem>\n *       </DropdownMenu>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use the latest menu API.\n */\nexport function DropdownMenu(props: DropdownMenuProps): ReactElement {\n  const {\n    id: propId,\n    horizontal,\n    sheetHeader,\n    sheetFooter,\n    renderAsSheet,\n    sheetPosition,\n    sheetVerticalSize,\n    buttonChildren,\n    iconRotatorProps: propIconRotatorProps,\n    disableTransition: propDisableTransition,\n    anchor,\n    vwMargin,\n    vhMargin,\n    xMargin,\n    yMargin,\n    initialX,\n    initialY,\n    width,\n    transformOrigin,\n    preventOverlap,\n    disableSwapping,\n    disableVHBounds,\n    preventScroll,\n    closeOnResize,\n    closeOnScroll,\n    getFixedPositionOptions,\n    children,\n    temporary,\n    disablePortal,\n    disableElevation,\n    menuProps,\n    menuStyle,\n    menuClassName,\n    sheetProps,\n    sheetStyle,\n    sheetClassName,\n    ...remaining\n  } = props;\n\n  const fixedTo = useRef<HTMLElement | HTMLButtonElement>(null);\n  const defaultFocusIndex = useRef(0);\n  const [visible, setVisible] = useState(false);\n  const { menubar, menuitem, activeIdRef, animatedOnceRef } =\n    useMenuBarContext();\n  const id = useEnsuredId(propId, `menu${menuitem ? \"item\" : \"button\"}`);\n  const mode = useUserInteractionMode();\n  const mouse = mode === \"mouse\";\n  const keyboard = mode === \"keyboard\";\n  const disableTransition =\n    propDisableTransition ??\n    (animatedOnceRef.current &&\n      menubar &&\n      !!activeIdRef.current &&\n      (mouse || keyboard));\n\n  const onRequestClose = useCallback(() => {\n    setVisible(false);\n  }, []);\n\n  let iconRotatorProps = propIconRotatorProps;\n  if (disableTransition) {\n    iconRotatorProps = {\n      disableTransition,\n      ...propIconRotatorProps,\n    };\n  }\n\n  let toggle: ReactElement;\n  if (menuitem) {\n    toggle = (\n      <MenuItemButton\n        {...(remaining as DropdownMenuItemButtonProps)}\n        id={id}\n        ref={fixedTo as RefObject<HTMLLIElement>}\n        iconRotatorProps={iconRotatorProps}\n      >\n        {buttonChildren}\n      </MenuItemButton>\n    );\n  } else {\n    toggle = (\n      <MenuButton\n        {...(remaining as DropdownMenuButtonProps)}\n        id={id}\n        ref={fixedTo as RefObject<HTMLButtonElement>}\n        iconRotatorProps={iconRotatorProps}\n      >\n        {buttonChildren}\n      </MenuButton>\n    );\n  }\n\n  return (\n    <MenuVisibilityProvider\n      visible={visible}\n      setVisible={setVisible}\n      defaultFocusIndex={defaultFocusIndex}\n    >\n      <MenuConfigurationProvider\n        horizontal={horizontal}\n        renderAsSheet={renderAsSheet}\n        sheetFooter={sheetFooter}\n        sheetHeader={sheetHeader}\n        sheetPosition={sheetPosition}\n        sheetVerticalSize={sheetVerticalSize}\n      >\n        {toggle}\n      </MenuConfigurationProvider>\n      <Menu\n        aria-labelledby={(menuProps?.[\"aria-label\"] ? undefined : id) as string}\n        style={menuStyle}\n        className={menuClassName}\n        sheetProps={sheetProps}\n        sheetStyle={sheetStyle}\n        sheetClassName={sheetClassName}\n        temporary={temporary}\n        disablePortal={disablePortal}\n        disableElevation={disableElevation}\n        disableTransition={disableTransition}\n        anchor={anchor}\n        vwMargin={vwMargin}\n        vhMargin={vhMargin}\n        xMargin={xMargin}\n        yMargin={yMargin}\n        initialX={initialX}\n        initialY={initialY}\n        width={width}\n        transformOrigin={transformOrigin}\n        preventOverlap={preventOverlap}\n        disableSwapping={disableSwapping}\n        disableVHBounds={disableVHBounds}\n        preventScroll={preventScroll}\n        closeOnResize={closeOnResize}\n        closeOnScroll={closeOnScroll}\n        getFixedPositionOptions={getFixedPositionOptions}\n        horizontal={horizontal}\n        sheetHeader={sheetHeader}\n        sheetFooter={sheetFooter}\n        renderAsSheet={renderAsSheet}\n        sheetPosition={sheetPosition}\n        sheetVerticalSize={sheetVerticalSize}\n        {...menuProps}\n        fixedTo={fixedTo}\n        visible={visible}\n        getDefaultFocusedIndex={(options) => {\n          const defaultIndex = defaultFocusIndex.current;\n          if (defaultIndex < 0) {\n            return getLastFocusableIndex(options);\n          }\n\n          return defaultIndex;\n        }}\n        onRequestClose={onRequestClose}\n        onEntered={(appearing) => {\n          menuProps?.onEntered?.(appearing);\n          // this will be called before `getDefaultFocusedIndex`\n          if (disableTransition) {\n            return;\n          }\n\n          defaultFocusIndex.current = 0;\n        }}\n      >\n        {children}\n      </Menu>\n    </MenuVisibilityProvider>\n  );\n}\n"],"names":["useCallback","useRef","useState","useUserInteractionMode","getLastFocusableIndex","useEnsuredId","Menu","MenuButton","MenuConfigurationProvider","MenuItemButton","MenuVisibilityProvider","useMenuBarContext","DropdownMenu","props","id","propId","horizontal","sheetHeader","sheetFooter","renderAsSheet","sheetPosition","sheetVerticalSize","buttonChildren","iconRotatorProps","propIconRotatorProps","disableTransition","propDisableTransition","anchor","vwMargin","vhMargin","xMargin","yMargin","initialX","initialY","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","preventScroll","closeOnResize","closeOnScroll","getFixedPositionOptions","children","temporary","disablePortal","disableElevation","menuProps","menuStyle","menuClassName","sheetProps","sheetStyle","sheetClassName","remaining","fixedTo","defaultFocusIndex","visible","setVisible","menubar","menuitem","activeIdRef","animatedOnceRef","mode","mouse","keyboard","current","onRequestClose","toggle","ref","aria-labelledby","undefined","style","className","getDefaultFocusedIndex","options","defaultIndex","onEntered","appearing"],"mappings":"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"}

package/dist/menu/Menu.d.ts

@@ -0,0 +1,182 @@
+import { type CSSProperties, type HTMLAttributes } from "react";
+import { type ListElement, type ListProps } from "../list/List.js";
+import { type GetDefaultFocusedIndex } from "../movement/types.js";
+import { type CalculateFixedPositionOptions } from "../positioning/types.js";
+import { type FixedPositioningOptions } from "../positioning/useFixedPositioning.js";
+import { type ScaleTransitionHookOptions } from "../transition/useScaleTransition.js";
+import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
+import { type MenuConfiguration, type MenuOrientationProps } from "./MenuConfigurationProvider.js";
+import { type MenuSheetConvenienceProps } from "./MenuSheet.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-menu-background-color"?: string;
+        "--rmd-menu-color"?: string;
+        "--rmd-menu-min-width"?: string | number;
+        "--rmd-menu-spacing"?: string | number;
+    }
+}
+/** @remarks \@since 5.0.0 */
+export type MenuTransitionProps = Omit<ScaleTransitionHookOptions<HTMLDivElement>, "transitionIn" | "vertical" | "nodeRef">;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MenuConfigurationProps extends CalculateFixedPositionOptions {
+    /**
+     * @see {@link ScaleTransitionHookOptions.temporary}
+     * @defaultValue `true`
+     */
+    temporary?: boolean;
+    /**
+     * @defaultValue `false`
+     */
+    disablePortal?: boolean;
+    /**
+     * Boolean if the menu should not gain the elevation styles and should only be
+     * set to `true` when rendering within a `Sheet`.
+     *
+     * @defaultValue `false`
+     */
+    disableElevation?: boolean;
+    /**
+     * @defaultValue `false`
+     */
+    disableTransition?: boolean;
+    /**
+     * @see {@link FixedPositioningOptions.transformOrigin}
+     * @defaultValue `true`
+     */
+    transformOrigin?: boolean;
+    /**
+     * Boolean if the menu should close if the page is scrolled. The default
+     * behavior is to just update the position of the menu relative to the menu
+     * button until it can no longer be visible within the viewport.
+     *
+     * @defaultValue `false`
+     */
+    closeOnScroll?: boolean;
+    /**
+     * Boolean if the page should no longer be scrollable while the menu is
+     * visible.
+     *
+     * @defaultValue `false`
+     */
+    preventScroll?: boolean;
+    /**
+     * Boolean if the menu should close instead of repositioning itself if the
+     * browser window is resized.
+     *
+     * @defaultValue `false`
+     */
+    closeOnResize?: boolean;
+    /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */
+    getFixedPositionOptions?(): CalculateFixedPositionOptions;
+}
+/**
+ * @remarks
+ * \@since 5.1.0
+ * \@since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`
+ */
+export interface MenuListConvenienceProps {
+    /**
+     * An optional style to provide to the `List` component that surrounds the
+     * `MenuItem` within a `Menu`.
+     */
+    listStyle?: CSSProperties;
+    /**
+     * An optional className to provide to the `List` component that surrounds the
+     * `MenuItem` within a `Menu`.
+     */
+    listClassName?: string;
+    /**
+     * Any additional props to pass to the `List` component that surrounds the
+     * `Menu`'s `MenuItem`s.
+     */
+    listProps?: PropsWithRef<Omit<ListProps, "horizontal">, ListElement>;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MenuConvenienceProps extends MenuConfigurationProps {
+    /**
+     * This can be used to apply additional props to the `Menu` component.
+     *
+     * Note: You can override the `style` and `className` using
+     * {@link menuStyle} and {@link menuClassName} instead for convenience.
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu
+     *   {...props}
+     *   menuProps={{
+     *     style: {
+     *       // custom inline style
+     *     },
+     *     className: "come-class-name",
+     *     getFixedPositionOptions: () => ({
+     *       preventOverlap: true,
+     *     }),
+     *   }}
+     * />
+     * ```
+     */
+    menuProps?: PropsWithRef<Omit<MenuProps, "children" | "fixedTo" | "visible" | "onRequestClose" | "getDefaultFocusedIndex">, HTMLDivElement>;
+    /**
+     * Convenience prop to apply custom style to the `Menu` component.
+     */
+    menuStyle?: CSSProperties;
+    /**
+     * Convenience prop to apply custom class name to the `Menu` component.
+     */
+    menuClassName?: string;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export type MenuFixedPositioningOptions = Omit<FixedPositioningOptions<HTMLElement, HTMLDivElement>, "onScroll" | "onResize">;
+/**
+ * @remarks
+ * \@since 5.0.0
+ * \@since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.
+ */
+export interface MenuProps extends HTMLAttributes<HTMLDivElement>, MenuConfiguration, MenuConfigurationProps, MenuFixedPositioningOptions, MenuOrientationProps, MenuTransitionProps, MenuListConvenienceProps, MenuSheetConvenienceProps {
+    visible: boolean;
+    onRequestClose(): void;
+    /**
+     * @defaultValue `"menu-" + useId()`
+     */
+    id?: string;
+    /**
+     * This is used to set the default focus index when the menu is visible.
+     *
+     * @internal
+     */
+    getDefaultFocusedIndex?: GetDefaultFocusedIndex;
+    /**
+     * Custom style that should be applied to the menu only while not rendered
+     * within a sheet since the {@link style} would be applied to both versions.
+     */
+    menuStyle?: CSSProperties;
+    /**
+     * Custom class name that should be applied only while not rendered within a
+     * sheet.
+     */
+    menuClassName?: string;
+}
+/**
+ * **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 declare const Menu: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<MenuProps> & import("react").RefAttributes<HTMLDivElement>>;