fix(deps): update dependency react-select to v4 (#810)

* fix(deps): update dependency react-select to v4

* Update types

* Update snapshots

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>

packages/devui/package.json

@@ -40,7 +40,7 @@
     "@types/base16": "^1.0.2",
     "@types/codemirror": "^5.60.2",
     "@types/prop-types": "^15.7.4",
-    "@types/react-select": "^3.1.2",
+    "@types/react-select": "^4.0.17",
     "@types/redux-devtools-themes": "^1.0.0",
     "@types/simple-element-resize-detector": "^1.3.0",
     "@types/styled-components": "^5.1.13",
@@ -49,7 +49,7 @@
     "color": "^3.2.1",
     "prop-types": "^15.7.2",
     "react-icons": "^4.2.0",
-    "react-select": "^3.2.0",
+    "react-select": "^4.3.1",
     "redux-devtools-themes": "^1.0.0",
     "simple-element-resize-detector": "^1.3.0",
     "styled-components": "^5.3.1"

packages/devui/src/Select/Select.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent, Component, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ReactSelect, {
+  GroupTypeBase,
   NamedProps as ReactSelectProps,
   OptionTypeBase,
 } from 'react-select';
@@ -8,9 +9,10 @@ import createThemedComponent from '../utils/createThemedComponent';
 import { Theme } from '../themes/default';
 
 export interface SelectProps<
-  Option extends OptionTypeBase = OptionTypeBase,
+  Option extends OptionTypeBase,
-  IsMulti extends boolean = false
+  IsMulti extends boolean = false,
-> extends Omit<ReactSelectProps<Option, IsMulti>, 'theme'> {
+  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
+> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {
   theme: Theme;
 }
 
@@ -18,9 +20,10 @@ export interface SelectProps<
  * Wrapper around [React Select](https://github.com/JedWatson/react-select).
  */
 export class Select<
-  Option extends OptionTypeBase = OptionTypeBase,
+  Option extends OptionTypeBase,
-  IsMulti extends boolean = false
+  IsMulti extends boolean = false,
-> extends (PureComponent || Component)<SelectProps<Option, IsMulti>> {
+  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
+> extends (PureComponent || Component)<SelectProps<Option, IsMulti, Group>> {
   render() {
     return (
       <ReactSelect
@@ -88,17 +91,19 @@ export class Select<
 }
 
 export interface ExternalSelectProps<
-  Option extends OptionTypeBase = OptionTypeBase,
+  Option extends OptionTypeBase,
-  IsMulti extends boolean = false
+  IsMulti extends boolean = false,
-> extends Omit<ReactSelectProps<Option, IsMulti>, 'theme'> {
+  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
+> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {
   theme?: Theme;
 }
 
 type SelectComponent = <
-  Option extends OptionTypeBase = OptionTypeBase,
+  Option extends OptionTypeBase,
-  IsMulti extends boolean = false
+  IsMulti extends boolean = false,
+  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
 >(
-  props: ExternalSelectProps<Option, IsMulti>
+  props: ExternalSelectProps<Option, IsMulti, Group>
 ) => ReactElement;
 
 export default createThemedComponent(Select) as SelectComponent & {

yarn.lock

@@ -1951,7 +1951,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.13.8, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.13.8, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.14.6
   resolution: "@babel/runtime@npm:7.14.6"
   dependencies:
@@ -1960,6 +1960,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.0":
+  version: 7.15.3
+  resolution: "@babel/runtime@npm:7.15.3"
+  dependencies:
+    regenerator-runtime: ^0.13.4
+  checksum: 2f0b8d2d4e36035ab1d84af0ec26aafa098536870f27c8e07de0a0e398f7a394fdea68a88165535ffb52ded6a68912bdc3450bdf91f229eb132e1c89470789f5
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.12.7, @babel/template@npm:^7.14.5, @babel/template@npm:^7.3.3":
   version: 7.14.5
   resolution: "@babel/template@npm:7.14.5"
@@ -2922,7 +2931,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:^10.0.27, @emotion/cache@npm:^10.0.9":
+"@emotion/cache@npm:^10.0.27":
   version: 10.0.29
   resolution: "@emotion/cache@npm:10.0.29"
   dependencies:
@@ -2947,7 +2956,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/core@npm:^10.0.9, @emotion/core@npm:^10.1.1":
+"@emotion/core@npm:^10.1.1":
   version: 10.1.1
   resolution: "@emotion/core@npm:10.1.1"
   dependencies:
@@ -2963,7 +2972,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/css@npm:^10.0.27, @emotion/css@npm:^10.0.9":
+"@emotion/css@npm:^10.0.27":
   version: 10.0.27
   resolution: "@emotion/css@npm:10.0.27"
   dependencies:
@@ -3013,7 +3022,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:^11.4.1":
+"@emotion/react@npm:^11.1.1, @emotion/react@npm:^11.4.1":
   version: 11.4.1
   resolution: "@emotion/react@npm:11.4.1"
   dependencies:
@@ -3049,7 +3058,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.0.2":
+"@emotion/serialize@npm:^1.0.0, @emotion/serialize@npm:^1.0.2":
   version: 1.0.2
   resolution: "@emotion/serialize@npm:1.0.2"
   dependencies:
@@ -7491,14 +7500,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-select@npm:^3.1.2":
+"@types/react-select@npm:^4.0.17":
-  version: 3.1.2
+  version: 4.0.17
-  resolution: "@types/react-select@npm:3.1.2"
+  resolution: "@types/react-select@npm:4.0.17"
   dependencies:
+    "@emotion/serialize": ^1.0.0
     "@types/react": "*"
     "@types/react-dom": "*"
     "@types/react-transition-group": "*"
-  checksum: 6e4145bf703f36c799a5b890ec314fcc83367e6bb73d36f304a4600f0ef871c7d10b3ef083a7d21bf0a6ed42d4c95347736098fea4ddeccbb3d90810f76cdc7c
+  checksum: aa94bd1ff3536ab2bb8443bcf3c11109bcd78ae965dc534b205273eb98a84487d272e008adff50744870255e4ec5767465283649abd3d449fbc712718c062fca
   languageName: node
   linkType: hard
 
@@ -13131,7 +13141,7 @@ __metadata:
     "@types/enzyme": ^3.10.9
     "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/prop-types": ^15.7.4
-    "@types/react-select": ^3.1.2
+    "@types/react-select": ^4.0.17
     "@types/redux-devtools-themes": ^1.0.0
     "@types/simple-element-resize-detector": ^1.3.0
     "@types/styled-components": ^5.1.13
@@ -13147,7 +13157,7 @@ __metadata:
     react-dom: ^16.14.0
     react-icons: ^4.2.0
     react-is: ^16.13.1
-    react-select: ^3.2.0
+    react-select: ^4.3.1
     redux-devtools-themes: ^1.0.0
     simple-element-resize-detector: ^1.3.0
     styled-components: ^5.3.1
@@ -25136,14 +25146,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-select@npm:^3.2.0":
+"react-select@npm:^4.3.1":
-  version: 3.2.0
+  version: 4.3.1
-  resolution: "react-select@npm:3.2.0"
+  resolution: "react-select@npm:4.3.1"
   dependencies:
-    "@babel/runtime": ^7.4.4
+    "@babel/runtime": ^7.12.0
-    "@emotion/cache": ^10.0.9
+    "@emotion/cache": ^11.4.0
-    "@emotion/core": ^10.0.9
+    "@emotion/react": ^11.1.1
-    "@emotion/css": ^10.0.9
     memoize-one: ^5.0.0
     prop-types: ^15.6.0
     react-input-autosize: ^3.0.0
@@ -25151,7 +25160,7 @@ fsevents@^1.2.7:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
-  checksum: 082c818369fb8c7ce50bbd51260b21794f58dd41e9df5e0798c10e10478fb44b9fd88247f24720d5b443d77a6ec8afa733ecdd15a7722fde85c27bb87c379962
+  checksum: e87e0b42a662ddce7957a69a3029ea769b22264c197cbd1d8bde1ce631e49c5c5f42414773364674a7a6a8431340e1ede49220583bf1dcd966b63e9bd25cfc12
   languageName: node
   linkType: hard