react-menu.api.md

API Report File for "@fluentui/react-menu"

Do not edit this file. It is a report generated by API Extractor.

import { ARIAButtonElement } from '@fluentui/react-aria';
import { ARIAButtonResultProps } from '@fluentui/react-aria';
import { ARIAButtonType } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ContextSelector } from '@fluentui/react-context-selector';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PortalProps } from '@fluentui/react-portal';
import type { PositioningShorthand } from '@fluentui/react-positioning';
import { PositioningVirtualElement } from '@fluentui/react-positioning';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import * as React_2 from 'react';
import { SetVirtualMouseTarget } from '@fluentui/react-positioning';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
import type { TriggerProps } from '@fluentui/react-utilities';
import type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';

// @public
export const dispatchMenuEnterEvent: (el: HTMLElement, nativeEvent: MouseEvent) => void;

// @public
export const Menu: React_2.FC<MenuProps>;

// @public
export const MENU_ENTER_EVENT = "fuimenuenter";

// @public (undocumented)
export type MenuCheckedValueChangeData = {
    checkedItems: string[];
    name: string;
};

// @public (undocumented)
export type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;

// @public
export type MenuContextValue = Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'mountNode' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'safeZone'> & {
    open: boolean;
    triggerId: string;
    defaultCheckedValues?: Record<string, string[]>;
};

// @public (undocumented)
export type MenuContextValues = {
    menu: MenuContextValue;
};

// @public
export const MenuDivider: ForwardRefComponent<MenuDividerProps>;

// @public (undocumented)
export const menuDividerClassNames: SlotClassNames<MenuDividerSlots>;

// @public (undocumented)
export type MenuDividerProps = ComponentProps<MenuDividerSlots>;

// @public (undocumented)
export type MenuDividerSlots = {
    root: Slot<'div'>;
};

// @public (undocumented)
export type MenuDividerState = ComponentState<MenuDividerSlots>;

// @public
export const MenuGroup: ForwardRefComponent<MenuGroupProps>;

// @public (undocumented)
export const menuGroupClassNames: SlotClassNames<MenuGroupSlots>;

// @public (undocumented)
export const MenuGroupContextProvider: React_2.Provider<MenuGroupContextValue>;

// @public
export type MenuGroupContextValue = {
    headerId: string;
};

// @public (undocumented)
export type MenuGroupContextValues = {
    menuGroup: MenuGroupContextValue;
};

// @public
export const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;

// @public (undocumented)
export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots>;

// @public (undocumented)
export type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;

// @public (undocumented)
export type MenuGroupHeaderSlots = {
    root: Slot<'div'>;
};

// @public (undocumented)
export type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;

// @public (undocumented)
export type MenuGroupProps = ComponentProps<MenuGroupSlots>;

// @public (undocumented)
export type MenuGroupSlots = {
    root: Slot<'div'>;
};

// @public (undocumented)
export type MenuGroupState = ComponentState<MenuGroupSlots> & {
    headerId: string;
};

// @public
export const MenuItem: ForwardRefComponent<MenuItemProps>;

// @public
export const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;

// @public (undocumented)
export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;

// @public (undocumented)
export type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;

// @public (undocumented)
export type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;

// @public (undocumented)
export const menuItemClassNames: SlotClassNames<MenuItemSlots>;

// @public
export const MenuItemLink: ForwardRefComponent<MenuItemLinkProps>;

// @public (undocumented)
export const menuItemLinkClassNames: SlotClassNames<MenuItemLinkSlots>;

// @public
export type MenuItemLinkProps = ComponentProps<MenuItemLinkSlots> & Pick<MenuItemProps, 'disabled'> & {
    href: string;
};

// @public (undocumented)
export type MenuItemLinkSlots = {
    root: Slot<'a'>;
} & Pick<MenuItemSlots, 'icon' | 'content' | 'secondaryContent' | 'checkmark'>;

// @public
export type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;

// @public (undocumented)
export type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> & Pick<Partial<MenuItemSlots>, 'content'> & {
    hasSubmenu?: boolean;
    persistOnClick?: boolean;
    disabled?: boolean;
    disabledFocusable?: boolean;
};

// @public
export const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;

// @public
export type MenuItemRadioBaseProps = MenuItemRadioProps;

// @public
export type MenuItemRadioBaseState = MenuItemRadioState;

// @public (undocumented)
export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;

// @public (undocumented)
export type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;

// @public (undocumented)
export type MenuItemRadioState = MenuItemState & MenuItemSelectableState;

// @public
export type MenuItemSelectableProps = {
    name: string;
    value: string;
};

