Upgrade support for react 17 (adobe#1040)

.circleci/comment.js

@@ -19,6 +19,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 documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`
   });
 }

.circleci/config.yml

@@ -51,6 +51,19 @@ jobs:
           name: test
           command: yarn ci-test
 
+  test_17:
+    docker:
+      - image: circleci/node:12.10
+
+    working_directory: ~/react-spectrum
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: test
+          command: yarn ci-test-17
+
   lint:
     docker:
       - image: circleci/node:12.10
@@ -82,6 +95,26 @@ jobs:
           root: dist
           paths:
             - '*/storybook/'
+
+  storybook-17:
+    docker:
+      - image: circleci/node:12.10
+    resource_class: large
+
+    working_directory: ~/react-spectrum
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build storybook-17
+          command: make storybook-17
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/storybook-17/'
+
   docs:
     docker:
       - image: circleci/node:12.10
@@ -182,12 +215,18 @@ workflows:
       - test:
           requires:
             - install
+      - test_17:
+          requires:
+            - install
       - lint:
           requires:
             - install
       - storybook:
           requires:
             - install
+      - storybook-17:
+          requires:
+            - install
       - docs:
           requires:
             - install
@@ -201,7 +240,9 @@ workflows:
           requires:
             - lint
             - test
+            - test_17
             - storybook
+            - storybook-17
             - docs
       - deploy-production:
           filters:

.storybook/layout.js

@@ -7,6 +7,7 @@ export function VerticalCenter({children, className, style}) {
       className={ clsx('react-spectrum-story', className) }
       style={style}
     >
+      <span style={{position: 'absolute', top: 0, left: 0}}>{REACT_VERSION}</span>
       { children }
     </div>
   );

.storybook/webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const md5 = require('md5');
 const fs = require('fs');
+const reactVersion = require('react/package.json').version;
 
 const fileHashMemo = {};
 
@@ -27,6 +28,7 @@ module.exports = ({config}, env) => {
     // see https://github.com/storybooks/storybook/issues/1570
     config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
   }
+  config.plugins.push(new webpack.DefinePlugin({REACT_VERSION: JSON.stringify(reactVersion)}));
 
   config.resolve.extensions.push('.ts', '.tsx');
 

Makefile

@@ -69,6 +69,9 @@ icons: packages/@spectrum-icons/workflow/src packages/@spectrum-icons/color/src
 storybook:
 	NODE_ENV=production yarn build:storybook
 
+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

jest.ssr.config.js

@@ -33,6 +33,8 @@ module.exports = {
     'packages/'
   ],
 
+  testTimeout: 30000,
+
   globalSetup: require.resolve('@react-spectrum/test-utils/src/ssrSetup'),
   globalTeardown: require.resolve('@react-spectrum/test-utils/src/ssrTeardown'),
 

package.json

@@ -17,13 +17,15 @@
     "check-types": "tsc",
     "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": "yarn add -W react@17.0.0-rc.1 react-dom@17.0.0-rc.1 && NODE_ENV=production build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17",
     "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'",
     "build:docs": "PARCEL_WORKER_BACKEND=process DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx' --no-scope-hoist",
     "test": "yarn jest",
     "test:ssr": "yarn jest --config jest.ssr.config.js",
     "ci-test": "yarn jest --maxWorkers=2 && yarn test:ssr --runInBand",
+    "ci-test-17": "yarn add -W react@17.0.0-rc.1 react-dom@17.0.0-rc.1 && yarn jest --maxWorkers=2 && yarn test:ssr --runInBand",
     "lint": "yarn check-types && eslint packages --ext .js,.ts,.tsx && node scripts/lint-packages.js",
     "jest": "node scripts/jest.js",
     "copyrights": "babel-node --presets @babel/env ./scripts/addHeaders.js",
@@ -114,7 +116,7 @@
     "ignore-styles": "^5.0.1",
     "jest": "^26.4.2",
     "jest-matchmedia-mock": "^1.0.0",
-    "jsdom": "^16.2.2",
+    "jsdom": "^16.3.0",
     "lerna": "^3.13.2",
     "lfcdn": "^0.4.2",
     "md5": "^2.2.1",
@@ -137,9 +139,9 @@
     "postcss-svg": "^3.0.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
-    "react": "^0.14 || ^15 || ^16",
+    "react": "^16.8.0 || ^17.0.0-rc.1",
     "react-axe": "^3.0.2",
-    "react-dom": "^0.14 || ^15 || ^16",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1",
     "react-overlays": "0.8.3",
     "react-test-renderer": "^16.9.0",
     "recursive-readdir": "^2.2.2",
@@ -161,6 +163,8 @@
   "resolutions": {
     "@babel/core": "7.9.0",
     "@babel/runtime": "7.9.0",
-    "postcss-calc": "6.0.2"
+    "postcss-calc": "6.0.2",
+    "jest-environment-jsdom": "26.3.0",
+    "jsdom": "16.3.0"
   }
 }

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

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

packages/@react-aria/aria-modal-polyfill/package.json

@@ -22,7 +22,7 @@
     "aria-hidden": "^1.1.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"

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

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

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

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

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

@@ -30,7 +30,7 @@
     "date-fns": "^1.30.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"

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

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

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

@@ -30,7 +30,7 @@
     "@react-types/combobox": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"

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

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

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

@@ -17,7 +17,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",

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

@@ -24,7 +24,7 @@
     "clsx": "^1.1.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/focus/src/FocusScope.tsx

@@ -239,14 +239,12 @@ function useFocusContainment(scopeRef: RefObject<HTMLElement[]>, contain: boolea
           focusFirstInScope(activeScope.current);
         }
       } else {
-        e.stopPropagation();
         activeScope = scopeRef;
         focusedNode.current = e.target;
       }
     };
 
     let onBlur = (e) => {
-      e.stopPropagation();
       let isInAnyScope = isElementInAnyScope(e.relatedTarget, scopes);
 
       if (!isInAnyScope) {
@@ -273,7 +271,8 @@ function useFocusContainment(scopeRef: RefObject<HTMLElement[]>, contain: boolea
 
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
-    return () => cancelAnimationFrame(raf.current);
+    let rafRef = raf.current;
+    return () => cancelAnimationFrame(rafRef);
   }, []);
 }
 

packages/@react-aria/focus/src/focusSafely.ts

@@ -18,7 +18,7 @@ import {getInteractionModality} from '@react-aria/interactions';
  * as page scrolling and screen reader issues with CSS transitions.
  */
 export function focusSafely(element: HTMLElement) {
-  // If the user is interating with a virtual cursor, e.g. screen reader, then
+  // If the user is interacting with a virtual cursor, e.g. screen reader, then
   // wait until after any animated transitions that are currently occurring on
   // the page before shifting focus. This avoids issues with VoiceOver on iOS
   // causing the page to scroll when moving focus if the element is transitioning

packages/@react-aria/focus/test/FocusScope.test.js

@@ -245,7 +245,7 @@ describe('FocusScope', function () {
       expect(document.activeElement).toBe(input2);
 
       input2.blur();
-      expect(document.activeElement).toBe(document.body);
+      expect(document.activeElement).toBe(input2);
 
       outside.focus();
       fireEvent.focusIn(outside);
@@ -274,7 +274,7 @@ describe('FocusScope', function () {
       expect(document.activeElement).toBe(input2);
 
       input2.blur();
-      expect(document.activeElement).toBe(document.body);
+      expect(document.activeElement).toBe(input2);
       fireEvent.focusOut(input2);
       expect(document.activeElement).toBe(input2);
     });

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

@@ -23,7 +23,7 @@
     "intl-messageformat": "^2.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"

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

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

packages/@react-aria/interactions/src/useInteractOutside.ts

@@ -50,12 +50,13 @@ export function useInteractOutside(props: InteractOutsideProps) {
         }
       };
 
-      document.addEventListener('pointerdown', onPointerDown, false);
-      document.addEventListener('pointerup', onPointerUp, false);
+      // changing these to capture phase fixed combobox
+      document.addEventListener('pointerdown', onPointerDown, true);
+      document.addEventListener('pointerup', onPointerUp, true);
 
       return () => {
-        document.removeEventListener('pointerdown', onPointerDown, false);
-        document.removeEventListener('pointerup', onPointerUp, false);
+        document.removeEventListener('pointerdown', onPointerDown, true);
+        document.removeEventListener('pointerup', onPointerUp, true);
       };
     } else {
       let onMouseUp = (e) => {
@@ -75,16 +76,16 @@ export function useInteractOutside(props: InteractOutsideProps) {
         }
       };
 
-      document.addEventListener('mousedown', onPointerDown, false);
-      document.addEventListener('mouseup', onMouseUp, false);
-      document.addEventListener('touchstart', onPointerDown, false);
-      document.addEventListener('touchend', onTouchEnd, false);
+      document.addEventListener('mousedown', onPointerDown, true);
+      document.addEventListener('mouseup', onMouseUp, true);
+      document.addEventListener('touchstart', onPointerDown, true);
+      document.addEventListener('touchend', onTouchEnd, true);
 
       return () => {
-        document.removeEventListener('mousedown', onPointerDown, false);
-        document.removeEventListener('mouseup', onMouseUp, false);
-        document.removeEventListener('touchstart', onPointerDown, false);
-        document.removeEventListener('touchend', onTouchEnd, false);
+        document.removeEventListener('mousedown', onPointerDown, true);
+        document.removeEventListener('mouseup', onMouseUp, true);
+        document.removeEventListener('touchstart', onPointerDown, true);
+        document.removeEventListener('touchend', onTouchEnd, true);
       };
     }
   }, [onInteractOutside, ref, state.ignoreEmulatedMouseEvents, state.isPointerDown]);

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

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

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

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