src/tools/components/Fields.tsx

import { ActionList } from '@primer/react'
import React, { ReactNode } from 'react'
import cx from 'classnames'

import { PickerItem } from './Picker'

import styles from './Fields.module.scss'

export const Fields = (fieldProps: {
  open: boolean
  setOpen: React.Dispatch<React.SetStateAction<boolean>>
  items: PickerItem[]
  onSelect?: (item: PickerItem) => void
  renderItem?: (item: PickerItem) => ReactNode | string
}) => {
  const { open, setOpen, items, onSelect, renderItem } = fieldProps

  return (
    <ActionList selectionVariant="single" role="menu">
      {items.map((item, i) =>
        item.divider ? (
          <ActionList.Divider key={`divider${i}`} />
        ) : (
          <ActionList.LinkItem
            as="a"
            key={item.text}
            href={item.href}
            active={item.selected === true}
            onSelect={() => {
              if (onSelect) onSelect(item)
              setOpen(!open)
            }}
            // These extra links in the pickers are not a part of the selection variant
            // in that they are generally external links, so we want to remove the selection
            // variant span box in front of it. To date there isn't a possibility to have
            // an ActionMenu in Primer that allow non-selection variant items with selection
            // variant items
            className={cx(
              (item.extra?.arrow || item.extra?.info) && styles.extrasDisplay,
              styles.linkItem,
            )}
            role={item.extra?.arrow || item.extra?.info ? 'menuitem' : 'menuitemradio'}
          >
            {renderItem ? renderItem(item) : item.text}
          </ActionList.LinkItem>
        ),
      )}
    </ActionList>
  )
}