ensure the MappedActionListItem component is a ForwardRef Componenet

[kendallgassner]

I need to be able to calculate the height of a virtualized item if text overflows. In order to do this I will need to set up a Ref on ActionList.item

Changelog

Ensure MappedActionListItem is a forwardRef component

New

Changed

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 142f013

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR converts the MappedActionListItem component to use React's forwardRef, enabling ref forwarding to the underlying ActionList.Item component. This change supports virtualization with dynamic height measurement in the SelectPanel component, allowing proper calculation of item heights when text wraps.

Key Changes:

• Converted MappedActionListItem from a regular function to a forwardRef component with proper TypeScript typing (forwardRef<HTMLLIElement, ItemInput & {renderItem?: RenderItemFn}>)
• Updated the Virtualized story in SelectPanel to demonstrate dynamic height measurement using refs and the TanStack Virtual library
• Added a test item with long text to showcase text wrapping behavior

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/react/src/FilteredActionList/FilteredActionList.tsx	Converted MappedActionListItem to a forwardRef component and added ref prop forwarding to ActionList.Item
packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx	Enhanced virtualization example with dynamic height measurement using measureElement, added test item with wrapping text, and removed debug flag
.changeset/dry-pets-appear.md	Added changeset documenting the minor version change

---

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

[Copilot]

[nitpick] Consider adding a displayName to the MappedActionListItem component for better debugging experience in React DevTools. While it's an internal component, setting displayName is a best practice for forwardRef components in this codebase.

Example:

const MappedActionListItem = forwardRef<HTMLLIElement, ItemInput & {renderItem?: RenderItemFn}>((item, ref) => {
  // ... component implementation
})

MappedActionListItem.displayName = 'MappedActionListItem'

Suggested change

	})
	})
	MappedActionListItem.displayName = 'MappedActionListItem'