limestone/Popup

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

Loading Live Preview

Import Usage

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

Members

Popup   Component

A stateful component that renders a popup in a ui/FloatingLayerui/FloatingLayer.FloatingLayer.

Import Usage

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

Extends: limestone/Popuplimestone/Popup.PopupBase

Properties

noAnimation

Boolean

Disables transition animation.

Default: false

---

noAutoDismiss

Boolean

Indicates that the popup will not trigger onClose when the user presses the cancel/back (e.g. ESC) key or taps outside the popup.

Default: false

---

onClose

Function

Called on:

• pressing ESC key,

• clicking on outside the boundary of the popup, or

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

Event payload:

• pressing ESC key, carries detail property containing inputType value of 'key'.

• clicking outside the boundary of the popup, carries detail property containing inputType value of 'click'.

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 limestone/Popuplimestone/Popup.PopupBase.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''bottom left''bottom right''center''fullscreen''left''right''top''top left''top right'

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'

Popup(  ) → 

A stateful component that renders a popup in a ui/FloatingLayerui/FloatingLayer.FloatingLayer.

0 Params

Returns

PopupBase   Component

The base popup component.

Import Usage

import {PopupBase} from '@enact/limestone/Popup';

Properties

Required Property •  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''bottom left''bottom right''center''fullscreen''left''right''top''top left''top right'

Position of the Popup on the screen.

Default: 'bottom'

---

role

StringObject

The ARIA role for the Popup.

---

spotlightId

String

The container id for spotlight/SpotlightContainerDecorator/#SpotlightContainerDecoratorspotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId.

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 limestone/Popuplimestone/Popup.Popup component only supports 'self-first' and 'self-only'.

Default: 'self-only'