chore: upgrade to styled-components@4

package.json

@@ -73,6 +73,7 @@
     "@types/react-dom": "^16.0.9",
     "@types/react-hot-loader": "^4.1.0",
     "@types/react-tabs": "^2.3.0",
+    "@types/styled-components": "^4.0.1",
     "@types/tapable": "1.0.4",
     "@types/webpack": "^4.4.17",
     "@types/webpack-env": "^1.13.0",
@@ -107,7 +108,7 @@
     "shelljs": "^0.8.1",
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
-    "styled-components": "^3.4.5",
+    "styled-components": "^4.0.2",
     "swagger2openapi": "^3.2.8",
     "ts-jest": "23.10.4",
     "ts-loader": "5.2.2",
@@ -126,7 +127,7 @@
     "mobx": "^4.2.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "styled-components": "^3.4.0"
+    "styled-components": "^4.0.1"
   },
   "dependencies": {
     "classnames": "^2.2.6",
@@ -134,7 +135,7 @@
     "dompurify": "^1.0.7",
     "eventemitter3": "^3.0.0",
     "json-pointer": "^0.6.0",
-    "json-schema-ref-parser": "^5.1.2",
+    "json-schema-ref-parser": "^6.0.1",
     "lunr": "^2.3.2",
     "mark.js": "^8.11.1",
     "marked": "https://github.com/markedjs/marked#fb48827",

src/common-elements/perfect-scrollbar.tsx

@@ -4,7 +4,7 @@ import PerfectScrollbarType, * as PerfectScrollbarNamespace from 'perfect-scroll
 import psStyles from 'perfect-scrollbar/css/perfect-scrollbar.css';
 
 import { OptionsContext } from '../components/OptionsProvider';
-import styled, { injectGlobal } from '../styled-components';
+import styled, { createGlobalStyle } from '../styled-components';
 
 /*
  * perfect scrollbar umd bundle uses exports assignment while module uses default export
@@ -14,7 +14,7 @@ import styled, { injectGlobal } from '../styled-components';
 const PerfectScrollbarConstructor =
   PerfectScrollbarNamespace.default || ((PerfectScrollbarNamespace as any) as PerfectScrollbarType);
 
-injectGlobal`${psStyles && psStyles.toString()}`;
+const PSStyling = createGlobalStyle`${psStyles && psStyles.toString()}`;
 
 const StyledScrollWrapper = styled.div`
   position: relative;
@@ -58,9 +58,12 @@ export class PerfectScrollbar extends React.Component<PerfectScrollbarProps> {
     }
 
     return (
-      <StyledScrollWrapper className={`scrollbar-container ${className}`} innerRef={this.handleRef}>
+      <>
-        {children}
+        <PSStyling />
-      </StyledScrollWrapper>
+        <StyledScrollWrapper className={`scrollbar-container ${className}`} ref={this.handleRef}>
+          {children}
+        </StyledScrollWrapper>
+      </>
     );
   }
 }

src/components/JsonViewer/JsonViewer.tsx

@@ -35,7 +35,7 @@ class Json extends React.PureComponent<JsonProps> {
       <PrismDiv
         className={this.props.className}
         // tslint:disable-next-line
-        innerRef={node => (this.node = node!)}
+        ref={node => (this.node = node!)}
         dangerouslySetInnerHTML={{ __html: jsonToHTML(this.props.data) }}
       />
     </JsonViewerWrap>

src/components/SideMenu/MenuItem.tsx

@@ -46,7 +46,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
       <MenuItemLi
         onClick={this.activate}
         depth={item.depth}
-        innerRef={this.saveRef}
+        ref={this.saveRef}
         data-item-id={item.id}
       >
         {item.type === 'operation' ? (

src/components/StickySidebar/StickyResponsiveSidebar.tsx

@@ -122,7 +122,7 @@ export class StickyResponsiveSidebar extends React.Component<StickySidebarProps>
               className={this.props.className}
               style={style(options)}
               // tslint:disable-next-line
-              innerRef={el => {
+              ref={el => {
                 this.stickyElement = el as any;
               }}
             >

src/styled-components.ts

@@ -18,7 +18,7 @@ function withProps<T, U extends HTMLElement = HTMLElement>(
 const {
   default: styled,
   css,
-  injectGlobal,
+  createGlobalStyle,
   keyframes,
   ThemeProvider,
 } = (styledComponents as any) as styledComponents.ThemedStyledComponentsModule<
@@ -54,7 +54,7 @@ export const media = {
   },
 };
 
-export { css, injectGlobal, keyframes, ThemeProvider, withProps };
+export { css, createGlobalStyle, keyframes, ThemeProvider, withProps };
 export default styled;
 
 export function extensionsHook(styledName: string) {

typings/styled-patch.d.ts

@@ -2,42 +2,50 @@ import * as styledComponents from 'styled-components';
 
 // Styled components typings for using babel-plugin BEFORE typescript
 declare module 'styled-components' {
+  type Attrs<P, A extends Partial<P>, T> = {
+    [K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K]
+  };
+  type KeyofBase = keyof any;
+  type Diff<T extends KeyofBase, U extends KeyofBase> = ({ [P in T]: P } & { [P in U]: never })[T];
+  type DiffBetween<T, U> = Pick<T, Diff<keyof T, keyof U>> & Pick<U, Diff<keyof U, keyof T>>;
   interface ThemedStyledFunction<P, T, O = P> {
     // adding "| string[]" for transpileTemplateLiterals and similar below
     (
       strings: TemplateStringsArray | string[],
-      ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]
+      ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
     ): StyledComponentClass<P, T, O>;
-
+    <U>(
-    new <U>(
       strings: TemplateStringsArray | string[],
-      ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]
+      ...interpolations: Array<Interpolation<ThemedStyledProps<P & U, T>>>
     ): StyledComponentClass<P & U, T, O & U>;
+    attrs<U, A extends Partial<P & U> = {}>(
+      attrs: Attrs<P & U, A, T>,
+    ): ThemedStyledFunction<DiffBetween<A, P & U>, T, DiffBetween<A, O & U>>;
 
     // adding "withConfig" for transpileTemplateLiterals
     withConfig(config: any): ThemedStyledFunction<P, T, O>;
   }
 
-  export interface ThemedCssFunction<T> {
+  export interface BaseThemedCssFunction<T> {
-    // adding "| string[]" for transpileTemplateLiterals and similar below
     (
       strings: TemplateStringsArray | string[],
       ...interpolations: SimpleInterpolation[]
     ): InterpolationValue[];
     <P>(
       strings: TemplateStringsArray | string[],
-      ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]
+      ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
-    ): FlattenInterpolation<ThemedStyledProps<P, T>>[];
+    ): Array<FlattenInterpolation<ThemedStyledProps<P, T>>>;
   }
 
   interface ThemedStyledComponentsModule<T> {
     keyframes(
       strings: TemplateStringsArray | string[],
       ...interpolations: SimpleInterpolation[]
-    ): string;
+  ): Keyframes;
-    injectGlobal(
+
+  createGlobalStyle<P = {}>(
       strings: TemplateStringsArray | string[],
-      ...interpolations: SimpleInterpolation[]
+      ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
-    ): void;
+  ): GlobalStyleClass<P, T>;
   }
 }

yarn.lock

@@ -641,6 +641,16 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@emotion/is-prop-valid@^0.6.8":
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz#68ad02831da41213a2089d2cab4e8ac8b30cbd85"
+  dependencies:
+    "@emotion/memoize" "^0.6.6"
+
+"@emotion/memoize@^0.6.6":
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
+
 "@types/blob-util@1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@types/blob-util/-/blob-util-1.3.3.tgz#adba644ae34f88e1dd9a5864c66ad651caaf628a"
@@ -791,6 +801,13 @@
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
 
+"@types/styled-components@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.0.1.tgz#5eb9a5474dbde3becab2bcc8f04e0b8e8dcf8c06"
+  dependencies:
+    "@types/node" "*"
+    "@types/react" "*"
+
 "@types/tapable@*", "@types/tapable@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
@@ -1494,7 +1511,7 @@ babel-plugin-jest-hoist@^23.2.0:
   version "23.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167"
 
-babel-plugin-styled-components@^1.8.0:
+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.8.0.tgz#9dd054c8e86825203449a852a5746f29f2dab857"
   dependencies:
@@ -1840,13 +1857,6 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.0.3:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6"
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
 builtin-modules@^1.0.0, builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -2585,7 +2595,7 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
-css-to-react-native@^2.0.3:
+css-to-react-native@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.2.tgz#c077d0f7bf3e6c915a539e7325821c9dd01f9965"
   dependencies:
@@ -3553,7 +3563,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.16, fbjs@^0.8.5:
+fbjs@^0.8.5:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -5177,14 +5187,13 @@ json-pointer@^0.6.0:
   dependencies:
     foreach "^2.0.4"
 
-json-schema-ref-parser@^5.1.2:
+json-schema-ref-parser@^6.0.1:
-  version "5.1.3"
+  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-5.1.3.tgz#f86c5868f40898e69169e1bbc854725a4fd0e1ad"
+  resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-6.0.1.tgz#342a43713df584ab1f3f4d5e5ca76439e0a42bce"
   dependencies:
     call-me-maybe "^1.0.1"
-    debug "^3.1.0"
     js-yaml "^3.12.0"
-    ono "^4.0.6"
+    ono "^4.0.10"
 
 json-schema-traverse@^0.3.0:
   version "0.3.1"
@@ -6320,7 +6329,7 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
-ono@^4.0.6:
+ono@^4.0.10:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/ono/-/ono-4.0.10.tgz#f7f9c6d1b76270a499d8664c95a740d44175134c"
   dependencies:
@@ -8103,19 +8112,18 @@ style-loader@^0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
-styled-components@^3.4.5:
+styled-components@^4.0.2:
-  version "3.4.10"
+  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.10.tgz#9a654c50ea2b516c36ade57ddcfa296bf85c96e1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.0.2.tgz#7d4409ada019cdd34c25ba68c4577ea95dbcf0c5"
   dependencies:
-    buffer "^5.0.3"
+    "@emotion/is-prop-valid" "^0.6.8"
-    css-to-react-native "^2.0.3"
+    babel-plugin-styled-components ">= 1"
-    fbjs "^0.8.16"
+    css-to-react-native "^2.2.2"
-    hoist-non-react-statics "^2.5.0"
+    memoize-one "^4.0.0"
     prop-types "^15.5.4"
     react-is "^16.3.1"
     stylis "^3.5.0"
     stylis-rule-sheet "^0.0.10"
-    supports-color "^3.2.3"
 
 stylis-rule-sheet@^0.0.10:
   version "0.0.10"
@@ -8135,7 +8143,7 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.2, supports-color@^3.2.3:
+supports-color@^3.1.2:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies: