ActionMenu

import React from 'react'
import {ActionList, ActionMenu} from '@primer/react'


const items = [{label: 'Item one'}, {label: 'Item two'}, {label: 'Item three'}]


export default function SingleSelect() {
  const [selectedIndex, setSelectedIndex] = React.useState(0)


  return (
    <ActionMenu>
      <ActionMenu.Button>Open menu</ActionMenu.Button>
      <ActionMenu.Overlay>
        <ActionList selectionVariant="single" role="menu" aria-label="Item">
          {items.map((item, index) => (
            <ActionList.Item
              key={index}
              role="menuitemradio"
              selected={index === selectedIndex}
              aria-checked={index === selectedIndex}
              onSelect={() => setSelectedIndex(index)}
            >
              {item.label}
            </ActionList.Item>
          ))}
        </ActionList>
      </ActionMenu.Overlay>
    </ActionMenu>
  )
}

import React from 'react'
import {ActionList, ActionMenu} from '@primer/react'


const items = [{label: 'Item one'}, {label: 'Item two'}, {label: 'Item three'}]


export default function MultiSelect() {
  const [selectedIndices, setSelectedIndices] = React.useState<number[]>([0])
  const handleSelect = (index: number) => {
    if (selectedIndices.includes(index)) {
      setSelectedIndices(selectedIndices.filter(i => i !== index))
    } else {
      setSelectedIndices([...selectedIndices, index])
    }
  }


  return (
    <ActionMenu>
      <ActionMenu.Button>Open menu</ActionMenu.Button>
      <ActionMenu.Overlay>
        <ActionList selectionVariant="multiple" role="menu" aria-label="Item">
          {items.map((item, index) => (
            <ActionList.Item
              key={index}
              role="menuitemcheckbox"
              selected={selectedIndices.includes(index)}
              aria-checked={selectedIndices.includes(index)}
              onSelect={() => handleSelect(index)}
            >
              {item.label}
            </ActionList.Item>
          ))}
        </ActionList>
      </ActionMenu.Overlay>
    </ActionMenu>
  )
}

import React from 'react'
import {ActionList, ActionMenu} from '@primer/react'


export default function Dividers() {
  return (
    <ActionMenu>
      <ActionMenu.Button>Options</ActionMenu.Button>
      <ActionMenu.Overlay>
        <ActionList showDividers aria-label="Watch preference options">
          <ActionList.Item
            onSelect={() => {
              alert('Item one clicked')
            }}
          >
            Item one
            <ActionList.Description variant="block">
              Description about item one that is kind of long and bulky
            </ActionList.Description>
          </ActionList.Item>
          <ActionList.Item
            onSelect={() => {
              alert('Item two clicked')
            }}
          >
            Item two
            <ActionList.Description variant="block">
              A long and bulky description for the second item
            </ActionList.Description>
          </ActionList.Item>
          <ActionList.Item
            onSelect={() => {
              alert('Item three clicked')
            }}
          >
            Item three
            <ActionList.Description variant="block">
              One last and long bulky description we will use for the third item
            </ActionList.Description>
          </ActionList.Item>
        </ActionList>
      </ActionMenu.Overlay>
    </ActionMenu>
  )
}

import React from 'react'
import {ActionList, ActionMenu, Button} from '@primer/react'


function ListItemWithContextMenu({children}: {children: string}) {
  const handleContextMenu: React.MouseEventHandler<HTMLElement> = event => {
    event.preventDefault()
    setOpen(true)
  }


  const [open, setOpen] = React.useState(false)
  const triggerRef = React.useRef<HTMLButtonElement>(null)


  return (
    <li onContextMenu={handleContextMenu}>
      <ActionMenu open={open} onOpenChange={setOpen} anchorRef={triggerRef}>
        <ActionMenu.Anchor>
          <Button ref={triggerRef} variant="invisible" onClick={handleContextMenu}>
            {children}
          </Button>
        </ActionMenu.Anchor>
        <ActionMenu.Overlay>
          <ActionList>
            <ActionList.Item>Menu item one</ActionList.Item>
            <ActionList.Item>Menu item two</ActionList.Item>
            <ActionList.Item>Menu item three</ActionList.Item>
          </ActionList>
        </ActionMenu.Overlay>
      </ActionMenu>
    </li>
  )
}


export default function ContextMenu() {
  return (
    <>
      <div>Right click the list items below to see the context menu</div>


      <ul>
        <ListItemWithContextMenu>List item one</ListItemWithContextMenu>
        <ListItemWithContextMenu>List item two</ListItemWithContextMenu>
        <ListItemWithContextMenu>List item three</ListItemWithContextMenu>
      </ul>
    </>
  )
}