@fluentui/react-northstar
Version:
A themable React component library.
107 lines (106 loc) • 5.62 kB
TypeScript
import { Accessibility, MenuBehaviorProps } from '@fluentui/accessibility';
import { ShorthandConfig } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ShorthandCollection, ShorthandValue, ComponentEventHandler, FluentComponentStaticProps } from '../../types';
import { UIComponentProps, ChildrenComponentProps, ShorthandFactory } from '../../utils';
import { MenuItem, MenuItemProps } from './MenuItem';
import { MenuDivider, MenuDividerProps } from './MenuDivider';
import { MenuItemIcon } from './MenuItemIcon';
import { MenuItemContent } from './MenuItemContent';
import { MenuItemIndicator, MenuItemIndicatorProps } from './MenuItemIndicator';
import { MenuItemWrapper } from './MenuItemWrapper';
export declare type MenuShorthandKinds = {
divider: MenuDividerProps;
item: MenuItemProps;
};
export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
/**
* Accessibility behavior if overridden by the user.
* @available menuAsToolbarBehavior, tabListBehavior, tabBehavior
*/
accessibility?: Accessibility<MenuBehaviorProps>;
/** Index of the currently active item. */
activeIndex?: number | string;
/** Initial activeIndex value. */
defaultActiveIndex?: number | string;
/** A vertical menu may take the size of its container. */
fluid?: boolean;
/** A menu may have just icons. */
iconOnly?: boolean;
/** Shorthand array of props for Menu. */
items?: ShorthandCollection<MenuItemProps, MenuShorthandKinds>;
/**
* Called when a panel title is clicked.
*
* @param event - React's original SyntheticEvent.
* @param data - All item props.
*/
onItemClick?: ComponentEventHandler<MenuItemProps>;
/**
* Called when the active index of the Menu changes.
* @param event - React's original SyntheticEvent.
* @param data - All props, with `activeIndex` reflecting the new state.
*/
onActiveIndexChange?: ComponentEventHandler<MenuProps>;
/** A menu can adjust its appearance to de-emphasize its contents. */
pills?: boolean;
/**
* A menu can point to show its relationship to nearby content.
* For vertical menu, it can point to the start of the item or to the end.
*/
pointing?: boolean | 'start' | 'end';
/** The menu can have primary type. */
primary?: boolean;
/** The menu can have secondary type. */
secondary?: boolean;
/** Menu items can by highlighted using underline. */
underlined?: boolean;
/** A vertical menu displays elements vertically. */
vertical?: boolean;
/** Indicates whether the menu is submenu. */
submenu?: boolean;
/** Shorthand for the submenu indicator. */
indicator?: ShorthandValue<MenuItemIndicatorProps>;
}
export declare const menuClassName = "ui-menu";
export declare type MenuStylesProps = Pick<MenuProps, 'iconOnly' | 'fluid' | 'pointing' | 'pills' | 'primary' | 'underlined' | 'vertical' | 'submenu' | 'secondary'>;
/**
* A Menu is a component that offers a grouped list of choices to the user.
*
* @accessibility
* Implements ARIA [Menu](https://www.w3.org/TR/wai-aria-practices-1.1/#menu), [Toolbar](https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar) or [Tabs](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel) design pattern, depending on the behavior used.
* @accessibilityIssues
* [JAWS - navigation instruction for menubar](https://github.com/FreedomScientific/VFO-standards-support/issues/203)
* [JAWS - navigation instruction for menu with aria-orientation="horizontal"](https://github.com/FreedomScientific/VFO-standards-support/issues/204)
* [JAWS [VC] doesn't narrate menu item, when it is open from menu button](https://github.com/FreedomScientific/VFO-standards-support/issues/324)
* [JAWS [app mode] focus moves to second menu item, when it is open from menu button](https://github.com/FreedomScientific/VFO-standards-support/issues/325)
* [Enter into a tablist JAWS narrates: To switch pages, press Control+PageDown](https://github.com/FreedomScientific/VFO-standards-support/issues/337)
* 51114083 VoiceOver+Web narrate wrong position in menu / total count of menu items, when pseudo element ::after or ::before is used
*/
export declare const Menu: (<TExtendedElementType extends React.ElementType<any> = "ul">(props: React.RefAttributes<HTMLUListElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof MenuProps> & {
as?: TExtendedElementType;
} & MenuProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<MenuProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<MenuProps & {
as: "ul";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLUListElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
ref?: React.Ref<HTMLUListElement>;
}, "as" | keyof MenuProps> & {
as?: "ul";
} & MenuProps;
} & FluentComponentStaticProps<MenuProps> & {
create: ShorthandFactory<MenuProps>;
shorthandConfig: ShorthandConfig<MenuProps>;
Item: typeof MenuItem;
ItemContent: typeof MenuItemContent;
ItemIcon: typeof MenuItemIcon;
ItemIndicator: typeof MenuItemIndicator;
ItemWrapper: typeof MenuItemWrapper;
Divider: typeof MenuDivider;
};