[drawer] Fix virtual software keyboard behavior

[atomiks]

Fixes #4301

https://deploy-preview-4353--base-ui.netlify.app/react/components/drawer#virtual-keyboard-aware

This adds an opt-in Drawer.VirtualKeyboardProvider for bottom-sheet drawers with form controls. The goal is to stop the browser's native keyboard scroll/focus behavior from pushing the sheet off-screen, while keeping the drawer scrollable and the focused field visible on iOS and Android touch devices.

The provider does not restyle existing drawers by itself. To opt in fully, the popup styles need to consume the CSS variables that Base UI provides when the drawer is wrapped in Drawer.VirtualKeyboardProvider.

Because the behavior now lives behind a separate provider, the virtual-keyboard runtime can tree-shake out of drawers that do not import or use it.

⚠️ I recommend testing extensively on iOS & Android, with different inputs (textarea, input) in different locations in the drawer

Changes

• Adds Drawer.VirtualKeyboardProvider to enable keyboard-aware touch focus handling and visible-viewport tracking.
• Exposes --available-height so popup styles can size against the reduced visual viewport instead of 100vh.
• Exposes --drawer-keyboard-inset so bottom sheets can translate upward when the software keyboard overlaps the viewport.
• Adds a docs demo showing the intended pattern: a scrollable list in the main sheet body and a footer input pinned outside that scroll container.
• Keeps legacy drawers unchanged unless they explicitly wrap the relevant drawer parts in Drawer.VirtualKeyboardProvider.

Styling notes

• Wrap the relevant drawer subtree in Drawer.VirtualKeyboardProvider, typically around Drawer.Portal, Drawer.Viewport, and Drawer.Popup.
• Use max-height: calc(var(--available-height, 100dvh) - <top gap> + <bleed>) on Drawer.Popup instead of sizing only from 100vh.
• Apply the keyboard lift separately from swipe/open-close motion, for example with translate: 0 calc(0px - var(--drawer-keyboard-inset, 0px)), while keeping swipe motion on transform.
• Keep the main content in its own scroll container and place sticky footer fields outside that scroller.
• If your sheet uses a bottom bleed or keyboard filler, budget that in your popup/footer styles; the new docs demo shows the working recipe.

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

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

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

commit: 6fa3d9e

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+4.57KB(+0.99%)	🔺+1.45KB(+1.00%)

Details of bundle changes

---

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

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	6fa3d9e
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/69f142923c806100089f5b09
😎 Deploy Preview	https://deploy-preview-4353--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[flaviendelangle]

The demo is broken in dark mode

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+4.58KB(+0.99%)	🔺+1.46KB(+0.99%)

Details of bundle changes

Performance

Total duration: 1,138.35 ms ▼-255.79 ms^(-18.3%) | Renders: 53 ⁽⁺⁰⁾ | Paint: 1,750.77 ms ▼-405.14 ms^(-18.8%)

Test	Duration	Renders
Mixed surface mount (app-like density)	92.83 ms 🔺+2.97 ms(+3.3%)	5 (+0)
Select mount (200 instances)	142.16 ms 🔺+0.57 ms(+0.4%)	3 (+0)
Slider mount (300 instances)	127.20 ms ▼-79.47 ms(-38.5%)	3 (+0)
Tooltip mount (300 contained roots)	50.43 ms ▼-36.62 ms(-42.1%)	2 (+0)
Popover mount (300 instances)	87.28 ms ▼-31.50 ms(-26.5%)	2 (+0)

...and 7 more. View full report

Details of benchmark changes

---

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