// @public
export type MenuItemSelectableState = MenuItemSelectableProps & {
    checked: boolean;
};

// @public (undocumented)
export type MenuItemSlots = {
    root: Slot<'div'>;
    icon?: Slot<'span'>;
    checkmark?: Slot<'span'>;
    submenuIndicator?: Slot<'span'>;
    content?: Slot<'span'>;
    secondaryContent?: Slot<'span'>;
    subText?: Slot<'span'>;
};

// @public (undocumented)
export type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;

// @public (undocumented)
export const MenuItemSwitch: ForwardRefComponent<MenuItemSwitchProps>;

// @public (undocumented)
export const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots>;

// @public
export type MenuItemSwitchProps = ComponentProps<MenuItemSwitchSlots> & Pick<MenuItemCheckboxProps, 'disabled' | 'persistOnClick' | 'name' | 'value'>;

// @public (undocumented)
export type MenuItemSwitchSlots = Pick<MenuItemSlots, 'root' | 'content' | 'secondaryContent' | 'icon' | 'subText'> & {
    switchIndicator?: Slot<'span'>;
};

// @public
export type MenuItemSwitchState = ComponentState<MenuItemSwitchSlots> & MenuItemSelectableState & Required<Pick<MenuItemSwitchProps, 'disabled'>>;

// @public
export const MenuList: ForwardRefComponent<MenuListProps>;

// @public (undocumented)
export const menuListClassNames: SlotClassNames<MenuListSlots>;

// @public
export type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'hasIcons' | 'hasCheckmarks'> & {
    setFocusByFirstCharacter?: (e: React_2.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;
    toggleCheckbox?: SelectableHandler;
    selectRadio?: SelectableHandler;
    onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
    shouldOpenOnArrowRight?: boolean;
    shouldCloseOnArrowLeft?: boolean;
};

// @public (undocumented)
export type MenuListContextValues = {
    menuList: MenuListContextValue;
};

// @public (undocumented)
export type MenuListProps = ComponentProps<MenuListSlots> & {
    checkedValues?: Record<string, string[]>;
    defaultCheckedValues?: Record<string, string[]>;
    hasCheckmarks?: boolean;
    hasIcons?: boolean;
    onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
};

// @public (undocumented)
export const MenuListProvider: React_2.Provider<MenuListContextValue> & React_2.FC<React_2.ProviderProps<MenuListContextValue>>;

// @public (undocumented)
export type MenuListSlots = {
    root: Slot<'div'>;
};

// @public (undocumented)
export type MenuListState = ComponentState<MenuListSlots> & Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> & Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {
    selectRadio: SelectableHandler;
    setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
    toggleCheckbox: SelectableHandler;
    hasMenuContext?: boolean;
};

// @public
export type MenuOpenChangeData = {
    bubble?: boolean;
    keyboard?: boolean;
    open: boolean;
} & ({
    type: 'menuTriggerContextMenu';
    event: React_2.MouseEvent<HTMLElement>;
} | {
    type: 'menuTriggerClick';
    event: React_2.MouseEvent<HTMLElement>;
} | {
    type: 'menuTriggerMouseEnter';
    event: React_2.MouseEvent<HTMLElement>;
} | {
    type: 'menuSafeZoneMouseEnter';
    event: React_2.MouseEvent;
} | {
    type: 'menuSafeZoneTimeout';
    event: Event;
} | {
    type: 'menuTriggerMouseLeave';
    event: React_2.MouseEvent<HTMLElement>;
} | {
    type: 'menuTriggerMouseMove';
    event: React_2.MouseEvent<HTMLElement>;
} | {
    type: 'menuTriggerKeyDown';
    event: React_2.KeyboardEvent<HTMLElement>;
} | {
    type: 'menuItemClick';
    event: React_2.MouseEvent<HTMLElement>;
} | {
    type: 'menuPopoverMouseEnter';
    event: React_2.MouseEvent<HTMLElement>;
} | {
    type: 'menuPopoverKeyDown';
    event: React_2.KeyboardEvent<HTMLElement>;
} | {
    type: 'clickOutside';
    event: MouseEvent | TouchEvent;
} | {
    type: 'scrollOutside';
    event: MouseEvent | TouchEvent;
} | {
    type: 'menuMouseEnter';
    event: MouseEvent | TouchEvent;
});

// @public
export type MenuOpenEvent = MenuOpenChangeData['event'];

// @public @deprecated (undocumented)
export type MenuOpenEvents = MenuOpenEvent;

// @public
export const MenuPopover: ForwardRefComponent<MenuPopoverProps>;

// @public (undocumented)
export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots>;

// @public
export type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;

// @public (undocumented)
export type MenuPopoverSlots = {
    root: Slot<'div'>;
};

// @public
export type MenuPopoverState = ComponentState<MenuPopoverSlots> & Pick<PortalProps, 'mountNode'> & {
    inline: boolean;
    safeZone?: React_2.ReactElement | null;
};

// @public
export type MenuProps = ComponentProps<Partial<MenuSlots>> & Pick<PortalProps, 'mountNode'> & Pick<MenuListProps, 'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'> & {
    children: [JSXElement, JSXElement] | JSXElement;
    hoverDelay?: number;
    inline?: boolean;
    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;
    open?: boolean;
    defaultOpen?: boolean;
    openOnContext?: boolean;
    openOnHover?: boolean;
    persistOnItemClick?: boolean;
    positioning?: PositioningShorthand;
    closeOnScroll?: boolean;
};

// @public (undocumented)
export const MenuProvider: React_2.Provider<MenuContextValue> & React_2.FC<React_2.ProviderProps<MenuContextValue>>;

// @public (undocumented)
export type MenuSlots = {
    surfaceMotion: Slot<PresenceMotionSlotProps>;
};

// @public
export const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;

// @public (undocumented)
export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;

// @public
export type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;

// @public (undocumented)
export type MenuSplitGroupSlots = {
    root: Slot<'div'>;
};

// @public
export type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & Pick<MenuSplitGroupContextValue, 'setMultiline'>;

// @public (undocumented)
export type MenuState = ComponentState<InternalMenuSlots> & Required<Pick<MenuProps, 'hasCheckmarks' | 'hasIcons' | 'mountNode' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll' | 'hoverDelay' | 'openOnContext' | 'persistOnItemClick'>> & {
    contextTarget?: PositioningVirtualElement;
    isSubmenu: boolean;
    menuPopover: React_2.ReactNode;
    menuPopoverRef: React_2.MutableRefObject<HTMLElement | null>;
    menuTrigger: React_2.ReactNode;
    setContextTarget: SetVirtualMouseTarget;
    setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData & {
        ignoreHoverDelay?: boolean;
    }) => void;
    triggerId: string;
    triggerRef: React_2.MutableRefObject<HTMLElement | null>;
    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;
    defaultCheckedValues?: Record<string, string[]>;
    safeZone?: React_2.ReactElement | null;
};

