Updating react-select types

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

package.json

@@ -290,7 +290,7 @@
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.6",
-    "@types/react-select": "^3.0.13",
+    "@types/react-select": "^4.0.13",
     "@types/react-window": "^1.8.2",
     "@types/readable-stream": "^2.3.9",
     "@types/request": "^2.48.5",

src/renderer/components/+namespaces/namespace-select-filter.tsx

@@ -2,7 +2,7 @@ import "./namespace-select.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { components, PlaceholderProps } from "react-select";
+import { components, OptionTypeBase, PlaceholderProps } from "react-select";
 
 import { Icon } from "../icon";
 import { FilterIcon } from "../item-object-list/filter-icon";
@@ -11,7 +11,7 @@ import { SelectOption } from "../select";
 import { NamespaceSelect } from "./namespace-select";
 import { namespaceStore } from "./namespace.store";
 
-const Placeholder = observer((props: PlaceholderProps<any>) => {
+const Placeholder = observer((props: PlaceholderProps<OptionTypeBase, boolean>) => {
   const getPlaceholder = (): React.ReactNode => {
     const namespaces = namespaceStore.contextNamespaces;
 

src/renderer/components/+namespaces/namespace-select.scss

@@ -28,7 +28,8 @@
     &__placeholder {
       width: 100%;
       white-space: nowrap;
-      overflow: scroll;
+      overflow: scroll!important;
+      text-overflow: unset!important;
       margin-left: -8px;
       padding-left: 8px;
       margin-right: -8px;

src/renderer/components/+namespaces/namespace-select.tsx

@@ -8,7 +8,7 @@ import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { namespaceStore } from "./namespace.store";
 import { kubeWatchApi } from "../../api/kube-watch-api";
-import { components, ValueContainerProps } from "react-select";
+import { components, OptionTypeBase, ValueContainerProps } from "react-select";
 
 interface Props extends SelectProps {
   showIcons?: boolean;
@@ -22,7 +22,7 @@ const defaultProps: Partial<Props> = {
   showClusterOption: false,
 };
 
-function GradientValueContainer<T>({children, ...rest}: ValueContainerProps<T>) {
+function GradientValueContainer({children, ...rest}: ValueContainerProps<OptionTypeBase, boolean>) {
   return (
     <components.ValueContainer {...rest}>
       <div className="GradientValueContainer front" />

src/renderer/components/select/select.tsx

@@ -6,8 +6,8 @@ import React, { ReactNode } from "react";
 import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames } from "../../utils";
-import ReactSelect, { ActionMeta, components, Props as ReactSelectProps, Styles } from "react-select";
-import Creatable, { CreatableProps } from "react-select/creatable";
+import ReactSelect, { ActionMeta, components, GroupTypeBase, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
+import Creatable from "react-select/creatable";
 import { themeStore } from "../../theme.store";
 
 const { Menu } = components;
@@ -22,7 +22,8 @@ export interface SelectOption<T = any> {
   label?: React.ReactNode;
 }
 
-export interface SelectProps<T = any> extends ReactSelectProps<T>, CreatableProps<T> {
+export interface SelectProps<T = any> extends ReactSelectProps<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>> {
+  options?: readonly any[];
   value?: T;
   themeName?: "dark" | "light" | "outlined";
   menuClass?: string;
@@ -43,7 +44,7 @@ export class Select extends React.Component<SelectProps> {
     return this.props.themeName || themeStore.activeTheme.type;
   }
 
-  private styles: Styles = {
+  private styles: Styles<OptionTypeBase, boolean> = {
     menuPortal: styles => ({
       ...styles,
       zIndex: "auto"
@@ -68,7 +69,7 @@ export class Select extends React.Component<SelectProps> {
     return this.options.find(opt => opt === value || opt.value === value);
   }
 
-  @computed get options(): SelectOption[] {
+  @computed get options(): readonly (OptionTypeBase | GroupTypeBase<OptionTypeBase>)[] {
     const { autoConvertOptions, options } = this.props;
 
     if (autoConvertOptions && Array.isArray(options)) {
@@ -77,7 +78,7 @@ export class Select extends React.Component<SelectProps> {
       });
     }
 
-    return options as SelectOption[];
+    return options;
   }
 
   @autobind()

yarn.lock

@@ -1591,11 +1591,12 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-select@^3.0.13":
-  version "3.0.13"
-  resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-3.0.13.tgz#b1a05eae0f65fb4f899b4db1f89b8420cb9f3656"
-  integrity sha512-JxmSArGgzAOtb37+Jz2+3av8rVmp/3s3DGwlcP+g59/a3owkiuuU4/Jajd+qA32beDPHy4gJR2kkxagPY3j9kg==
+"@types/react-select@^4.0.13":
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-4.0.13.tgz#8d2c41a0df7fbf67ab0b995797b0e9b4e6b38cde"
+  integrity sha512-rXYEc565IzzjgQzs9C0YCFxV/QajMZnCHG5QwRQ5BZMfH0Lj90VI/xohawemRkD46IvpaLRbO6xzSquJlgBGUA==
   dependencies:
+    "@emotion/serialize" "^1.0.0"
     "@types/react" "*"
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"