/// 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 { PortalProps } from '@fluentui/react-portal'; import type { PositioningShorthand } from '@fluentui/react-positioning'; import { PositioningVirtualElement } from '@fluentui/react-positioning'; import * as React_2 from 'react'; import { SetVirtualMouseTarget } from '@fluentui/react-positioning'; import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { TriggerProps } from '@fluentui/react-utilities'; import type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities'; /** * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()` * @param el - element for the event target * @param nativeEvent - the native mouse event this is mapped to */ export declare const dispatchMenuEnterEvent: (el: HTMLElement, nativeEvent: MouseEvent) => void; /** * Wrapper component that manages state for a popup MenuList and a MenuTrigger */ export declare const Menu: React_2.FC; /** * Name of the custom event */ export declare const MENU_ENTER_EVENT = "fuimenuenter"; export declare type MenuCheckedValueChangeData = { /** The items for this value that are checked */ checkedItems: string[]; /** The name of the value */ name: string; }; export declare type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent; /** * Context shared between Menu and its children components * * Extends and drills down MenuList props to simplify API */ export declare type MenuContextValue = Pick & { open: boolean; triggerId: string; /** * Default values to be checked on mount * @deprecated this property is not used internally anymore, * the signature remains just to avoid breaking changes */ defaultCheckedValues?: Record; }; export declare type MenuContextValues = { menu: MenuContextValue; }; /** * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook. */ export declare const MenuDivider: ForwardRefComponent; export declare const menuDividerClassNames: SlotClassNames; export declare type MenuDividerProps = ComponentProps; export declare type MenuDividerSlots = { root: Slot<'div'>; }; export declare type MenuDividerState = ComponentState; /** * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook. */ export declare const MenuGroup: ForwardRefComponent; export declare const menuGroupClassNames: SlotClassNames; export declare const MenuGroupContextProvider: React_2.Provider; /** * Context used to guarantee correct aria-relationship between header * and group information */ export declare type MenuGroupContextValue = { /** * Element id applied to the `MenuGroupHeader` component */ headerId: string; }; export declare type MenuGroupContextValues = { menuGroup: MenuGroupContextValue; }; /** * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook. */ export declare const MenuGroupHeader: ForwardRefComponent; export declare const menuGroupHeaderClassNames: SlotClassNames; export declare type MenuGroupHeaderProps = ComponentProps; export declare type MenuGroupHeaderSlots = { root: Slot<'div'>; }; export declare type MenuGroupHeaderState = ComponentState; export declare type MenuGroupProps = ComponentProps; export declare type MenuGroupSlots = { root: Slot<'div'>; }; export declare type MenuGroupState = ComponentState & { /** * id applied to the DOM element of `MenuGroupHeader` */ headerId: string; }; /** * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook. */ export declare const MenuItem: ForwardRefComponent; /** * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook. */ export declare const MenuItemCheckbox: ForwardRefComponent; export declare const menuItemCheckboxClassNames: SlotClassNames>; export declare type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps; export declare type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState; export declare const menuItemClassNames: SlotClassNames; /** * MenuItemLink component */ export declare const MenuItemLink: ForwardRefComponent; export declare const menuItemLinkClassNames: SlotClassNames; /** * MenuItemLink Props */ export declare type MenuItemLinkProps = ComponentProps & Pick & { href: string; }; export declare type MenuItemLinkSlots = { root: Slot<'a'>; } & Pick; /** * State used in rendering MenuItemLink */ export declare type MenuItemLinkState = ComponentState; export declare type MenuItemProps = Omit>, 'content'> & Pick, 'content'> & { /** * If the menu item is a trigger for a submenu * * @default false */ hasSubmenu?: boolean; /** * Clicking on the menu item will not dismiss an open menu * * @default false */ persistOnClick?: boolean; disabled?: boolean; /** * @deprecated this property does nothing. * disabled focusable is by default by simply using `disabled` property */ disabledFocusable?: boolean; }; /** * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook. */ export declare const MenuItemRadio: ForwardRefComponent; export declare const menuItemRadioClassNames: SlotClassNames>; export declare type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps; export declare type MenuItemRadioState = MenuItemState & MenuItemSelectableState; /** * Props for selecatble menu items */ export declare type MenuItemSelectableProps = { /** * Follows input convention * https://www.w3schools.com/jsref/prop_checkbox_name.asp */ name: string; /** * Follows input convention * https://www.w3schools.com/jsref/prop_checkbox_value.asp */ value: string; }; /** * State for selectable menu items */ export declare type MenuItemSelectableState = MenuItemSelectableProps & { /** * Selectable is checked */ checked: boolean; }; export declare type MenuItemSlots = { root: Slot<'div'>; /** * Icon slot rendered before children content */ icon?: Slot<'span'>; /** * A helper slot for alignment when a menu item is used with selectable menuitems * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components */ checkmark?: Slot<'span'>; /** * Icon slot that shows the indicator for a submenu */ submenuIndicator?: Slot<'span'>; /** * Component children are placed in this slot * Avoid using the `children` property in this slot in favour of Component children whenever possible */ content?: Slot<'span'>; /** * Secondary content rendered opposite the primary content (e.g Shortcut text) */ secondaryContent?: Slot<'span'>; }; export declare type MenuItemState = ComponentState & Required>; export declare const MenuItemSwitch: ForwardRefComponent; export declare const menuItemSwitchClassNames: SlotClassNames; /** * MenuItemSwitch Props */ export declare type MenuItemSwitchProps = ComponentProps & Pick; export declare type MenuItemSwitchSlots = Pick & { switchIndicator?: Slot<'span'>; }; /** * State used in rendering MenuItemSwitch */ export declare type MenuItemSwitchState = ComponentState & MenuItemSelectableState & Required>; /** * Define a styled MenuList, using the `useMenuList_unstable` hook. */ export declare const MenuList: ForwardRefComponent; export declare const menuListClassNames: SlotClassNames; /** * Context shared between MenuList and its children components */ export declare type MenuListContextValue = Pick & { setFocusByFirstCharacter?: (e: React_2.KeyboardEvent, itemEl: HTMLElement) => void; toggleCheckbox?: SelectableHandler; selectRadio?: SelectableHandler; /** * Callback when checked items change for value with a name * * @param event - React's original SyntheticEvent * @param data - A data object with relevant information * * @deprecated this property is not used internally anymore, * the signature remains just to avoid breaking changes */ onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void; }; export declare type MenuListContextValues = { menuList: MenuListContextValue; }; export declare type MenuListProps = ComponentProps & { /** * Map of all checked values */ checkedValues?: Record; /** * Default values to be checked on mount */ defaultCheckedValues?: Record; /** * States that menu items can contain selectable items and reserve slots for item alignment */ hasCheckmarks?: boolean; /** * States that menu items can contain icons and reserve slots for item alignment */ hasIcons?: boolean; /** * Callback when checked items change for value with a name * * @param event - React's original SyntheticEvent * @param data - A data object with relevant information */ onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void; }; export declare const MenuListProvider: React_2.Provider & React_2.FC>; export declare type MenuListSlots = { root: Slot<'div'>; }; export declare type MenuListState = ComponentState & Required> & Pick & { /** * Selects a radio item, will de-select the currently selected ratio item */ selectRadio: SelectableHandler; /** * Callback to set focus on the next menu item by first character */ setFocusByFirstCharacter: NonNullable; toggleCheckbox: SelectableHandler; /** * States if the MenuList is inside MenuContext */ hasMenuContext?: boolean; }; /** * Data attached to open/close events */ export declare type MenuOpenChangeData = { /** * indicates whether the request for the open state was bubbled from a nested menu */ bubble?: boolean; /** * Indicates whether the change of state was a keyboard interaction * @deprecated * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click */ keyboard?: boolean; open: boolean; } & ({ type: 'menuTriggerContextMenu'; event: React_2.MouseEvent; } | { type: 'menuTriggerClick'; event: React_2.MouseEvent; } | { type: 'menuTriggerMouseEnter'; event: React_2.MouseEvent; } | { type: 'menuTriggerMouseLeave'; event: React_2.MouseEvent; } | { type: 'menuTriggerMouseMove'; event: React_2.MouseEvent; } | { type: 'menuTriggerKeyDown'; event: React_2.KeyboardEvent; } | { type: 'menuItemClick'; event: React_2.MouseEvent; } | { type: 'menuPopoverMouseEnter'; event: React_2.MouseEvent; } | { type: 'menuPopoverKeyDown'; event: React_2.KeyboardEvent; } | { type: 'clickOutside'; event: MouseEvent | TouchEvent; } | { type: 'scrollOutside'; event: MouseEvent | TouchEvent; } | { type: 'menuMouseEnter'; event: MouseEvent | TouchEvent; }); /** * The supported events that will trigger open/close of the menu */ export declare type MenuOpenEvent = MenuOpenChangeData['event']; /** * @deprecated use MenuOpenEvent instead */ export declare type MenuOpenEvents = MenuOpenEvent; /** * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus */ export declare const MenuPopover: ForwardRefComponent; export declare const menuPopoverClassNames: SlotClassNames; /** * MenuPopover Props */ export declare type MenuPopoverProps = ComponentProps; export declare type MenuPopoverSlots = { root: Slot<'div'>; }; /** * State used in rendering MenuPopover */ export declare type MenuPopoverState = ComponentState & Pick & { /** * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order * This option is disregarded for submenus */ inline: boolean; }; /** * Extends and drills down Menulist props to simplify API */ export declare type MenuProps = ComponentProps & Pick & Pick & { /** * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}. * Alternatively can only contain {@link MenuPopover} if using a custom `target`. */ children: [JSX.Element, JSX.Element] | JSX.Element; /** * Sets the delay for mouse open/close for the popover one mouse enter/leave */ hoverDelay?: number; /** * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order * This option is disregarded for submenus * * @default false */ inline?: boolean; /** * Call back when the component requests to change value * The `open` value is used as a hint when directly controlling the component */ onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void; /** * Whether the popup is open * * @default false */ open?: boolean; /** * Whether the popup is open by default * * @default false */ defaultOpen?: boolean; /** * Opens the menu on right click (context menu), removes all other menu open interactions * * @default false */ openOnContext?: boolean; /** * Opens the menu on hover * * @default false */ openOnHover?: boolean; /** * Do not dismiss the menu when a menu item is clicked * * @default false */ persistOnItemClick?: boolean; /** * Configures the positioned menu */ positioning?: PositioningShorthand; /** * Close when scroll outside of it * * @default false */ closeOnScroll?: boolean; }; export declare const MenuProvider: React_2.Provider & React_2.FC>; export declare type MenuSlots = {}; /** * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components. */ export declare const MenuSplitGroup: ForwardRefComponent; export declare const menuSplitGroupClassNames: SlotClassNames; /** * MenuSplitGroup Props */ export declare type MenuSplitGroupProps = ComponentProps; export declare type MenuSplitGroupSlots = { root: Slot<'div'>; }; /** * State used in rendering MenuSplitGroup */ export declare type MenuSplitGroupState = ComponentState; export declare type MenuState = ComponentState & Required> & { /** * Anchors the popper to the mouse click for context events */ contextTarget?: PositioningVirtualElement; /** * Whether this menu is a submenu */ isSubmenu: boolean; /** * Internal react node that just simplifies handling children */ menuPopover: React_2.ReactNode; /** * The ref for the popup */ menuPopoverRef: React_2.MutableRefObject; /** * Internal react node that just simplifies handling children */ menuTrigger: React_2.ReactNode; /** * A callback to set the target of the popper to the mouse click for context events */ setContextTarget: SetVirtualMouseTarget; /** * Callback to open/close the popup */ setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData) => void; /** * Id for the MenuTrigger element for aria relationship */ triggerId: string; /** * The ref for the MenuTrigger, used for popup positioning */ triggerRef: React_2.MutableRefObject; /** * Call back when the component requests to change value * The `open` value is used as a hint when directly controlling the component * @deprecated this property is not used internally anymore, * the signature remains just to avoid breaking changes */ onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void; /** * Default values to be checked on mount @deprecated this property is not used internally anymore, * the signature remains just to avoid breaking changes */ defaultCheckedValues?: Record; }; /** * Wraps a trigger element as an only child * and adds the necessary event handling to open a popup menu */ export declare const MenuTrigger: React_2.FC; /** * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu */ export declare type MenuTriggerChildProps = ARIAButtonResultProps; onMouseEnter: React_2.MouseEventHandler; onMouseLeave: React_2.MouseEventHandler; onMouseMove: React_2.MouseEventHandler; onContextMenu: React_2.MouseEventHandler; }>; export declare const MenuTriggerContextProvider: React_2.Provider; export declare type MenuTriggerProps = TriggerProps & { /** * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button. * @default false */ disableButtonEnhancement?: boolean; }; export declare type MenuTriggerState = { children: React_2.ReactElement | null; isSubmenu: boolean; }; /** * Render the final JSX of Menu */ export declare const renderMenu_unstable: (state: MenuState, contextValues: MenuContextValues) => JSX.Element; /** * Redefine the render function to add slots. Reuse the menudivider structure but add * slots to children. */ export declare const renderMenuDivider_unstable: (state: MenuDividerState) => JSX.Element; /** * Redefine the render function to add slots. Reuse the menugroup structure but add * slots to children. */ export declare const renderMenuGroup_unstable: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSX.Element; /** * Redefine the render function to add slots. Reuse the menugroupheader structure but add * slots to children. */ export declare const renderMenuGroupHeader_unstable: (state: MenuGroupHeaderState) => JSX.Element; /** * Function that renders the final JSX of the component */ export declare const renderMenuItem_unstable: (state: MenuItemState) => JSX.Element; /** Function that renders the final JSX of the component */ export declare const renderMenuItemCheckbox_unstable: (state: MenuItemCheckboxState) => JSX.Element; /** * Render the final JSX of MenuItemLink */ export declare const renderMenuItemLink_unstable: (state: MenuItemLinkState) => JSX.Element; /** * Redefine the render function to add slots. Reuse the menuitemradio structure but add * slots to children. */ export declare const renderMenuItemRadio_unstable: (state: MenuItemRadioState) => JSX.Element; /** * Function that renders the final JSX of the component */ export declare const renderMenuItemSwitch_unstable: (state: MenuItemSwitchState) => JSX.Element; /** * Function that renders the final JSX of the component */ export declare const renderMenuList_unstable: (state: MenuListState, contextValues: MenuListContextValues) => JSX.Element; /** * Render the final JSX of MenuPopover */ export declare const renderMenuPopover_unstable: (state: MenuPopoverState) => JSX.Element; /** * Render the final JSX of MenuSplitGroup */ export declare const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState) => JSX.Element; /** * Render the final JSX of MenuTrigger * * Only renders children */ export declare const renderMenuTrigger_unstable: (state: MenuTriggerState) => JSX.Element; export declare type SelectableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked: boolean) => void; /** * @deprecated this type is not being used internally anymore */ export declare type UninitializedMenuListState = Omit & Partial>; /** * Applies styles to a checkmark slot for selectable menu items * * @param state - should contain a `checkmark` slot */ export declare const useCheckmarkStyles_unstable: (state: MenuItemSelectableState & Pick) => void; /** * Create the state required to render Menu. * * The returned state can be modified with hooks such as useMenuStyles, * before being passed to renderMenu_unstable. * * @param props - props from this instance of Menu */ export declare const useMenu_unstable: (props: MenuProps) => MenuState; export declare const useMenuContext_unstable: (selector: ContextSelector) => T; export declare function useMenuContextValues_unstable(state: MenuState): MenuContextValues; /** * Given user props, returns state and render function for a MenuDivider. */ export declare const useMenuDivider_unstable: (props: MenuDividerProps, ref: React_2.Ref) => MenuDividerState; export declare const useMenuDividerStyles_unstable: (state: MenuDividerState) => MenuDividerState; /** * Given user props, returns state and render function for a MenuGroup. */ export declare function useMenuGroup_unstable(props: MenuGroupProps, ref: React_2.Ref): MenuGroupState; export declare const useMenuGroupContext_unstable: () => MenuGroupContextValue; export declare function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues; /** * Given user props, returns state and render function for a MenuGroupHeader. */ export declare function useMenuGroupHeader_unstable(props: MenuGroupHeaderProps, ref: React_2.Ref): MenuGroupHeaderState; export declare const useMenuGroupHeaderStyles_unstable: (state: MenuGroupHeaderState) => MenuGroupHeaderState; export declare const useMenuGroupStyles_unstable: (state: MenuGroupState) => MenuGroupState; /** * Returns the props and state required to render the component */ export declare const useMenuItem_unstable: (props: MenuItemProps, ref: React_2.Ref>) => MenuItemState; /** Returns the props and state required to render the component */ export declare const useMenuItemCheckbox_unstable: (props: MenuItemCheckboxProps, ref: React_2.Ref>) => MenuItemCheckboxState; export declare const useMenuItemCheckboxStyles_unstable: (state: MenuItemCheckboxState) => MenuItemCheckboxState; /** * Create the state required to render MenuItemLink. * * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable, * before being passed to renderMenuItemLink_unstable. * * @param props - props from this instance of MenuItemLink * @param ref - reference to root HTMLElement of MenuItemLink */ export declare const useMenuItemLink_unstable: (props: MenuItemLinkProps, ref: React_2.Ref) => MenuItemLinkState; /** * Apply styling to the MenuItemLink slots based on the state */ export declare const useMenuItemLinkStyles_unstable: (state: MenuItemLinkState) => MenuItemLinkState; /** * Given user props, returns state and render function for a MenuItemRadio. */ export declare const useMenuItemRadio_unstable: (props: MenuItemRadioProps, ref: React_2.Ref>) => MenuItemRadioState; export declare const useMenuItemRadioStyles_unstable: (state: MenuItemRadioState) => void; /** Applies style classnames to slots */ export declare const useMenuItemStyles_unstable: (state: MenuItemState) => MenuItemState; /** * Create the state required to render MenuItemSwitch. * * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable, * before being passed to renderMenuItemSwitch_unstable. * * @param props - props from this instance of MenuItemSwitch * @param ref - reference to root HTMLDivElement of MenuItemSwitch */ export declare const useMenuItemSwitch_unstable: (props: MenuItemSwitchProps, ref: React_2.Ref) => MenuItemSwitchState; /** * Apply styling to the MenuItemSwitch slots based on the state */ export declare const useMenuItemSwitchStyles_unstable: (state: MenuItemSwitchState) => MenuItemSwitchState; /** * Returns the props and state required to render the component */ export declare const useMenuList_unstable: (props: MenuListProps, ref: React_2.Ref) => MenuListState; export declare const useMenuListContext_unstable: (selector: ContextSelector) => T; export declare function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues; /** * Apply styling to the Menu slots based on the state */ export declare const useMenuListStyles_unstable: (state: MenuListState) => MenuListState; /** * Create the state required to render MenuPopover. * * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable, * before being passed to renderMenuPopover_unstable. * * @param props - props from this instance of MenuPopover * @param ref - reference to root HTMLElement of MenuPopover */ export declare const useMenuPopover_unstable: (props: MenuPopoverProps, ref: React_2.Ref) => MenuPopoverState; /** * Apply styling to the Menu slots based on the state */ export declare const useMenuPopoverStyles_unstable: (state: MenuPopoverState) => MenuPopoverState; /** * Create the state required to render MenuSplitGroup. * * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable, * before being passed to renderMenuSplitGroup_unstable. * * @param props - props from this instance of MenuSplitGroup * @param ref - reference to root HTMLElement of MenuSplitGroup */ export declare const useMenuSplitGroup_unstable: (props: MenuSplitGroupProps, ref: React_2.Ref) => MenuSplitGroupState; /** * Apply styling to the MenuSplitGroup slots based on the state */ export declare const useMenuSplitGroupStyles_unstable: (state: MenuSplitGroupState) => MenuSplitGroupState; /** * Create the state required to render MenuTrigger. * Clones the only child component and adds necessary event handling behaviours to open a popup menu * * @param props - props from this instance of MenuTrigger */ export declare const useMenuTrigger_unstable: (props: MenuTriggerProps) => MenuTriggerState; export declare const useMenuTriggerContext_unstable: () => boolean; /** * This hook works similarly to @see useOnClickOutside * * Problem: Trying to behave the same as system menus: * When the mouse leaves a stack of nested menus the stack should not dismiss. * However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss. * * We don't use the native mouseenter event because it would trigger too many times in the document * Instead, dispatch custom DOM event from the menu so that it can bubble * Each nested menu can use the listener to check if the event is from a child or parent menu */ export declare const useOnMenuMouseEnter: (options: UseOnClickOrScrollOutsideOptions) => void; export { }