refactor(scroll-wrapper): migrate ScrollWrapper from Flow to TypeScript

[bonchevskyi]

Convert ScrollWrapper component to TypeScript

This PR converts src/components/scroll-wrapper from JavaScript with Flow to TypeScript.

Changes

• Converted ScrollWrapper.js to ScrollWrapper.tsx with exported ScrollWrapperProps interface
• Converted index.js to index.ts, re-exporting the component and its types
• Converted ScrollWrapper.test.js to ScrollWrapper.test.tsx
• Created .js.flow files for backward compatibility

Contract

• Declared Flow props contract and runtime behavior preserved

Testing

• Tests: 3 passed with snapshots matching previous output
• yarn lint, yarn lint:ts, and flow check pass

Summary by CodeRabbit

• New Features
  • Added a reusable scrollable container with configurable styling and shadow indicators.
  • Shadows update automatically as content is scrolled or changes.
  • Added support for accessing the underlying scrollable element through a callback.
  • Available with both Flow and TypeScript type definitions.

[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: 9773c63c-efd1-4627-9b22-4955810c6ee7

📥 Commits

Reviewing files that changed from the base of the PR and between 449e686 and 47c1522.

⛔ Files ignored due to path filters (1)

• src/components/scroll-wrapper/__tests__/__snapshots__/ScrollWrapper.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (5)

• src/components/scroll-wrapper/ScrollWrapper.js.flow
• src/components/scroll-wrapper/ScrollWrapper.tsx
• src/components/scroll-wrapper/__tests__/ScrollWrapper.test.tsx
• src/components/scroll-wrapper/index.js.flow
• src/components/scroll-wrapper/index.ts

---

Walkthrough

Added a typed ScrollWrapper component in TypeScript and Flow. It renders nested scroll containers, tracks scroll position, updates top and bottom shadows, observes content changes, and exposes module exports.

Changes

ScrollWrapper migration

Layer / File(s)	Summary
Public contracts and exports src/components/scroll-wrapper/ScrollWrapper.tsx, src/components/scroll-wrapper/ScrollWrapper.js.flow, src/components/scroll-wrapper/index.*	Defines typed props and state. Adds Flow and TypeScript component exports.
Scroll tracking and lifecycle src/components/scroll-wrapper/ScrollWrapper.*	Tracks scroll boundaries, throttles updates, observes mutations and transitions, and cleans up listeners and observers.
Container rendering and tests src/components/scroll-wrapper/ScrollWrapper.*, src/components/scroll-wrapper/__tests__/ScrollWrapper.test.tsx	Renders configurable classes, shadow styles, children, and scroll references. Updates shallow-render cases with explicit null children.

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

Mergeability Score: ⚪ Minimal · up to 47c15

This is a localized type-system migration with reported passing tests and validation checks; no actionable merge-blocking risk remains beyond normal review.

Possibly related PRs

• box/box-ui-elements#4732: Migrates a similarly structured React component from Flow to TypeScript.
• box/box-ui-elements#4742: Adds typed React component exports during a Flow-to-TypeScript migration.
• box/box-ui-elements#4762: Migrates a React component with typed props and barrel exports.

Suggested labels: ready-to-merge

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

Poem

I’m a rabbit with shadows in line,
Watching the scroll from the top to the sign.
Typed props hop through the export gate,
Observers tidy before it is late.
ScrollWrapper burrows, clean and bright.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly states that ScrollWrapper is being migrated from Flow to TypeScript.
Description check	✅ Passed	The description explains the migration, lists the affected files, states compatibility goals, and reports testing and validation 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.}

[mergify]

Merge Queue Status

• ✅ Entered queue — 2026-08-19 18:15 UTC · Rule: Automatic strict merge · triggered by rule Automatic merge queue
• ✅ Checks passed · in-place
• ✅ Merged — 2026-08-19 18:29 UTC · at 6322244c2d354bec0a79361a40044ec212521256 · squash

This pull request spent 13 minutes 31 seconds in the queue, including 13 minutes 9 seconds running CI.

Required conditions to merge

• github-review-approved [🛡 GitHub branch protection]
  • refactor(scroll-wrapper): migrate ScrollWrapper from Flow to TypeScript #4780
• 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