Backstage
    Preparing search index...

    Interface PopoverProps

    Properties for Popover

    interface PopoverProps {
        "aria-describedby"?: string;
        "aria-details"?: string;
        "aria-label"?: string;
        "aria-labelledby"?: string;
        arrowBoundaryOffset?: number;
        arrowRef?: RefObject<Element | null>;
        boundaryElement?: Element;
        children: ReactNode;
        className?: ClassNameOrFunction<PopoverRenderProps>;
        containerPadding?: number;
        crossOffset?: number;
        defaultOpen?: boolean;
        dir?: string;
        hidden?: boolean;
        hideArrow?: boolean;
        inert?: boolean;
        isEntering?: boolean;
        isExiting?: boolean;
        isKeyboardDismissDisabled?: boolean;
        isNonModal?: boolean;
        isOpen?: boolean;
        lang?: string;
        maxHeight?: number;
        offset?: number;
        onAnimationEnd?: AnimationEventHandler<HTMLDivElement>;
        onAnimationEndCapture?: AnimationEventHandler<HTMLDivElement>;
        onAnimationIteration?: AnimationEventHandler<HTMLDivElement>;
        onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement>;
        onAnimationStart?: AnimationEventHandler<HTMLDivElement>;
        onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>;
        onAuxClick?: MouseEventHandler<HTMLDivElement>;
        onAuxClickCapture?: MouseEventHandler<HTMLDivElement>;
        onClick?: MouseEventHandler<HTMLDivElement>;
        onClickCapture?: MouseEventHandler<HTMLDivElement>;
        onContextMenu?: MouseEventHandler<HTMLDivElement>;
        onContextMenuCapture?: MouseEventHandler<HTMLDivElement>;
        onDoubleClick?: MouseEventHandler<HTMLDivElement>;
        onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>;
        onGotPointerCapture?: PointerEventHandler<HTMLDivElement>;
        onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>;
        onLostPointerCapture?: PointerEventHandler<HTMLDivElement>;
        onLostPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>;
        onMouseDown?: MouseEventHandler<HTMLDivElement>;
        onMouseDownCapture?: MouseEventHandler<HTMLDivElement>;
        onMouseEnter?: MouseEventHandler<HTMLDivElement>;
        onMouseLeave?: MouseEventHandler<HTMLDivElement>;
        onMouseMove?: MouseEventHandler<HTMLDivElement>;
        onMouseMoveCapture?: MouseEventHandler<HTMLDivElement>;
        onMouseOut?: MouseEventHandler<HTMLDivElement>;
        onMouseOutCapture?: MouseEventHandler<HTMLDivElement>;
        onMouseOver?: MouseEventHandler<HTMLDivElement>;
        onMouseOverCapture?: MouseEventHandler<HTMLDivElement>;
        onMouseUp?: MouseEventHandler<HTMLDivElement>;
        onMouseUpCapture?: MouseEventHandler<HTMLDivElement>;
        onOpenChange?: (isOpen: boolean) => void;
        onPointerCancel?: PointerEventHandler<HTMLDivElement>;
        onPointerCancelCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerDown?: PointerEventHandler<HTMLDivElement>;
        onPointerDownCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerEnter?: PointerEventHandler<HTMLDivElement>;
        onPointerLeave?: PointerEventHandler<HTMLDivElement>;
        onPointerMove?: PointerEventHandler<HTMLDivElement>;
        onPointerMoveCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerOut?: PointerEventHandler<HTMLDivElement>;
        onPointerOutCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerOver?: PointerEventHandler<HTMLDivElement>;
        onPointerOverCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerUp?: PointerEventHandler<HTMLDivElement>;
        onPointerUpCapture?: PointerEventHandler<HTMLDivElement>;
        onScroll?: UIEventHandler<HTMLDivElement>;
        onScrollCapture?: UIEventHandler<HTMLDivElement>;
        onTouchCancel?: TouchEventHandler<HTMLDivElement>;
        onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>;
        onTouchEnd?: TouchEventHandler<HTMLDivElement>;
        onTouchEndCapture?: TouchEventHandler<HTMLDivElement>;
        onTouchMove?: TouchEventHandler<HTMLDivElement>;
        onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>;
        onTouchStart?: TouchEventHandler<HTMLDivElement>;
        onTouchStartCapture?: TouchEventHandler<HTMLDivElement>;
        onTransitionCancel?: TransitionEventHandler<HTMLDivElement>;
        onTransitionCancelCapture?: TransitionEventHandler<HTMLDivElement>;
        onTransitionEnd?: TransitionEventHandler<HTMLDivElement>;
        onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement>;
        onTransitionRun?: TransitionEventHandler<HTMLDivElement>;
        onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement>;
        onTransitionStart?: TransitionEventHandler<HTMLDivElement>;
        onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement>;
        onWheel?: WheelEventHandler<HTMLDivElement>;
        onWheelCapture?: WheelEventHandler<HTMLDivElement>;
        placement?: Placement;
        scrollRef?: RefObject<Element | null>;
        shouldCloseOnInteractOutside?: (element: Element) => boolean;
        shouldFlip?: boolean;
        shouldUpdatePosition?: boolean;
        slot?: string | null;
        style?: StyleOrFunction<PopoverRenderProps>;
        translate?: "yes" | "no";
        trigger?: string;
        triggerRef?: RefObject<Element | null>;
        UNSTABLE_portalContainer?: Element;
    }

    Hierarchy

    • Omit<AriaPopoverProps, "children">
      • PopoverProps
    Index

    Properties

    aria-describedby? aria-details? aria-label? aria-labelledby? arrowBoundaryOffset? arrowRef? boundaryElement? children className? containerPadding? crossOffset? defaultOpen? dir? hidden? hideArrow? inert? isEntering? isExiting? isKeyboardDismissDisabled? isNonModal? isOpen? lang? maxHeight? offset? onAnimationEnd? onAnimationEndCapture? onAnimationIteration? onAnimationIterationCapture? onAnimationStart? onAnimationStartCapture? onAuxClick? onAuxClickCapture? onClick? onClickCapture? onContextMenu? onContextMenuCapture? onDoubleClick? onDoubleClickCapture? onGotPointerCapture? onGotPointerCaptureCapture? onLostPointerCapture? onLostPointerCaptureCapture? onMouseDown? onMouseDownCapture? onMouseEnter? onMouseLeave? onMouseMove? onMouseMoveCapture? onMouseOut? onMouseOutCapture? onMouseOver? onMouseOverCapture? onMouseUp? onMouseUpCapture? onOpenChange? onPointerCancel? onPointerCancelCapture? onPointerDown? onPointerDownCapture? onPointerEnter? onPointerLeave? onPointerMove? onPointerMoveCapture? onPointerOut? onPointerOutCapture? onPointerOver? onPointerOverCapture? onPointerUp? onPointerUpCapture? onScroll? onScrollCapture? onTouchCancel? onTouchCancelCapture? onTouchEnd? onTouchEndCapture? onTouchMove? onTouchMoveCapture? onTouchStart? onTouchStartCapture? onTransitionCancel? onTransitionCancelCapture? onTransitionEnd? onTransitionEndCapture? onTransitionRun? onTransitionRunCapture? onTransitionStart? onTransitionStartCapture? onWheel? onWheelCapture? placement? scrollRef? shouldCloseOnInteractOutside? shouldFlip? shouldUpdatePosition? slot? style? translate? trigger? triggerRef? UNSTABLE_portalContainer?

    Properties

    "aria-describedby"?: string

    Identifies the element (or elements) that describes the object.

    "aria-details"?: string

    Identifies the element (or elements) that provide a detailed, extended description for the object.

    "aria-label"?: string

    Defines a string value that labels the current element.

    "aria-labelledby"?: string

    Identifies the element (or elements) that labels the current element.

    arrowBoundaryOffset?: number

    The minimum distance the arrow's edge should be from the edge of the overlay element.

    0
    arrowRef?: RefObject<Element | null>

    A ref for the popover arrow element.

    boundaryElement?: Element

    Element that that serves as the positioning boundary.

    document.body
    children: ReactNode

    The content to display inside the popover. Content is automatically wrapped with padding and scroll behavior.

    className?: ClassNameOrFunction<PopoverRenderProps>

    The CSS className for the element. A function may be provided to compute the class based on component state.

    'react-aria-Popover'
    containerPadding?: number

    The placement padding that should be applied between the element and its surrounding container.

    12
    crossOffset?: number

    The additional offset applied along the cross axis between the element and its anchor element.

    0
    defaultOpen?: boolean

    Whether the overlay is open by default (uncontrolled).

    dir?: string
    hidden?: boolean
    hideArrow?: boolean

    Whether to hide the arrow pointing to the trigger element. Arrow is also automatically hidden for MenuTrigger and SubmenuTrigger contexts.

    false
    inert?: boolean
    isEntering?: boolean

    Whether the popover is currently performing an entry animation.

    isExiting?: boolean

    Whether the popover is currently performing an exit animation.

    isKeyboardDismissDisabled?: boolean

    Whether pressing the escape key to close the popover should be disabled.

    Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.

    false
    isNonModal?: boolean

    Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.

    Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.

    isOpen?: boolean

    Whether the overlay is open by default (controlled).

    lang?: string
    maxHeight?: number

    The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.

    offset?: number

    The additional offset applied along the main axis between the element and its anchor element.

    8
    onAnimationEnd?: AnimationEventHandler<HTMLDivElement>
    onAnimationEndCapture?: AnimationEventHandler<HTMLDivElement>
    onAnimationIteration?: AnimationEventHandler<HTMLDivElement>
    onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement>
    onAnimationStart?: AnimationEventHandler<HTMLDivElement>
    onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>
    onAuxClick?: MouseEventHandler<HTMLDivElement>
    onAuxClickCapture?: MouseEventHandler<HTMLDivElement>
    onClick?: MouseEventHandler<HTMLDivElement>
    onClickCapture?: MouseEventHandler<HTMLDivElement>
    onContextMenu?: MouseEventHandler<HTMLDivElement>
    onContextMenuCapture?: MouseEventHandler<HTMLDivElement>
    onDoubleClick?: MouseEventHandler<HTMLDivElement>
    onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>
    onGotPointerCapture?: PointerEventHandler<HTMLDivElement>
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>
    onLostPointerCapture?: PointerEventHandler<HTMLDivElement>
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>
    onMouseDown?: MouseEventHandler<HTMLDivElement>
    onMouseDownCapture?: MouseEventHandler<HTMLDivElement>
    onMouseEnter?: MouseEventHandler<HTMLDivElement>
    onMouseLeave?: MouseEventHandler<HTMLDivElement>
    onMouseMove?: MouseEventHandler<HTMLDivElement>
    onMouseMoveCapture?: MouseEventHandler<HTMLDivElement>
    onMouseOut?: MouseEventHandler<HTMLDivElement>
    onMouseOutCapture?: MouseEventHandler<HTMLDivElement>
    onMouseOver?: MouseEventHandler<HTMLDivElement>
    onMouseOverCapture?: MouseEventHandler<HTMLDivElement>
    onMouseUp?: MouseEventHandler<HTMLDivElement>
    onMouseUpCapture?: MouseEventHandler<HTMLDivElement>
    onOpenChange?: (isOpen: boolean) => void

    Handler that is called when the overlay's open state changes.

    onPointerCancel?: PointerEventHandler<HTMLDivElement>
    onPointerCancelCapture?: PointerEventHandler<HTMLDivElement>
    onPointerDown?: PointerEventHandler<HTMLDivElement>
    onPointerDownCapture?: PointerEventHandler<HTMLDivElement>
    onPointerEnter?: PointerEventHandler<HTMLDivElement>
    onPointerLeave?: PointerEventHandler<HTMLDivElement>
    onPointerMove?: PointerEventHandler<HTMLDivElement>
    onPointerMoveCapture?: PointerEventHandler<HTMLDivElement>
    onPointerOut?: PointerEventHandler<HTMLDivElement>
    onPointerOutCapture?: PointerEventHandler<HTMLDivElement>
    onPointerOver?: PointerEventHandler<HTMLDivElement>
    onPointerOverCapture?: PointerEventHandler<HTMLDivElement>
    onPointerUp?: PointerEventHandler<HTMLDivElement>
    onPointerUpCapture?: PointerEventHandler<HTMLDivElement>
    onScroll?: UIEventHandler<HTMLDivElement>
    onScrollCapture?: UIEventHandler<HTMLDivElement>
    onTouchCancel?: TouchEventHandler<HTMLDivElement>
    onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>
    onTouchEnd?: TouchEventHandler<HTMLDivElement>
    onTouchEndCapture?: TouchEventHandler<HTMLDivElement>
    onTouchMove?: TouchEventHandler<HTMLDivElement>
    onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>
    onTouchStart?: TouchEventHandler<HTMLDivElement>
    onTouchStartCapture?: TouchEventHandler<HTMLDivElement>
    onTransitionCancel?: TransitionEventHandler<HTMLDivElement>
    onTransitionCancelCapture?: TransitionEventHandler<HTMLDivElement>
    onTransitionEnd?: TransitionEventHandler<HTMLDivElement>
    onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement>
    onTransitionRun?: TransitionEventHandler<HTMLDivElement>
    onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement>
    onTransitionStart?: TransitionEventHandler<HTMLDivElement>
    onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement>
    onWheel?: WheelEventHandler<HTMLDivElement>
    onWheelCapture?: WheelEventHandler<HTMLDivElement>
    placement?: Placement

    The placement of the element with respect to its anchor element.

    'bottom'
    scrollRef?: RefObject<Element | null>

    A ref for the scrollable region within the overlay.

    overlayRef
    shouldCloseOnInteractOutside?: (element: Element) => boolean

    When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the popover ref.

    shouldFlip?: boolean

    Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.

    true
    shouldUpdatePosition?: boolean

    Whether the overlay should update its position automatically.

    true
    slot?: string | null

    A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

    style?: StyleOrFunction<PopoverRenderProps>

    The inline style for the element. A function may be provided to compute the style based on component state.

    translate?: "yes" | "no"
    trigger?: string

    The name of the component that triggered the popover. This is reflected on the element as the data-trigger attribute, and can be used to provide specific styles for the popover depending on which element triggered it.

    triggerRef?: RefObject<Element | null>

    The ref for the element which the popover positions itself with respect to.

    When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.

    UNSTABLE_portalContainer?: Element

    The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.

    document.body
    • Use a parent UNSAFE_PortalProvider to set your portal container instead.

    Settings

    Member Visibility

    On This Page

    Properties
    aria-describedbyaria-detailsaria-labelaria-labelledbyarrowBoundaryOffsetarrowRefboundaryElementchildrenclassNamecontainerPaddingcrossOffsetdefaultOpendirhiddenhideArrowinertisEnteringisExitingisKeyboardDismissDisabledisNonModalisOpenlangmaxHeightoffsetonAnimationEndonAnimationEndCaptureonAnimationIterationonAnimationIterationCaptureonAnimationStartonAnimationStartCaptureonAuxClickonAuxClickCaptureonClickonClickCaptureonContextMenuonContextMenuCaptureonDoubleClickonDoubleClickCaptureonGotPointerCaptureonGotPointerCaptureCaptureonLostPointerCaptureonLostPointerCaptureCaptureonMouseDownonMouseDownCaptureonMouseEnteronMouseLeaveonMouseMoveonMouseMoveCaptureonMouseOutonMouseOutCaptureonMouseOveronMouseOverCaptureonMouseUponMouseUpCaptureonOpenChangeonPointerCancelonPointerCancelCaptureonPointerDownonPointerDownCaptureonPointerEnteronPointerLeaveonPointerMoveonPointerMoveCaptureonPointerOutonPointerOutCaptureonPointerOveronPointerOverCaptureonPointerUponPointerUpCaptureonScrollonScrollCaptureonTouchCancelonTouchCancelCaptureonTouchEndonTouchEndCaptureonTouchMoveonTouchMoveCaptureonTouchStartonTouchStartCaptureonTransitionCancelonTransitionCancelCaptureonTransitionEndonTransitionEndCaptureonTransitionRunonTransitionRunCaptureonTransitionStartonTransitionStartCaptureonWheelonWheelCaptureplacementscrollRefshouldCloseOnInteractOutsideshouldFlipshouldUpdatePositionslotstyletranslatetriggertriggerRefUNSTABLE_portalContainer