Bump react and react-dom (#2300)

* Bump react and react-dom

Bumps [react](https://github.com/facebook/react/tree/HEAD/packages/react) and [react-dom](https://github.com/facebook/react/tree/HEAD/packages/react-dom). These dependencies needed to be updated together.

Updates `react` from 16.14.0 to 17.0.1
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/master/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v17.0.1/packages/react)

Updates `react-dom` from 16.14.0 to 17.0.1
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/master/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v17.0.1/packages/react-dom)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* Fix

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Co-authored-by: Panayiotis Lipiridis <lipiridis@gmail.com>

package-lock.json

@@ -18815,13 +18815,12 @@
       }
     },
     "react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+      "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "object-assign": "^4.1.1"
       }
     },
     "react-app-polyfill": {
@@ -18984,14 +18983,13 @@
       }
     },
     "react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
+      "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.20.1"
       }
     },
     "react-error-overlay": {
@@ -19800,9 +19798,9 @@
       }
     },
     "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz",
+      "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"

package.json

@@ -42,8 +42,8 @@
     "png-chunks-extract": "1.0.0",
     "points-on-curve": "0.2.0",
     "pwacompat": "2.0.17",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-scripts": "3.4.3",
     "roughjs": "4.3.1",
     "socket.io-client": "2.3.1",

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -3240,8 +3240,8 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
-  "version": 8,
-  "versionNonce": 1116226695,
+  "version": 4,
+  "versionNonce": 453191,
   "width": 10,
   "x": 10,
   "y": 10,
@@ -3312,7 +3312,7 @@ Object {
       "elements": Array [
         Object {
           "angle": 0,
-          "backgroundColor": "transparent",
+          "backgroundColor": "#fa5252",
           "boundElementIds": null,
           "fillStyle": "hachure",
           "groupIds": Array [],
@@ -3358,85 +3358,13 @@ Object {
           "opacity": 100,
           "roughness": 1,
           "seed": 337897,
-          "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 5,
-          "versionNonce": 401146281,
-          "width": 10,
-          "x": 10,
-          "y": 10,
-        },
-      ],
-    },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id0": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "#fa5252",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 337897,
-          "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 6,
-          "versionNonce": 2019559783,
-          "width": 10,
-          "x": 10,
-          "y": 10,
-        },
-      ],
-    },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id0": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "#fa5252",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 337897,
           "strokeColor": "#5f3dc4",
           "strokeSharpness": "sharp",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
-          "version": 8,
-          "versionNonce": 1116226695,
+          "version": 4,
+          "versionNonce": 453191,
           "width": 10,
           "x": 10,
           "y": 10,
