ensure the MappedActionListItem component is a ForwardRef Componenet (#7258)

Author: kendallgassner

.changeset/dry-pets-appear.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Make MappedActionListItem a forwardRef component

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -2,7 +2,7 @@ import type {ScrollIntoViewOptions} from '@primer/behaviors'
 import {scrollIntoView, FocusKeys} from '@primer/behaviors'
 import type {KeyboardEventHandler, JSX} from 'react'
 import type React from 'react'
-import {useCallback, useEffect, useRef, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {ActionList, type ActionListProps} from '../ActionList'
@@ -426,8 +426,7 @@ export function FilteredActionList({
     </div>
   )
 }
-
-function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
+const MappedActionListItem = forwardRef<HTMLLIElement, ItemInput & {renderItem?: RenderItemFn}>((item, ref) => {
   // keep backward compatibility for renderItem
   // escape hatch for custom Item rendering
   if (typeof item.renderItem === 'function') return item.renderItem(item)
@@ -455,6 +454,7 @@ function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
           onAction(item, e as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>)
       }}
       data-id={id}
+      ref={ref}
       {...rest}
     >
       {LeadingVisual ? (
@@ -481,6 +481,6 @@ function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
       ) : null}
     </ActionList.Item>
   )
-}
+})
 
 FilteredActionList.displayName = 'FilteredActionList'

packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx

@@ -475,6 +475,14 @@ export const WithDefaultMessage = () => {
 
 const NUMBER_OF_ITEMS = 1800
 const lotsOfItems = Array.from({length: NUMBER_OF_ITEMS}, (_, index) => {
+  if (index === 5) {
+    return {
+      id: index,
+      text: `This is being used to show what would happen if you returned an item that needed text wrapping`,
+      description: `Description ${index}`,
+      leadingVisual: getColorCircle('#a2eeef'),
+    }
+  }
   return {
     id: index,
     text: `Item ${index}`,
@@ -620,8 +628,10 @@ export const Virtualized = () => {
     getScrollElement: () => scrollContainer ?? null,
     estimateSize: () => DEFAULT_VIRTUAL_ITEM_HEIGHT,
     overscan: 10,
-    debug: true,
     enabled: renderSubset,
+    measureElement: el => {
+      return (el as HTMLElement).scrollHeight
+    },
   })
 
   const virtualizedContainerStyle = useMemo(
@@ -645,6 +655,12 @@ export const Virtualized = () => {
             return {
               ...item,
               key: virtualItem.index,
+              'data-index': virtualItem.index,
+              ref: (node: Element | null) => {
+                if (node && node.getAttribute('data-index')) {
+                  virtualizer.measureElement(node)
+                }
+              },
               style: {
                 position: 'absolute',
                 top: 0,