limestone/ContextualMenuDecorator

A decorator for adding contextual menus to components.

Import Usage

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

Members

ContextualMenuDecorator   Higher-Order Component

Wraps a component to display a contextual popup menu.

Import Usage

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

Includes: ui/Toggleableui/Toggleable.Toggleable
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable
Includes: limestone/ContextualPopupDecoratorlimestone/ContextualPopupDecorator.ContextualPopupDecorator

Configuration

noSkin

Boolean

Disables passing the skin prop to the wrapped component.

Default: false

See: limestone/Skinnablelimestone/Skinnable.Skinnable.skin

---

openProp

String

The prop in which to pass the value of open state of ContextualMenuDecorator to the wrapped component.

Default: 'selected'

Properties added to wrapped component

direction

'above''above center''above left''above right''below''below center''below left''below right''left middle''left top''left bottom''right middle''right top''right bottom'

Direction of popup with respect to the wrapped component.

Default: 'below right'

---

menuItems

Array(String)Array(any)

The items to be displayed in the ContextualMenuDecorator when open.

Takes either an array of strings or an array of objects. When strings, the values will be used in the generated components as the readable text. When objects, the properties will be passed onto an Item component and children as well as a unique key property are required.

---

offset

'none''overlap''small''large'

Offset from the activator to apply to the position of the popup.

Default: 'overlap'

---

onClose

Function

Called when the user has attempted to close the popup.

This may occur either when the close button is clicked or when spotlight focus moves outside the boundary of the popup. Setting spotlightRestrict to 'self-only' will prevent Spotlight focus from leaving the popup.

---

onOpen

Function

Called when the popup is opened.

---

popupClassName

String

CSS class name to pass to the limestone/ContextualPopupDecoratorlimestone/ContextualPopupDecorator.ContextualPopup.

This is commonly used to set width and height of the popup.

---

popupProps

Object

An object containing properties to be passed to popup component.

---

spotlightRestrict

'none''self-first''self-only'

Restricts or prioritizes spotlight navigation.

Allowed values are:

• 'none' - Spotlight can move freely within and beyond the popup

• 'self-first' - Spotlight should prefer components within the popup over components beyond the popup, or

• 'self-only' - Spotlight can only be set within the popup

Default: 'self-only'