export function MultipleSelection()

in src/stories/ActionList2/examples.stories.tsx [141:175]

• 30 lines of code
• 2 McCabe index (conditional complexity)

export function MultipleSelection(): JSX.Element {
  const [assignees, setAssignees] = React.useState(users.slice(0, 2))

  const toggleAssignee = (assignee: typeof users[number]) => {
    const assigneeIndex = assignees.findIndex(a => a.login === assignee.login)

    if (assigneeIndex === -1) setAssignees([...assignees, assignee])
    else setAssignees(assignees.filter((_, index) => index !== assigneeIndex))
  }

  return (
    <>
      <h1>Multi Select List</h1>

      <p>This pattern appears in issues and pull requests to pick multiple assignees</p>

      <ActionList selectionVariant="multiple" showDividers role="listbox" aria-label="Select assignees">
        {users.map(user => (
          <ActionList.Item
            role="option"
            key={user.login}
            selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
            onSelect={() => toggleAssignee(user)}
          >
            <ActionList.LeadingVisual>
              <Avatar src={`https://github.com/${user.login}.png`} />
            </ActionList.LeadingVisual>
            {user.login}
            <ActionList.Description>{user.name}</ActionList.Description>
          </ActionList.Item>
        ))}
      </ActionList>
    </>
  )
}