@fluentui/react-northstar/dist/es/components/Menu/MenuItem.d.ts

A themable React component library.

import { Accessibility, MenuItemBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { UIComponentProps, ChildrenComponentProps, ContentComponentProps } from '../../utils';
import { MenuProps, MenuShorthandKinds } from './Menu';
import { MenuItemIconProps } from './MenuItemIcon';
import { MenuItemContentProps } from './MenuItemContent';
import { MenuItemIndicatorProps } from './MenuItemIndicator';
import { MenuItemWrapperProps } from './MenuItemWrapper';
import { ComponentEventHandler, ShorthandValue, ShorthandCollection, FluentComponentStaticProps } from '../../types';
import { PopperShorthandProps } from '../../utils/positioner';
export interface MenuItemSlotClassNames {
    submenu: string;
}
export interface MenuItemProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps<ShorthandValue<MenuItemContentProps>> {
    /**
     * Accessibility behavior if overridden by the user.
     * @available menuItemAsToolbarButtonBehavior, tabBehavior
     */
    accessibility?: Accessibility<MenuItemBehaviorProps>;
    /** A menu item can be active. */
    active?: boolean;
    /** A menu item can show it is currently unable to be interacted with. */
    disabled?: boolean;
    /** Name or shorthand for Menu Item Icon */
    icon?: ShorthandValue<MenuItemIconProps>;
    /** A menu may have just icons. */
    iconOnly?: boolean;
    /** MenuItem index inside Menu. */
    index?: number;
    /** MenuItem position inside Menu (skipping separators). */
    itemPosition?: number;
    /** MenuItem count inside Menu. */
    itemsCount?: number;
    /**
     * Called on click.
     *
     * @param event - React's original SyntheticEvent.
     * @param data - All props.
     */
    onClick?: ComponentEventHandler<MenuItemProps>;
    /**
     * Called after user's focus.
     * @param event - React's original SyntheticEvent.
     * @param data - All props.
     */
    onFocus?: ComponentEventHandler<MenuItemProps>;
    /**
     * Called after item blur.
     * @param event - React's original SyntheticEvent.
     * @param data - All props.
     */
    onBlur?: ComponentEventHandler<MenuItemProps>;
    /** 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 item can have primary type. */
    primary?: boolean;
    /** The menu item can have secondary type. */
    secondary?: boolean;
    /** Menu items can by highlighted using underline. */
    underlined?: boolean;
    /** A vertical menu displays elements vertically. */
    vertical?: boolean;
    /** Shorthand for the wrapper component. */
    wrapper?: ShorthandValue<MenuItemWrapperProps>;
    /** Events triggering the menu open. */
    on?: 'hover';
    /** Shorthand for the submenu. */
    menu?: ShorthandValue<MenuProps & {
        popper?: PopperShorthandProps;
    }> | ShorthandCollection<MenuItemProps, MenuShorthandKinds>;
    /** Indicates if the menu inside the item is open if the activeIndex is also the item's index. */
    menuOpen?: boolean;
    /** Default menu open if the activeIndex is also the item's index */
    defaultMenuOpen?: boolean;
    /** Callback for setting the current menu item as active element in the menu. */
    onActiveChanged?: ComponentEventHandler<MenuItemProps>;
    /** Indicates whether the menu item is part of submenu. */
    inSubmenu?: boolean;
    /** Shorthand for the submenu indicator. */
    indicator?: ShorthandValue<MenuItemIndicatorProps>;
    /**
     * Event for request to change 'open' value.
     * @param event - React's original SyntheticEvent.
     * @param data - All props and proposed value.
     */
    onMenuOpenChange?: ComponentEventHandler<MenuItemProps>;
}
export declare type MenuItemStylesProps = Required<Pick<MenuItemProps, 'primary' | 'underlined' | 'active' | 'vertical' | 'pointing' | 'secondary' | 'disabled' | 'iconOnly' | 'pills' | 'inSubmenu'>> & {
    isFromKeyboard: boolean;
};
export declare type MenuItemState = {
    isFromKeyboard: boolean;
    menuOpen: boolean;
};
export declare const menuItemClassName = "ui-menu__item";
export declare const menuItemSlotClassNames: MenuItemSlotClassNames;
/**
 * A MenuItem is an actionable item within a Menu.
 */
export declare const MenuItem: (<TExtendedElementType extends React.ElementType<any> = "a">(props: React.RefAttributes<HTMLAnchorElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof MenuItemProps> & {
    as?: TExtendedElementType;
} & MenuItemProps) => JSX.Element) & {
    propTypes?: React.WeakValidationMap<MenuItemProps> & {
        as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
    };
    contextTypes?: PropTypes.ValidationMap<any>;
    defaultProps?: Partial<MenuItemProps & {
        as: "a";
    }>;
    displayName?: string;
    readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLAnchorElement> & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
        ref?: React.Ref<HTMLAnchorElement>;
    }, "as" | keyof MenuItemProps> & {
        as?: "a";
    } & MenuItemProps;
} & FluentComponentStaticProps<MenuItemProps>;