Skip to content

[popups] Add transitionKey prop to Viewport - #5215

Open
atomiks wants to merge 30 commits into
mui:masterfrom
atomiks:viewport-transition-key
Open

[popups] Add transitionKey prop to Viewport#5215
atomiks wants to merge 30 commits into
mui:masterfrom
atomiks:viewport-transition-key

Conversation

@atomiks

@atomiks atomiks commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Viewport previously only animated content changes caused by switching detached triggers. This adds transitionKey for content that changes in place while a popup stays open.

Changes

  • Added transitionKey to Popover.Viewport, Menu.Viewport, Tooltip.Viewport, and PreviewCard.Viewport.
  • Reused the existing previous/current snapshot and popup resize transition when the key changes.
  • Preserved component-specific focus behavior: Popover recovers lost focus to the first tabbable element, Menu resets and restores keyboard highlights across views, and Tooltip and Preview Card leave focus unchanged.
  • Exposed Menu's forward/back direction through data-activation-direction and handled multi-level returns.
  • Prevented cleanup from an interrupted transition from ending a newer transition.
  • Added tests and documentation demos for each component.

Demos

Popover, Menu, Tooltip, Preview Card

@atomiks atomiks added type: new feature Expand the scope of the product to solve a new problem. scope: all components Widespread work has an impact on almost all components. labels Jul 13, 2026
@pkg-pr-new

pkg-pr-new Bot commented Jul 13, 2026

Copy link
Copy Markdown

commit: ffbf0b9

@code-infra-dashboard

code-infra-dashboard Bot commented Jul 13, 2026

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 🔺+501B(+0.11%) 🔺+163B(+0.11%)

Details of bundle changes

Performance

Total duration: 1,111.14 ms -47.59 ms(-4.1%) | Renders: 78 (+0) | Paint: 1,764.14 ms -69.23 ms(-3.8%)

No significant changes — details


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

@netlify

netlify Bot commented Jul 13, 2026

Copy link
Copy Markdown

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit ffbf0b9
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6a65440d78e30d0007da6f77
😎 Deploy Preview https://deploy-preview-5215--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

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.

@atomiks
atomiks force-pushed the viewport-transition-key branch from 957611c to 08b0bf5 Compare July 22, 2026 05:00
@atomiks
atomiks marked this pull request as ready for review July 22, 2026 10:38
@flaviendelangle

Copy link
Copy Markdown
Member

I think this closes #1894

@atomiks

atomiks commented Jul 22, 2026

Copy link
Copy Markdown
Contributor Author

@flaviendelangle not quite, this just supports it if you control it externally, but it likely still needs new component parts for proper DX. It's more like an actual workaround now though.

@atomiks
atomiks force-pushed the viewport-transition-key branch from b87eb30 to ee9a96f Compare July 22, 2026 11:30
@flaviendelangle

Copy link
Copy Markdown
Member

Could be worth answering on the issue once we merge this one to let people know their is a workaround.
But OK if we think we need some higher level API to help them do it 👍

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jul 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: out-of-date The pull request has merge conflicts and can't be merged. scope: all components Widespread work has an impact on almost all components. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants