Enact
Edit on GitHub

sandstone/Popup

Modal component that appears at the bottom of the screen and takes up the full screen width.

import Popup from '@enact/sandstone/Popup';

Members

PopupComponent

A stateful component that renders a popup in a FloatingLayer.

import Popup from '@enact/sandstone/Popup';
Properties
closeButtonAriaLabel
String

Hint string read when focusing the popup close button.

Default: 'Close'
noAnimation
Boolean

Disables transition animation.

Default: false
noAutoDismiss
Boolean

Indicates that the popup will not trigger onClose on the ESC key press.

Default: false
onClose
Function

Called on:

  • pressing ESC key,

  • clicking on the close button, or

  • moving spotlight focus outside the boundary of the popup when spotlightRestrict is 'self-first'.

It is the responsibility of the callback to set the open property to false.

onHide
Function

Called after hide transition has completed, and immediately with no transition.

onKeyDown
Function

Called when a key is pressed.

onShow
Function

Called after show transition has completed, and immediately with no transition.

Note: The function does not run if Popup is initially opened and noAnimation is true.

open
Boolean

Controls the visibility of the Popup.

By default, the Popup and its contents are not rendered until open.

Default: false
position
'bottom''center''fullscreen''left''right''top'

Position of the Popup on the screen.

Default: 'bottom'
scrimType
'transparent''translucent''none'

Scrim type.

  • Values: 'transparent', 'translucent', or 'none'.

'none' is not compatible with spotlightRestrict of 'self-only', use a transparent scrim to prevent mouse focus when using popup.

Default: 'translucent'
spotlightRestrict
'self-first''self-only'

Restricts or prioritizes navigation when focus attempts to leave the popup.

  • Values: 'self-first', or 'self-only'.

When using self-first, attempts to leave the popup via 5-way will fire onClose based on the following values of position:

  • 'bottom' - When leaving via 5-way up

  • 'top' - When leaving via 5-way down

  • 'left' - When leaving via 5-way right

  • 'right' - When leaving via 5-way left

  • 'center' - When leaving via any 5-way direction

Note: If onClose is not set, then this has no effect on 5-way navigation. If the popup has no spottable children, 5-way navigation will cause the Popup to fire onClose.

Default: 'self-only'

PopupBaseComponent

The base popup component.

import {PopupBase} from '@enact/sandstone/Popup';
Properties
children •
Node

The contents to be displayed in the body of the popup.

aria-live
StringObject

Set the priority with which screen reader should treat updates to live regions for the Popup.

noAnimation
Boolean

Disables transition animation.

Default: false
onHide
Function

Called after the popup's "hide" transition finishes.

onShow
Function

Called after the popup's "show" transition finishes.

open
Boolean

Controls the visibility of the Popup.

By default, the Popup and its contents are not rendered until open.

Default: false
position
'bottom''center''fullscreen''left''right''top'

Position of the Popup on the screen.

Default: 'bottom'
role
StringObject

The ARIA role for the Popup.

spotlightId
String

The container id for spotlight/Spotlight.

Default: null
spotlightRestrict
'none''self-first''self-only'

Restricts or prioritizes navigation when focus attempts to leave the popup.

It can be either 'none', 'self-first', or 'self-only'.

Note: The ready-to-use Popup component only supports 'self-first' and 'self-only'.

Default: 'self-only'
ArrayBooleanFunctionModuleNumberObjectString