Upgrade ReactSelect to latest version (#5277)

* - maintenance: upgrade react-select to latest version (5+)
- fix: props.styles was ignored and didn't passed to original react-select component from abstraction wrapper

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

@@ -7,8 +7,7 @@ import "./namespace-select-filter.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import type { OptionTypeBase, PlaceholderProps } from "react-select";
-import { components } from "react-select";
+import { components, type PlaceholderProps } from "react-select";
 
 import { Icon } from "../icon";
 import { NamespaceSelect } from "./namespace-select";
@@ -78,7 +77,7 @@ export const NamespaceSelectFilter = withInjectables<Dependencies, SelectProps>(
   }),
 });
 
-export interface CustomPlaceholderProps extends PlaceholderProps<OptionTypeBase, boolean> {}
+export interface CustomPlaceholderProps extends PlaceholderProps {}
 
 interface PlaceholderDependencies {
   namespaceStore: NamespaceStore;

src/renderer/components/+preferences/kubectl-binaries.tsx

@@ -64,7 +64,7 @@ const NonInjectedKubectlBinaries: React.FC<Dependencies> = observer(
             options={downloadMirrorOptions}
             value={userStore.downloadMirror}
             onChange={({ value }: SelectOption) => userStore.downloadMirror = value}
-            disabled={!userStore.downloadKubectlBinaries}
+            isDisabled={!userStore.downloadKubectlBinaries}
             isOptionDisabled={({ platforms }) =>
               !platforms.has(process.platform)
             }

src/renderer/components/select/select.tsx

@@ -7,22 +7,25 @@
 // API docs: https://react-select.com/
 import "./select.scss";
 
-import type { ReactNode } from "react";
 import React from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import ReactSelect, { components } from "react-select";
-import ReactSelectCreatable from "react-select/creatable";
-import type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
-import type { CreatableProps } from "react-select/creatable";
-
+import ReactSelect, {
+  type ActionMeta,
+  components,
+  type GroupBase,
+  type Props as ReactSelectProps,
+  type StylesConfig,
+} from "react-select";
+import ReactSelectCreatable, { type CreatableProps } from "react-select/creatable";
 import { ThemeStore } from "../../theme.store";
 import { autoBind, cssNames } from "../../utils";
+import { merge } from "lodash";
 
 const { Menu } = components;
 
 export interface GroupSelectOption<T extends SelectOption = SelectOption> {
-  label: ReactNode;
+  label: React.ReactNode;
   options: T[];
 }
 
@@ -31,7 +34,7 @@ export interface SelectOption<T = any> {
   label?: React.ReactNode;
 }
 
-export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, CreatableProps<T, boolean> {
+export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, CreatableProps<T, boolean, GroupBase<T>> {
   id?: string; // Optional only because of Extension API. Required to make Select deterministic in unit tests
   value?: T;
   themeName?: "dark" | "light" | "outlined" | "lens";
@@ -61,12 +64,16 @@ export class Select extends React.Component<SelectProps> {
     return `theme-${themeName}`;
   }
 
-  private styles: Styles<OptionTypeBase, boolean> = {
-    menuPortal: styles => ({
-      ...styles,
-      zIndex: "auto",
-    }),
-  };
+  @computed get styles(): StylesConfig {
+    const defaultStyles: StylesConfig = {
+      menuPortal: styles => ({
+        ...styles,
+        zIndex: "auto",
+      }),
+    };
+
+    return merge(defaultStyles, this.props.styles);
+  }
 
   protected isValidOption(opt: SelectOption | any) {
     return typeof opt === "object" && opt.value !== undefined;
@@ -104,7 +111,7 @@ export class Select extends React.Component<SelectProps> {
     }
   }
 
-  onKeyDown(evt: React.KeyboardEvent<HTMLElement>) {
+  onKeyDown(evt: React.KeyboardEvent<HTMLDivElement>) {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(evt);
     }
@@ -122,7 +129,7 @@ export class Select extends React.Component<SelectProps> {
 
     const selectProps: Partial<SelectProps> = {
       ...props,
-      ...(inputId ? { inputId }: {}),
+      ...(inputId ? { inputId } : {}),
       styles: this.styles,
       value: autoConvertOptions ? this.selectedOption : value,
       options: autoConvertOptions ? this.options : options,
@@ -142,7 +149,7 @@ export class Select extends React.Component<SelectProps> {
     };
 
     return isCreatable
-      ? <ReactSelectCreatable {...selectProps}/>
-      : <ReactSelect {...selectProps}/>;
+      ? <ReactSelectCreatable {...selectProps} /> // select list with ability to add new options
+      : <ReactSelect {...selectProps} />;
   }
 }