// @public
export const MenuTrigger: React_2.FC<MenuTriggerProps>;

// @public
export type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
    'aria-haspopup'?: 'menu';
    'aria-expanded'?: boolean;
    id: string;
    ref: React_2.Ref<never>;
    onMouseEnter: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
    onMouseLeave: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
    onMouseMove: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
    onMouseOver?: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
    onContextMenu: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
}>;

// @public (undocumented)
export const MenuTriggerContextProvider: React_2.Provider<boolean>;

// @public (undocumented)
export type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {
    disableButtonEnhancement?: boolean;
};

// @public (undocumented)
export type MenuTriggerState = {
    children: React_2.ReactElement | null;
    isSubmenu: boolean;
};

// @public
export const renderMenu_unstable: (state: MenuState, contextValues: MenuContextValues) => JSXElement;

// @public
export const renderMenuDivider_unstable: (state: MenuDividerState) => JSXElement;

// @public
export const renderMenuGroup_unstable: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSXElement;

// @public
export const renderMenuGroupHeader_unstable: (state: MenuGroupHeaderState) => JSXElement;

// @public
export const renderMenuItem_unstable: (state: MenuItemState) => JSXElement;

// @public
export const renderMenuItemCheckbox_unstable: (state: MenuItemCheckboxState) => JSXElement;

// @public
export const renderMenuItemLink_unstable: (state: MenuItemLinkState) => JSXElement;

// @public
export const renderMenuItemRadio_unstable: (state: MenuItemRadioState) => JSXElement;

// @public
export const renderMenuItemSwitch_unstable: (state: MenuItemSwitchState) => JSXElement;

// @public
export const renderMenuList_unstable: (state: MenuListState, contextValues: MenuListContextValues) => JSXElement;

// @public
export const renderMenuPopover_unstable: (state: MenuPopoverState) => JSXElement;

// @public
export const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState, contexts?: MenuSplitGroupContextValues) => JSXElement;

// @public
export const renderMenuTrigger_unstable: (state: MenuTriggerState) => JSXElement;

// @public (undocumented)
export type SelectableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked: boolean) => void;

