React 19 support (#6437)

* React 19 support

Author: snowystinger

.circleci/comment.js

@@ -76,7 +76,7 @@ async function run() {
         body: `Build successful! 🎉
 
   * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
-  * [View the storybook-canary](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-canary/index.html)
+  * [View the storybook-19](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-19/index.html)
   * [View the storybook-17](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-17/index.html)
   * [View the storybook-16](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-16/index.html)
   * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`

.circleci/config.yml

@@ -19,30 +19,30 @@ orbs:
 executors:
   rsp:
     docker:
-      - image: cimg/node:18.17.1
+      - image: cimg/node:18.20.3
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
-      - image: cimg/node:18.17.1
+      - image: cimg/node:18.20.3
     resource_class: large
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-xlarge:
     docker:
-      - image: cimg/node:18.17.1
+      - image: cimg/node:18.20.3
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-xlarge-nodeupdate:
     docker:
-      - image: cimg/node:18.17.1
+      - image: cimg/node:18.20.3
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1
@@ -121,7 +121,7 @@ jobs:
             - ~/react-spectrum
           key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
-  install-canary:
+  install-19:
     executor: rsp-large
     steps:
       - checkout
@@ -134,12 +134,12 @@ jobs:
       - run:
           name: build
           command: |
-            yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-canary --cache-folder ~/.cache/yarn
+            yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-19 --cache-folder ~/.cache/yarn
 
       - save_cache:
           paths:
             - ~/react-spectrum
-          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
   test-ssr:
     executor: rsp-xlarge
@@ -199,11 +199,11 @@ jobs:
           command: |
             yarn test:ssr
 
-  test-ssr-canary:
+  test-ssr-19:
     executor: rsp-xlarge
     steps:
       - restore_cache:
-          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
           name: test ssr
@@ -258,12 +258,12 @@ jobs:
       - store_artifacts:
           path: ~/junit
 
-  test-canary:
+  test-19:
     parallelism: 3
     executor: rsp-xlarge
     steps:
       - restore_cache:
-          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run: mkdir ~/junit
 
@@ -272,10 +272,10 @@ jobs:
           command: |
             shopt -s globstar
             TESTFILES=$(circleci tests glob "packages/**/*.test.[tj]{s,sx}" | circleci tests split --split-by=timings)
-            JEST_JUNIT_OUTPUT_NAME="junit-canary.xml" yarn test ${TESTFILES}
+            JEST_JUNIT_OUTPUT_NAME="junit-19.xml" yarn test ${TESTFILES}
 
       - run:
-          command: cp junit-canary.xml ~/junit/
+          command: cp junit-19.xml ~/junit/
           when: always
       - store_test_results:
           path: ~/junit
@@ -412,20 +412,20 @@ jobs:
           paths:
             - '*/storybook-17/'
 
-  storybook-canary:
+  storybook-19:
     executor: rsp-large
     steps:
       - restore_cache:
-          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
-          name: build storybook-canary
-          command: make storybook-canary
+          name: build storybook-19
+          command: make storybook-19
 
       - persist_to_workspace:
           root: dist
           paths:
-            - '*/storybook-canary/'
+            - '*/storybook-19/'
 
   docs:
     executor: rsp-xlarge
@@ -547,7 +547,7 @@ workflows:
       - install
       - install-16
       - install-17
-      - install-canary
+      - install-19
       - test-ssr:
           requires:
             - install
@@ -566,6 +566,12 @@ workflows:
       - test-17:
           requires:
             - install-17
+      - test-19:
+          requires:
+            - install-19
+      - test-ssr-19:
+          requires:
+            - install-19
       - test-esm:
           requires:
             - install
@@ -603,9 +609,9 @@ workflows:
       - storybook-17:
           requires:
             - install-17
-      - storybook-canary:
+      - storybook-19:
           requires:
-            - install-canary
+            - install-19
       - docs:
           requires:
             - install
@@ -628,7 +634,7 @@ workflows:
             - storybook
             - storybook-16
             - storybook-17
-            - storybook-canary
+            - storybook-19
             - docs
       - deploy-verdaccio:
           requires:

Makefile

@@ -81,8 +81,8 @@ storybook-16:
 storybook-17:
 	yarn build:storybook-17
 
-storybook-canary:
-	yarn build:storybook-canary
+storybook-19:
+	yarn build:storybook-19
 
 # for now doesn't have deploy since v3 doesn't have a place for docs and stuff yet
 ci:

package.json

@@ -12,12 +12,12 @@
     "check-types": "tsc && tsc-strict",
     "install-16": "yarn add -W react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 && node scripts/oldReactSupport.mjs",
     "install-17": "yarn add -W react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 && node scripts/oldReactSupport.mjs",
-    "install-canary": "yarn add -W react@canary react-dom@canary",
+    "install-19": "node ./scripts/install-react-19.mjs && yarn add -W react@next react-dom@next",
     "start": "cross-env NODE_ENV=storybook storybook dev -p 9003 --ci -c '.storybook'",
     "build:storybook": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook",
     "build:storybook-16": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-16",
     "build:storybook-17": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17",
-    "build:storybook-canary": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-canary",
+    "build:storybook-19": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-19",
     "start:chromatic": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9004 --ci -c '.chromatic'",
     "build:chromatic": "CHROMATIC=1 storybook build -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic",
     "start:chromatic-fc": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9005 --ci -c '.chromatic-fc'",
@@ -105,8 +105,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^15.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
     "@types/storybook__react": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
@@ -140,7 +140,7 @@
     "eslint-plugin-rulesdir": "^0.2.2",
     "fast-check": "^2.19.0",
     "fast-glob": "^3.1.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^11.3.0-alpha.0",
     "fs-extra": "^10.0.0",
     "full-icu": "^1.3.0",
     "glob-promise": "^6.0.5",
@@ -221,7 +221,9 @@
     "@parcel/rust": "2.12.1-dev.3224",
     "@parcel/types": "2.0.0-dev.1601",
     "@parcel/utils": "2.0.0-dev.1601",
-    "@parcel/workers": "2.0.0-dev.1601"
+    "@parcel/workers": "2.0.0-dev.1601",
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0"
   },
   "@parcel/transformer-css": {
     "cssModules": {

packages/@adobe/react-spectrum/package.json

@@ -101,7 +101,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   }
 }

packages/@react-aria/accordion/package.json

@@ -31,8 +31,8 @@
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/accordion/src/useAccordion.ts

@@ -34,7 +34,7 @@ export interface AccordionItemAria {
   regionProps: DOMAttributes
 }
 
-export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: TreeState<T>, ref: RefObject<HTMLButtonElement>): AccordionItemAria {
+export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: TreeState<T>, ref: RefObject<HTMLButtonElement | null>): AccordionItemAria {
   let {item} = props;
   let buttonId = useId();
   let regionId = useId();
@@ -65,7 +65,7 @@ export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: Tre
   };
 }
 
