@mantine/core/lib/components/Menu/Menu.d.ts

React components library focused on usability, accessibility and developer experience

import { Factory, StylesApiProps } from '../../core';
import { __PopoverProps, PopoverStylesNames } from '../Popover';
import { type MenuContextValue } from './Menu.context';
import { MenuCheckboxGroup, type MenuCheckboxGroupProps } from './MenuCheckboxGroup/MenuCheckboxGroup';
import { MenuCheckboxItem, type MenuCheckboxItemProps } from './MenuCheckboxItem/MenuCheckboxItem';
import { MenuContextMenu, type MenuContextMenuProps } from './MenuContextMenu/MenuContextMenu';
import { MenuDivider, type MenuDividerProps } from './MenuDivider/MenuDivider';
import { MenuDropdown, type MenuDropdownProps } from './MenuDropdown/MenuDropdown';
import { MenuItem, type MenuItemProps } from './MenuItem/MenuItem';
import { MenuLabel, type MenuLabelProps } from './MenuLabel/MenuLabel';
import { MenuRadioGroup, type MenuRadioGroupProps } from './MenuRadioGroup/MenuRadioGroup';
import { MenuRadioItem, type MenuRadioItemProps } from './MenuRadioItem/MenuRadioItem';
import { MenuSearch, type MenuSearchProps } from './MenuSearch/MenuSearch';
import { MenuSub, type MenuSubProps } from './MenuSub/MenuSub';
import { MenuTarget, type MenuTargetProps } from './MenuTarget/MenuTarget';
import type { MenuSubDropdownProps } from './MenuSubDropdown/MenuSubDropdown';
import type { MenuSubItemProps } from './MenuSubItem/MenuSubItem';
import type { MenuSubTargetProps } from './MenuSubTarget/MenuSubTarget';
export type MenuStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator' | 'label' | 'divider' | 'chevron' | 'search' | PopoverStylesNames;
export type MenuFactory = Factory<{
    props: MenuProps;
    stylesNames: MenuStylesNames;
    staticComponents: {
        Item: typeof MenuItem;
        Label: typeof MenuLabel;
        Dropdown: typeof MenuDropdown;
        Target: typeof MenuTarget;
        Divider: typeof MenuDivider;
        Search: typeof MenuSearch;
        Sub: typeof MenuSub;
        CheckboxItem: typeof MenuCheckboxItem;
        CheckboxGroup: typeof MenuCheckboxGroup;
        RadioItem: typeof MenuRadioItem;
        RadioGroup: typeof MenuRadioGroup;
        ContextMenu: typeof MenuContextMenu;
    };
}>;
export interface MenuProps extends __PopoverProps, StylesApiProps<MenuFactory> {
    variant?: string;
    /** Menu children */
    children?: React.ReactNode;
    /** Controlled menu opened state */
    opened?: boolean;
    /** Uncontrolled menu initial opened state */
    defaultOpened?: boolean;
    /** If set, focus is trapped within the menu dropdown when it is opened */
    trapFocus?: boolean;
    /** Called when menu opened state changes */
    onChange?: (opened: boolean) => void;
    /** Called when Menu is opened */
    onOpen?: () => void;
    /** Called when Menu is closed */
    onClose?: () => void;
    /** If set, the Menu is closed when one of the items is clicked. Can be overridden per item with `closeMenuOnClick` prop */
    closeOnItemClick?: boolean;
    /** If set, arrow key presses wrap around from last item to first and vice versa */
    loop?: boolean;
    /** If set, the dropdown is closed when the `Escape` key is pressed @default true */
    closeOnEscape?: boolean;
    /** Event trigger to open menu. Note: 'hover' is not keyboard accessible; prefer 'click-hover' for accessible hover menus */
    trigger?: 'click' | 'hover' | 'click-hover';
    /** Open delay in ms, applicable only to `trigger="hover"` variant */
    openDelay?: number;
    /** Close delay in ms, applicable only to `trigger="hover"` variant */
    closeDelay?: number;
    /** If set, the dropdown is closed on outside clicks */
    closeOnClickOutside?: boolean;
    /** Events that trigger outside click detection. Includes mousedown for desktop clicks, touchstart for mobile, and keydown for Escape key handling @default ['mousedown', 'touchstart', 'keydown'] */
    clickOutsideEvents?: string[];
    /** Id base to create accessibility connections */
    id?: string;
    /** Set the `tabindex` on all menu items. Use `0` to allow Tab key navigation through menu items (required for navigation menus following WAI-ARIA disclosure pattern). @default -1 */
    menuItemTabIndex?: -1 | 0;
    /** Adds a hidden focusable element at the start of the dropdown to prevent unexpected focus jumps when opening with keyboard. Set to false if you need custom focus management. @default true */
    withInitialFocusPlaceholder?: boolean;
    /** Determines whether focus should be automatically returned to control when dropdown closes @default `true` */
    returnFocus?: boolean;
    /** Controls how indicator slot space is reserved on menu items for label alignment. `'all'` reserves space on every `Menu.Item`, `'with-indicators'` reserves space only on `Menu.CheckboxItem` and `Menu.RadioItem`, `'none'` reserves space only on items that currently display an indicator. @default 'with-indicators' */
    alignItemsLabels?: 'all' | 'with-indicators' | 'none';
    /** Custom icon rendered as the indicator of checked `Menu.CheckboxItem` and selected `Menu.RadioItem`. Can be overridden per item with the `checkIcon` prop. */
    checkIcon?: React.ReactNode;
}
export declare const Menu: import("../..").MantineComponent<{
    props: MenuProps;
    stylesNames: MenuStylesNames;
    staticComponents: {
        Item: typeof MenuItem;
        Label: typeof MenuLabel;
        Dropdown: typeof MenuDropdown;
        Target: typeof MenuTarget;
        Divider: typeof MenuDivider;
        Search: typeof MenuSearch;
        Sub: typeof MenuSub;
        CheckboxItem: typeof MenuCheckboxItem;
        CheckboxGroup: typeof MenuCheckboxGroup;
        RadioItem: typeof MenuRadioItem;
        RadioGroup: typeof MenuRadioGroup;
        ContextMenu: typeof MenuContextMenu;
    };
}>;
export declare namespace Menu {
    type Props = MenuProps;
    type StylesNames = MenuStylesNames;
    type Factory = MenuFactory;
    type ContextValue = MenuContextValue;
    namespace Item {
        type Props = MenuItemProps;
    }
    namespace Label {
        type Props = MenuLabelProps;
    }
    namespace Divider {
        type Props = MenuDividerProps;
    }
    namespace Dropdown {
        type Props = MenuDropdownProps;
    }
    namespace Target {
        type Props = MenuTargetProps;
    }
    namespace Search {
        type Props = MenuSearchProps;
    }
    namespace Sub {
        type Props = MenuSubProps;
    }
    namespace CheckboxItem {
        type Props = MenuCheckboxItemProps;
    }
    namespace RadioItem {
        type Props = MenuRadioItemProps;
    }
    namespace RadioGroup {
        type Props = MenuRadioGroupProps;
    }
    namespace CheckboxGroup {
        type Props = MenuCheckboxGroupProps;
    }
    namespace ContextMenu {
        type Props = MenuContextMenuProps;
    }
    namespace SubDropdown {
        type Props = MenuSubDropdownProps;
    }
    namespace SubItem {
        type Props = MenuSubItemProps;
    }
    namespace SubTarget {
        type Props = MenuSubTargetProps;
    }
}