@wordpress/components
Version:
UI components for WordPress.
121 lines • 7.03 kB
TypeScript
import type { ContextProps, Props } from './types';
/**
* Menu is a collection of React components that combine to render
* ARIA-compliant [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) and
* [menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) patterns.
*
* `Menu` itself is a wrapper component and context provider.
* It is responsible for managing the state of the menu and its items, and for
* rendering the `Menu.TriggerButton` (or the `Menu.SubmenuTriggerItem`)
* component, and the `Menu.Popover` component.
*/
export declare const Menu: import("../context").WordPressComponent<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | null, Props, boolean> & {
Context: import("react").Context<ContextProps | undefined> & {
displayName: string;
};
/**
* Renders a menu item inside the `Menu.Popover` or `Menu.Group` components.
*
* It can optionally contain one instance of the `Menu.ItemLabel` component
* and one instance of the `Menu.ItemHelpText` component.
*/
Item: import("react").ForwardRefExoticComponent<import("./types").ItemProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").ItemProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a radio menu item inside the `Menu.Popover` or `Menu.Group`
* components.
*
* It can optionally contain one instance of the `Menu.ItemLabel` component
* and one instance of the `Menu.ItemHelpText` component.
*/
RadioItem: import("react").ForwardRefExoticComponent<import("./types").RadioItemProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").RadioItemProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group`
* components.
*
* It can optionally contain one instance of the `Menu.ItemLabel` component
* and one instance of the `Menu.ItemHelpText` component.
*/
CheckboxItem: import("react").ForwardRefExoticComponent<import("./types").CheckboxItemProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CheckboxItemProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a group for menu items.
*
* It should contain one instance of `Menu.GroupLabel` and one or more
* instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`.
*/
Group: import("react").ForwardRefExoticComponent<import("./types").GroupProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "as"> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a label in a menu group.
*
* This component should be wrapped with `Menu.Group` so the
* `aria-labelledby` is correctly set on the group element.
*/
GroupLabel: import("react").ForwardRefExoticComponent<import("./types").GroupLabelProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "as"> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a divider between menu items or menu groups.
*/
Separator: import("react").ForwardRefExoticComponent<import("./types").SeparatorProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref">, "children" | "as"> & import("react").RefAttributes<HTMLHRElement>> & {
displayName: string;
};
/**
* Renders a menu item's label text. It should be wrapped with `Menu.Item`,
* `Menu.RadioItem`, or `Menu.CheckboxItem`.
*/
ItemLabel: import("react").ForwardRefExoticComponent<{
children: React.ReactNode;
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children" | "as"> & {
as?: keyof JSX.IntrinsicElements | undefined;
} & import("react").RefAttributes<HTMLSpanElement>> & {
displayName: string;
};
/**
* Renders a menu item's help text. It should be wrapped with `Menu.Item`,
* `Menu.RadioItem`, or `Menu.CheckboxItem`.
*/
ItemHelpText: import("react").ForwardRefExoticComponent<{
children: React.ReactNode;
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children" | "as"> & {
as?: keyof JSX.IntrinsicElements | undefined;
} & import("react").RefAttributes<HTMLSpanElement>> & {
displayName: string;
};
/**
* Renders a dropdown menu element that's controlled by a sibling
* `Menu.TriggerButton` component. It renders a popover and automatically
* focuses on items when the menu is shown.
*
* The only valid children of `Menu.Popover` are `Menu.Item`,
* `Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`,
* and `Menu` (for nested dropdown menus).
*/
Popover: import("react").ForwardRefExoticComponent<import("./types").PopoverProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").PopoverProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a menu button that toggles the visibility of a sibling
* `Menu.Popover` component when clicked or when using arrow keys.
*/
TriggerButton: import("react").ForwardRefExoticComponent<import("./types").TriggerButtonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "as" | keyof import("./types").TriggerButtonProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a menu item that toggles the visibility of a sibling
* `Menu.Popover` component when clicked or when using arrow keys.
*
* This component is used to create a nested dropdown menu.
*/
SubmenuTriggerItem: import("react").ForwardRefExoticComponent<import("./types").ItemProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").ItemProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
};
export default Menu;
//# sourceMappingURL=index.d.ts.map