import { MenuItemProps as ReachMenuItemProps } from '@reach/menu-button';
import { ReactNode } from 'react';
import { BoxProps } from '../../Box';
import { MenuProps } from '../components/Menu';
import { MenuItemRenderProps, MenuItemProps } from '../components/MenuItem';
export declare type DropdownMenuOption = Pick<MenuItemProps, 'hasDividerBottom' | 'hasDividerTop' | 'leftAdornment' | 'rightAdornment' | 'shortcut' | 'tx'> & MenuItemRenderProps & Omit<ReachMenuItemProps, 'children'> & {
    id?: string;
};
export interface DropdownMenuProps extends Pick<BoxProps, 'tx'>, Pick<MenuProps, 'animation' | 'size'> {
    /**
     * Children for the dropdown menu that is rendered below the options.
     */
    childrenBottom?: ReactNode;
    /**
     * Children for the dropdown menu that is rendered below the options.
     */
    childrenTop?: ReactNode;
    /**
     * The test id for the dropdown menu list.
     */
    ['data-testid']?: string;
    /**
     * The `hasOverlay` props determines whether a transparent `div` is added to the DOM
     * to prevent users from hovering / clicking with other elements on the page while
     * the menu is opened.
     */
    hasOverlay?: boolean;
    /**
     * The `offset` allows you to control the distance between the menu and the trigger.
     */
    offset?: number;
    options: DropdownMenuOption[];
    /**
     * The `onChange` prop returns the new state of the dropdown menu.
     */
    onChange?: (isExpanded: boolean) => void;
    /**
     * The trigger that will open the menu.
     */
    trigger: ReactNode;
    /**
     * The `isPortal` prop allows you to control whether the menu uses a portal.
     */
    isPortal?: boolean;
}
export declare const DropdownMenu: ({ animation, childrenBottom, childrenTop, hasOverlay, offset, options, onChange, size, ["data-testid"]: testId, trigger, isPortal, tx, }: DropdownMenuProps) => JSX.Element;