[scroll area] Reduce bundle size

[atomiks]

Reduces the @base-ui/react/scroll-area bundle size with no public API change. The bundle bot is authoritative for the current size impact.

The vertical and horizontal branches in the scrollbar and root pointer handlers are consolidated into axis-parameterized paths, and the viewport reuses state already shared by the root. Internal enum members used only at runtime are inlined while their source enums remain for types and docs; an enum-sync test prevents the strings from drifting.

Emitted DOM attributes, CSS variables, and state remain unchanged.

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@5217
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@5217
  

commit: fff0f95

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	▼-2.86KB(-0.62%)	▼-590B(-0.40%)

Details of bundle changes

Performance

Total duration: 1,546.21 ms +135.41 ms^(+9.6%) | Renders: 78 ⁽⁺⁰⁾ | Paint: 2,394.68 ms +214.50 ms^(+9.8%)

Test	Duration	Renders
Slider mount (300 instances)	218.56 ms 🔺+50.81 ms(+30.3%)	3 (+0)
Checkbox mount (500 instances)	114.58 ms 🔺+30.97 ms(+37.0%)	1 (+0)
Scroll Area mount (300 instances)	111.77 ms 🔺+18.72 ms(+20.1%)	3 (+0)
Popover mount (300 instances)	86.91 ms 🔺+16.31 ms(+23.1%)	1 (+0)

10 tests within noise — details

Metric alarms

Test	Metric	Change
Slider mount (300 instances)	bench:paint	🔺 +72.83 ms
Checkbox mount (500 instances)	bench:paint	🔺 +45.67 ms
Scroll Area mount (300 instances)	bench:paint	🔺 +24.25 ms
Popover mount (300 instances)	bench:paint	🔺 +22.76 ms

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	fff0f95
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6a54ed33feb8fd0008f8fd19
😎 Deploy Preview	https://deploy-preview-5217--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

This PR reduces the bundle size of @base-ui/react/scroll-area without changing the public API by consolidating duplicated axis-specific logic, avoiding redundant state objects, and inlining internal-only enum strings (with tests to keep the strings in sync).

Changes:

• Consolidated vertical/horizontal pointer and track-click logic into axis-parameterized code paths.
• Moved viewport “state” to the root context (viewportState) to avoid rebuilding objects on scroll frames.
• Inlined CSS variable and data-attribute strings for better tree-shaking, adding tests to ensure the inlined strings stay synced with the exported enums used for docs.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/react/src/scroll-area/viewport/ScrollAreaViewport.tsx	Inlines overflow CSS vars, reuses root-provided viewportState, and reduces scroll-frame allocations via pickState.
packages/react/src/scroll-area/utils/getOffset.ts	Simplifies logical margin/padding reads and avoids repeated parsing.
packages/react/src/scroll-area/thumb/ScrollAreaThumb.tsx	Updates scrollbar context consumption and inlines thumb CSS var usage.
packages/react/src/scroll-area/thumb/ScrollAreaThumb.test.tsx	Adds browser-only horizontal dragging coverage (LTR/RTL) and pointer capture assertions.
packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbarContext.ts	Simplifies context value to a string union for better bundle output.
packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.tsx	Consolidates track-click logic by axis, uses viewportState, and inlines CSS var strings.
packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.test.tsx	Adds browser-only track-click coverage across axis + LTR/RTL.
packages/react/src/scroll-area/root/stateAttributes.ts	Inlines data-attribute strings so the enum can tree-shake out.
packages/react/src/scroll-area/root/ScrollAreaRootContext.ts	Removes rootRef from context shape (root still owns it internally).
packages/react/src/scroll-area/root/ScrollAreaRoot.tsx	Consolidates scrolling timeout logic, inlines orientation attribute string, and inlines corner CSS var strings.
packages/react/src/scroll-area/root/ScrollAreaRoot.test.tsx	Improves ResizeObserver mocking and adds regression coverage for clearing overflow/corner state.
packages/react/src/scroll-area/enumSync.test.tsx	Pins inlined runtime strings to the exported enums to prevent drift.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.