export function MixedSelection()

in src/stories/DropdownMenu2/examples.stories.tsx [189:240]
47 lines of code
6 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}
  ]

  const selectedOption = selectedIndex && options[selectedIndex]

  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>

      <DropdownMenu>
        <DropdownMenu.Button aria-label="Select field type" leadingIcon={selectedOption && selectedOption.icon}>
          {selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
        </DropdownMenu.Button>
        <DropdownMenu.Overlay width="medium">
          <ActionList role="none">
            <ActionList.Group title="Group by" role="menu">
              {options.map((option, index) => (
                <ActionList.Item
                  key={index}
                  selected={index === selectedIndex}
                  onSelect={() => setSelectedIndex(index)}
                >
                  <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
                  {option.text}
                </ActionList.Item>
              ))}
            </ActionList.Group>
            {typeof selectedIndex === 'number' && (
              <ActionList.Group role="menu">
                <ActionList.Divider />
                <ActionList.Item onSelect={() => setSelectedIndex(null)} role="menuitem">
                  <ActionList.LeadingVisual>
                    <XIcon />
                  </ActionList.LeadingVisual>
                  Clear Group by
                </ActionList.Item>
              </ActionList.Group>
            )}