Flyout: freeze content during the hide animation and animate it by default

[blvdmitry]

Summary

Brings back the Flyout hide animation for every component built on it, using the Suspense "freeze" technique from A React trick to improve exit animations.

New internal _private/Freeze component

• While frozen, a sibling <Suspend /> suspends the boundary with no fallback. React keeps the DOM from the last commit and stops committing updates from props, state or context.
• React hides suspended DOM with display: none !important. Freeze undoes this in a useInsertionEffect, the earliest point in the same commit, before paint.
• Differences from the article's version:
  • Wrapper element instead of fragment refs: fragment refs are only in React canary, and the package supports React 18 and 19. A display: contents wrapper also stops React from blanking top-level text nodes and doesn't overwrite the children's own inline display.
  • Transition safety: a transition never commits an already-visible boundary falling back, so freezing inside startTransition would block that transition forever. If the frozen render doesn't commit within 100ms, Freeze gives up and renders the children normally. Covered by a story that fails without this.

Flyout

• Flyout.Content wraps its children in <Freeze frozen={!active}>. active is now passed through context, so the freeze happens in the same render as the close.
• Removed the forced disableHideAnimation from Select, DropdownMenu (which forced it for every non-hover trigger) and Autocomplete. The prop is still supported and still decides between animated and immediate removal.

Fixes for problems that turning the animation on exposed

• A flyout closed before its open transition started got stuck mounted in the hidden state. Per the CSS transitions spec, the transition is cancelled instead of reversed, so transitionend never fires. On hide, Flyout now removes the content right away if it has no running animations. This already affected Popover.
• Content that's animating out ignores pointer events, so a quick second click can't hit an option that's on its way out.
• Focus is now returned to the trigger when the content is removed without an animation (reduced motion, or transitions disabled). Before, the trap was only released on hidden, unless disableHideAnimation was set. Select used to set it, so Select avoided this. Covered by a story that fails with the old condition.

Related Issue

None

Screenshots / Recordings

Visual change: Select, DropdownMenu and Autocomplete now animate out. Their content keeps its pre-close state while it animates out.

Notes for Reviewers

• New stories: Internal/Freeze, plus three Flyout tests: content doesn't change while closing, close right after opening, and focus returns with transitions disabled.
• Select tests now wait for the previous menu to finish closing, and for aria-expanded to turn false, since both now happen after the exit animation.
• Ran the full storybook browser suite locally: all tests pass except Image › onLoad, which also fails on main in my sandbox because it loads a remote image. Unit tests, lint and typecheck pass.

🤖 Generated with Claude Code

https://claude.ai/code/session_01TFwAYqyYv9BQJuc5zDGzgv

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
Library / JS	51.83 KB (0%)	1.1 s (0%)	6.6 s (-6.6% 🔽)	7.6 s
Library / CSS	23.8 KB (0%)	476 ms (0%)	0 ms (+100% 🔺)	476 ms
Theming / JS	7.78 KB (0%)	156 ms (0%)	602 ms (+137.52% 🔺)	757 ms
Theming with a default theme definition / JS	8.69 KB (0%)	174 ms (0%)	454 ms (-32.41% 🔽)	628 ms