Circle V2 API Docs
    Preparing search index...

    Interface ActionBarRootProps

    Floating bar of bulk actions for the current selection, pinned to the bottom of the screen. Controlled via open on ActionBar.Root — there is no trigger.

    <ActionBar.Root open={selectedCount > 0}>
    <ActionBar.Positioner>
    <ActionBar.Content>
    <Text>{selectedCount} selected</Text>
    <ActionBar.Separator />
    <Button trackingData={{ event: "Delete selection" }}>Delete</Button>
    </ActionBar.Content>
    </ActionBar.Positioner>
    </ActionBar.Root>
    interface ActionBarRootProps {
        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: ActionBar.FocusOutsideEvent) => void;
        onInteractOutside?: (event: ActionBar.InteractOutsideEvent) => void;
        onOpenChange?: (details: OpenChangeDetails) => void;
        onPointerDownOutside?: (event: ActionBar.PointerDownOutsideEvent) => void;
        onRequestDismiss?: (event: LayerDismissEvent) => void;
        open?: boolean;
        persistentElements?: (() => Element | null)[];
        placement?: ConditionalValue<
            "bottom"
            | "bottom-end"
            | "bottom-start"
            | undefined,
        >;
        portalled?: boolean;
        present?: boolean;
        recipe?: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>;
        skipAnimationOnMount?: boolean;
        unmountOnExit?: boolean;
        unstyled?: boolean;
    }

    Hierarchy

    • Omit<ActionBarRootBaseProps, "positioning">
      • ActionBarRootProps
    Index

    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: ActionBar.FocusOutsideEvent) => void

    Function called when the focus is moved outside the component

    onInteractOutside?: (event: ActionBar.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: ActionBar.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
    placement?: ConditionalValue<
        "bottom"
        | "bottom-end"
        | "bottom-start"
        | undefined,
    >
    "bottom"
    
    portalled?: boolean

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

    true
    
    present?: boolean

    Whether the node is present (controlled by the user)

    recipe?: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>
    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.