@base-ui-components/react/cjs/menu/positioner/useMenuPositioner.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 type { Padding, VirtualElement, FloatingContext, FloatingRootContext, FloatingEvents } from '@floating-ui/react';
import { type Boundary, type Side } from '../../utils/useAnchorPositioning.js';
import type { GenericHTMLProps } from '../../utils/types.js';
export declare function useMenuPositioner(params: useMenuPositioner.Parameters): useMenuPositioner.ReturnValue;
export declare namespace useMenuPositioner {
    interface SharedParameters {
        /**
         * Whether the menu is currently open.
         */
        open?: boolean;
        /**
         * An element to position the popup against.
         * By default, the popup will be positioned against the trigger.
         */
        anchor?: Element | null | VirtualElement | React.MutableRefObject<Element | null> | (() => Element | VirtualElement | null);
        /**
         * Determines which CSS `position` property to use.
         * @default 'absolute'
         */
        positionMethod?: 'absolute' | 'fixed';
        /**
         * Which side of the anchor element to align the popup against.
         * May automatically change to avoid collisions.
         */
        side?: Side;
        /**
         * Distance between the anchor and the popup.
         * @default 0
         */
        sideOffset?: number;
        /**
         * How to align the popup relative to the specified side.
         */
        align?: 'start' | 'end' | 'center';
        /**
         * Additional offset along the alignment axis of the element.
         * @default 0
         */
        alignOffset?: number;
        /**
         * An element or a rectangle that delimits the area that the popup is confined to.
         * @default 'clipping-ancestors'
         */
        collisionBoundary?: Boundary;
        /**
         * Additional space to maintain from the edge of the collision boundary.
         * @default 5
         */
        collisionPadding?: Padding;
        /**
         * Whether to keep the HTML element in the DOM while the menu is hidden.
         * @default false
         */
        keepMounted?: boolean;
        /**
         * Whether to maintain the menu in the viewport after
         * the anchor element is scrolled out of view.
         * @default false
         */
        sticky?: boolean;
        /**
         * Minimum distance to maintain between the arrow and the edges of the popup.
         *
         * Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
         * @default 5
         */
        arrowPadding?: number;
    }
    interface Parameters extends SharedParameters {
        /**
         * Whether the Menu is mounted.
         */
        mounted: boolean;
        /**
         * The Menu root context.
         */
        floatingRootContext?: FloatingRootContext;
        /**
         * Floating node id.
         */
        nodeId?: string;
        /**
         * The parent floating node id.
         */
        parentNodeId: string | null;
        menuEvents: FloatingEvents;
        setOpen: (open: boolean, event?: Event) => void;
    }
    interface ReturnValue {
        /**
         * Props to spread on the Menu positioner element.
         */
        getPositionerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
        /**
         * The ref of the Menu arrow element.
         */
        arrowRef: React.MutableRefObject<Element | null>;
        /**
         * Determines if the arrow cannot be centered.
         */
        arrowUncentered: boolean;
        /**
         * The rendered side of the Menu element.
         */
        side: Side;
        /**
         * The rendered align of the Menu element.
         */
        align: 'start' | 'end' | 'center';
        /**
         * The styles to apply to the Menu arrow element.
         */
        arrowStyles: React.CSSProperties;
        /**
         * The floating context.
         */
        floatingContext: FloatingContext;
        /**
         * Determines if the anchor element is hidden.
         */
        anchorHidden: boolean;
    }
}