Bump React@17 (#128239)

package.json

@@ -91,6 +91,8 @@
     "**/refractor/prismjs": "~1.27.0",
     "**/trim": "1.0.1",
     "**/typescript": "4.6.3",
+    "**/use-composed-ref": "^1.3.0",
+    "**/use-latest": "^1.2.1",
     "@tanstack/query-core": "^4.2.1",
     "globby/fast-glob": "3.2.7",
     "puppeteer/node-fetch": "^2.6.7"
@@ -390,7 +392,7 @@
     "color": "^4.2.3",
     "commander": "^4.1.1",
     "compare-versions": "3.5.1",
-    "constate": "^1.3.2",
+    "constate": "^3.3.2",
     "content-disposition": "^0.5.4",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.23.5",
@@ -499,46 +501,46 @@
     "pluralize": "3.1.0",
     "polished": "^3.7.2",
     "pretty-ms": "6.0.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "proxy-from-env": "1.0.0",
     "puid": "1.0.7",
     "puppeteer": "^10.2.0",
     "query-string": "^6.13.2",
     "rbush": "^3.0.1",
     "re-resizable": "^6.1.1",
     "re2": "1.17.4",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-ace": "^7.0.5",
     "react-beautiful-dnd": "^13.1.0",
     "react-color": "^2.13.8",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
     "react-dropzone": "^4.2.9",
     "react-fast-compare": "^2.0.4",
-    "react-grid-layout": "^0.16.2",
+    "react-focus-on": "^3.6.0",
+    "react-grid-layout": "^1.3.4",
     "react-hook-form": "^7.30.0",
     "react-intl": "^2.8.0",
-    "react-is": "^16.13.1",
-    "react-markdown": "^4.3.1",
+    "react-is": "^17.0.2",
+    "react-markdown": "^6.0.3",
     "react-moment-proptypes": "^1.7.0",
     "react-monaco-editor": "^0.41.2",
-    "react-popper-tooltip": "^2.10.1",
-    "react-redux": "^7.2.0",
-    "react-resizable": "^1.7.5",
-    "react-resize-detector": "^4.2.0",
-    "react-reverse-portal": "^1.0.4",
+    "react-popper-tooltip": "^3.1.1",
+    "react-redux": "^7.2.8",
+    "react-resizable": "^3.0.4",
+    "react-resize-detector": "^7.1.1",
+    "react-reverse-portal": "^2.1.0",
     "react-router": "^5.2.0",
     "react-router-config": "^5.1.1",
     "react-router-dom": "^5.2.0",
-    "react-router-redux": "^4.0.8",
-    "react-shortcuts": "^2.0.0",
-    "react-sizeme": "^2.6.6",
+    "react-shortcuts": "^2.1.0",
+    "react-sizeme": "^3.0.2",
     "react-syntax-highlighter": "^15.3.1",
     "react-tiny-virtual-list": "^2.2.0",
     "react-use": "^15.3.8",
-    "react-virtualized": "^9.21.2",
+    "react-virtualized": "^9.22.3",
     "react-vis": "^1.8.1",
     "react-visibility-sensor": "^5.1.1",
-    "recompose": "^0.26.0",
+    "recompose": "^0.30.0",
     "reduce-reducers": "^1.0.4",
     "redux": "^4.1.0",
     "redux-actions": "^2.6.5",
@@ -694,11 +696,13 @@
     "@storybook/addon-storyshots": "^6.4.22",
     "@storybook/addons": "^6.4.22",
     "@storybook/api": "^6.4.22",
+    "@storybook/client-api": "^6.4.22",
     "@storybook/components": "^6.4.22",
     "@storybook/core": "^6.4.22",
     "@storybook/core-common": "^6.4.22",
     "@storybook/core-events": "^6.4.22",
     "@storybook/node-logger": "^6.4.22",
+    "@storybook/preview-web": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-react": "^1.2.4",
     "@storybook/theming": "^6.4.22",
@@ -734,7 +738,7 @@
     "@types/deep-freeze-strict": "^1.1.0",
     "@types/delete-empty": "^2.0.0",
     "@types/ejs": "^3.0.6",
-    "@types/enzyme": "^3.10.8",
+    "@types/enzyme": "^3.10.12",
     "@types/eslint": "^7.28.0",
     "@types/express": "^4.17.13",
     "@types/extract-zip": "^1.6.2",
@@ -761,7 +765,6 @@
     "@types/intl-relativeformat": "^2.1.0",
     "@types/jest": "^26.0.22",
     "@types/jest-axe": "^3.5.3",
-    "@types/jest-specific-snapshot": "^0.5.5",
     "@types/joi": "^17.2.3",
     "@types/jquery": "^3.3.31",
     "@types/js-levenshtein": "^1.1.0",
@@ -1065,23 +1068,22 @@
     "@types/pngjs": "^3.4.0",
     "@types/prettier": "^2.3.2",
     "@types/pretty-ms": "^5.0.0",
-    "@types/prop-types": "^15.7.3",
+    "@types/prop-types": "^15.7.5",
     "@types/rbush": "^3.0.0",
-    "@types/react": "^16.14.25",
+    "@types/react": "^17.0.45",
     "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-dom": "^16.9.15",
-    "@types/react-grid-layout": "^0.16.7",
+    "@types/react-dom": "^17.0.17",
+    "@types/react-grid-layout": "^1.3.2",
     "@types/react-intl": "^2.3.15",
-    "@types/react-is": "^16.7.2",
-    "@types/react-redux": "^7.1.9",
-    "@types/react-resize-detector": "^4.0.1",
+    "@types/react-is": "^17.0.3",
+    "@types/react-resize-detector": "^6.1.0",
     "@types/react-router": "^5.1.7",
     "@types/react-router-config": "^5.0.2",
     "@types/react-router-dom": "^5.1.5",
-    "@types/react-test-renderer": "^16.9.1",
-    "@types/react-virtualized": "^9.18.7",
+    "@types/react-test-renderer": "^17.0.2",
+    "@types/react-virtualized": "^9.21.21",
     "@types/react-vis": "^1.11.9",
-    "@types/recompose": "^0.30.6",
+    "@types/recompose": "^0.30.10",
     "@types/reduce-reducers": "^1.0.0",
     "@types/redux-actions": "^2.6.1",
     "@types/redux-logger": "^3.0.8",
@@ -1121,6 +1123,7 @@
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "@typescript-eslint/typescript-estree": "^5.20.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "@yarnpkg/lockfile": "^1.1.0",
     "abab": "^2.0.4",
     "aggregate-error": "^3.1.0",
@@ -1166,8 +1169,6 @@
     "dpdm": "3.5.0",
     "ejs": "^3.1.8",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-adapter-utils": "^1.14.0",
     "enzyme-to-json": "^3.6.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
@@ -1215,16 +1216,15 @@
     "jest-config": "^26",
     "jest-diff": "^26.6.2",
     "jest-environment-jsdom": "^26.6.2",
-    "jest-environment-jsdom-thirteen": "^1.0.1",
     "jest-mock": "^26.6.2",
     "jest-raw-loader": "^1.0.1",
     "jest-runtime": "^26",
     "jest-silent-reporter": "^0.5.0",
     "jest-snapshot": "^26.6.2",
-    "jest-specific-snapshot": "2.0.0",
+    "jest-specific-snapshot": "^4.0.0",
     "jest-styled-components": "^7.0.3",
     "jimp": "^0.14.0",
-    "jsdom": "13.1.0",
+    "jsdom": "^16.4.0",
     "json-schema-typed": "^8.0.1",
     "json5": "^1.0.1",
     "jsondiffpatch": "0.4.1",
@@ -1264,10 +1264,10 @@
     "proxy": "^1.0.2",
     "q": "^1.5.1",
     "raw-loader": "^3.1.0",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^17.0.2",
     "regenerate": "^1.4.0",
     "resolve": "^1.22.0",
-    "rxjs-marbles": "^5.0.6",
+    "rxjs-marbles": "^7.0.1",
     "sass-loader": "^10.3.1",
     "selenium-webdriver": "^4.4.0",
     "simple-git": "^3.10.0",

packages/core/overlays/core-overlays-browser-internal/src/banners/user_banner_service.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import { filter } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
@@ -72,7 +72,7 @@ export class UserBannerService {
                     </div>
                   }
                 >
-                  <ReactMarkdownLazy renderers={{ root: Fragment }} source={content.trim()} />
+                  <ReactMarkdownLazy>{content.trim()}</ReactMarkdownLazy>
                 </React.Suspense>
 
                 <EuiButton type="primary" size="s" onClick={() => banners.remove(id!)}>

packages/kbn-test/src/jest/setup/enzyme.js

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

src/dev/license_checker/config.ts

@@ -67,6 +67,7 @@ export const LICENSE_ALLOWED = [
   'WTFPL',
   'Nuclide software',
   'Python-2.0',
+  '(Apache-2.0 AND MIT)',
 ];
 
 // The following list only applies to licenses that

src/plugins/data_view_editor/public/components/form_fields/title_field.tsx

@@ -182,7 +182,6 @@ export const TitleField = ({
               isInvalid={isInvalid}
               value={field.value}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                e.persist();
                 let query = e.target.value;
                 if (query.length === 1 && !appendedWildcard && canAppendWildcard(query)) {
                   query += '*';

src/plugins/discover/public/application/main/discover_main_route.test.tsx

@@ -22,7 +22,7 @@ import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_
 import { findTestSubject } from '@elastic/eui/lib/test';
 jest.mock('./discover_main_app', () => {
   return {
-    DiscoverMainApp: jest.fn(),
+    DiscoverMainApp: jest.fn().mockReturnValue(<></>),
   };
 });
 

src/plugins/kibana_react/public/code_editor/code_editor.test.tsx

@@ -43,7 +43,15 @@ const logs = `
 [Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome
 `;
 
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
 describe('<CodeEditor />', () => {
+  window.ResizeObserver = ResizeObserver;
+
   test('is rendered', () => {
     const component = mountWithIntl(
       <CodeEditor languageId="loglang" height={250} value={logs} onChange={() => {}} />

src/plugins/kibana_react/public/code_editor/code_editor.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useState, useRef, useCallback, useMemo, useEffect, KeyboardEvent } from 'react';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import ReactMonacoEditor from 'react-monaco-editor';
 import {
   htmlIdGenerator,
@@ -186,6 +186,13 @@ export const CodeEditor: React.FC<Props> = ({
     _editor.current?.layout();
   }, []);
 
+  useResizeDetector({
+    handleWidth: true,
+    handleHeight: true,
+    onResize: _updateDimensions,
+    refreshMode: 'debounce',
+  });
+
   const startEditing = useCallback(() => {
     setIsHintActive(false);
     _editor.current?.focus();
@@ -469,12 +476,6 @@ export const CodeEditor: React.FC<Props> = ({
           }}
         />
       </FullScreenDisplay>
-      <ReactResizeDetector
-        handleWidth
-        handleHeight
-        onResize={_updateDimensions}
-        refreshMode="debounce"
-      />
     </div>
   );
 };

src/plugins/kibana_react/public/markdown/markdown_simple.tsx

@@ -6,20 +6,16 @@
  * Side Public License, v 1.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-const markdownRenderers = {
-  root: Fragment,
-};
-
 export interface MarkdownSimpleProps {
   children: string;
 }
 
 // Render markdown string into JSX inside of a Fragment.
 export const MarkdownSimple = ({ children }: MarkdownSimpleProps) => (
-  <ReactMarkdown renderers={markdownRenderers}>{children}</ReactMarkdown>
+  <ReactMarkdown>{children}</ReactMarkdown>
 );
 
 // Needed for React.lazy

src/plugins/kibana_utils/public/history/redirect_when_missing.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import { History } from 'history';
 import { i18n } from '@kbn/i18n';
 import { EuiLoadingSpinner } from '@elastic/eui';
@@ -20,7 +20,7 @@ import { KibanaThemeProvider } from '../theme';
 const ReactMarkdown = React.lazy(() => import('react-markdown'));
 const ErrorRenderer = (props: { children: string }) => (
   <React.Suspense fallback={<EuiLoadingSpinner />}>
-    <ReactMarkdown renderers={{ root: Fragment }} {...props} />
+    <ReactMarkdown {...props} />
   </React.Suspense>
 );
 

x-pack/plugins/apm/public/application/application.test.tsx

@@ -122,7 +122,8 @@ describe('renderApp (APM)', () => {
     };
   };
 
-  it('renders the app', () => {
+  it('renders the app', async () => {
+    const promise = Promise.resolve();
     const mountProps = getApmMountProps();
 
     let unmount: () => void;
@@ -131,6 +132,11 @@ describe('renderApp (APM)', () => {
       unmount = renderApmApp(mountProps);
     });
 
+    // fake promise to wait for to ensure the app is mounted
+    await act(async () => {
+      await promise;
+    });
+
     expect(() => {
       unmount();
     }).not.toThrowError();

x-pack/plugins/canvas/public/components/workpad_app/workpad_app.component.tsx

@@ -67,7 +67,6 @@ export const WorkpadApp: FC<Props> = ({ deselectElement, isWriteable, workpad })
             <div
               id={CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR}
               className={CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR}
-              onMouseDown={deselectElement}
             >
               {/* NOTE: canvasWorkpadContainer is used for exporting */}
               <div