adobe · snowystinger · Jul 22, 2021 · Jul 22, 2021 · Jul 22, 2021 · Jul 22, 2021
diff --git a/.circleci/comment.js b/.circleci/comment.js
@@ -8,6 +8,7 @@ run();
 
 async function run() {
   if (!process.env.CIRCLE_PULL_REQUEST) {
+    console.log('no pull request yet');
     return;
   }
 
@@ -20,6 +21,7 @@ async function run() {
 
 * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
 * [View the storybook-17](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-17/index.html)
+* [View the storybook-18](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-18/index.html)
 * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`
   });
 }
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -80,6 +80,26 @@ jobs:
             - ~/react-spectrum
           key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
+  install-18:
+    executor: rsp-large
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-
+            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-
+
+      - run:
+          name: build
+          command: |
+            yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-18 --cache-folder ~/.cache/yarn && yarn install && yarn patch-18
+
+      - save_cache:
+          paths:
+            - ~/react-spectrum
+          key: react-spectrum18-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
   test-ssr:
     executor: rsp-xlarge
     steps:
@@ -151,6 +171,41 @@ jobs:
       - store_artifacts:
           path: ~/junit
 
+  test-ssr-18:
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum18-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: test ssr
+          command: |
+            yarn test:ssr
+
+  test-18:
+    parallelism: 3
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum18-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run: mkdir ~/junit
+
+      - run:
+          name: test
+          command: |
+            shopt -s globstar
+            TESTFILES=$(circleci tests glob "packages/**/*.test.[tj]{s,sx}" | circleci tests split --split-by=timings)
+            JEST_JUNIT_OUTPUT_NAME="junit-18.xml" yarn test ${TESTFILES}
+
+      - run:
+          command: cp junit-18.xml ~/junit/
+          when: always
+      - store_test_results:
+          path: ~/junit
+      - store_artifacts:
+          path: ~/junit
+
   lint:
     executor: rsp
     steps:
@@ -191,6 +246,21 @@ jobs:
           paths:
             - '*/storybook-17/'
 
+  storybook-18:
+    executor: rsp-large
+    steps:
+      - restore_cache:
+          key: react-spectrum18-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build storybook-18
+          command: make storybook-18
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/storybook-18/'
+
   docs:
     executor: rsp-xlarge
     steps:
@@ -276,6 +346,7 @@ workflows:
     jobs:
       - install
       - install-17
+      - install-18
       - test-ssr:
           requires:
             - install
@@ -288,6 +359,12 @@ workflows:
       - test-17:
           requires:
             - install-17
+      - test-ssr-18:
+          requires:
+            - install-18
+      - test-18:
+          requires:
+            - install-18
       - lint:
           requires:
             - install
@@ -297,6 +374,9 @@ workflows:
       - storybook-17:
           requires:
             - install-17
+      - storybook-18:
+          requires:
+            - install-18
       - docs:
           requires:
             - install
@@ -315,6 +395,7 @@ workflows:
             - test-17
             - storybook
             - storybook-17
+            - storybook-18
             - docs
       - deploy-production:
           filters:

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,8 +1,33 @@
 import {configureActions} from '@storybook/addon-actions';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import {VerticalCenter} from './layout';
 import {withProviderSwitcher} from './custom-addons/provider';
 
+const isReactConcurrent = !!React.createRoot;
+const nodes = new Map();
+if (isReactConcurrent) {
+  ReactDOM.render = (app, rootNode) => {
+    let root = nodes.get(rootNode);
+    if (!root) {
+      root = ReactDOM.createRoot(rootNode);
+      nodes.set(rootNode, root);
+    }
+    root.render(app);
+  };
+
+  ReactDOM.unmountComponentAtNode = (component) => {
+    const root = nodes.get(component);
+    if (root) {
+      root.unmount();
+      return true;
+    } else {
+      console.error("ReactDOM injection: can't unmount the given component");
+      return false;
+    }
+  }
+};
+
 // decorator order matters, the last one will be the outer most
 
 configureActions({

diff --git a/Makefile b/Makefile
@@ -70,7 +70,10 @@ storybook:
 	NODE_ENV=production yarn build:storybook
 
 storybook-17:
-	yarn build:storybook-17
+	NODE_ENV=production yarn build:storybook-17
+
+storybook-18:
+	NODE_ENV=production yarn build:storybook-18
 
 # for now doesn't have deploy since v3 doesn't have a place for docs and stuff yet
 ci:

diff --git a/package.json b/package.json
@@ -15,10 +15,12 @@
   ],
   "scripts": {
     "check-types": "tsc",
-    "install-17": "yarn add -W react@^17.0.1 react-dom@^17.0.1",
+    "install-17": "yarn add -W react@^17.0.1 react-dom@^17.0.1 react-test-renderer@^17.0.2",
+    "install-18": "yarn add -W [email protected] [email protected] [email protected] https://pkg.csb.dev/testing-library/react-testing-library/commit/0e2cf7da/@testing-library/react",
     "start": "cross-env NODE_ENV=storybook start-storybook -p 9003 --ci -c '.storybook'",
     "build:storybook": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook",
     "build:storybook-17": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17",
+    "build:storybook-18": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-18",
     "start:chromatic": "NODE_ENV=storybook start-storybook -p 9004 --ci -c '.chromatic'",
     "build:chromatic": "build-storybook -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic",
     "start:docs": "PARCEL_WORKER_BACKEND=process DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
@@ -33,6 +35,7 @@
     "build:icons": "babel-node --presets @babel/env ./scripts/buildIcons.js",
     "clean:icons": "babel-node --presets @babel/env ./scripts/cleanIcons.js",
     "postinstall": "yarn build:icons && patch-package",
+    "patch-18": "yarn file-patch ./patches-post-prepare/pure.js.diff ./node_modules/@testing-library/react-hooks/lib/dom/pure.js",
     "plop": "plop --plopfile scripts/plopfile.js",
     "chromatic": "chromatic --project-token 'q5msektqrfg' --build-script-name 'build:chromatic'",
     "merge:css": "babel-node --presets @babel/env ./scripts/merge-spectrum-css.js",
@@ -81,7 +84,7 @@
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^3.4.1",
+    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^12.1.3",
     "@types/react": "^16.9.23",
     "@types/storybook__react": "^5.2.1",
@@ -115,6 +118,7 @@
     "eslint-plugin-rulesdir": "^0.1.0",
     "fast-glob": "^3.1.0",
     "file-loader": "^0.9.0",
+    "file-patch": "^0.3.0",
     "full-icu": "^1.3.0",
     "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
@@ -168,6 +172,8 @@
     "@babel/runtime": "7.12.5",
     "postcss-calc": "6.0.2",
     "jest-environment-jsdom": "26.3.0",
-    "jsdom": "16.3.0"
+    "jsdom": "16.3.0",
+    "@testing-library/react-hooks/@types/react": "16.9.49",
+    "@testing-library/react-hooks/@types/react-dom": "16.9.0"
   }
 }
diff --git a/packages/@react-aria/accordion/package.json b/packages/@react-aria/accordion/package.json
@@ -28,7 +28,7 @@
     "@react-types/shared": "^3.6.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/actiongroup/package.json b/packages/@react-aria/actiongroup/package.json
@@ -29,7 +29,7 @@
     "@react-types/shared": "^3.7.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/aria-modal-polyfill/package.json b/packages/@react-aria/aria-modal-polyfill/package.json
@@ -22,7 +22,7 @@
     "aria-hidden": "^1.1.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/aria-modal-polyfill/test/index.test.js b/packages/@react-aria/aria-modal-polyfill/test/index.test.js
@@ -37,9 +37,9 @@ describe('watchModals', () => {
   });
 
   afterEach(() => {
-    jest.runAllTimers();
     matchMedia.clear();
     window.requestAnimationFrame.mockRestore();
+    act(() => {jest.runAllTimers();});
   });
 
   let verify = async function (modal, queryByRole) {

diff --git a/packages/@react-aria/breadcrumbs/package.json b/packages/@react-aria/breadcrumbs/package.json
@@ -26,7 +26,7 @@
     "@react-types/shared": "^3.6.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/button/package.json b/packages/@react-aria/button/package.json
@@ -25,7 +25,7 @@
     "@react-types/button": "^3.3.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/calendar/package.json b/packages/@react-aria/calendar/package.json
@@ -31,7 +31,7 @@
     "date-fns": "^1.30.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/checkbox/package.json b/packages/@react-aria/checkbox/package.json
@@ -26,7 +26,7 @@
     "@react-types/checkbox": "^3.2.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/color/package.json b/packages/@react-aria/color/package.json
@@ -30,7 +30,7 @@
     "@react-types/slider": "^3.0.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/combobox/package.json b/packages/@react-aria/combobox/package.json
@@ -35,7 +35,7 @@
     "@react-types/shared": "^3.7.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/datepicker/package.json b/packages/@react-aria/datepicker/package.json
@@ -32,7 +32,7 @@
     "@react-types/shared": "^3.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/dialog/package.json b/packages/@react-aria/dialog/package.json
@@ -17,7 +17,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",

diff --git a/packages/@react-aria/dnd/package.json b/packages/@react-aria/dnd/package.json
@@ -30,8 +30,8 @@
     "@react-types/shared": "^3.7.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^17.0.0 || ^18.0.0-alpha-9ab90de60-20210720 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/@react-aria/dnd/src/useDrag.ts b/packages/@react-aria/dnd/src/useDrag.ts
@@ -53,6 +53,10 @@ const MESSAGES = {
   }
 };
 
+// do we want to support a `legacyRoot` option that allows people to choose what they are using?
+// @ts-ignore
+const isReactConcurrent = !!ReactDOM.createRoot;
+
 export function useDrag(options: DragOptions): DragResult {
   let formatMessage = useMessageFormatter(intlMessages);
   let state = useRef({
@@ -89,9 +93,15 @@ export function useDrag(options: DragOptions): DragResult {
         node.style.top = '0';
         node.style.left = '-100000px';
         document.body.appendChild(node);
-
-        // Call renderPreview to get a JSX element, and render it into the div with React DOM.
-        ReactDOM.render(preview, node);
+        if (isReactConcurrent) {
+          // @ts-ignore
+          let root = ReactDOM.createRoot(node);
+
+          // Call renderPreview to get a JSX element, and render it into the div with React DOM.
+          root.render(preview);
+        } else {
+          ReactDOM.render(preview, node);
+        }
 
         // Compute the offset that the preview will appear under the mouse.
         // If possible, this is based on the point the user clicked on the target.