@react-md/menu/lib/DropdownMenu.d.ts

Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines

import type { ReactElement } from "react";
import type { DropdownMenuProps } from "./types";
/**
 * This component is a preset for creating dropdown menus using the
 * {@link useMenu} hook which provides the visibility behavior and other
 * functionality for menus. This will render as a `<Button>` by default but can
 * be rendered as a `<MenuItem>` by existing as a child of another
 * `DropdownMenu`.
 *
 * Most of the top-level props will be passed directly to the `Button` or
 * `MenuItem` components with the exception for the `children`. The children for
 * the `Button` or `MenuItem` can be set with the `buttonChildren` prop since
 * the main `children` should be the `Menu`'s children.
 *
 * @example
 * Simple Example
 * ```tsx
 * import type { ReactElement } from "react";
 * import { DropdownMenu, MenuItem } from "@react-md/menu";
 *
 * function Example() {
 *   return (
 *     <DropdownMenu id="example-dropdown-menu" 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/menu";
 *
 * function Example() {
 *   return (
 *     <DropdownMenu id="example-dropdown-menu" buttonChildren="Dropdown">
 *       <MenuItem onClick={() => console.log('Clicked Item 1')}>
 *         Item 1
 *       </MenuItem>
 *       <MenuItem onClick={() => console.log('Clicked Item 2')}>
 *         Item 2
 *       </MenuItem>
 *       <DropdownMenu
 *         id="nested-dropdown-menu"
 *         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
 */
export declare function DropdownMenu({ id, onClick, onKeyDown, onMouseEnter, onMouseLeave, menuLabel, menuProps: propMenuProps, menuStyle, menuClassName, sheetProps, sheetMenuProps, sheetStyle, sheetClassName, sheetHeader: propSheetHeader, sheetFooter: propSheetFooter, renderAsSheet: propRenderAsSheet, sheetPosition: propSheetPosition, sheetVerticalSize: propSheetVerticalSize, listStyle, listClassName, listProps, appear, enter, exit, timeout: propTimeout, classNames, anchor, fixedPositionOptions, getFixedPositionOptions, temporary, portal, portalInto, portalIntoId, onEnter, onEntering, onEntered, onExit, onExiting, onExited, horizontal: propHorizontal, children, preventScroll, closeOnResize, closeOnScroll, iconRotatorProps: propIconRotatorProps, disableFocusOnMount: propDisableFocusOnMount, disableFocusOnUnmount: propDisableFocusOnUnmount, ...props }: DropdownMenuProps): ReactElement;