@fluentui/react-northstar
Version:
A themable React component library.
74 lines (73 loc) • 3.31 kB
TypeScript
import { Accessibility, ToolbarMenuItemBehaviorProps } from '@fluentui/accessibility';
import { ChildrenComponentProps, ContentComponentProps, UIComponentProps } from '../../utils';
import { ComponentEventHandler, ShorthandValue, ShorthandCollection } from '../../types';
import { PopperShorthandProps } from '../../utils/positioner';
import { BoxProps } from '../Box/Box';
import { PopupProps } from '../Popup/Popup';
import { ToolbarMenuProps, ToolbarMenuItemShorthandKinds } from './ToolbarMenu';
import { ToolbarMenuItemIconProps } from './ToolbarMenuItemIcon';
export interface ToolbarMenuItemProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps {
/**
* Accessibility behavior if overridden by the user.
*/
accessibility?: Accessibility<ToolbarMenuItemBehaviorProps>;
/** A toolbar item can be active. */
active?: boolean;
/** A slot for a selected indicator in the dropdown list. */
activeIndicator?: ShorthandValue<BoxProps>;
/** A toolbar item can show it is currently unable to be interacted with. */
disabled?: boolean;
/** A toolbar item can be disabled and focusable at the same time. */
disabledFocusable?: boolean;
/** Name or shorthand for Toolbar Item Icon */
icon?: ShorthandValue<ToolbarMenuItemIconProps>;
/** ToolbarMenuItem index inside ToolbarMenu. */
index?: number;
/** Shorthand for the submenu indicator. */
submenuIndicator?: ShorthandValue<BoxProps>;
/** Indicates whether the menu item is part of submenu. */
inSubmenu?: boolean;
/** Shorthand for the submenu. */
menu?: ShorthandValue<ToolbarMenuProps & {
popper?: PopperShorthandProps;
}> | ShorthandCollection<ToolbarMenuItemProps, ToolbarMenuItemShorthandKinds>;
/** Indicates if the menu inside the item is open. */
menuOpen?: boolean;
/** Default menu open */
defaultMenuOpen?: boolean;
/**
* Called on click.
*
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onClick?: ComponentEventHandler<ToolbarMenuItemProps>;
/**
* Called when the menu inside the item opens or closes.
* @param event - React's original SyntheticEvent.
* @param data - All props, with `menuOpen` reflecting the new state.
*/
onMenuOpenChange?: ComponentEventHandler<ToolbarMenuItemProps>;
/**
* Attaches a `Popup` component to the ToolbarMenuItem.
* Accepts all props as a `Popup`, except `trigger` and `children`.
* Traps focus by default.
* @see PopupProps
*/
popup?: Omit<PopupProps, 'trigger' | 'children'> | string;
/** Shorthand for the wrapper component. */
wrapper?: ShorthandValue<BoxProps>;
}
export declare type ToolbarMenuItemStylesProps = Pick<ToolbarMenuItemProps, 'disabled' | 'disabledFocusable'> & {
hasContent: boolean;
};
export interface ToolbarMenuItemSlotClassNames {
wrapper: string;
submenu: string;
}
export declare const toolbarMenuItemClassName = "ui-toolbar__menuitem";
export declare const toolbarMenuItemSlotClassNames: ToolbarMenuItemSlotClassNames;
/**
* A ToolbarMenuItem renders ToolbarMenu item as button.
*/
export declare const ToolbarMenuItem: import("@fluentui/react-bindings").ComponentWithAs<"button", ToolbarMenuItemProps>;