Expose virtualization Props for SelectPanel

[kendallgassner]

New

This pull request creates filteredActionList props that allows users to add virtualization to the SelectPanel componenet. The new props are:

• focusOutBehavior
• scrollContainerRef
• actionListProps

Wonky issue to avoid when using useVirtualizer

TanStack useVirtualizer, the virtualizer hook used in the provided storybook example, does not work well when the scrollable parent element (i.e. getScrollElement: () => scrollRef.current,) is located in a child component and observed via a ref. If that DOM element isn’t present at the right point in the component lifecycle, the observation needed for scroll and transform calculations in useVirtualizer may not initialize correctly—leading to rendering or virtualization problems. This happens because useVirtualizer depends on the referenced element being available and stable during initial render or specific lifecycle events to set up its observers and calculations correctly.

The workaround: Use a callback ref with useState for the parent element.

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: 8d689d3

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 exposes three new props for the SelectPanel component to enable virtualization support: focusOutBehavior, scrollContainerRef, and actionListProps. These props are passed through to the underlying FilteredActionList component, allowing users to implement virtual scrolling for large datasets using libraries like TanStack Virtual.

Key changes:

• Added @tanstack/react-virtual as a devDependency for Storybook examples
• Exposed three new props in FilteredActionList that are automatically available in SelectPanel via prop spreading
• Created a comprehensive Virtualized example story demonstrating integration with TanStack's useVirtualizer

Reviewed Changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx	Added new Virtualized example story demonstrating virtualization with TanStack Virtual, updated NUMBER_OF_ITEMS constant from 500 to 1800 for better performance demonstration
packages/react/src/FilteredActionList/FilteredActionList.tsx	Added three new props (scrollContainerRef, actionListProps, focusOutBehavior) to support virtualization, updated focus zone configuration and useEffect dependencies
packages/react/package.json	Added @tanstack/react-virtual ^3.13.12 as devDependency for Storybook examples
package-lock.json	Lock file updates for the new TanStack Virtual dependency and its core package
.changeset/salty-geese-say.md	Changeset documenting the minor version bump for exposing virtualization props

[adierkens]

Looks great! Added a few small suggestions

[adierkens]