export function SingleSelection()

in src/stories/ActionList2/examples.stories.tsx [95:129]

• 31 lines of code
• 1 McCabe index (conditional complexity)

export function SingleSelection(): JSX.Element {
  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(1)

  const options = [
    {text: 'Status', icon: <IssueOpenedIcon />},
    {text: 'Stage', icon: <TableIcon />},
    {text: 'Assignee', icon: <PeopleIcon />},
    {text: 'Team', icon: <TypographyIcon />, disabled: true},
    {text: 'Estimate', icon: <NumberIcon />},
    {text: 'Due Date', icon: <CalendarIcon />}
  ]

  return (
    <>
      <h1>Single Selection</h1>

      <p>This pattern appears inside a nested DropdownMenu in Memex view options.</p>

      <ActionList aria-label="Group items by" selectionVariant="single" role="listbox">
        {options.map((option, index) => (
          <ActionList.Item
            key={index}
            selected={index === selectedIndex}
            onSelect={() => setSelectedIndex(index)}
            disabled={option.disabled}
            role="option"
          >
            <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
            {option.text}
          </ActionList.Item>
        ))}
      </ActionList>
    </>
  )
}