refactor(settings): Upgrade to react-hook-form v7

[xlisachan]

Because

• react-hook-form v6 does not support React 19, blocking the planned upgrade
• v6 is unmaintained and has known issues with formState reactivity

This pull request

• Bumps react-hook-form from ^6.15.8 to ^7.54.0
• Adds registration prop to InputText/InputPassword for v7's register() API
• Migrates all 30+ form components from inputRef={register({...})} to registration={register('fieldName', {...})}
• Updates type interfaces from UseFormMethods to UseFormReturn
• Moves errors from top-level useForm destructure to formState.errors
• Fixes InputPhoneNumber to use setValue with shouldDirty/shouldValidate (v7 no longer auto-tracks dirty state via setValue)
• Updates tests for v7's async formState updates (userEvent over fireEvent, waitFor for formState assertions, VerifiedSessionGuard mock)

Issue that this pull request solves

Closes: PAY-3633

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.

[Copilot]

Pull request overview

This PR upgrades react-hook-form to v7 in the FxA Settings UI (and adds it to the Admin Panel) to unblock React 19 compatibility and align form components with v7’s register('field') API and formState behaviors.

Changes:

• Bump react-hook-form from ^6.15.8 to ^7.54.0 (lock resolves to a newer compatible v7).
• Introduce registration on InputText/InputPassword and migrate call sites from inputRef={register(...)} to registration={register('field', ...)}.
• Update form usage patterns (formState.errors, Proxy subscription patterns, setValue(..., { shouldDirty/shouldValidate })) and adjust tests for v7 async updates/mocking.

Reviewed changes

Copilot reviewed 35 out of 36 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
yarn.lock	Locks react-hook-form v7 dependency resolution.
packages/fxa-settings/package.json	Bumps react-hook-form dependency to ^7.54.0.
packages/fxa-admin-panel/package.json	Adds react-hook-form v7 dependency for admin-panel usage.
packages/fxa-settings/src/pages/Signup/index.tsx	Moves errors access to formState.errors when passing props down.
packages/fxa-settings/src/pages/Signin/SigninPasskeyFallback/index.tsx	Migrates password input to registration={register('password', ...)} and reads errors from formState.
packages/fxa-settings/src/pages/Signin/index.tsx	Migrates password input to registration={register('password')}.
packages/fxa-settings/src/pages/ResetPassword/ResetPassword/index.tsx	Migrates email input to registration={register('email')}.
packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx	Switches to formState.errors when passing errors down.
packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryConfirmKey/index.tsx	Migrates recovery key input to registration={register('recoveryKey', ...)}.
packages/fxa-settings/src/pages/PostVerify/SetPassword/index.tsx	Switches to formState.errors when passing errors down.
packages/fxa-settings/src/pages/Index/index.tsx	Migrates email input to registration={register('email')}.
packages/fxa-settings/src/components/Settings/SubRow/index.tsx	Migrates passkey rename input to registration={register('name', ...)}.
packages/fxa-settings/src/components/Settings/PageSecondaryEmailVerify/index.tsx	Adds explicit formState property reads to ensure Proxy subscriptions; migrates verification code input to registration.
packages/fxa-settings/src/components/Settings/PageDisplayName/index.tsx	Adds explicit formState property reads to ensure Proxy subscriptions; migrates displayName input to registration.
packages/fxa-settings/src/components/Settings/PageDeleteAccount/index.tsx	Updates disabled logic with eager formState reads; migrates password input to registration.
packages/fxa-settings/src/components/Settings/PageCreatePassword/index.tsx	Switches to formState.errors when passing errors down.
packages/fxa-settings/src/components/Settings/PageChangePassword/index.tsx	Switches to formState.errors when passing errors down.
packages/fxa-settings/src/components/Settings/ModalVerifySession/index.tsx	Migrates verification code input to registration.
packages/fxa-settings/src/components/Settings/ModalMfaProtected/index.tsx	Migrates confirmation code input to registration.
packages/fxa-settings/src/components/Settings/index.test.tsx	Updates/mocks guards to avoid async session calls during tests.
packages/fxa-settings/src/components/Settings/FlowRecoveryKeyConfirmPwd/index.tsx	Migrates password input to registration and adds eager formState property read for Proxy subscription.
packages/fxa-settings/src/components/RecoveryKeySetupHint/index.tsx	Migrates hint input to registration={register('hint')}.
packages/fxa-settings/src/components/InputText/index.tsx	Adds registration prop and integrates RHF v7 register return shape into InputText.
packages/fxa-settings/src/components/InputPhoneNumber/index.tsx	Refactors registration to RHF v7 and uses setValue options to maintain dirty/valid state.
packages/fxa-settings/src/components/InputPassword/index.tsx	Plumbs through new registration prop to reuse InputText behavior.
packages/fxa-settings/src/components/FormVerifyTotp/index.tsx	Updates submit enablement and keeps RHF state in sync when filtering code input.
packages/fxa-settings/src/components/FormVerifyCode/index.tsx	Uses formState.errors + setValue for filtered/validated code input flow.
packages/fxa-settings/src/components/FormSetupAccount/interfaces.ts	Updates RHF types from v6 to v7 equivalents for prop typing.
packages/fxa-settings/src/components/FormPhoneNumber/index.tsx	Adds eager formState read and keeps submit disabled logic stable under v7.
packages/fxa-settings/src/components/FormPhoneNumber/index.test.tsx	Adjusts test waiting/assertions for v7’s async state updates.
packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/mocks.tsx	Updates mocks to pass errors: formState.errors.
packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.tsx	Updates RHF types and migrates to registration={register('field')} usage; adds eager formState reads.
packages/fxa-settings/src/components/FormPassword/mocks.tsx	Updates mocks to pass errors: formState.errors.
packages/fxa-settings/src/components/FormPassword/index.tsx	Updates RHF types, migrates to registration, and uses eager formState reads for Proxy subscription.
packages/fxa-settings/src/components/FormChoice/index.tsx	Migrates radio registration to v7 ...register('choice') spread usage.
packages/fxa-admin-panel/src/components/PageRateLimiting/index.tsx	Migrates inputs to v7 ...register(id) usage.

Suppressed comments (1)

packages/fxa-settings/src/components/FormSetupAccount/interfaces.ts:21

• errors: Record<string, any> discards react-hook-form’s error typing, making downstream usage easier to get wrong. Prefer FieldErrors<FormSetupAccountData> (or another RHF error type) so consumers can rely on the correct structure.

export type FormSetupAccountProps = {
  formState: AnyFormReturn['formState'];
  errors: Record<string, any>;
  trigger: AnyFormReturn['trigger'];
  register: AnyFormReturn['register'];
  getValues: AnyFormReturn['getValues'];

[xlisachan]

useEffect was removed entirely. countryCode now lives in react-hook-form state via defaultValues in FormPhoneNumber and kept in sync by setValue in handleCountryChange.