@fluentui/react-northstar
Version:
A themable React component library.
88 lines (87 loc) • 3.86 kB
TypeScript
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { Accessibility, MenuButtonBehaviorProps } from '@fluentui/accessibility';
import { StyledComponentProps } from '../../utils';
import { ShorthandValue, ComponentEventHandler, ShorthandCollection, FluentComponentStaticProps } from '../../types';
import { PopupProps, PopupEvents, PopupEventsArray } from '../Popup/Popup';
import { MenuProps } from '../Menu/Menu';
import { MenuItemProps } from '../Menu/MenuItem';
import { PositioningProps } from '../../utils/positioner';
export interface MenuButtonSlotClassNames {
menu: string;
}
export interface MenuButtonProps extends StyledComponentProps<MenuButtonProps>, PositioningProps {
/**
* Accessibility behavior if overridden by the user.
* @default menuButtonBehavior
*/
accessibility?: Accessibility<MenuButtonBehaviorProps>;
/** Additional CSS class name(s) to apply. */
className?: string;
/** Initial value for 'open'. */
defaultOpen?: boolean;
/** Existing element the popup should be bound to. */
mountNode?: HTMLElement;
/** Delay in ms for the mouse leave event, before the popup will be closed. */
mouseLeaveDelay?: number;
/** Events triggering the popup. */
on?: PopupEvents | PopupEventsArray;
/** Defines whether popup is displayed. */
open?: boolean;
/**
* Called after user's click on a menu item.
*
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onMenuItemClick?: ComponentEventHandler<MenuItemProps>;
/**
* Event for request to change 'open' value.
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onOpenChange?: ComponentEventHandler<PopupProps>;
/** A popup can show a pointer to trigger. */
pointing?: boolean;
/**
* DOM element that should be used as popup's target - instead of 'trigger' element that is used by default.
*/
target?: HTMLElement;
/** Element to be rendered in-place where the popup is defined. */
trigger?: JSX.Element;
/** Whether the trigger should be tabbable */
tabbableTrigger?: boolean;
/** Shorthand for menu configuration */
menu?: ShorthandValue<MenuProps> | ShorthandCollection<MenuItemProps>;
/** Determines if the MenuButton behaves as context menu */
contextMenu?: boolean;
}
export interface MenuButtonState {
open: boolean;
menuId: string;
triggerId: string;
}
export declare const menuButtonClassName = "ui-menubutton";
export declare const menuButtonSlotClassNames: MenuButtonSlotClassNames;
export declare type MenuButtonStylesProps = never;
/**
* A MenuButton displays a menu connected to trigger element.
* @accessibility
*/
export declare const MenuButton: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof MenuButtonProps> & {
as?: TExtendedElementType;
} & MenuButtonProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<MenuButtonProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<MenuButtonProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof MenuButtonProps> & {
as?: "div";
} & MenuButtonProps;
} & FluentComponentStaticProps<MenuButtonProps>;