Create ActionList Component

[scurker]

ActionList is a primitive component that provides a list of options. It is intended to be a replacement for the existing OptionsMenuList component as a standalone component.

Related:

• Create ActionMenu Component #1716
• Create ActionListItem Component #1718
• Create ActionListGroup component #1740

Implementation

Context

The action list state should be passed down to descendants via an ActionListContext that includes the current selection type:

type ActionListContext = {
  selectionType?: 'single' | 'multiple'
  onAction: (key: string, event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;
}

This context can be provided to descendent components via a useActionList hook.

ActionList

The action list is a container element with no direct associated styles to primarily contain ActionListItem, ActionListLinkItem, ActionListSeparator or ActionListGroup components.

interface ActionList extends React.HTMLAttributes<HTMLUListElement> {

  children: Array<ActionListItem | ActionListLinkItem | ActionListGroup>

  /** Limits the amount of selections that can be made within an action list */
  selectionType?: 'single' | 'multiple'

  /** A callback function that is called when an action list item is selected. */
  onAction?: (key: string, event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;

}

Keyboard Behaviors

Important

TODO: Spec out keyboard behaviors, focus behaviors, etc. Are there existing utilities/patterns we can utilize from other Cauldron components?