docs/components/ui/Picker/Picker.tsx

import React, { useState } from 'react'
import { ActionList, ActionMenu, Box, Details, Text, useDetails } from '@primer/react'
import { ArrowRightIcon, ChevronDownIcon, InfoIcon, LinkExternalIcon } from '@primer/octicons-react'
import cx from 'classnames'

import { Link } from 'components/Link'

export type PickerOptionsTypeT = {
  text: string
  href: string
  locale?: string
  external?: boolean
  arrow?: boolean
  info?: boolean
  selected?: boolean
  onselect?: Function | void
}

export type PickerPropsT = {
  variant?: 'inline'
  apiVersion?: boolean
  defaultText: string
  options: Array<PickerOptionsTypeT>
}

export function Picker({ variant, apiVersion, defaultText, options }: PickerPropsT) {
  const [open, setOpen] = useState(false)
  const { getDetailsProps } = useDetails({ closeOnOutsideClick: true })
  const selectedOption = options.find((opt) => opt.selected === true)

  function getFields() {
    return (
      <ActionList selectionVariant="single">
        {options.map((option) => (
          <ActionList.LinkItem
            as={Link}
            className={option.arrow || option.info ? 'f6' : ''}
            locale={option.locale}
            key={option.text}
            href={option.href}
            onClick={() => {
              if (option.onselect) {
                if (apiVersion) {
                  option.onselect(option.text)
                } else {
                  option.onselect(option.locale)
                }
              }
              setOpen(!open)
            }}
          >
            {option.text}
            {option.external && <LinkExternalIcon size="small" className="ml-1" />}
            {option.info && <InfoIcon verticalAlign="middle" size={15} className="ml-1" />}
            {option.arrow && <ArrowRightIcon verticalAlign="middle" size={15} className="ml-1" />}
          </ActionList.LinkItem>
        ))}
      </ActionList>
    )
  }

  function getInlinePicker() {
    return (
      <Details {...getDetailsProps()} className={cx('position-relative details-reset', 'd-block')}>
        <summary
          className="d-block btn btn-invisible color-fg-default"
          aria-haspopup="true"
          aria-label={selectedOption?.text || defaultText}
        >
          <div className="d-flex flex-items-center flex-justify-between">
            <Text>{selectedOption?.text || defaultText}</Text>
            <ChevronDownIcon size={24} className="arrow ml-md-1" />
          </div>
        </summary>
        <Box>
          <ul>{getFields()}</ul>
        </Box>
      </Details>
    )
  }

  return (
    <React.Fragment>
      {variant === 'inline' ? (
        getInlinePicker()
      ) : (
        <ActionMenu open={open} onOpenChange={setOpen}>
          <ActionMenu.Button
            aria-label={apiVersion ? `Select API version` : `Select field type`}
            variant={apiVersion ? 'default' : 'invisible'}
            sx={{ color: `var(--color-fg-default)`, width: '100%' }}
          >
            <span style={{ fontWeight: 'normal' }}>{`${apiVersion ? `Version: ` : ''}`}</span>
            <span data-testid={apiVersion ? `version` : `field`}>
              {selectedOption?.text || defaultText}
            </span>
          </ActionMenu.Button>
          <ActionMenu.Overlay width="auto" align={apiVersion ? 'center' : 'end'}>
            {getFields()}
          </ActionMenu.Overlay>
        </ActionMenu>
      )}
    </React.Fragment>
  )
}