@@ -3449,7 +3377,7 @@ Object {
 
 exports[`regression tests change the properties of a shape: [end of test] number of elements 1`] = `1`;
 
-exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `10`;
+exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `8`;
 
 exports[`regression tests click on an element and drag it: [dragged] appState 1`] = `
 Object {
@@ -8705,7 +8633,7 @@ Object {
 
 exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of elements 1`] = `2`;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of renders 1`] = `16`;
+exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of renders 1`] = `15`;
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] appState 1`] = `
 Object {
@@ -8945,7 +8873,7 @@ Object {
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of elements 1`] = `2`;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of renders 1`] = `16`;
+exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of renders 1`] = `15`;
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] appState 1`] = `
 Object {
@@ -9247,7 +9175,7 @@ Object {
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of elements 1`] = `2`;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of renders 1`] = `17`;
+exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of renders 1`] = `16`;
 
 exports[`regression tests hotkey 2 selects rectangle tool: [end of test] appState 1`] = `
 Object {
@@ -23186,7 +23114,7 @@ Object {
   "strokeWidth": 2,
   "type": "rectangle",
   "version": 3,
-  "versionNonce": 81784553,
+  "versionNonce": 1505387817,
   "width": 20,
   "x": 10,
   "y": 10,
@@ -23205,14 +23133,14 @@ Object {
   "isDeleted": false,
   "opacity": 60,
   "roughness": 2,
-  "seed": 23633383,
+  "seed": 238820263,
   "strokeColor": "#c92a2a",
   "strokeSharpness": "sharp",
   "strokeStyle": "dotted",
   "strokeWidth": 2,
   "type": "rectangle",
-  "version": 13,
-  "versionNonce": 915032327,
+  "version": 9,
+  "versionNonce": 1604849351,
   "width": 20,
   "x": 40,
   "y": 40,
@@ -23375,7 +23303,7 @@ Object {
           "opacity": 100,
           "roughness": 1,
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#c92a2a",
           "strokeSharpness": "sharp",
           "strokeStyle": "solid",
           "strokeWidth": 1,
@@ -23424,124 +23352,6 @@ Object {
         },
         Object {
           "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 20,
-          "id": "id1",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 449462985,
-          "strokeColor": "#c92a2a",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 5,
-          "versionNonce": 1150084233,
-          "width": 20,
-          "x": 40,
-          "y": 40,
-        },
-      ],
-    },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id1": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 20,
-          "id": "id0",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 337897,
-          "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 2,
-          "versionNonce": 1278240551,
-          "width": 20,
-          "x": 10,
-          "y": 10,
-        },
-        Object {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 20,
-          "id": "id1",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 449462985,
-          "strokeColor": "#c92a2a",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 6,
-          "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": 40,
-        },
-      ],
-    },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id1": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElementIds": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 20,
-          "id": "id0",
-          "isDeleted": false,
-          "opacity": 100,
-          "roughness": 1,
-          "seed": 337897,
-          "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "version": 2,
-          "versionNonce": 1278240551,
-          "width": 20,
-          "x": 10,
-          "y": 10,
-        },
-        Object {
-          "angle": 0,
           "backgroundColor": "#e64980",
           "boundElementIds": null,
           "fillStyle": "hachure",
@@ -23557,8 +23367,8 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
-          "version": 8,
-          "versionNonce": 238820263,
+          "version": 4,
+          "versionNonce": 2019559783,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -23616,8 +23426,8 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
-          "version": 9,
-          "versionNonce": 400692809,
+          "version": 5,
+          "versionNonce": 1150084233,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -23675,8 +23485,8 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 10,
-          "versionNonce": 1604849351,
+          "version": 6,
+          "versionNonce": 1116226695,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -23734,8 +23544,8 @@ Object {
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 11,
-          "versionNonce": 1505387817,
+          "version": 7,
+          "versionNonce": 1014066025,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -23787,14 +23597,14 @@ Object {
           "isDeleted": false,
           "opacity": 100,
           "roughness": 2,
-          "seed": 23633383,
+          "seed": 238820263,
           "strokeColor": "#c92a2a",
           "strokeSharpness": "sharp",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 12,
-          "versionNonce": 493213705,
+          "version": 8,
+          "versionNonce": 400692809,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -23846,14 +23656,14 @@ Object {
           "isDeleted": false,
           "opacity": 60,
           "roughness": 2,
-          "seed": 23633383,
+          "seed": 238820263,
           "strokeColor": "#c92a2a",
           "strokeSharpness": "sharp",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 13,
-          "versionNonce": 915032327,
+          "version": 9,
+          "versionNonce": 1604849351,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -23889,7 +23699,7 @@ Object {
           "strokeWidth": 2,
           "type": "rectangle",
           "version": 3,
-          "versionNonce": 81784553,
+          "versionNonce": 1505387817,
           "width": 20,
           "x": 10,
           "y": 10,
@@ -23905,14 +23715,14 @@ Object {
           "isDeleted": false,
           "opacity": 60,
           "roughness": 2,
-          "seed": 23633383,
+          "seed": 238820263,
           "strokeColor": "#c92a2a",
           "strokeSharpness": "sharp",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
-          "version": 13,
-          "versionNonce": 915032327,
+          "version": 9,
+          "versionNonce": 1604849351,
           "width": 20,
           "x": 40,
           "y": 40,
@@ -23925,7 +23735,7 @@ Object {
 
 exports[`regression tests selecting 'Paste styles' in context menu pastes styles: [end of test] number of elements 1`] = `2`;
 
-exports[`regression tests selecting 'Paste styles' in context menu pastes styles: [end of test] number of renders 1`] = `21`;
+exports[`regression tests selecting 'Paste styles' in context menu pastes styles: [end of test] number of renders 1`] = `19`;
 
 exports[`regression tests selecting 'Send backward' in context menu sends element backward: [end of test] appState 1`] = `
 Object {