React 18 support

.circleci/comment.js

@@ -56,6 +56,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-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

@@ -80,6 +80,26 @@ jobs:
             - ~/react-spectrum
           key: react-spectrum16-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
+  install-17:
+    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-17 --cache-folder ~/.cache/yarn
+
+      - save_cache:
+          paths:
+            - ~/react-spectrum
+          key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
   test-ssr:
     executor: rsp-xlarge
     steps:
@@ -127,6 +147,17 @@ jobs:
           command: |
             yarn test:ssr
 
+  test-ssr-17:
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: test ssr
+          command: |
+            yarn test:ssr
+
   test-16:
     parallelism: 3
     executor: rsp-xlarge
@@ -151,6 +182,30 @@ jobs:
       - store_artifacts:
           path: ~/junit
 
+  test-17:
+    parallelism: 3
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum17-{{ .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-17.xml" yarn test ${TESTFILES}
+
+      - run:
+          command: cp junit-17.xml ~/junit/
+          when: always
+      - store_test_results:
+          path: ~/junit
+      - store_artifacts:
+          path: ~/junit
+
   lint:
     executor: rsp
     steps:
@@ -191,6 +246,21 @@ jobs:
           paths:
             - '*/storybook-16/'
 
+  storybook-17:
+    executor: rsp-large
+    steps:
+      - restore_cache:
+          key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build storybook-17
+          command: make storybook-17
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/storybook-17/'
+
   docs:
     executor: rsp-xlarge
     steps:
@@ -276,6 +346,7 @@ workflows:
     jobs:
       - install
       - install-16
+      - install-17
       - test-ssr:
           requires:
             - install
@@ -288,6 +359,12 @@ workflows:
       - test-16:
           requires:
             - install-16
+      - test-ssr-17:
+          requires:
+            - install-17
+      - test-17:
+          requires:
+            - install-17
       - lint:
           requires:
             - install
@@ -297,6 +374,9 @@ workflows:
       - storybook-16:
           requires:
             - install-16
+      - storybook-17:
+          requires:
+            - install-17
       - docs:
           requires:
             - install
@@ -313,8 +393,11 @@ workflows:
             - test
             - test-ssr-16
             - test-16
+            - test-ssr-17
+            - test-17
             - storybook
             - storybook-16
+            - storybook-17
             - docs
       - deploy-production:
           filters:

.storybook/theme.register.js → .storybook/custom-addons/theme/register.js

@@ -2,7 +2,7 @@ import {themes} from '@storybook/theming';
 import addons from '@storybook/addons';
 import {FORCE_RE_RENDER} from '@storybook/core-events';
 // temporary until we have a better place to grab it from
-import * as packageJSON from '../packages/@adobe/react-spectrum/package.json';
+import * as packageJSON from '../../../packages/@adobe/react-spectrum/package.json';
 
 // Automatically switch light/dark theme based on system pref.
 addons.register('theme-switcher', api => {

.storybook/main.js

@@ -11,7 +11,7 @@ module.exports = {
     'storybook-dark-mode',
     './custom-addons/provider/register',
     './custom-addons/descriptions/register',
-    './theme.register'
+    './custom-addons/theme/register'
   ],
   typescript: {
     check: false,

Makefile

@@ -68,6 +68,9 @@ storybook:
 storybook-16:
 	yarn build:storybook-16
 
+storybook-17:
+	yarn build:storybook-17
+
 # for now doesn't have deploy since v3 doesn't have a place for docs and stuff yet
 ci:
 	$(MAKE) publish

package.json

@@ -9,10 +9,12 @@
   },
   "scripts": {
     "check-types": "tsc",
-    "install-16": "yarn add -W react@^16.8.0 react-dom@^16.8.0",
+    "install-16": "yarn add -W react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8",
+    "install-17": "yarn add -W react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8",
     "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-16": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-16",
+    "build:storybook-17": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17",
     "start:chromatic": "CHROMATIC=1 NODE_ENV=storybook start-storybook -p 9004 --ci -c '.chromatic'",
     "build:chromatic": "CHROMATIC=1 build-storybook -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic",
     "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
@@ -69,18 +71,17 @@
     "@parcel/transformer-typescript-types": "^2.2.1",
     "@spectrum-css/component-builder": "^1.0.0",
     "@spectrum-css/vars": "^2.3.0",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-controls": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/addons": "^6.4.22",
-    "@storybook/api": "^6.4.22",
-    "@storybook/components": "^6.4.22",
-    "@storybook/react": "^6.4.22",
+    "@storybook/addon-a11y": "^6.5.3",
+    "@storybook/addon-actions": "^6.5.3",
+    "@storybook/addon-controls": "^6.5.3",
+    "@storybook/addon-links": "^6.5.3",
+    "@storybook/addons": "^6.5.3",
+    "@storybook/api": "^6.5.3",
+    "@storybook/components": "^6.5.3",
+    "@storybook/react": "^6.5.3",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^12.1.3",
     "@types/react": "^17.0.37",
     "@types/storybook__react": "^5.2.1",
@@ -150,16 +151,16 @@
     "postcss-svg": "^3.0.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-axe": "^3.0.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "react-test-renderer": "^16.9.0",
     "recursive-readdir": "^2.2.2",
     "regenerator-runtime": "0.13.3",
     "rimraf": "^2.6.3",
     "sharp": "^0.29.3",
     "sinon": "^7.3.1",
-    "storybook-dark-mode": "^1.0.3",
+    "storybook-dark-mode": "^1.1.1-canary.120.3843.0",
     "style-loader": "^0.23.1",
     "tempy": "^0.5.0",
     "typescript": "^4.6.0",

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

@@ -67,7 +67,7 @@
     "access": "public"
   },
   "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 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   }
 }

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

@@ -28,7 +28,7 @@
     "@react-types/shared": "^3.12.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -29,7 +29,7 @@
     "@react-types/shared": "^3.12.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/actiongroup/test/useActionGroup.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useActionGroup} from '../';
 import {useListState} from '@react-stately/list';
 

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 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -37,7 +37,7 @@
     "@react-types/shared": "^3.12.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js

@@ -13,7 +13,7 @@
 import {Item} from '@react-stately/collections';
 import {ListLayout} from '@react-stately/layout';
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useComboBoxState} from '@react-stately/combobox';
 import {useSearchAutocomplete} from '../';
 import {useSingleSelectListState} from '@react-stately/list';

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

@@ -26,7 +26,7 @@
     "@react-types/shared": "^3.12.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/breadcrumbs/test/useBreadcrumbItem.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useBreadcrumbItem} from '../';
 
 describe('useBreadcrumbItem', function () {

packages/@react-aria/breadcrumbs/test/useBreadcrumbs.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useBreadcrumbs} from '../';
 
 describe('useBreadcrumbs', function () {

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

@@ -25,7 +25,7 @@
     "@react-types/button": "^3.4.5"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/button/test/useButton.test.js

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useButton} from '../';
 
 describe('useButton tests', function () {

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

@@ -29,8 +29,8 @@
     "@react-types/shared": "^3.12.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 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -26,7 +26,7 @@
     "@react-types/checkbox": "^3.2.7"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -32,8 +32,8 @@
     "@react-types/slider": "^3.0.6"
   },
   "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 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/color/test/useColorField.test.js

@@ -12,7 +12,7 @@
 
 import {parseColor} from '@react-stately/color';
 import React from 'react';
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@react-spectrum/test-utils';
 import {useColorField} from '../';
 
 describe('useColorField', function () {

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

@@ -35,8 +35,8 @@
     "@react-types/shared": "^3.12.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 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"