Menu

<Menu maxWidth={24}>
  <MenuItem
    onClick={() => console.log('onClick Share')}
    icon={<SvgShare />}
  >
    Share
  </MenuItem>
  <MenuItem
    onClick={() => console.log('onClick Archive')}
    icon={<SvgArchive />}
  >
    Archive
  </MenuItem>
  <MenuItem
    onClick={() => console.log('onClick Delete')}
    icon={<SvgTrash />}
    isDisabled
  >
    Delete
  </MenuItem>
</Menu>

<Menu maxWidth={24}>
  <MenuItem isSelected>First</MenuItem>
  <MenuItem>Second</MenuItem>
  <MenuItem>Third</MenuItem>
  <MenuItem>Fourth</MenuItem>
</Menu>

<Menu maxWidth={24}>
  <MenuItem isSelected>First</MenuItem>
  <MenuItem>Second</MenuItem>
  <MenuItem>Third</MenuItem>
  <MenuItem hasDivider>Fourth</MenuItem>
</Menu>

() => {
  const options = [
    { title: 'First', description: demoText.medium, isHighlighted: true },
    { title: 'Second', description: demoText.long, isSelected: true },
    { title: 'Third', description: demoText.short }
  ]
  return (
    <Menu maxWidth={24}>
      {options.map((option, index) => (
        <MenuItem
          key={index}
          isHighlighted={option.isHighlighted}
          isSelected={option.isSelected}
        >
          <Container paddingY="small">
            <Arrange gap="small">
              <Avatar letter={option.title.charAt(0)}/>
              <Container minWidth={0}>
                <Text hasEllipsis>{option.title}</Text>
                <Text
                  size="small"
                  color="bodyDimmed"
                  hasEllipsis
                >
                  {option.description}
                </Text>
              </Container>
            </Arrange>
          </Container>
        </MenuItem>
      ))}
    </Menu>
  )
}

() => {
  const items = [
    { value: 'Saturn' },
    { value: 'Neptune' },
    { value: 'Jupiter' },
    { value: 'Earth', isDisabled: true },
    { value: 'Mars' },
    { value: 'Uranus' },
    { value: 'Pluto' },
    { value: 'Venus' },
    { value: 'Mercury' },
  ]
  return (
    <Downshift
      itemToString={item => (item ? item.value : '')}
      onChange={selection => console.log(selection ? selection.value : 'Selection Cleared')}
    >
      {({
        getToggleButtonProps,
        getItemProps,
        getMenuProps,
        isOpen,
        inputValue,
        highlightedIndex,
        selectedItem,
        getRootProps,
      }) => (
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(
            <Menu
              minWidth={20}
              maxWidth={30}
              maxHeight={30}
              downshiftMenuProps={getMenuProps}
            >
              {items.map((item, index) => (
                <MenuItem
                  {...getItemProps({
                    key: item.value,
                    index,
                    item,
                    disabled: item.isDisabled,
                  })}
                  isHighlighted={highlightedIndex === index}
                  isDisabled={item.isDisabled}
                >
                  {item.value}
                </MenuItem>
              ))}
            </Menu>
          )}
        >
          <div {...getRootProps({}, {suppressRefError: true})}>
            <TextButton
              iconPosition="right"
              icon={<SvgChevronSmallDown />}
              {...getToggleButtonProps()}
            >
              {selectedItem ? selectedItem.value : 'Select an option'}
            </TextButton>
          </div>
        </Popover>
      )}
    </Downshift>
  )
}