@fluentui/react-northstar
Version:
A themable React component library.
124 lines (123 loc) • 6.7 kB
TypeScript
import { Accessibility, ToolbarBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ComponentEventHandler, ShorthandCollection, ShorthandValue, ObjectShorthandValue } from '../../types';
import { UIComponentProps, ContentComponentProps, ChildrenComponentProps, ColorComponentProps } from '../../utils';
import { ToolbarCustomItem, ToolbarCustomItemProps } from './ToolbarCustomItem';
import { ToolbarDivider, ToolbarDividerProps } from './ToolbarDivider';
import { ToolbarItem, ToolbarItemProps } from './ToolbarItem';
import { ToolbarItemWrapper } from './ToolbarItemWrapper';
import { ToolbarItemIcon } from './ToolbarItemIcon';
import { ToolbarMenu, ToolbarMenuProps } from './ToolbarMenu';
import { ToolbarMenuDivider } from './ToolbarMenuDivider';
import { ToolbarMenuItem } from './ToolbarMenuItem';
import { ToolbarMenuRadioGroup, ToolbarMenuRadioGroupProps } from './ToolbarMenuRadioGroup';
import { ToolbarMenuRadioGroupWrapper } from './ToolbarMenuRadioGroupWrapper';
import { ToolbarRadioGroup } from './ToolbarRadioGroup';
import { ToolbarMenuItemSubmenuIndicator } from './ToolbarMenuItemSubmenuIndicator';
import { ToolbarMenuItemIcon } from './ToolbarMenuItemIcon';
import { ToolbarMenuItemActiveIndicator } from './ToolbarMenuItemActiveIndicator';
import { PopperShorthandProps } from '../../utils/positioner';
import { BoxProps } from '../Box/Box';
export declare type ToolbarItemShorthandKinds = {
item: ToolbarItemProps;
divider: ToolbarDividerProps;
group: ToolbarMenuRadioGroupProps;
toggle: ToolbarItemProps;
custom: ToolbarCustomItemProps;
};
declare type ToolbarOverflowItemProps = Omit<ToolbarItemProps, 'menu'> & {
menu?: ObjectShorthandValue<ToolbarMenuProps & {
popper?: PopperShorthandProps;
}>;
};
export interface ToolbarProps extends UIComponentProps, ContentComponentProps, ChildrenComponentProps, ColorComponentProps {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<ToolbarBehaviorProps>;
/** Shorthand array of props for Toolbar. */
items?: ShorthandCollection<ToolbarItemProps, ToolbarItemShorthandKinds>;
/**
* Automatically move overflow items to overflow menu.
* For automatic overflow to work correctly, toolbar items including overflowMenuItem
* must NOT change their size! If you need to change item's size, rerender the Toolbar.
*/
overflow?: boolean;
/** Indicates if the overflow menu is open. Only valid if `overflow` is enabled and regular items do not fit. */
overflowOpen?: boolean;
/**
* Shorthand for the overflow item which is displayed when `overflow` is enabled and regular toolbar items do not fit.
* Do not set any menu on this item, Toolbar overrides it.
*/
overflowItem?: ShorthandValue<ToolbarOverflowItemProps>;
/**
* Renders a sentinel node when the overflow menu is open to stop the width of the toolbar changing
* Only needed if the container hosting the toolbar does not have a fixed/min width
*
* @default null
*/
overflowSentinel?: ShorthandValue<BoxProps>;
/**
* Called when overflow is recomputed (after render, update or window resize). Even if all items fit.
* @param itemsVisible - number of items visible
*/
onOverflow?: (itemsVisible: number) => void;
/**
* Event for request to change 'overflowOpen' value.
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onOverflowOpenChange?: ComponentEventHandler<ToolbarProps>;
/**
* Callback to get items to be rendered in overflow menu.
* Called when overflow menu is rendered opened.
* @param startIndex - Index of the first item to be displayed in the overflow menu (the first item which does not fit the toolbar).
*/
getOverflowItems?: (startIndex: number) => ToolbarItemProps['menu'];
}
export declare type ToolbarStylesProps = Pick<ToolbarProps, 'overflowOpen'>;
export declare const toolbarClassName = "ui-toolbar";
/**
* A Toolbar is a container for grouping a set of controls, often action controls (e.g. buttons) or input controls (e.g. checkboxes).
*
* @accessibility
* * Implements [ARIA Toolbar](https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar) design pattern.
* @accessibilityIssues
* [Issue 988424: VoiceOver narrates selected for button in toolbar](https://bugs.chromium.org/p/chromium/issues/detail?id=988424)
* [In toolbars that can toggle items in a menu, VoiceOver narrates "1" for menuitemcheckbox/radio when checked.](https://github.com/microsoft/fluentui/issues/14064)
* [NVDA could narrate "checked" stated for radiogroup in toolbar #12678](https://github.com/nvaccess/nvda/issues/12678)
* [JAWS narrates wrong instruction message for radiogroup in toolbar #556](https://github.com/FreedomScientific/VFO-standards-support/issues/556)
* [JAWS could narrate "checked" stated for radiogroup in toolbar #557](https://github.com/FreedomScientific/VFO-standards-support/issues/557)
*/
export declare const Toolbar: (<TExtendedElementType extends React.ElementType<any> = "div">(props: Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof ToolbarProps> & {
as?: TExtendedElementType;
} & ToolbarProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<ToolbarProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<ToolbarProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof ToolbarProps> & {
as?: "div";
} & ToolbarProps;
} & {
CustomItem: typeof ToolbarCustomItem;
Divider: typeof ToolbarDivider;
Item: typeof ToolbarItem;
ItemWrapper: typeof ToolbarItemWrapper;
ItemIcon: typeof ToolbarItemIcon;
Menu: typeof ToolbarMenu;
MenuDivider: typeof ToolbarMenuDivider;
MenuItem: typeof ToolbarMenuItem;
MenuItemIcon: typeof ToolbarMenuItemIcon;
MenuItemSubmenuIndicator: typeof ToolbarMenuItemSubmenuIndicator;
MenuItemActiveIndicator: typeof ToolbarMenuItemActiveIndicator;
MenuRadioGroup: typeof ToolbarMenuRadioGroup;
MenuRadioGroupWrapper: typeof ToolbarMenuRadioGroupWrapper;
RadioGroup: typeof ToolbarRadioGroup;
};
export {};