sandstone/ContextualMenuDecorator

A decorator for adding contextual menus to components.

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

Members

ContextualMenuDecoratorHigher-Order Component

Wraps a component to display a contextual popup menu.

import ContextualMenuDecorator from '@enact/sandstone/ContextualMenuDecorator';
Configuration
noSkin
Boolean

Disables passing the skin prop to the wrapped component.

Default: false
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
ArrayStringArrayObject

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'

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 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'
ArrayBooleanFunctionModuleNumberObjectString