Circle V2 API Docs
    Preparing search index...

    Interface PopoverRootProps

    interface PopoverRootProps {
        autoFocus?: boolean;
        children: ReactNode;
        closeOnEscape?: boolean;
        closeOnInteractOutside?: boolean;
        defaultOpen?: boolean;
        id?: string;
        ids?: Partial<
            {
                anchor: string;
                arrow: string;
                closeTrigger: string;
                content: string;
                description: string;
                positioner: string;
                title: string;
                trigger: string;
            },
        >;
        immediate?: boolean;
        initialFocusEl?: () => HTMLElement | null;
        lazyMount?: boolean;
        modal?: boolean;
        onEscapeKeyDown?: (event: KeyboardEvent) => void;
        onExitComplete?: VoidFunction;
        onFocusOutside?: (event: Combobox.FocusOutsideEvent) => void;
        onInteractOutside?: (event: Combobox.InteractOutsideEvent) => void;
        onOpenChange?: (details: OpenChangeDetails) => void;
        onPointerDownOutside?: (event: Combobox.PointerDownOutsideEvent) => void;
        onRequestDismiss?: (event: LayerDismissEvent) => void;
        open?: boolean;
        persistentElements?: (() => Element | null)[];
        portalled?: boolean;
        positioning?: PositioningOptions;
        present?: boolean;
        recipe?: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>;
        size?: ConditionalValue<"sm" | "md" | "lg" | "xs" | undefined>;
        skipAnimationOnMount?: boolean;
        unmountOnExit?: boolean;
        unstyled?: boolean;
    }

    Hierarchy

    • PopoverRootBaseProps
      • PopoverRootProps
    Index

    Properties

    autoFocus? children closeOnEscape? closeOnInteractOutside? defaultOpen? id? ids? immediate? initialFocusEl? lazyMount? modal? onEscapeKeyDown? onExitComplete? onFocusOutside? onInteractOutside? onOpenChange? onPointerDownOutside? onRequestDismiss? open? persistentElements? portalled? positioning? present? recipe? size? skipAnimationOnMount? unmountOnExit? unstyled?

    Properties

    autoFocus?: boolean

    Whether to automatically set focus on the first focusable content within the popover when opened.

    true
    children: ReactNode
    closeOnEscape?: boolean

    Whether to close the popover when the escape key is pressed.

    true
    closeOnInteractOutside?: boolean

    Whether to close the popover when the user clicks outside of the popover.

    true
    defaultOpen?: boolean

    The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover.

    id?: string

    The unique identifier of the machine.

    ids?: Partial<
        {
            anchor: string;
            arrow: string;
            closeTrigger: string;
            content: string;
            description: string;
            positioner: string;
            title: string;
            trigger: string;
        },
    >

    The ids of the elements in the popover. Useful for composition.

    immediate?: boolean

    Whether to synchronize the present change immediately or defer it to the next frame

    initialFocusEl?: () => HTMLElement | null

    The element to focus on when the popover is opened.

    lazyMount?: boolean

    Whether to enable lazy mounting

    false
    modal?: boolean

    Whether the popover should be modal. When set to true:

    • interaction with outside elements will be disabled
    • only popover content will be visible to screen readers
    • scrolling is blocked
    • focus is trapped within the popover
    false
    onEscapeKeyDown?: (event: KeyboardEvent) => void

    Function called when the escape key is pressed

    onExitComplete?: VoidFunction

    Function called when the animation ends in the closed state

    onFocusOutside?: (event: Combobox.FocusOutsideEvent) => void

    Function called when the focus is moved outside the component

    onInteractOutside?: (event: Combobox.InteractOutsideEvent) => void

    Function called when an interaction happens outside the component

    onOpenChange?: (details: OpenChangeDetails) => void

    Function invoked when the popover opens or closes

    onPointerDownOutside?: (event: Combobox.PointerDownOutsideEvent) => void

    Function called when the pointer is pressed down outside the component

    onRequestDismiss?: (event: LayerDismissEvent) => void

    Function called when this layer is closed due to a parent layer being closed

    open?: boolean

    The controlled open state of the popover

    persistentElements?: (() => Element | null)[]

    Returns the persistent elements that:

    • should not have pointer-events disabled
    • should not trigger the dismiss event
    portalled?: boolean

    Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.

    true
    positioning?: PositioningOptions

    The user provided options used to position the popover content

    present?: boolean

    Whether the node is present (controlled by the user)

    recipe?: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>
    size?: ConditionalValue<"sm" | "md" | "lg" | "xs" | undefined>
    "md"
    skipAnimationOnMount?: boolean

    Whether to allow the initial presence animation.

    false
    unmountOnExit?: boolean

    Whether to unmount on exit.

    false
    unstyled?: boolean

    If true, the element will opt out of the theme styles.

    Settings

    Member Visibility

    On This Page

    Properties