From fc68425ba81af603796d436032104dd51e7bba5e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 29 Jan 2021 10:17:58 +0000
Subject: [PATCH] fix(deps): update dependency @types/react-select to v4.0.7
 (#2688)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(deps): update dependency @types/react-select to v4.0.7

* fix(ui): fix types for new react-select

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
---
 ui/package-lock.json                   |  7 ++++---
 ui/package.json                        |  2 +-
 ui/src/Components/Theme/ReactSelect.ts | 24 ++++++++++++------------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index ce73d9e7b..dbf12a760 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -4539,10 +4539,11 @@
       }
     },
     "@types/react-select": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-4.0.4.tgz",
-      "integrity": "sha512-o05y1xrTHFurfrbd2UisVhPUrn42CB7f8eWlxbA/vU02ntPZ5+pNxVikKcq/PcKxDNIyDWAPNXHfUR6bnVY/3A==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-4.0.7.tgz",
+      "integrity": "sha512-sIg+1SP4zjTKsLjr89QPB/LGeOy2/TMUKbAekRAcuBlG9/6qTJeecqqKZ982TPITo0CZWvE9vF8vjUmR9YRFsA==",
       "requires": {
+        "@emotion/serialize": "^1.0.0",
         "@types/react": "*",
         "@types/react-dom": "*",
         "@types/react-transition-group": "*"
diff --git a/ui/package.json b/ui/package.json
index 4ce6575f1..aeeda1c2a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -27,7 +27,7 @@
     "@types/react-autosuggest": "10.0.1",
     "@types/react-dom": "17.0.0",
     "@types/react-js-pagination": "3.0.3",
-    "@types/react-select": "4.0.4",
+    "@types/react-select": "4.0.7",
     "@typescript-eslint/eslint-plugin": "4.14.1",
     "@typescript-eslint/parser": "4.14.1",
     "body-scroll-lock": "3.1.5",
diff --git a/ui/src/Components/Theme/ReactSelect.ts b/ui/src/Components/Theme/ReactSelect.ts
index b5157706d..6f97bd2b0 100644
--- a/ui/src/Components/Theme/ReactSelect.ts
+++ b/ui/src/Components/Theme/ReactSelect.ts
@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import { CSSObject } from "@emotion/serialize";
 import {
   ControlProps,
   IndicatorContainerProps,
@@ -65,7 +65,7 @@ const ReactSelectStyles = <
 >(
   theme: ReactSelectTheme
 ): Styles<OptionType, IsMulti> => ({
-  control: (base: CSSProperties, props: ControlProps<OptionType, IsMulti>) =>
+  control: (base: CSSObject, props: ControlProps<OptionType, IsMulti>) =>
     props.isFocused
       ? {
           ...base,
@@ -91,7 +91,7 @@ const ReactSelectStyles = <
           "&:hover": { borderColor: theme.borderColor },
         },
   valueContainer: (
-    base: CSSProperties,
+    base: CSSObject,
     props: ValueContainerProps<OptionType, IsMulti>
   ) =>
     props.isMulti
@@ -112,11 +112,11 @@ const ReactSelectStyles = <
           borderTopLeftRadius: "0.25rem",
           borderBottomLeftRadius: "0.25rem",
         },
-  singleValue: (base: CSSProperties, props: SingleValueProps<OptionType>) => ({
+  singleValue: (base: CSSObject, props: SingleValueProps<OptionType>) => ({
     ...base,
     color: theme.singleValueColor,
   }),
-  multiValue: (base: CSSProperties) => ({
+  multiValue: (base: CSSObject) => ({
     ...base,
     borderRadius: "4px",
     backgroundColor: theme.optionHoverBackground,
@@ -124,7 +124,7 @@ const ReactSelectStyles = <
       backgroundColor: theme.optionHoverBackground,
     },
   }),
-  multiValueLabel: (base: CSSProperties) => ({
+  multiValueLabel: (base: CSSObject) => ({
     ...base,
     color: theme.color,
     whiteSpace: "normal",
@@ -134,7 +134,7 @@ const ReactSelectStyles = <
       color: theme.color,
     },
   }),
-  multiValueRemove: (base: CSSProperties) => ({
+  multiValueRemove: (base: CSSObject) => ({
     ...base,
     cursor: "pointer",
     color: theme.color,
@@ -147,12 +147,12 @@ const ReactSelectStyles = <
       opacity: "0.75",
     },
   }),
-  input: (base: CSSProperties) => ({
+  input: (base: CSSObject) => ({
     ...base,
     color: "inherit",
   }),
   indicatorsContainer: (
-    base: CSSProperties,
+    base: CSSObject,
     props: IndicatorContainerProps<OptionType, IsMulti>
   ) => ({
     ...base,
@@ -162,19 +162,19 @@ const ReactSelectStyles = <
     borderTopRightRadius: "0.25rem",
     borderBottomRightRadius: "0.25rem",
   }),
-  dropdownIndicator: (base: CSSProperties, state: StateFnT) =>
+  dropdownIndicator: (base: CSSObject, state: StateFnT) =>
     state.isFocused
       ? {
           ...base,
           "&:hover": { color: "inherit" },
         }
       : { ...base },
-  menu: (base: CSSProperties) => ({
+  menu: (base: CSSObject) => ({
     ...base,
     zIndex: 1500,
     backgroundColor: theme.menuBackground,
   }),
-  option: (base: CSSProperties) => ({
+  option: (base: CSSObject) => ({
     ...base,
     color: "inherit",
     backgroundColor: "inherit",