@base-ui-components/react/cjs/utils/useAnchorPositioning.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 { useFloating, type FloatingRootContext, type VirtualElement, type Padding, type FloatingContext } from '@floating-ui/react';
import { type Rect } from '@floating-ui/utils';
export type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
export type Align = 'start' | 'center' | 'end';
export type Boundary = 'clipping-ancestors' | Element | Element[] | Rect;
interface UseAnchorPositioningParameters {
    anchor?: Element | VirtualElement | (() => Element | VirtualElement | null) | React.MutableRefObject<Element | null> | null;
    positionMethod?: 'absolute' | 'fixed';
    side?: Side;
    sideOffset?: number;
    align?: Align;
    alignOffset?: number;
    fallbackAxisSideDirection?: 'start' | 'end' | 'none';
    collisionBoundary?: Boundary;
    collisionPadding?: Padding;
    sticky?: boolean;
    keepMounted?: boolean;
    arrowPadding?: number;
    floatingRootContext?: FloatingRootContext;
    mounted: boolean;
    trackAnchor?: boolean;
    nodeId?: string;
    allowAxisFlip?: boolean;
}
interface UseAnchorPositioningReturnValue {
    positionerStyles: React.CSSProperties;
    arrowStyles: React.CSSProperties;
    arrowRef: React.MutableRefObject<Element | null>;
    arrowUncentered: boolean;
    renderedSide: Side;
    renderedAlign: Align;
    anchorHidden: boolean;
    refs: ReturnType<typeof useFloating>['refs'];
    positionerContext: FloatingContext;
    isPositioned: boolean;
}
/**
 * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
 * `useFloating` hook.
 * @ignore - internal hook.
 */
export declare function useAnchorPositioning(params: UseAnchorPositioningParameters): UseAnchorPositioningReturnValue;
export {};