TESTING ONLY - update to React 17

apps/perf-test-react-components/package.json

@@ -25,8 +25,8 @@
     "flamegrill": "0.2.0",
     "lodash": "^4.17.15",
     "querystring": "^0.2.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "tslib": "^2.1.0"
   }
 }

apps/perf-test/package.json

@@ -21,8 +21,8 @@
     "flamegrill": "0.2.0",
     "lodash": "^4.17.15",
     "querystring": "^0.2.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "tslib": "^2.1.0"
   }
 }

apps/public-docsite-resources/package.json

@@ -42,8 +42,8 @@
     "@fluentui/theme-samples": "^8.4.18",
     "@fluentui/react-monaco-editor": "^1.3.18",
     "office-ui-fabric-core": "^11.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "tslib": "^2.1.0"
   }
 }

apps/public-docsite/package.json

@@ -46,8 +46,8 @@
     "@fluentui/utilities": "^8.8.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "tslib": "^2.1.0",
     "whatwg-fetch": "2.0.4"
   }

apps/theming-designer/package.json

@@ -26,8 +26,8 @@
     "@fluentui/set-version": "^8.2.0",
     "@fluentui/font-icons-mdl2": "^8.2.5",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "tslib": "^2.1.0"
   }
 }

apps/upgrade-examples-v8-v9/package.json

@@ -21,8 +21,8 @@
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
     "@fluentui/react-components": "^9.0.0-rc.6",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "tslib": "^2.1.0"
   }
 }

apps/vr-tests-react-components/package.json

@@ -47,8 +47,8 @@
     "@fluentui/react-utilities": "9.0.0-rc.5",
     "@fluentui/scripts": "^1.0.0",
     "@griffel/react": "1.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "screener-storybook": "0.23.0",
     "tslib": "^2.1.0"
   }

apps/vr-tests/package.json

@@ -25,8 +25,8 @@
     "@fluentui/react-icons-mdl2": "^1.3.6",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/storybook": "^1.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "screener-storybook": "0.23.0",
     "tslib": "^2.1.0"
   }

azure-pipelines.yml

@@ -33,9 +33,9 @@ jobs:
           yarn nx run @fluentui/nx-workspace-tools:check-graph
         displayName: NX workspace lint
 
-      - script: |
-          yarn check:installed-dependencies-versions
-        displayName: 'check packages: installed dependencies versions'
+      # - script: |
+      #     yarn check:installed-dependencies-versions
+      #   displayName: 'check packages: installed dependencies versions'
 
       - script: |
           if [[ -n "$(targetBranch)" ]]; then
@@ -46,12 +46,12 @@ jobs:
         displayName: check formatting
 
       ## Danger.js checks for Fluent UI N*
-      - script: |
-          yarn danger ci
-        displayName: danger
-        condition: eq(variables.isPR, true)
-        env:
-          DANGER_GITHUB_API_TOKEN: $(DANGER_GITHUB_API_TOKEN)
+      # - script: |
+      #     yarn danger ci
+      #   displayName: danger
+      #   condition: eq(variables.isPR, true)
+      #   env:
+      #     DANGER_GITHUB_API_TOKEN: $(DANGER_GITHUB_API_TOKEN)
 
       - script: |
           yarn buildci  $(sinceArg)

change/@fluentui-codemods-a7fab5ca-4a61-4193-8d59-29659bdb2662.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Bump React dependency to 17",
+  "packageName": "@fluentui/codemods",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-conformance-2d13ee16-e869-495d-af85-64d1c0cfcc0d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move react-is to peer dependencies and allow 17",
+  "packageName": "@fluentui/react-conformance",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-context-selector-a6b1ecd9-9d39-427d-a12a-bdd1cd9d9740.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update devDependencies",
+  "packageName": "@fluentui/react-context-selector",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-docsite-components-6cae5d70-22b0-436b-8fc0-3524834e0f04.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Use React 17 in export to codepen",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-icons-mdl2-c3660509-5d11-4663-9832-4e0fab034f06.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update devDependencies",
+  "packageName": "@fluentui/react-icons-mdl2",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-13b0848c-df99-4ff9-bce1-f0d29510d326.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "work around new type issue",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -123,7 +123,6 @@
     "@types/doctrine": "0.0.5",
     "@types/enhanced-resolve": "3.0.7",
     "@types/enzyme": "3.10.3",