// @public @deprecated (undocumented)
export type UninitializedMenuListState = Omit<MenuListState, 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'> & Partial<Pick<MenuListState, 'checkedValues'>>;

// @public
export const useCheckmarkStyles_unstable: (state: MenuItemSelectableState & Pick<MenuItemState, "checkmark">) => void;

// @public
export const useMenu_unstable: (props: MenuProps & {
    safeZone?: boolean | {
        timeout?: number;
    };
}) => MenuState;

// @public (undocumented)
export const useMenuContext_unstable: <T>(selector: ContextSelector<MenuContextValue, T>) => T;

// @public (undocumented)
export function useMenuContextValues_unstable(state: MenuState): MenuContextValues;

// @public
export const useMenuDivider_unstable: (props: MenuDividerProps, ref: React_2.Ref<HTMLElement>) => MenuDividerState;

// @public (undocumented)
export const useMenuDividerStyles_unstable: (state: MenuDividerState) => MenuDividerState;

// @public
export function useMenuGroup_unstable(props: MenuGroupProps, ref: React_2.Ref<HTMLElement>): MenuGroupState;

// @public (undocumented)
export const useMenuGroupContext_unstable: () => MenuGroupContextValue;

// @public (undocumented)
export function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues;

// @public
export function useMenuGroupHeader_unstable(props: MenuGroupHeaderProps, ref: React_2.Ref<HTMLElement>): MenuGroupHeaderState;

// @public (undocumented)
export const useMenuGroupHeaderStyles_unstable: (state: MenuGroupHeaderState) => MenuGroupHeaderState;

// @public (undocumented)
export const useMenuGroupStyles_unstable: (state: MenuGroupState) => MenuGroupState;

// @public
export const useMenuItem_unstable: (props: MenuItemProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemState;

// @internal
export const useMenuItemBase_unstable: (props: MenuItemProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemState;

// @public
export const useMenuItemCheckbox_unstable: (props: MenuItemCheckboxProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemCheckboxState;

// @internal
export const useMenuItemCheckboxBase_unstable: (props: MenuItemCheckboxProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemCheckboxState;

// @public (undocumented)
export const useMenuItemCheckboxStyles_unstable: (state: MenuItemCheckboxState) => MenuItemCheckboxState;

// @public
export const useMenuItemLink_unstable: (props: MenuItemLinkProps, ref: React_2.Ref<HTMLAnchorElement>) => MenuItemLinkState;

// @public
export const useMenuItemLinkStyles_unstable: (state: MenuItemLinkState) => MenuItemLinkState;

// @public
export const useMenuItemRadio_unstable: (props: MenuItemRadioProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemRadioState;

// @internal
export const useMenuItemRadioBase_unstable: (props: MenuItemRadioBaseProps, ref: React_2.Ref<ARIAButtonElement<"div">>) => MenuItemRadioBaseState;

// @public (undocumented)
export const useMenuItemRadioStyles_unstable: (state: MenuItemRadioState) => void;

// @public
export const useMenuItemStyles_unstable: (state: MenuItemState) => MenuItemState;

// @public
export const useMenuItemSwitch_unstable: (props: MenuItemSwitchProps, ref: React_2.Ref<HTMLDivElement>) => MenuItemSwitchState;

// @internal
export const useMenuItemSwitchBase_unstable: (props: MenuItemSwitchProps, ref: React_2.Ref<HTMLDivElement>) => MenuItemSwitchState;

// @public
export const useMenuItemSwitchStyles_unstable: (state: MenuItemSwitchState) => MenuItemSwitchState;

// @public
export const useMenuList_unstable: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;

// @public (undocumented)
export const useMenuListContext_unstable: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;

// @public (undocumented)
export function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues;

// @public
export const useMenuListStyles_unstable: (state: MenuListState) => MenuListState;

// @public
export const useMenuPopover_unstable: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;

// @public
export const useMenuPopoverStyles_unstable: (state: MenuPopoverState) => MenuPopoverState;

// @public
export const useMenuSplitGroup_unstable: (props: MenuSplitGroupProps, ref: React_2.Ref<HTMLElement>) => MenuSplitGroupState;

// @public
export const useMenuSplitGroupStyles_unstable: (state: MenuSplitGroupState) => MenuSplitGroupState;

// @public
export const useMenuTrigger_unstable: (props: MenuTriggerProps) => MenuTriggerState;

// @public (undocumented)
export const useMenuTriggerContext_unstable: () => boolean;

// @public
export const useOnMenuMouseEnter: (options: UseOnClickOrScrollOutsideOptions) => void;

// (No @packageDocumentation comment for this package)