ActionList.Item accepts a polymorphic 'as' prop

Author: jfuchs

package-lock.json

@@ -45,6 +45,7 @@
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
     "@primer/primitives": "4.7.1",
+    "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",

package.json

@@ -14,6 +14,8 @@ import {
   isActiveDescendantAttribute
 } from '../behaviors/focusZone'
 import {useSSRSafeId} from '@react-aria/ssr'
+import type * as Polymorphic from '@radix-ui/react-polymorphic'
+import {AriaRole} from '../utils/types'
 
 /**
  * These colors are not yet in our default theme.  Need to remove this once they are added.
@@ -48,7 +50,7 @@ const customItemThemes = {
 /**
  * Contract for props passed to the `Item` component.
  */
-export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
+export interface ItemProps extends SxProp {
   /**
    * Primary text which names an `Item`.
    */
@@ -124,6 +126,10 @@ export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
    * An id associated with this item.  Should be unique between items
    */
   id?: number | string
+
+  children?: React.ReactNode
+
+  role?: AriaRole
 }
 
 const getItemVariant = (variant = 'default', disabled?: boolean) => {
@@ -191,6 +197,7 @@ const StyledItem = styled.div<
   color: ${({variant, item}) => getItemVariant(variant, item?.disabled).color};
   // 2 frames on a 60hz monitor
   transition: background 33.333ms linear;
+  text-decoration: none;
 
   @media (hover: hover) and (pointer: fine) {
     :hover {
@@ -315,8 +322,9 @@ const MultiSelectInput = styled.input`
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
-export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.Element {
+const Item = React.forwardRef((itemProps, ref) => {
   const {
+    as: Component,
     text,
     description,
     descriptionVariant = 'inline',
@@ -379,6 +387,8 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
 
   return (
     <StyledItem
+      ref={ref}
+      as={Component}
       tabIndex={disabled ? undefined : -1}
       variant={variant}
       showDivider={showDivider}
@@ -457,4 +467,6 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
       </DividedContent>
     </StyledItem>
   )
-}
+}) as Polymorphic.ForwardRefComponent<'div', ItemProps>
+
+export {Item}

src/ActionList/Item.tsx

@@ -8,7 +8,9 @@ import {get} from '../constants'
 import {SystemCssProperties} from '@styled-system/css'
 import {hasActiveDescendantAttribute} from '../behaviors/focusZone'
 
-export type ItemInput = ItemProps | (Partial<ItemProps> & {renderItem: typeof Item})
+type RenderItemFn = (props: ItemProps) => React.ReactElement
+
+export type ItemInput = ItemProps | (Partial<ItemProps> & {renderItem: RenderItemFn})
 
 /**
  * Contract for props passed to the `List` component.
@@ -34,7 +36,7 @@ export interface ListPropsBase {
    * without a `Group`-level or `Item`-level custom `Item` renderer will be
    * rendered using this function component.
    */
-  renderItem?: typeof Item
+  renderItem?: RenderItemFn
 
   /**
    * A `List`-level custom `Group` renderer. Every `Group` within this `List`
@@ -72,14 +74,14 @@ export interface GroupedListProps extends ListPropsBase {
    */
   groupMetadata: ((
     | Omit<GroupProps, 'items'>
-    | Omit<Partial<GroupProps> & {renderItem?: typeof Item; renderGroup?: typeof Group}, 'items'>
+    | Omit<Partial<GroupProps> & {renderItem?: RenderItemFn; renderGroup?: typeof Group}, 'items'>
   ) & {groupId: string})[]
 
   /**
    * A collection of `Item` props, plus associated group identifiers
    * and `Item`-level custom `Item` renderers.
    */
-  items: ((ItemProps | (Partial<ItemProps> & {renderItem: typeof Item})) & {groupId: string})[]
+  items: ((ItemProps | (Partial<ItemProps> & {renderItem: RenderItemFn})) & {groupId: string})[]
 }
 
 /**
@@ -162,15 +164,14 @@ export const List = React.forwardRef<HTMLDivElement, ListProps>((props, forwarde
   const renderItem = (itemProps: ItemInput, item: ItemInput, itemIndex: number) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const ItemComponent = ('renderItem' in itemProps && itemProps.renderItem) || props.renderItem || Item
-    const key = itemProps.key ?? itemProps.id?.toString() ?? itemIndex.toString()
+    const key = itemProps.id?.toString() ?? itemIndex.toString()
     return (
       <ItemComponent
         showDivider={props.showItemDividers}
         selectionVariant={props.selectionVariant}
         {...itemProps}
         key={key}
         sx={{...itemStyle, ...itemProps.sx}}
-        item={item}
       />
     )
   }

src/ActionList/List.tsx

@@ -12,7 +12,7 @@ import {
   ArrowLeftIcon
 } from '@primer/octicons-react'
 import {Meta} from '@storybook/react'
-import React from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {Label, ThemeProvider} from '..'
 import {ActionList as _ActionList} from '../ActionList'
@@ -362,3 +362,59 @@ export function SizeStressTestingStory(): JSX.Element {
   )
 }
 SizeStressTestingStory.storyName = 'Size Stress Testing'
+
+type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
+const ReactRouterLikeLink = forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
+  ({to, ...props}: {to: string; children: React.ReactNode}, ref) => {
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    return <a ref={ref} href={to} {...props} />
+  }
+)
+
+const NextJSLikeLink = forwardRef(
+  ({href, children}: {href: string; children: React.ReactNode}, ref): React.ReactElement => {
+    const child = React.Children.only(children)
+    const childProps = {
+      ref,
+      href
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return React.cloneElement(child, childProps)
+  }
+)
+
+export function LinkItemStory(): JSX.Element {
+  return (
+    <>
+      <h1>Simple List</h1>
+      <ErsatzOverlay>
+        <ActionList
+          items={[
+            {
+              text: 'A. Vanilla action',
+              renderItem: props => <ActionList.Item onAction={() => alert('hi?')} {...props} />
+            },
+            {
+              text: 'B. Vanilla link',
+              renderItem: props => <ActionList.Item as="a" href="/about" {...props} />
+            },
+            {
+              text: 'C. React Router link',
+              renderItem: props => <ActionList.Item as={ReactRouterLikeLink} to="/about" {...props} />
+            },
+            {
+              text: 'D. NextJS style',
+              renderItem: props => (
+                <NextJSLikeLink href="/about">
+                  <ActionList.Item as="a" {...props} />
+                </NextJSLikeLink>
+              )
+            }
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+LinkItemStory.storyName = 'List with a link item'