import React, { HTMLAttributes } from "react";
import { RenderConditionalPortalProps } from "@react-md/portal";
import { OverridableCSSTransitionProps } from "@react-md/transition";
import { FixedPositionOptions, LabelRequiredForA11y, PositionAnchor } from "@react-md/utils";
export declare type MenuPositionOptions = Omit;
export interface BaseMenuProps extends HTMLAttributes, OverridableCSSTransitionProps, RenderConditionalPortalProps {
/**
* The id for the menu. This is required for a11y.
*/
id: string;
/**
* The id of the control element that toggles the menu. This is required so
* that the menu can be positioned to this element and is normally a
* ``.
*/
controlId: string;
/**
* Boolean if the menu is currently visible.
*/
visible: boolean;
/**
* A function to call that should set the `visible` prop to false.
*/
onRequestClose: () => void;
/**
* The role for the menu. This should normally just be `"menu"`, but I might
* expand on it to implement the `"listbox"` or other menu like widgets.
*/
role?: "menu";
/**
* The label for the menu. Either this or the `"aria-labelledby"` prop is
* required for a11y.
*/
"aria-label"?: string;
/**
* The id of an element that acts as a label for the menu. Either this or the
* `"aria-label"` prop is required for a11y.
*/
"aria-labelledby"?: string;
/**
* The tab index for the menu. This should probably be left at `-1`.
*/
tabIndex?: number;
/**
* The positioning anchor for the menu relative to the button/control that
* owns the menu. This is used for the positioning logic as well as modifying
* the animationg slightly to originate from a coordinate. When this is
* omitted, it will default to:
*
* ```ts
* const verticalAnchor = {
* x: "inner-right",
* y: "top",
* };
*
* const horizontalAnchor = {
* x: "center",
* y: "center",
* };
* ```
*/
anchor?: PositionAnchor;
/**
* Optional options to pass down to the `useFixedPositionin` hook styles to
* change how the menu is fixed to the `MenuButton`.
*/
positionOptions?: MenuPositionOptions;
/**
* Boolean if the menu should be rendered horizontally instead of vertically.
*/
horizontal?: boolean;
/**
* The element that should be focused first when opened. This can either be
* the first or last focusable item in the menu, or a query selector string to
* find an element.
*/
defaultFocus?: "first" | "last" | string;
/**
* Boolean if the menu should not be closed when the page is scrolled.
* Instead, it'll automatically update its position within the viewport. You
* normally don't want to enable this prop as the menu won't close if the menu
* control element is no longer in the viewport.
*/
closeOnScroll?: boolean;
/**
* Boolean if the menu should no longer close when the page is resized.
* Instead, it'll automatically update its position within the viewport.
*/
closeOnResize?: boolean;
/**
* Boolean if the close on outside click logic should consider the control
* element within the menu and not call the `onRequestClose` function when it
* is been clicked. This should be enabled when creating a context menu but
* normally should remain `false` otherwise since the control element has it's
* own toggle logic that conflicts with this close click.
*/
disableControlClickOkay?: boolean;
}
export declare type MenuProps = LabelRequiredForA11y;
/**
* The `Menu` component is a fully controlled component that will animate in and
* out based on the `visible` prop as well as handle keyboard focus, closing
* when needed, etc.
*/
export declare const Menu: React.ForwardRefExoticComponent<(Pick & Required> & Partial> & React.RefAttributes) | (Pick & Required> & Partial> & React.RefAttributes)>;