import { type ReactElement, type ReactNode } from "react";
import { type UseStateSetter } from "../types.js";
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 6.0.0
 */
export interface DropdownMenuStateProps {
    visible: boolean;
    setVisible: UseStateSetter<boolean>;
}
/**
 * @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 & (DropdownMenuStateProps | {
    visible?: never;
    setVisible?: never;
});
/**
 * **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;
