@react-md/menu
Version:
Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines
44 lines (43 loc) • 1.72 kB
TypeScript
import React, { ReactNode } from "react";
import { AppBarActionClassNameProps } from "@react-md/app-bar";
import { ButtonProps } from "@react-md/button";
export interface MenuButtonProps extends ButtonProps, AppBarActionClassNameProps {
/**
* An id for the button. This is required so that the `Menu` can be positioned
* relative to this component.
*/
id: string;
/**
* Boolean if the menu is currently visible. This is requied for `a11y` as it
* will automatically set the `"aria-expanded"` prop to the correct value when
* needed.
*/
visible: boolean;
/**
* This should probably be left at the default of `"menu"`, but can also be a
* true string. This is required for menu a11y.
*/
"aria-haspopup"?: "menu" | "true" | true;
/**
* The icon to show after the children in the button when the `buttonType` is
* not set to `"icon"`.
*/
dropdownIcon?: ReactNode;
/**
* Boolean if the dropdown icon should be removed from the button. The icon
* will always be removed for icon buttons.
*/
disableDropdownIcon?: boolean;
/**
* Boolean if the menu button should be rendered as an `AppBarAction` button
* instead of a default button. This will also be considered `true` if the
* `first`, `last`, or `inheritColor` props are `true`.
*/
asAppBarAction?: boolean;
}
/**
* This component is an extension of the `Button` component that will:
* - apply the required a11y prosp for a menu button
* - dynamically add a dropdown icon after the button contents
*/
export declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>;