@fluentui/react-northstar
Version:
A themable React component library.
72 lines (71 loc) • 3.27 kB
TypeScript
import { Accessibility, ToolbarItemBehaviorProps } from '@fluentui/accessibility';
import { UIComponentProps, ChildrenComponentProps, ContentComponentProps } from '../../utils';
import { ComponentEventHandler, ShorthandValue, ShorthandCollection } from '../../types';
import { PopperShorthandProps } from '../../utils/positioner';
import { ToolbarMenuProps } from './ToolbarMenu';
import { PopupProps } from '../Popup/Popup';
import { ToolbarMenuItemProps } from '../Toolbar/ToolbarMenuItem';
import { ToolbarItemShorthandKinds } from './Toolbar';
import { ToolbarItemWrapperProps } from './ToolbarItemWrapper';
import { ToolbarItemIconProps } from './ToolbarItemIcon';
export interface ToolbarItemProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<ToolbarItemBehaviorProps>;
/** A toolbar item can be active. */
active?: boolean;
/** 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<ToolbarItemIconProps>;
/**
* Shorthand for the submenu.
* If submenu is specified, the item is wrapped to group the item and the menu elements together.
*/
menu?: ShorthandValue<ToolbarMenuProps & {
popper?: PopperShorthandProps;
}> | ShorthandCollection<ToolbarMenuItemProps, ToolbarItemShorthandKinds>;
/** Indicates if the menu inside the item is open. */
menuOpen?: boolean;
/**
* Event for request to change 'menuOpen' value.
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onMenuOpenChange?: ComponentEventHandler<ToolbarItemProps>;
/**
* Called on click.
*
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onClick?: ComponentEventHandler<ToolbarItemProps>;
/**
* Called after user's focus.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onFocus?: ComponentEventHandler<ToolbarItemProps>;
/**
* Called after item blur.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onBlur?: ComponentEventHandler<ToolbarItemProps>;
/**
* Attaches a `Popup` component to the ToolbarItem.
* 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. The item is wrapped only if it contains a menu! */
wrapper?: ShorthandValue<ToolbarItemWrapperProps>;
}
export declare type ToolbarItemStylesProps = Required<Pick<ToolbarItemProps, 'active' | 'disabled' | 'disabledFocusable'>>;
export declare const toolbarItemClassName = "ui-toolbar__item";
/**
* A ToolbarItem renders Toolbar item as a button with an icon.
*/
export declare const ToolbarItem: import("@fluentui/react-bindings").ComponentWithAs<"button", ToolbarItemProps>;