refactor(select): migrate Select from Flow to TypeScript

[bonchevskyi]

Convert Select component to TypeScript

This PR converts src/components/select from JavaScript with Flow to TypeScript.

Changes

• Converted Select.js to Select.tsx with exported SelectProps interface
• Converted index.js to index.ts, re-exporting the component and its types
• Converted Select.stories.js to Select.stories.tsx
• Converted __tests__/Select.test.js to Select.test.tsx
• Created .js.flow files for backward compatibility
• Added Select exports to src/components/index.ts

Testing

• Ran tests for src/components/select; all 13 pass with snapshots matching previous output
• yarn lint:ts and yarn flow check pass

Summary by CodeRabbit

• New Features
  • Added a reusable Select input with labels, validation errors, disabled states, customizable options, and standard select attributes.
  • Added optional informational tooltips with localized “More Info” text.
  • Made the Select component available through the shared component library exports.
  • Made the Select field name optional for greater flexibility.
• Tests
  • Updated coverage for tooltip interactions and validation display states.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

Added a typed Select component with Flow compatibility, validation and tooltip support, localized messages, updated tests, and public barrel exports.

Changes

Select component

Layer / File(s)	Summary
Select component and types src/components/select/Select.tsx, src/components/select/Select.js.flow	Select supports native select props, labels, error states, disabled styling, option children, change handling, and optional informational tooltips.
Select behavior validation src/components/select/__tests__/Select.test.tsx	Tests cover length assertions, option counts, tooltip interaction, and error fixture names.
Module exports and localization src/components/select/index.ts, src/components/select/index.js.flow, src/components/index.ts, src/components/select/messages.ts, src/components/select/messages.js.flow	Entry points re-export Select and SelectProps. Localized “More Info” messages are defined for TypeScript and Flow.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Select
  participant PlainButton
  participant Tooltip
  User->>Select: Render select and optional info control
  User->>PlainButton: Click info control
  PlainButton->>Select: Trigger tooltip visibility update
  Select->>Tooltip: Render updated tooltip state

Loading

Possibly related PRs

• box/box-ui-elements#4723: Migrates another component to TypeScript and adds barrel exports.
• box/box-ui-elements#4728: Migrates another component from Flow to TypeScript and adds component exports.
• box/box-ui-elements#4757: Migrates analogous select-related components from Flow to TypeScript.

Suggested labels: ready-to-merge

Suggested reviewers: jpan-box

Poem

A rabbit selects with careful cheer,
Typed options hop from far to near.
Tooltips open at a button’s cue,
Flow and TypeScript keep paths true.
Exports now travel bright and clear.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the migration, lists the main file changes, and documents test and validation results.
Title check	✅ Passed	The title clearly and concisely identifies the main change: migrating the Select component from Flow to TypeScript.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/select/Select.tsx`:
- Line 75: Use a single combined disabled state in Select for both styling and
the native control: destructure the native disabled prop so it cannot remain in
rest, combine it with isDisabled, and apply that value to the classes and select
element. Make the equivalent change in src/components/select/Select.tsx (lines
75-75) and src/components/select/Select.js.flow (lines 60-60).
- Around line 66-77: Associate the validation error with the focusable select
rather than the wrapper span: update the select in
src/components/select/Select.tsx lines 66-77 to receive the Tooltip ARIA
attributes, set aria-invalid based on error, and add coverage for the select’s
ARIA attributes. Apply the same accessibility changes to
src/components/select/Select.js.flow lines 56-62 to keep both implementations
aligned.
- Line 33: Update the SelectProps definition for name to remain optional while
preserving the existing string Flow type contract, matching the component’s
undefined-name behavior and Select.js.flow. Do not make name required unless you
also change the runtime behavior, tests, and corresponding Flow declaration
consistently.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 271c28bb-0258-46be-a269-5b62372880ab

📥 Commits

Reviewing files that changed from the base of the PR and between 6038e8a and a7cf75e.

⛔ Files ignored due to path filters (1)

• src/components/select/__tests__/__snapshots__/Select.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (9)

• src/components/index.ts
• src/components/select/Select.js.flow
• src/components/select/Select.stories.tsx
• src/components/select/Select.tsx
• src/components/select/__tests__/Select.test.tsx
• src/components/select/index.js.flow
• src/components/select/index.ts
• src/components/select/messages.js.flow
• src/components/select/messages.ts

💤 Files with no reviewable changes (1)

• src/components/select/Select.stories.tsx

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

left 1 comment

[mergify]

Merge Queue Status

• ✅ Entered queue — 2026-08-12 11:21 UTC · Rule: Automatic strict merge · triggered by rule Automatic merge queue
• ✅ Checks skipped · PR is already up-to-date
• ✅ Merged — 2026-08-12 11:21 UTC · at c184decb8a9fac6f4c21f6ac3a09881d7e40833a · squash

This pull request spent 16 seconds in the queue, including 2 seconds running CI.

Required conditions to merge

• github-review-approved [🛡 GitHub branch protection]
  • refactor(select): migrate Select from Flow to TypeScript #4745
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = lint_test_build
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request