-    "@types/enzyme-adapter-react-16": "1.0.3",
     "@types/eslint": "7.2.13",
     "@types/express": "4.17.2",
     "@types/fs-extra": "8.0.1",
@@ -136,9 +135,10 @@
     "@types/node": "10.17.55",
     "@types/node-fetch": "2.5.7",
     "@types/prettier": "2.2.3",
-    "@types/react": "16.14.23",
-    "@types/react-dom": "16.9.14",
-    "@types/react-test-renderer": "16.9.5",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "17.0.15",
+    "@types/react-is": "17.0.3",
+    "@types/react-test-renderer": "17.0.1",
     "@types/scheduler": "0.16.2",
     "@types/semver": "^5.5.0",
     "@types/tmp": "0.2.0",
@@ -149,6 +149,7 @@
     "@typescript-eslint/eslint-plugin": "4.22.0",
     "@typescript-eslint/experimental-utils": "4.22.0",
     "@typescript-eslint/parser": "4.22.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "ajv": "8.4.0",
     "autoprefixer": "10.2.1",
     "babel-jest": "26.6.3",
@@ -171,7 +172,6 @@
     "enhanced-resolve": "5.8.2",
     "enquirer": "2.3.6",
     "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.15.2",
     "esbuild-loader": "2.18.0",
     "eslint": "7.25.0",
     "eslint-config-airbnb": "18.2.1",
@@ -217,14 +217,15 @@
     "prettier": "2.2.1",
     "pretty-bytes": "5.6.0",
     "raw-loader": "4.0.2",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "react-app-polyfill": "2.0.0",
-    "react-dom": "16.14.0",
-    "react-test-renderer": "16.14.0",
+    "react-dom": "17.0.2",
+    "react-is": "17.0.2",
+    "react-test-renderer": "17.0.2",
     "sass": "1.49.11",
     "sass-loader": "12.4.0",
     "satisfied": "^1.1.1",
-    "scheduler": "0.19.1",
+    "scheduler": "0.20.2",
     "schema-utils": "3.1.1",
     "semver": "^6.2.0",
     "storybook-addon-export-to-codesandbox": "0.6.4",
@@ -286,8 +287,6 @@
     "@typescript-eslint/experimental-utils": "4.22.0",
     "@typescript-eslint/parser": "4.22.0",
     "@types/jest-axe/axe-core": "4.2.1",
