[7.x] Update styled-components to latest version (#49679)

package.json

@@ -336,7 +336,7 @@
     "@types/semver": "^5.5.0",
     "@types/sinon": "^7.0.13",
     "@types/strip-ansi": "^3.0.0",
-    "@types/styled-components": "^3.0.2",
+    "@types/styled-components": "^4.4.0",
     "@types/supertest": "^2.0.5",
     "@types/supertest-as-promised": "^2.0.38",
     "@types/type-detect": "^4.0.1",
@@ -361,9 +361,9 @@
     "dedent": "^0.7.0",
     "delete-empty": "^2.0.0",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-adapter-utils": "^1.12.0",
-    "enzyme-to-json": "^3.3.4",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme-adapter-utils": "^1.12.1",
+    "enzyme-to-json": "^3.4.3",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.4.0",
     "eslint-plugin-babel": "^5.3.0",

x-pack/dev-tools/jest/create_jest_config.js

@@ -36,7 +36,10 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
       `<rootDir>/dev-tools/jest/setup/polyfills.js`,
       `<rootDir>/dev-tools/jest/setup/enzyme.js`,
     ],
-    setupFilesAfterEnv: [`${kibanaDirectory}/src/dev/jest/setup/mocks.js`],
+    setupFilesAfterEnv: [
+      `<rootDir>/dev-tools/jest/setup/setup_test.js`,
+      `${kibanaDirectory}/src/dev/jest/setup/mocks.js`,
+    ],
     testMatch: ['**/*.test.{js,ts,tsx}'],
     transform: {
       '^.+\\.(js|tsx?)$': `${kibanaDirectory}/src/dev/jest/babel_transform.js`,
@@ -49,7 +52,7 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
     ],
     snapshotSerializers: [
       `${kibanaDirectory}/node_modules/enzyme-to-json/serializer`,
-      `${kibanaDirectory}/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts`
+      `${kibanaDirectory}/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts`,
     ],
     reporters: [
       'default',

x-pack/dev-tools/jest/setup/setup_test.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+  Global import, so we don't need to remember to import the lib in each file
+  https://www.npmjs.com/package/jest-styled-components#global-installation
+*/
+
+import 'jest-styled-components';

x-pack/legacy/common/eui_styled_components/eui_styled_components.tsx

@@ -16,16 +16,18 @@ export interface EuiTheme {
   darkMode: boolean;
 }
 
-const EuiThemeProvider = <T extends any>({
+const EuiThemeProvider = <
+  OuterTheme extends styledComponents.DefaultTheme = styledComponents.DefaultTheme
+>({
   darkMode = false,
   ...otherProps
-}: ThemeProviderProps<T & EuiTheme> & {
+}: Omit<ThemeProviderProps<OuterTheme, OuterTheme & EuiTheme>, 'theme'> & {
   darkMode?: boolean;
-  children?: React.ReactNode;
 }) => (
   <ThemeProvider
     {...otherProps}
-    theme={() => ({
+    theme={(outerTheme?: OuterTheme) => ({
+      ...outerTheme,
       eui: darkMode ? euiDarkVars : euiLightVars,
       darkMode,
     })}
@@ -35,9 +37,9 @@ const EuiThemeProvider = <T extends any>({
 const {
   default: euiStyled,
   css,
-  injectGlobal,
+  createGlobalStyle,
   keyframes,
   withTheme,
 } = (styledComponents as unknown) as ThemedStyledComponentsModule<EuiTheme>;
 
-export { css, euiStyled, EuiThemeProvider, injectGlobal, keyframes, withTheme };
+export { css, euiStyled, EuiThemeProvider, createGlobalStyle, keyframes, withTheme };

x-pack/legacy/common/eui_styled_components/index.ts

@@ -9,12 +9,12 @@ import {
   euiStyled,
   EuiTheme,
   EuiThemeProvider,
-  injectGlobal,
+  createGlobalStyle,
   keyframes,
   withTheme,
 } from './eui_styled_components';
 
-export { css, euiStyled, EuiTheme, EuiThemeProvider, injectGlobal, keyframes, withTheme };
+export { css, euiStyled, EuiTheme, EuiThemeProvider, createGlobalStyle, keyframes, withTheme };
 // In order to to mimic the styled-components module we need to ignore the following
 // eslint-disable-next-line import/no-default-export
 export default euiStyled;