chore(react): add support for react 19

[calebpollman]

Description of changes

Add React 19 support for React web packages. While definitely a large PR, the bulk of the changes are changes due to the removal of the global JSX namespace in the React 19 types.

• allow react@^19 and react-dom@^19 peer deps in React web and core packages (React Native does not support react@^19 currently), example:

- "react": "^16.14.0 || ^17.0 || ^18.0"
+ "react": "^16.14 || ^17 || ^18 || ^19"

• update ForwardRefPrimitive interface to provide component Props and Element type generics to returned React.Element (ref). This change allows support of React 19 element typing while continuing support of React versions previous to 19.

• update JSX.Foo -> React.JSX.Foo due to global JSX namespace removal in React 19, example:

- function SomeComponent(): JSX.Element {}
+ function SomeComponent(): React.JSX.Element {}

• provide explicit undefined to empty useRef callsites:

- useRef()
+ useRef(undefined)

• add "jest" and "@testing-library/jest-dom" to "types" field of tsconfig.base.json to allow usage of @testing-library/jest-dom extended jest matchers

• update and align (where appropriate) React related dev and direct dependency versions in example apps and packages:

  • react@18.2 -> react@^18.3
  • @types/react@^18.2.22 -> @types/react@^18.3
  • react-dom@18.2 -> react-dom@^18.3
  • @types/react-dom@^18.2.7 -> @types/react-dom@^18.3.0
  • react-test-renderer@^18.2.0 -> react-test-renderer@^18.3.0
  • @types/react-test-renderer@^18.0.2 -> @types/react-test-renderer@^18.3.0
  • react-hook-form@"^7.43.5 -> react-hook-form@^7.53.2
  • @testing-library/react-native@^12.3.0 ->@testing-library/react-native@^12.9.0

• bump StorageBrowser size thresholds due to radix dep size increases

• remove "react-router-dom" dev dependency used in a single Link primitive unit test and the test itself

• fix typing of DropZone primitive components to no longer accept unsupported forwardRef, example (ref):

- const Accepted: Primitive<{ children?: React.ReactNode }, 'div'> = ...
+ type AcceptedType = (props: {
+   children?: React.ReactNode;
+ }) => React.JSX.Element | null;
+ const Accepted: AcceptedType = ... 

• add "@types/emscripten" and "@types/long" to @aws-amplify/ui-react-liveness tsconfig.json (ref)

Issue #, if available

closes #6084

Description of how you validated changes

• yarn lint && yarn build
• deployed a sample app using React 19 to Amplify Hosting (source)
• smoke tested React 16, 17, 18, and 19 with vite and next@15 example apps (https://github.com/calebpollman/react-19-smoke-tests) using React 19 support tagged version of @aws-amplifyui-react@react-19 (npm)

Checklist

• Have read the Pull Request Guidelines
• PR description included
• yarn test passes and tests are updated/added
• PR title and commit messages follow conventional commit syntax
• If this change should result in a version bump, changeset added (This can be done after creating the PR.) This does not apply to changes made to docs, e2e, examples, or other private packages.

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[changeset-bot]

🦋 Changeset detected

Latest commit: 52c4865

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@aws-amplify/ui-react	Patch
@aws-amplify/ui-react-ai	Patch
@aws-amplify/ui-react-core	Patch
@aws-amplify/ui-react-core-notifications	Patch
@aws-amplify/ui-react-geo	Patch
@aws-amplify/ui-react-liveness	Patch
@aws-amplify/ui-react-native	Patch
@aws-amplify/ui-react-notifications	Patch
@aws-amplify/ui-react-storage	Patch
@aws-amplify/ui-react-auth	Patch
@aws-amplify/ui-react-core-auth	Patch
@aws-amplify/ui-react-native-auth	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[morganney]

I'm still seeing older versions of dependencies that don't support React 19:

morganney@macos openai-realtime (feat/amplify-authn) $ npm ls react-dom
openai-realtime@1.0.0 /Users/morganney/code/openai-realtime
└─┬ ui@1.0.0 -> ./packages/ui
  ├─┬ @aws-amplify/ui-react@6.8.0
  │ ├─┬ @radix-ui/react-dropdown-menu@1.0.0
  │ │ ├─┬ @radix-ui/react-menu@1.0.0
  │ │ │ ├─┬ @radix-ui/react-dismissable-layer@1.0.0
  │ │ │ │ └── react-dom@18.3.1 deduped
  │ │ │ ├─┬ @radix-ui/react-focus-scope@1.0.0
  │ │ │ │ └── react-dom@18.3.1 deduped
  │ │ │ ├─┬ @radix-ui/react-popper@1.0.0
  │ │ │ │ ├─┬ @floating-ui/react-dom@0.7.2
  │ │ │ │ │ └── react-dom@18.3.1 deduped
  │ │ │ │ ├─┬ @radix-ui/react-arrow@1.0.0
  │ │ │ │ │ └── react-dom@18.3.1 deduped
  │ │ │ │ └── react-dom@18.3.1 deduped
  │ │ │ ├─┬ @radix-ui/react-portal@1.0.0
  │ │ │ │ └── react-dom@18.3.1 deduped
  │ │ │ ├─┬ @radix-ui/react-presence@1.0.0
  │ │ │ │ └── react-dom@18.3.1 deduped
  │ │ │ ├─┬ @radix-ui/react-roving-focus@1.0.0
  │ │ │ │ └── react-dom@18.3.1 deduped
  │ │ │ └── react-dom@18.3.1 deduped
  │ │ ├─┬ @radix-ui/react-primitive@1.0.0
  │ │ │ └── react-dom@18.3.1 deduped
  │ │ └── react-dom@18.3.1 deduped
  │ ├─┬ @radix-ui/react-slider@1.0.0
  │ │ ├─┬ @radix-ui/react-collection@1.0.0
  │ │ │ └── react-dom@18.3.1 deduped
  │ │ └── react-dom@18.3.1 deduped
  │ └── react-dom@18.3.1
  ├── react-dom@19.0.0
  └─┬ styled-components@6.1.13
    └── react-dom@18.3.1 deduped

When running npm install you'll see npm warn ERESOLVE overriding peer dependency.

I'm running:

morganney@macos openai-realtime (feat/amplify-authn) $ node -v
v22.12.0
morganney@macos openai-realtime (feat/amplify-authn) $ npm -v
10.9.0