chore(settings): Update to React 19

[xlisachan]

This pull request

• Dependencies

  • Upgrades react/react-dom from 18.3 to 19.0 and @types/react/@types/react-dom to v19
  • Updates react-markdown to v9 and rehype-raw to v7 to resolve vfile type mismatches

• Payments

  • Migrates useFormState (from react-dom) to useActionState (from react) in payments-ui CouponForm

• Settings

  • Replaces deprecated ReactDOM.render with createRoot in fxa-settings entrypoint
  • Adapts components for React 19 ref handling (no more forwardRef requirement) and stricter type checks
  • Updates test mocks and jest config for React 19 compatibility

Issue that this pull request solves

Closes: PAY-3887

Checklist

Put an x in the boxes that apply

• My commit is GPG signed.
• If applicable, I have modified or added tests which pass locally.

[vpomerleau]

(Initial comments, Claude-assisted review)

The navigate()-during-render migration is a lot of ground to cover, and pulling lazy into its own module fixes a real latent bug on the way.

Two things I'd want sorted first, both in the TOTP path — see SigninTotpCode/container.tsx and baseTokenCode.ts. I think they're the same remount approached from two sides.

Dependency notes that don't map onto a changed line:

• @testing-library/react is still 15.0.6 — peers on react@^18 and pulls @types/react-dom@^18 against @types/react@19. Probably what's driving the JSX.Element churn here; bumping to ^16.3.0 and adding @types/react-dom to resolutions should help.
• react is pinned to 19.0.8 but @types/react is 19.2.18 — types two minors ahead of runtime.
• @testing-library/react-hooks and @material-ui/core have no importers left after this. Droppable.
• @react-pdf/renderer 3→4 drops the layout/textkit pins and the new mock stubs the module out, so PDFs have no coverage on either side. Have you opened a generated one?

Also worth a look before this leaves draft: the PR body is still the template, and the RTL box is unchecked while the avatar zoom control becomes a native range input.

[Copilot]

Pull request overview

Copilot reviewed 65 out of 67 changed files in this pull request and generated no new comments.

Suppressed comments (2)

packages/fxa-settings/src/components/InputText/index.tsx:146

• inputRefDOM is typed as Ref<HTMLInputElement> (so callers can pass either an object ref or a callback ref), but combinedRef always treats it as an object ref by assigning .current. If a caller passes a callback ref, it will never be invoked (and the ref will not be set). Also, assigning .current via React.RefObject is fragile with React/@types typings.

Consider handling function refs explicitly and using MutableRefObject for the object-ref path (same for inputRef / RHF registration refs).

      if (inputRefDOM) {
        (inputRefDOM as React.RefObject<HTMLInputElement | null>).current =
          element;
      }
      const refToCall = registrationRefLatest.current || inputRef;

packages/fxa-settings/config/jest/reactPdfMock.js:8

• config/jest/reactPdfMock.js was added, but there are no references to it in the repo (no moduleNameMapper, jest.mock path alias, or other import). As-is, it's dead code and its header comment about "@react-pdf/renderer v4" is also potentially misleading given fxa-settings is pinned/patching renderer 3.x.

Either wire this into Jest config (e.g., map @react-pdf/renderer to this file) or remove it to avoid carrying an unused mock implementation.

// @react-pdf/renderer v4 ships ESM-only, which Jest cannot import without
// transforming its entire transitive dependency tree. Since unit tests never
// exercise real PDF generation, we stub the module.

[vpomerleau]

React19 is causing breaking changes for recovery key PDF generation. We'll need to find a solution (revert to serving the key in a text file or find an alternate PDF generator) to unblock the React 19 upgrade. I'm following up with product team.