/** * Welcome to @reach/menu-button! * * An accessible dropdown menu for the common dropdown menu button design * pattern. * * @see Docs https://reacttraining.com/reach-ui/menu-button * @see Source https://github.com/reach/reach-ui/tree/master/packages/menu-button * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#menubutton * * TODO: Fix flash when opening a menu button on a screen with another open menu */ import React from 'react'; import { Position } from '@reach/popover'; /** * Menu * * The wrapper component for the other components. No DOM element is rendered. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menu */ export declare const Menu: React.FC; /** * @see Docs https://reacttraining.com/reach-ui/menu-button#menu-props */ export interface MenuProps { /** * Requires two children: a `` and a ``. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menu-children */ children: React.ReactNode | ((props: MenuContextValue & { isOpen: boolean; dispatch: any; }) => React.ReactNode); id?: string; } /** * MenuButton * * Wraps a DOM `button` that toggles the opening and closing of the dropdown * menu. Must be rendered inside of a ``. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menubutton */ export declare const MenuButton: import("@reach/utils").ComponentWithAs<"button", MenuButtonProps>; /** * @see Docs https://reacttraining.com/reach-ui/menu-button#menubutton-props */ export declare type MenuButtonProps = React.ButtonHTMLAttributes & { /** * Accepts any renderable content. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menubutton-children */ children: React.ReactNode; }; export declare type MenuItemImplProps = { /** * You can put any type of content inside of a ``. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem-children */ children: React.ReactNode; /** * Callback that fires when a `MenuItem` is selected. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem-onselect */ onSelect(): void | { CLOSE_MENU: boolean; }; index?: number; isLink?: boolean; valueText?: string; }; /** * MenuItem * * Handles menu selection. Must be a direct child of a ``. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem */ export declare const MenuItem: import("@reach/utils").ComponentWithAs<"div", Pick>; /** * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem-props */ export declare type MenuItemProps = Omit; /** * MenuItems * * A low-level wrapper for menu items. Compose it with `MenuPopover` for more * control over the nested components and their rendered DOM nodes, or if you * need to nest arbitrary components between the outer wrapper and your list. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitems */ export declare const MenuItems: import("@reach/utils").ComponentWithAs<"div", MenuItemsProps>; /** * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitems-props */ export declare type MenuItemsProps = { /** * Can contain only `MenuItem` or a `MenuLink`. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitems-children */ children: React.ReactNode; } & React.HTMLAttributes; /** * MenuLink * * Handles linking to a different page in the menu. By default it renders ``, * but also accepts any other kind of Link as long as the `Link` uses the * `React.forwardRef` API. * * Must be a direct child of a ``. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menulink */ export declare const MenuLink: import("@reach/utils").ComponentWithAs<"a", Pick & { onSelect?(): void; } & { component?: any; }>; /** * @see Docs https://reacttraining.com/reach-ui/menu-button#menulink-props */ export declare type MenuLinkProps = Omit & { onSelect?(): void; }; /** * MenuList * * Wraps a DOM element that renders the menu items. Must be rendered inside of * a ``. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist */ export declare const MenuList: React.ForwardRefExoticComponent & { /** * Whether or not the popover should be rendered inside a portal. Defaults to * `true`. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-portal */ portal?: boolean; /** * Can contain only `MenuItem` or a `MenuLink`. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-children */ children: React.ReactNode; } & React.RefAttributes>; /** * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-props */ export declare type MenuListProps = React.HTMLAttributes & { /** * Whether or not the popover should be rendered inside a portal. Defaults to * `true`. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-portal */ portal?: boolean; /** * Can contain only `MenuItem` or a `MenuLink`. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-children */ children: React.ReactNode; }; /** * MenuPopover * * A low-level wrapper for the popover that appears when a menu button is open. * You can compose it with `MenuItems` for more control over the nested * components and their rendered DOM nodes, or if you need to nest arbitrary * components between the outer wrapper and your list. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover */ export declare const MenuPopover: React.ForwardRefExoticComponent & { /** * Must contain a `MenuItems` * * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-children */ children: React.ReactNode; /** * Whether or not the popover should be rendered inside a portal. Defaults to * `true`. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-portal */ portal?: boolean; position?: Position; } & React.RefAttributes>; /** * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-props */ export declare type MenuPopoverProps = React.HTMLAttributes & { /** * Must contain a `MenuItems` * * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-children */ children: React.ReactNode; /** * Whether or not the popover should be rendered inside a portal. Defaults to * `true`. * * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-portal */ portal?: boolean; position?: Position; }; /** * A hook that exposes data for a given `Menu` component to its descendants. * * @see Docs https://reacttraining.com/reach-ui/menu-button#usemenubuttoncontext */ export declare function useMenuButtonContext(): MenuContextValue; export declare type MenuContextValue = { isExpanded: boolean; };