ActionList.Item should accept a ref

[jclem]

I'm proposing using forwardRef in ActionList.Item.

There may be a simpler way of doing this, but when attempting to wrap an ActionList.Item in a Next.js link like so:

import NextLink from 'next/link'
import {Item, ItemProps} from '@primer/components/lib/ActionList/Item'

export const MyComponent = (itemProps: ItemProps) => (
  <NextLink href="/foo" passHref>
    <Item as="a" {...itemProps} />
  </NextLink>
)

...a warning is emitted because NextLink tries to pass a ref to its child. I expect use cases like this to be somewhat common with ActionList.Item, so I'm wondering if it makes sense to use forwardRef in ActionList.Item.

My current workaround for this issue works okay, but it involves adding extraneous DOM elements (it also doesn't actually have the ref in the right place, but it avoids the warning for now):

import {ItemProps} from '@primer/components/lib/ActionList'
import {Item} from '@primer/components/lib/ActionList/Item'
import {ComponentType, forwardRef} from 'react'

// Add "as" back to Item props
// SEE: https://github.com/primer/react/issues/1413
type FixedItemProps = ItemProps & {as?: string | React.ComponentType<unknown>}
type FixedItem = ComponentType<FixedItemProps>
export const FixedItem = Item as FixedItem

export const FixedActionListItem = forwardRef<HTMLDivElement, FixedItemProps>(
  (props, ref) => (
    <div ref={ref}>
      <FixedItem {...props} />
    </div>
  )
)

FixedActionListItem.displayName = 'FixedActionListItem'