react-transition-group: add nodeRef to remaining CSSTransition consumers for React 19

[paulopmt1]

Proposed Changes

Follow-up to #112342. A repo-wide sweep for CSSTransition/TransitionGroup found three more consumers that still crash under React 19 (react-transition-group 4.4.5 falls back to the removed ReactDOM.findDOMNode unless a nodeRef is provided). Each now gets a nodeRef:

• Jetpack Cloud partner-portal license list (client/jetpack-cloud/.../license-list) — wrap children in <div ref={nodeRef}> (same fix as the A4A list in react-transition-group: upgrade to 4.4.5 and use nodeRef for React 19 #112342).
• client/me/account/main.jsx — extract a functional UsernameFormToggleTransition wrapper that owns its own useRef, so the changing username/account key gets a distinct ref per instance.
• plans-grid-next plan-type-selector popup tooltips (popup-messages.tsx) — the transition CSS is keyed to .popover-* classes on the popover element, so a wrapper div won't work; Popover/PopoverInner now forward an optional nodeRef to the .popover node (merged with the internal positioning/focus ref).

Why are these changes being made?

React 19 removed ReactDOM.findDOMNode. react-transition-group's Transition.updateStatus calls it on every enter/exit, so the Jetpack Cloud partner portal threw Uncaught TypeError: findDOMNode is not a function at /partner-portal/licenses. #112342 only covered one of four CSSTransition consumers; this closes the remaining three.

Verified against React 19.2.7 in isolation (jsdom + createRoot): each pattern crashes without nodeRef and renders cleanly with it. For the popover tooltip, the transition classes correctly land on .popover (popover popover-enter popover-enter-active), preserving the animation. Backward-compatible with React 18.

Testing Instructions

• On a React 19 build, open Jetpack Cloud /partner-portal/licenses — the list renders with no findDOMNode console error and rows animate in/out.
• Open WordPress.com account settings and toggle the username field — the form cross-fades without error.
• Open the plans grid plan-type-selector and hover the interval tooltip — it animates in without error.
• On React 18 trunk, confirm all three still behave as before (no regression).

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• For UI changes, have you tested the affected components in dark mode?
• Have you tested accessibility for your changes?
• Have you used memoizing on expensive computations?
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

🤖 Generated with Claude Code

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-186953

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-186953&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-186953&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-186953&env=dashboard

Dashboard Live (A4A) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-186953&env=dashboard-a4a

[github-actions]

Looks like one of the E2E tests has failed.

You can fix them following these steps:

1. Check out this branch locally:

   gh pr checkout 112347

2. Start Claude Code in the repo:

   claude

3. Run the /fix-e2e-tests skill, passing this PR number:

   /fix-e2e-tests 112347