Show: Inherited Protected Private Deprecated

# ButtonCommandsList Class

Uses:

- WidgetFocusManager

Defined in: `src/ui/react/src/components/buttons/button-commands-list.jsx:4`

The ButtonCommandsList class provides functionality for showing a list of commands that can be executed to the current selection..

## Index

### Methods

- _getFocusAction
- _getFocusDismissAction
- _getFocusMoveDirection
- _isValidKey
- _moveFocus
- _refresh
- _renderActions
- componentDidMount
- componentDidUpdate
- focus
- getDefaultProps
- handleKey
- moveFocus
- render

### Properties

- circular
- commands
- descendants
- editor
- focusFirstChild
- key static
- keys
- listId
- onDismiss

## Methods

### `_getFocusAction`

(

- `event`

)
Object protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:150`

Returns the action, if any, that a keyboard event in the current focus manager state should produce.

#### Parameters:

- `event` Object

  The Keyboard event.

#### Returns:

Object:

An action object with type and direction properties.

### `_getFocusDismissAction`

(

- `event`
- `focusMoveDirection`

)
Object protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:183`

Returns the dismiss action, if any, the focus manager should execute to yield the focus. This will happen in any of these scenarios if a dismiss callback has been specified:

- A dismiss key has been pressed
- In a non-circular focus manager, when:
  - The active descendant is the first one and a prev key has been pressed.
  - The active descendant is the last one and a next key has been pressed.

#### Parameters:

- `event` Object

  The Keyboard event.

- `focusMoveDirection` Number

  The focus movement direction (if any).

#### Returns:

Object:

A dismiss action with dismiss and direction properties.

### `_getFocusMoveDirection`

(

- `event`

)
Number protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:227`

Returns the direction, if any, in which the focus should be moved. In presence of the shift key modifier, the direction of the movement is inverted.

#### Parameters:

- `event` Object

  The Keyboard event.

#### Returns:

Number:

The computed direction of the expected focus movement.

### `_isValidKey`

(

- `keyCode`
- `keys`

)
Boolean protected

Inherited from WidgetFocusManager but overwritten in `src/ui/react/src/components/base/widget-focus-manager.js:253`

Indicates if a given keyCode is valid for the given set of keys.

#### Parameters:

- `keyCode` Number

  An event keyCode.

- `keys` Array | Number

  A key set. Can be a number an array of numbers representing the allowed keyCodes.

#### Returns:

Boolean:

A boolean value indicating if the key is valid.

### `_moveFocus`

(

- `direction`

)
protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:282`

Moves the focus among descendants in the especified direction.

#### Parameters:

- `direction` Number

  The direction (1 or -1) of the focus movement among descendants.

### `_refresh`

() protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:312`

Refreshes the descendants list by executing the CSS selector again and resets the descendants tabIndex.

### `_renderActions`

() Array protected

Defined in `src/ui/react/src/components/buttons/button-commands-list.jsx:98`

Renders instances of ButtonCommandListItem with the description of the row action that will be executed.

#### Returns:

Array:

Rendered instances of ButtonCommandListItem class

### `componentDidMount`

()

Inherited from WidgetFocusManager but overwritten in `src/ui/react/src/components/buttons/button-commands-list.jsx:51`

Lifecycle. Invoked once, only on the client, immediately after the initial rendering occurs.

Focuses on the list node to allow keyboard interaction.

### `componentDidUpdate`

()

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:73`

Lifecycle. Invoked immediately after the component's updates are flushed to the DOM. Refreshes the descendants list.

### `focus`

()

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:83`

Focuses the current active descendant.

Several Widgets can be nested in a component hierarchy by attaching this focus method to the widget DOM node, transferring the DOM focus control to the inner FocusManager.

### `getDefaultProps`

() Object

Defined in `src/ui/react/src/components/buttons/button-commands-list.jsx:62`

Lifecycle. Returns the default values of the properties used in the widget.

#### Returns:

Object:

The default properties.

### `handleKey`

(

- `event`

)

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:113`

Handles the key events on a DOM node to execute the appropriate navigation when needed.

#### Parameters:

- `event` Object

  The Keyboard event that was detected on the widget DOM node.

### `moveFocus`

(

- `direction`

)

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:138`

Moves the focus among descendants in the especified direction.

#### Parameters:

- `direction` Number

  The direction (1 or -1) of the focus movement among descendants.

### `render`

() Object

Defined in `src/ui/react/src/components/buttons/button-commands-list.jsx:82`

Lifecycle. Renders the UI of the list.

#### Returns:

Object:

The content which should be rendered.

## Properties

### `circular`

Boolean

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:34`

Indicates if focus should be set to the first/last descendant when the limits are reached.

### `commands`

Array

Defined in `src/ui/react/src/components/buttons/button-commands-list.jsx:17`

List of the commands the button is able to handle.

### `descendants`

String

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:47`

String representing the CSS selector used to define the elements that should be handled.

### `editor`

Object

Defined in `src/ui/react/src/components/buttons/button-commands-list.jsx:24`

The editor instance where the component is being used.

### `focusFirstChild`

Boolean

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:41`

Indicate if should focus the first child of a container

### `key`

String static

Defined in `src/ui/react/src/components/buttons/button-commands-list.jsx:41`

The name which will be used as an alias of the button in the configuration.

Default: buttonCommandsList

### `keys`

Object

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:54`

Object representing the keys used to navigate between descendants. The format for the prop is: `{dismiss: value, dismissNext: value, dismissPrev: value, next: value, prev: value}` where value can be both a number or an array of numbers with the allowed keyCodes.

### `listId`

String

Defined in `src/ui/react/src/components/buttons/button-commands-list.jsx:31`

List id to be used for accessibility purposes such as aria-owns.

### `onDismiss`

Function

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:22`

Callback method to be invoked when the focus manager is to be dismissed. This happens in the following scenarios if a dismiss callback has been specified:

- A dismiss key has been pressed
- In a non-circular focus manager, when:
  - The active descendant is the first one and a prev key has been pressed.
  - The active descendant is the last one and a next key has been pressed.