-    "@types/react": "16.14.23",
-    "@types/react-dom": "16.9.14",
     "eslint": "7.25.0"
   },
   "syncpack": {

packages/codemods/package.json

@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "tslib": "^2.1.0",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "ts-morph": "^10.0.1",
     "glob": "^7.1.2",
     "yargs": "^13.3.2"

packages/fluentui/CHANGELOG.md

@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - `mergeThemes()` and other `merge*` functions used for styling accept only two parameters @layershifter ([#22123](https://github.com/microsoft/fluentui/pull/22123))
 - Create portal elements in separate elements @layershifter ([#22329](https://github.com/microsoft/fluentui/pull/22329))
 - Do not render styles in Provider when "as" is "React.Fragment" @layershifter ([#22359](https://github.com/microsoft/fluentui/pull/22359))
+- Move `react-is` to `peerDependencies` and allow 16 or 17 @ecraig12345 ([#22326](https://github.com/microsoft/fluentui/pull/22326))
 
 ### Fixes
 - `Tooltip` text size should be 12 by default @petr-duda ([#22407](https://github.com/microsoft/fluentui/pull/22407))
@@ -31,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Datepicker` by adding `aria-haspopup="true"` when `allowManualInput` is set to false @chpalac ([#22201](https://github.com/microsoft/fluentui/pull/22201))
 - Fix `Attachment` progress-bar overflow @Hirse ([#22115](https://github.com/microsoft/fluentui/pull/22115))
 - Use v2 theme by default in screener tests @jurokapsiar ([#22286](https://github.com/microsoft/fluentui/pull/22286))
+- Allow React 17 in `peerDependencies` of all packages @ecraig12345 ([#22326](https://github.com/microsoft/fluentui/pull/22326))
 
 ### Features
 - Add selected items count narration by screen reader for search multiple selection Dropdown @adamsamec ([#22269](https://github.com/microsoft/fluentui/pull/22269))

packages/fluentui/code-sandbox/package.json

@@ -23,8 +23,8 @@
   "module": "dist/es/index.js",
   "peerDependencies": {
     "@fluentui/react-northstar": "0.54.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.8.0 || ^17",
+    "react-dom": "^16.8.0 || ^17"
   },
   "publishConfig": {
     "access": "public"

packages/fluentui/docs-components/package.json

@@ -31,8 +31,8 @@
   "module": "dist/es/index.js",
   "peerDependencies": {
     "prettier": "^2.0.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.8.0 || ^17",
+    "react-dom": "^16.8.0 || ^17"
   },
   "publishConfig": {
     "access": "public"

packages/fluentui/docs/package.json

@@ -34,11 +34,11 @@
     "moment": "^2.18.1",
     "prop-types": "^15.7.2",
     "qs": "^6.8.0",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "react-codesandboxer": "^3.1.3",
     "react-custom-scrollbars": "^4.2.1",
     "react-document-title": "^2.0.3",
-    "react-dom": "16.14.0",
+    "react-dom": "17.0.2",
     "react-hook-form": "^5.7.2",
     "react-hot-loader": "^4.13.0",
     "react-markdown": "^4.0.8",

packages/fluentui/projects-test/assets/rollup/index.html

@@ -3,9 +3,9 @@
   <body>
     <script src="https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prop-types@15/prop-types.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.development.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.development.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/react-is@16/umd/react-is.development.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/react-is@17/umd/react-is.development.js"></script>
 
     <div id="root"></div>
     <script src="/bundle.js"></script>

packages/fluentui/react-bindings/package.json

@@ -16,8 +16,7 @@
     "@uifabric/utilities": "^7.32.3",
     "classnames": "^2.2.6",
     "lodash": "^4.17.15",
-    "prop-types": "^15.7.2",
-    "react-is": "^16.6.3"
+    "prop-types": "^15.7.2"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -36,6 +35,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17",
     "react-dom": "^16.8.0 || ^17",
+    "react-is": "^16 || ^17",
     "scheduler": "^0.19.0 || ^0.20.0"
   },
   "publishConfig": {

packages/fluentui/react-builder/package.json

@@ -16,11 +16,8 @@
     "immer": "^9.0.12",
     "lodash": "^4.17.15",
     "lz-string": "^1.4.4",
-    "react": "16.14.0",
     "react-document-title": "^2.0.3",
-    "react-dom": "16.14.0",
     "react-frame-component": "^4.1.1",
-    "react-is": "^16.6.3",
     "use-immer": "^0.6.0"
   },
   "devDependencies": {
@@ -30,7 +27,10 @@
     "lerna-alias": "^3.0.3-0"
   },
   "peerDependencies": {
-    "@babel/standalone": "^7.8.3"
+    "@babel/standalone": "^7.8.3",
+    "react": "^16.8.0 || ^17",
+    "react-dom": "^16.8.0 || ^17",
+    "react-is": "^16 || ^17"
   },
   "files": [
     "dist"

packages/fluentui/react-component-ref/package.json

@@ -5,13 +5,11 @@
   "author": "Oleksandr Fediashov <[email protected]>",
   "bugs": "https://github.com/microsoft/fluentui/issues",
   "dependencies": {
-    "@babel/runtime": "^7.10.4",
-    "react-is": "^16.6.3"
+    "@babel/runtime": "^7.10.4"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts": "^1.0.0",
-    "@types/react-is": "^16.7.1",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
@@ -24,7 +22,8 @@
   "module": "dist/es/index.js",
   "peerDependencies": {
     "react": "^16.8.0 || ^17",
-    "react-dom": "^16.8.0 || ^17"
+    "react-dom": "^16.8.0 || ^17",
+    "react-is": "^16 || ^17"
   },
   "publishConfig": {
     "access": "public"

packages/fluentui/react-icons-northstar/package.json

@@ -14,9 +14,7 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts": "^1.0.0",
     "@types/classnames": "^2.2.9",
-    "@types/react-is": "^16.7.1",
-    "lerna-alias": "^3.0.3-0",
-    "react-is": "^16.6.3"
+    "lerna-alias": "^3.0.3-0"
   },
   "files": [
     "dist"

packages/fluentui/react-northstar-prototypes/package.json

@@ -21,10 +21,8 @@
     "formik": "2.2.6",
     "lodash": "^4.17.15",
     "moment": "^2.18.1",
-    "react": "16.14.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-document-title": "^2.0.3",
-    "react-dom": "16.14.0",
     "react-hook-form": "^5.7.2",
     "react-textarea-autosize": "7.0.4",
     "react-virtualized": "^9.21.1",