Skip to content

refactor: Move list rendering and helpers into internal listbox - #5178

Merged
amanabiy merged 1 commit into
mainfrom
refactor/move-option-list-helper
Oct 23, 2026
Merged

amanabiy merged 1 commit into
mainfrom
refactor/move-option-list-helper

Conversation

@amanabiy

@amanabiy amanabiy commented Oct 22, 2026 •

Copy link
Copy Markdown
Member

Description

We're adding the OptionList component. Docs: CUJAl2wq1b6Z and 5evHnSwN7iHe

Plan: OptionList is a list like the ones inside Select and Multiselect, but that list code lives in
Select's private folders today. Instead of OptionList depending on Select's internals, the three components
will share one internal list engine in src/internal/components/listbox/. To keep each change small,
reviewable and safe to revert, we get there in steps:

  1. refactor: Move list rendering and helpers into internal listbox #5178 Move the shared list helpers out of src/select (no behaviour change) - this PR
  2. refactor: share selection logic between Select and Multiselect #5179 Add shared selection models (no callers yet)
  3. feat: Add OptionList component #5180 Add OptionList on the new engine (Select and Multiselect unchanged)
  4. Later: move Select, then Multiselect, onto the engine, and remove the old Select-only code

Related links, issue #, if available: Docs: CUJAl2wq1b6Z and 5evHnSwN7iHe

How has this been tested?

All previous tests are working as expected

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Pure move with no behaviour change. First PR of the OptionList/listbox
stack, built on main. The options-list rename is not included.

Moves the shared list rendering parts and helpers from src/select into
src/internal/components/listbox (parts/common, parts/option-group,
parts/get-item-props, parts/render-options, parts/scroll-to-index,
use-announcement, utils/connect-options, utils/check-option-value-field,
plus their unit tests). Only import specifiers changed in consumers
(select, multiselect, autosuggest, prompt-input). No SCSS moved and no
CSS-module class names or test-utils selectors changed.

Stayed in src/select:
- parts/item.tsx (and multiselect-item.tsx): depend on
  select/parts/styles.scss and are rewritten rather than moved later in
  the stack, so they are deferred to a later PR.
- parts/plain-list.tsx, parts/virtual-list.tsx: Select-specific list
  wrappers; they only had their imports updated.
- utils/use-native-search.ts: Select-only typeahead behaviour, not part
  of the shared listbox.
- utils/use-select.ts, use-load-items.ts, dropdown-customization.tsx:
  Select-specific state and customization.
@amanabiy
amanabiy requested a review from a team as a code owner October 22, 2026 11:52
@amanabiy
amanabiy requested review from ernst-dev and pan-kot and a balanced review from Copilot and removed request for a team and ernst-dev October 22, 2026 11:52

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

Static review supports a consistent, behavior-preserving relocation with no blocking issues identified; automated tests were not run.

No open issues 🎉

What changed in this PR

Moves shared list-rendering code and helpers from Select into the internal listbox directory, preparing for the OptionList component without changing behavior or public APIs.

Changes:

  • Relocates rendering helpers, option utilities, announcements, and associated unit tests.
  • Updates imports in Select, Multiselect, Autosuggest, and PromptInput.
  • Keeps Select-specific wrappers, item components, styles, and selectors unchanged.
File Description
src/​select/​utils/​use-select.ts Imports relocated option-matching helper.
src/​select/​parts/​virtual-list.tsx Imports relocated rendering and scrolling helpers.
src/​select/​parts/​plain-list.tsx Imports relocated rendering and scrolling helpers.
src/​select/​internal.tsx Updates announcement and validation imports.
src/​prompt-input/​components/​menu-dropdown.tsx Updates announcement import.
src/​multiselect/​use-multiselect.tsx Updates shared helper imports.
src/​internal/​components/​listbox/​utils/​connect-options.ts Relocates option-matching utilities.
src/​internal/​components/​listbox/​utils/​check-option-value-field.ts Relocates option-value validation.
src/​internal/​components/​listbox/​use-announcement.ts Relocates announcement hook.
src/​internal/​components/​listbox/​parts/​scroll-to-index.ts Relocates scrolling helper.
src/​internal/​components/​listbox/​parts/​render-options.tsx Relocates shared option rendering.
src/​internal/​components/​listbox/​parts/​option-group.tsx Relocates group rendering while retaining Select styles.
src/​internal/​components/​listbox/​parts/​get-item-props.ts Relocates item-property helper.
src/​internal/​components/​listbox/​parts/​common.ts Relocates fallback item-height constant.
src/​internal/​components/​listbox/​__tests__/​use-announcement.test.ts Relocates announcement tests and updates imports.
src/​internal/​components/​listbox/​__tests__/​scroll-to-index.test.ts Relocates scrolling tests and updates import.
src/​internal/​components/​listbox/​__tests__/​get-item-props.test.ts Relocates item-property tests and updates imports.
src/​internal/​components/​listbox/​__tests__/​connect-options.test.ts Places option-matching tests alongside relocated utilities.
src/​autosuggest/​options-list.tsx Updates announcement import.
src/​autosuggest/​internal.tsx Updates option-value validation import.

Review effort: Balanced

@codecov

codecov Bot commented Oct 22, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.73%. Comparing base (347d271) to head (9306cae).
⚠️ Report is 10 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #5178   +/-   ##
=======================================
  Coverage   97.73%   97.73%           
=======================================
  Files         996      996           
  Lines       32152    32219   +67     
  Branches    11860    11906   +46     
=======================================
+ Hits        31424    31490   +66     
- Misses        722      723    +1     
  Partials        6        6           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The scoped relocation preserves existing logic, consistently updates affected imports, and has no identified blocking issues.

No open issues 🎉

Review effort: Balanced

@amanabiy
amanabiy requested a review from a team October 22, 2026 13:20
@amanabiy
amanabiy marked this pull request as draft October 22, 2026 13:20
@amanabiy
amanabiy marked this pull request as ready for review October 22, 2026 13:20
@amanabiy
amanabiy requested review from ernst-dev and removed request for a team October 22, 2026 13:21
@amanabiy
amanabiy added this pull request to stack #5183 October 22, 2026 15:17
@amanabiy
amanabiy added this pull request to the merge queue Oct 23, 2026
Merged via the queue into main with commit c07a7e3 Oct 23, 2026
73 checks passed
@amanabiy
amanabiy deleted the refactor/move-option-list-helper branch October 23, 2026 08:45

This branch was successfully deployed

3 active deployments
dev-pages-react16 — 9306cae1 Deployed Oct 22, 2026 by amanabiy via deploy (React 16) / deploy #2921
dev-pages-react18 — 9306cae1 Deployed Oct 22, 2026 by amanabiy via deploy (React 18) / deploy #2921
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants