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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a06ca20a-867b-4fb3-9831-d4d1c0e30588

📥 Commits

Reviewing files that changed from the base of the PR and between a60933f and 7449f45.

📒 Files selected for processing (1)

• src/components/index.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/index.ts

---

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. The Flow-typed name prop is optional.
Tooltip interaction validation src/components/select/__tests__/Select.test.tsx	Tooltip tests use Enzyme queries, prop assertions, and simulated button clicks.
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#4727: Migrates another component from Flow to TypeScript and updates shared barrel exports.
• box/box-ui-elements#4728: Migrates another component to TypeScript and adds component exports.

Suggested reviewers: jpan-box, tjiang-box, vitali-usik

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
Title check	✅ Passed	The title clearly and concisely describes the main change: migrating the Select component from Flow to TypeScript.
Description check	✅ Passed	The description explains the migration, lists the main file changes, and documents test and lint results.
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.