Upgrade to React 17

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
+- Added support for React 17 (this is a backwards compatible change - React 16.12+ is still supported for consuming applications) ([#5584](https://github.com/elastic/eui/pull/5584))
 - Added the ability to control internal `EuiDataGrid` fullscreen, cell focus, and cell popover state via the `ref` prop ([#5590](https://github.com/elastic/eui/pull/5590))
 - Added `paddingSize` prop to `EuiSelectableList` ([#5581](https://github.com/elastic/eui/pull/5581))
 - Added `errorMessage` prop to `EuiSelectable` ([#5581](https://github.com/elastic/eui/pull/5581))

package.json

@@ -50,7 +50,8 @@
   },
   "resolutions": {
     "**/trim": "0.0.3",
-    "**/node-sass": "^6.0.1"
+    "**/node-sass": "^6.0.1",
+    "**/react": "^17.0.0"
   },
   "pre-commit": [
     "test-staged"
@@ -59,10 +60,10 @@
     "@types/chroma-js": "^2.0.0",
     "@types/lodash": "^4.14.160",
     "@types/numeral": "^0.0.28",
-    "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-input-autosize": "^2.2.0",
-    "@types/react-virtualized-auto-sizer": "^1.0.0",
-    "@types/react-window": "^1.8.2",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-input-autosize": "^2.2.1",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
     "@types/refractor": "^3.0.0",
     "@types/resize-observer-browser": "^0.1.5",
     "@types/vfile-message": "^2.0.0",
@@ -72,13 +73,13 @@
     "mdast-util-to-hast": "^10.0.0",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-dropzone": "^11.2.0",
-    "react-focus-on": "^3.5.0",
-    "react-input-autosize": "^2.2.2",
-    "react-is": "~16.3.0",
-    "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.5",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-dropzone": "^11.5.3",
+    "react-focus-on": "^3.5.4",
+    "react-input-autosize": "^3.0.0",
+    "react-is": "^17.0.2",
+    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-window": "^1.8.6",
     "refractor": "^3.5.0",
     "rehype-raw": "^5.0.0",
     "rehype-react": "^6.0.0",
@@ -125,15 +126,16 @@
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^24.0.6",
     "@types/node": "^10.17.5",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.6",
-    "@types/react-is": "^16.7.1",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-is": "^17.0.3",
     "@types/react-router-dom": "^5.1.5",
     "@types/tabbable": "^3.1.0",
     "@types/url-parse": "^1.4.3",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "argparse": "^2.0.1",
     "autoprefixer": "^9.8.6",
     "axe-core": "^4.1.1",
@@ -163,7 +165,6 @@
     "dedent": "^0.7.0",
     "dts-generator": "^3.0.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.3",
     "enzyme-to-json": "^3.5.0",
     "eslint": "^7.10.0",
     "eslint-config-prettier": "^6.12.0",
@@ -204,16 +205,15 @@
     "prop-types": "^15.6.0",
     "puppeteer": "^5.5.0",
     "raw-loader": "^4.0.1",
-    "react": "^16.12.0",
+    "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.1",
     "react-refresh": "^0.11.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-router-redux": "^4.0.8",
-    "react-test-renderer": "^16.12.0",
     "react-view": "^2.3.2",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
@@ -241,12 +241,12 @@
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
     "@emotion/react": "11.x",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.6",
+    "@types/react": "^16.9 || ^17.0",
+    "@types/react-dom": "^16.9 || ^17.0",
     "moment": "^2.13.0",
     "prop-types": "^15.5.0",
-    "react": "^16.12",
-    "react-dom": "^16.12",
+    "react": "^16.12 || ^17.0",
+    "react-dom": "^16.12 || ^17.0",
     "typescript": "~4.5.3"
   }
 }

scripts/jest/setup/enzyme.js

@@ -1,4 +1,4 @@
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 configure({ adapter: new Adapter() });

src-docs/src/views/image/image_example.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiImage } from '../../../../src/components';
+import { EuiCode, EuiCallOut, EuiImage } from '../../../../src/components';
 EuiImage.__docgenInfo.props.src.required = true;
 
 import imageConfig from './playground';
@@ -34,8 +34,6 @@ const imageZoomSnippet = `<EuiImage
 `;
 
 import ImageFloat from './float';
-import { EuiCallOut } from '../../../../src/components/call_out';
-import { Fragment } from 'react-is';
 const imageFloatSource = require('!!raw-loader!./float');
 const imageFloatSnippet = `<EuiImage
   alt={description}

src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap

@@ -384,7 +384,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                 scrollLock={false}
                 sideCar={[Function]}
               >
-                <ForwardRef
+                <ForwardRef(FocusLockUI)
                   as={
                     Object {
                       "$$typeof": Symbol(react.forward_ref),
@@ -652,7 +652,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                                               droppableId="columnOrder"
                                               isDropDisabled={false}
                                             >
-                                              <ConnectFunction
+                                              <Connect(Droppable)
                                                 direction="vertical"
                                                 droppableId="columnOrder"
                                                 getContainerForClone={[Function]}
@@ -1036,7 +1036,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                                                     </div>
                                                   </div>
                                                 </Droppable>
-                                              </ConnectFunction>
+                                              </Connect(Droppable)>
                                             </EuiDroppable>
                                           </Provider>
                                         </App>
@@ -1178,7 +1178,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                     }
                     tabIndex={-1}
                   />
-                </ForwardRef>
+                </ForwardRef(FocusLockUI)>
               </ForwardRef>
             </ForwardRef>
           </EuiFocusTrap>

src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap

@@ -395,7 +395,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                 scrollLock={false}
                 sideCar={[Function]}
               >
-                <ForwardRef
+                <ForwardRef(FocusLockUI)
                   as={
                     Object {
                       "$$typeof": Symbol(react.forward_ref),
@@ -606,7 +606,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                                           <EuiDroppable
                                             droppableId="columnSorting"
                                           >
-                                            <ConnectFunction
+                                            <Connect(Droppable)
                                               direction="vertical"
                                               droppableId="columnSorting"
                                               getContainerForClone={[Function]}
@@ -1261,7 +1261,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                                                   </div>
                                                 </div>
                                               </Droppable>
-                                            </ConnectFunction>
+                                            </Connect(Droppable)>
                                           </EuiDroppable>
                                         </Provider>
                                       </App>
@@ -1453,7 +1453,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                     }
                     tabIndex={-1}
                   />
-                </ForwardRef>
+                </ForwardRef(FocusLockUI)>
               </ForwardRef>
             </ForwardRef>
           </EuiFocusTrap>

src/components/datagrid/data_grid.test.tsx

@@ -556,6 +556,7 @@ describe('EuiDataGrid', () => {
               "left": 0,
               "lineHeight": undefined,
               "position": "absolute",
+              "right": undefined,
               "top": "100px",
               "width": 100,
             },
@@ -581,6 +582,7 @@ describe('EuiDataGrid', () => {
               "left": 100,
               "lineHeight": undefined,
               "position": "absolute",
+              "right": undefined,
               "top": "100px",
               "width": 100,
             },
@@ -606,6 +608,7 @@ describe('EuiDataGrid', () => {
               "left": 0,
               "lineHeight": undefined,
               "position": "absolute",
+              "right": undefined,
               "top": "134px",
               "width": 100,
             },
@@ -631,6 +634,7 @@ describe('EuiDataGrid', () => {
               "left": 100,
               "lineHeight": undefined,
               "position": "absolute",
+              "right": undefined,
               "top": "134px",
               "width": 100,
             },

src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap

@@ -54,7 +54,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
           "components": Object {
             "a": Object {
               "$$typeof": Symbol(react.forward_ref),
-              "displayName": "EuiLink",
               "propTypes": Object {
                 "aria-label": [Function],
                 "className": [Function],
@@ -889,7 +888,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                             scrollLock={false}
                             sideCar={[Function]}
                           >
-                            <ForwardRef
+                            <ForwardRef(FocusLockUI)
                               as={
                                 Object {
                                   "$$typeof": Symbol(react.forward_ref),
@@ -1124,7 +1123,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                                 }
                                 tabIndex={-1}
                               />
-                            </ForwardRef>
+                            </ForwardRef(FocusLockUI)>
                           </ForwardRef>
                         </ForwardRef>
                       </EuiFocusTrap>
@@ -2412,7 +2411,7 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                           scrollLock={false}
                           sideCar={[Function]}
                         >
-                          <ForwardRef
+                          <ForwardRef(FocusLockUI)
                             as={
                               Object {
                                 "$$typeof": Symbol(react.forward_ref),
@@ -3371,7 +3370,7 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                               }
                               tabIndex={0}
                             />
-                          </ForwardRef>
+                          </ForwardRef(FocusLockUI)>
                           <RequireSideCar
                             noIsolation={true}
                             onClickOutside={[Function]}