The "default" appearance is used for standard popups. The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".

This controls whether the popup takes focus when opening. This changes the popupComponent component tabIndex to null. The default is true.

The boundary element that the popup will check for overflow. The default is "clippingParents" which are parent scroll containers, but can be set to any element.

@private No-op when platform-dst-top-layer is enabled — the viewport is the natural boundary for top-layer elements.

Render props for content that is displayed inside the popup.

This is a list of backup placements for the popup to try. When the preferred placement doesn't have enough space, the modifier will test the ones provided in the list, and use the first suitable one. If no fallback placements are suitable, it reverts back to the original placement.

@private No-op when platform-dst-top-layer is enabled — CSS Anchor Positioning generates fallbacks automatically via position-try-fallbacks.

ID that is assigned to the popup container element.

Use this to either show or hide the popup. When set to false the popup will not render anything to the DOM.

Refers to an aria-label attribute. Sets an accessible name for the popup to announce it to users of assistive technology. Usage of either this, or the titleId attribute is strongly recommended.

Additional modifiers and modifier overwrites. for more details - https://popper.js.org/docs/v1/#modifiers

The distance the popup should be offset from the reference in the format of [along, away] (units in px). The default is [0, 8], which means the popup will be 8px away from the edge of the reference specified by the placement prop.

@private Note: when platform-dst-top-layer is enabled, both the along and away values are passed through to the top-layer placement (via fromLegacyPlacement), matching the legacy popper-js behaviour.

Handler that is called when the popup wants to close itself. This can happen when:

• the user clicks away from the popup
• the user presses the escape key
• the popup is closed programatically. In this case, the event argument will be null.

You'll want to use this to set open state accordingly, and then pump it back into the isOpen prop.

Placement of where the popup should be displayed relative to the trigger element. The default is "auto".

The element that is shown when isOpen prop is true. The result of the content prop will be placed as children here. The default is an element with an elevation of e200 with no padding.

Use this to set the accessibility role for the popup. We strongly recommend using only menu or dialog. Must be used along with label or titleId.

The root boundary that the popup will check for overflow. The default is "viewport" but it can be set to "document".

@private No-op when platform-dst-top-layer is enabled — the viewport is the natural boundary for top-layer elements.

This makes the popup close on Tab key press. It will only work when shouldRenderToParent is true. The default is false.

@private No-op when platform-dst-top-layer is enabled — focus trapping is role-based in the top-layer path.

This fits the popup width to its parent's width. When set to true, the trigger and popup elements will be wrapped in a div with position: relative. The popup will be rendered as a sibling to the trigger element, and will be full width. The default is false.

This fits the popup width to its parent's width. When set to true, the trigger and popup elements will be wrapped in a div with position: relative. The popup will be rendered as a sibling to the trigger element, and will be full width. The default is false.

Determines if the popup will have a max-width and max-height set to constrain it to the viewport.

Allows the popup to be placed on the opposite side of its trigger if it doesn't fit in the viewport. The default is true.

@private No-op when platform-dst-top-layer is enabled — CSS Anchor Positioning handles flipping natively via position-try-fallbacks.

Allows consumers to ignore specific close events, for example when an external overlay should be treated as part of the popup interaction.

The root element where the popup should be rendered. Defaults to false.

@private No-op when platform-dst-top-layer is enabled — content always renders in the browser's top layer. The root element where the popup should be rendered. Defaults to false.

@private @deprecated No-op when platform-dst-top-layer is enabled — content always renders in the browser's top layer.

This determines whether the popup trigger will be focused when the popup content closes. The default is true.

This controls if the event which handles clicks outside the popup is be bound with capture: true.

This controls the positioning strategy to use. Can vary between absolute and fixed. The default is fixed.

@private No-op when platform-dst-top-layer is enabled — CSS Anchor Positioning replaces Popper's positioning strategy. This controls the positioning strategy to use. Can vary between absolute and fixed. The default is fixed.

@private @deprecated No-op when platform-dst-top-layer is enabled — CSS Anchor Positioning replaces Popper's positioning strategy.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Id referenced by the popup aria-labelledby attribute. Usage of either this, or the label attribute is strongly recommended.

Render props used to anchor the popup to your content. Make this an interactive element, such as an @atlaskit/button component.

Bounded style overrides.

Z-index that the popup should be displayed in. This is passed to the portal component. The default is 400.

@private No-op when platform-dst-top-layer is enabled — the browser's top layer manages stacking without z-index.