@itwin/itwinui-react/esm/core/DropdownMenu/DropdownMenu.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
import { Menu } from '../Menu/Menu.js';
import { usePopover } from '../Popover/Popover.js';
export type DropdownMenuProps = {
    /**
     * List of menu items. Recommended to use MenuItem component.
     * You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems.
     */
    menuItems: ((close: () => void) => React.JSX.Element[]) | React.JSX.Element[] | React.JSX.Element;
    /**
     * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'.
     * @default 'menu'
     */
    role?: string;
    /**
     * Child element to wrap dropdown with.
     */
    children: React.JSX.Element;
    /**
     * Middleware options.
     *
     * By default, `hide` is enabled. If the menu gets hidden even when it shouldn't (e.g. some custom styles interfering
     * with the trigger's hide detection) consider disabling the `hide` middleware.
     *
     * @see https://floating-ui.com/docs/middleware
     */
    middleware?: {
        hide?: boolean;
    };
    /**
     * If `true`, closes the `DropdownMenu` when any descendant `MenuItem` is clicked.
     * @default false
     */
    closeOnItemClick?: boolean;
} & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & Pick<React.ComponentProps<typeof Menu>, 'positionReference'> & Pick<PortalProps, 'portal'>;
/**
 * Dropdown menu component.
 * Built on top of the {@link Popover} component.
 * @example
 * const menuItems = (close: () => void) => [
 *   <MenuItem key={1} onClick={onClick(1, close)}>
 *     Item #1
 *   </MenuItem>,
 *   <MenuItem key={2} onClick={onClick(2, close)}>
 *     Item #2
 *   </MenuItem>,
 *   <MenuItem key={3} onClick={onClick(3, close)}>
 *     Item #3
 *   </MenuItem>,
 * ];
 * <DropdownMenu menuItems={menuItems}>
 *   <Button>Menu</Button>
 * </DropdownMenu>
 */
export declare const DropdownMenu: PolymorphicForwardRefComponent<"div", DropdownMenuProps>;
export declare const DropdownMenuContext: React.Context<{
    close: () => void;
} | undefined>;
/**
 * @private
 * Wraps around a `DropdownMenu`.
 *
 * If `true`, closes the `DropdownMenu` when any descendant `MenuItem` is clicked.
 */
export declare const DropdownMenuCloseOnClickContext: React.Context<boolean | undefined>;