export function MixedSelection()

in src/stories/ActionList2/examples.stories.tsx [251:296]
42 lines of code
4 McCabe index (conditional complexity)

export function MixedSelection(): 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 />},
    {text: 'Estimate', icon: <NumberIcon />},
    {text: 'Due Date', icon: <CalendarIcon />}
  ]

  return (
    <>
      <h1>List with mixed selection</h1>

      <p>
        In this list, there is a ActionList.Group with single selection for picking one option, followed by a Item that
        is an action. This pattern appears inside a DropdownMenu for selection view options in Memex
      </p>

      <ActionList>
        <ActionList.Group title="Group by" selectionVariant="single" role="listbox">
          {options.map((option, index) => (
            <ActionList.Item
              key={index}
              selected={index === selectedIndex}
              onSelect={() => setSelectedIndex(index)}
              role="option"
            >
              <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
              {option.text}
            </ActionList.Item>
          ))}
        </ActionList.Group>
        {typeof selectedIndex === 'number' && (
          <>
            <ActionList.Divider />
            <ActionList.Item onSelect={() => setSelectedIndex(null)}>
              <ActionList.LeadingVisual>
                <XIcon />
              </ActionList.LeadingVisual>
              Clear Group by
            </ActionList.Item>
          </>
        )}