@base-ui-components/react/cjs/menu/root/useMenuRoot.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import { FloatingRootContext } from '@floating-ui/react';
import { GenericHTMLProps } from '../../utils/types.js';
import { type TransitionStatus } from '../../utils/useTransitionStatus.js';
import type { TextDirection } from '../../direction-provider/DirectionContext.js';
export declare function useMenuRoot(parameters: useMenuRoot.Parameters): useMenuRoot.ReturnValue;
export type MenuOrientation = 'horizontal' | 'vertical';
export declare namespace useMenuRoot {
    interface Parameters {
        /**
         * Whether the menu is currently open.
         */
        open: boolean | undefined;
        /**
         * Event handler called when the menu is opened or closed.
         */
        onOpenChange: ((open: boolean, event?: Event) => void) | undefined;
        /**
         * Whether the menu is initially open.
         *
         * To render a controlled menu, use the `open` prop instead.
         */
        defaultOpen: boolean;
        /**
         * Whether to loop keyboard focus back to the first item
         * when the end of the list is reached while using the arrow keys.
         */
        loop: boolean;
        /**
         * How long to wait before the menu may be opened on hover. Specified in milliseconds.
         *
         * Requires the `openOnHover` prop.
         */
        delay: number;
        /**
         * The visual orientation of the menu.
         * Controls whether roving focus uses up/down or left/right arrow keys.
         */
        orientation: MenuOrientation;
        /**
         * Text direction of the menu (left to right or right to left).
         */
        direction: TextDirection;
        /**
         * Whether the component should ignore user interaction.
         */
        disabled: boolean;
        /**
         * Determines if the Menu is nested inside another Menu.
         */
        nested: boolean;
        /**
         * When in a submenu, determines whether pressing the Escape key
         * closes the entire menu, or only the current child menu.
         */
        closeParentOnEsc: boolean;
        /**
         * Whether the menu should also open when the trigger is hovered.
         */
        openOnHover: boolean;
        /**
         * Callback fired when the user begins or finishes typing (for typeahead search).
         */
        onTypingChange: (typing: boolean) => void;
        modal: boolean;
    }
    interface ReturnValue {
        activeIndex: number | null;
        floatingRootContext: FloatingRootContext;
        getItemProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
        getPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
        getTriggerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
        itemDomElements: React.MutableRefObject<(HTMLElement | null)[]>;
        itemLabels: React.MutableRefObject<(string | null)[]>;
        mounted: boolean;
        open: boolean;
        popupRef: React.RefObject<HTMLElement | null>;
        setOpen: (open: boolean, event: Event | undefined) => void;
        positionerRef: React.RefObject<HTMLElement | null>;
        setPositionerElement: (element: HTMLElement | null) => void;
        setTriggerElement: (element: HTMLElement | null) => void;
        transitionStatus: TransitionStatus;
        allowMouseUpTriggerRef: React.RefObject<boolean>;
    }
}