-export function useAccordion<T>(props: AriaAccordionProps<T>, state: TreeState<T>, ref: RefObject<HTMLDivElement>): AccordionAria {
+export function useAccordion<T>(props: AriaAccordionProps<T>, state: TreeState<T>, ref: RefObject<HTMLDivElement | null>): AccordionAria {
   let {listProps} = useSelectableList({
     ...props,
     ...state,

packages/@react-aria/actiongroup/package.json

@@ -32,8 +32,8 @@
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/actiongroup/src/useActionGroup.ts

@@ -28,7 +28,7 @@ export interface ActionGroupAria {
   actionGroupProps: DOMAttributes
 }
 
-export function useActionGroup<T>(props: AriaActionGroupProps<T>, state: ListState<T>, ref: RefObject<FocusableElement>): ActionGroupAria {
+export function useActionGroup<T>(props: AriaActionGroupProps<T>, state: ListState<T>, ref: RefObject<FocusableElement | null>): ActionGroupAria {
   let {
     isDisabled,
     orientation = 'horizontal' as Orientation

packages/@react-aria/actiongroup/src/useActionGroupItem.ts

@@ -31,7 +31,7 @@ const BUTTON_ROLES = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function useActionGroupItem<T>(props: AriaActionGroupItemProps, state: ListState<T>, ref?: RefObject<FocusableElement>): ActionGroupItemAria {
+export function useActionGroupItem<T>(props: AriaActionGroupItemProps, state: ListState<T>, ref?: RefObject<FocusableElement | null>): ActionGroupItemAria {
   let selectionMode = state.selectionManager.selectionMode;
   let buttonProps = {
     role: BUTTON_ROLES[selectionMode]