VideoPress admin: TypeError in `@base-ui/react` `useMergedRefs` on video delete/upload (regression from #48909)

[obenland]

Summary

Deleting or uploading a video in the VideoPress admin page (projects/packages/videopress/src/client/admin/) throws an uncaught TypeError from inside @base-ui/react@1.4.1's useMergedRefs / useRenderElement path. The React tree crashes and the admin becomes unresponsive.

Tracking: #48160 — Jetpack UI Modernization.

Reproduction

1. Connect Jetpack on a fresh site (free tier — no VideoPress purchase, so the UpgradeTrigger renders).
2. Open the VideoPress admin (wp-admin/admin.php?page=jetpack-videopress).
3. Upload a video, or delete an existing one.
4. React tree crashes; admin becomes unresponsive.

Reproduced on profoundly-select.jurassic.ninja, current trunk.

Stack — delete

TypeError: Cannot read properties of null (reading 'refs')
  at didChange (@base-ui/utils/useMergedRefs.js)
  at useMergedRefs
  at useRenderElementProps (@base-ui/react/internals/useRenderElement.js)
  at <UpgradeTrigger> in projects/packages/videopress/src/client/admin/components/admin-page/index.tsx (lines 248–256 on trunk)

Stack — upload (likely same root cause, different arm)

TypeError: Cannot read properties of undefined (reading 'length')
  at useEffect callback in @base-ui/react internals
  at mf (react-dom commit)

Bisect / suspected commit

27bf601935 — Componentry: migrate ContextualUpgradeTrigger to @wordpress/ui *Notice (*#48909).

Before this commit, UpgradeTrigger used ContextualUpgradeTrigger from @automattic/jetpack-components and did not pull @wordpress/ui (and transitively @base-ui/react) into the admin bundle. After it, every re-render of <UpgradeTrigger> runs through base-ui's ref-merge path. The crash reliably fires when hasVideos / hasUsedVideo flips on delete/upload.

Confirmation

Locally replaced the <Notice.Root> tree in admin-page/index.tsx with a plain <div> / <button> and rebuilt the videopress package. Both crashes disappeared.

Suggested fix options

• Revert 27bf601935's changes to projects/packages/videopress/src/client/admin/components/admin-page/index.tsx (keep the rest of the migration if other consumers in that commit are clean).
• Or replace just that UpgradeTrigger Notice usage with ContextualUpgradeTrigger until the upstream base-ui behavior is resolved.

Environment

• @wordpress/ui@0.13.0 → @base-ui/react@1.4.1
• React 18.3.1, jurassic.ninja site (Atomic hosting)
• Reproduced on trunk; unrelated to PR VideoPress: Prepare types for React 19 #49204.

[obenland]

@Automattic/zap Is this on your radar?

[CGastrell]

Fix up in #49340 (Fixes #49230), and verified live.

Root cause: UpgradeTrigger mounted <Notice.Description> conditionally ({ description && … }). description derives from hasUsedVideo, which flips on upload/delete, so the Notice.Root subtree changed shape across renders — and base-ui@1.4.1's useRenderElement swaps between two different ref-merge hooks based on subtree shape, misaligning the stored fork-ref → Cannot read properties of null (reading 'refs'). Not a @wordpress/ui Notice problem: the modern dashboard's FreeTierNotice uses the same component and never crashes because it always renders a static Description.

Fix: keep the migration (no revert of #48909), always render <Notice.Description> and vary only its text — mirroring FreeTierNotice. Strings are hoisted to module scope to avoid a terser i18n ternary-fold.

Verified on a Jurassic Ninja site running the branch build (jetpack-videopress-dev …-gc754c0c2): upload + delete on the free-tier upgrade nudge no longer crash.

One thing for a design/copy glance: to keep the children shape invariant without rendering an empty styled row, the no-videos state now shows a short line it didn't before — "The free plan includes one video upload." If we'd rather keep it text-free, the alternative is hiding an empty Description via CSS. Happy to switch.

Could I get a review? cc @Automattic/zap