no log: Bump @types/react-select from 4.0.17 to 5.0.1 in /frontend (#1604)

* [bot]: Bump @types/react-select from 4.0.17 to 5.0.1 in /frontend

Bumps [@types/react-select](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-select) from 4.0.17 to 5.0.1.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-select)

---
updated-dependencies:
- dependency-name: "@types/react-select"
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* no log: some fix after react-select upgrade

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: morpheus65535 <louis_vezina@hotmail.com>

frontend/package.json

@@ -24,6 +24,8 @@
     "axios": "^0.23",
     "bootstrap": "^4",
     "lodash": "^4",
+    "moment": "^2.29.1",
+    "package.json": "^2.0.1",
     "rc-slider": "^9.7",
     "react": "^17",
     "react-bootstrap": "^1",
@@ -32,14 +34,13 @@
     "react-redux": "^7.2",
     "react-router-dom": "^5.3",
     "react-scripts": "^4",
-    "react-select": "^4",
+    "react-select": "^5.0.1",
     "react-table": "^7",
     "recharts": "^2.0.8",
     "rooks": "^5.7.1",
     "sass": "^1",
     "socket.io-client": "^4",
-    "typescript": "^4",
-    "moment": "^2.29.1"
+    "typescript": "^4"
   },
   "devDependencies": {
     "@types/bootstrap": "^5",
@@ -50,7 +51,7 @@
     "@types/react-dom": "^17",
     "@types/react-helmet": "^6.1",
     "@types/react-router-dom": "^5",
-    "@types/react-select": "^4.0.3",
+    "@types/react-select": "^5.0.1",
     "@types/react-table": "^7",
     "http-proxy-middleware": "^2",
     "husky": "^7",

frontend/src/Settings/Providers/components.tsx

@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import { Button, Col, Container, Row } from "react-bootstrap";
 import { components } from "react-select";
-import { SelectComponents } from "react-select/src/components";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
 import {
   BaseModal,
   Selector,
@@ -213,11 +213,12 @@ export const ProviderModal: FunctionComponent = () => {
   }, [info]);
 
   const selectorComponents = useMemo<
-    Partial<SelectComponents<ProviderInfo, false>>
+    Partial<SelectComponents<ProviderInfo, false, any>>
   >(
     () => ({
       Option: ({ data, ...other }) => {
-        const { label, value } = data as SelectorOption<ProviderInfo>;
+        const { label, value } =
+          data as unknown as SelectorOption<ProviderInfo>;
         return (
           <components.Option data={data} {...other}>
             {label}

frontend/src/components/inputs/Selector.tsx

@@ -1,7 +1,7 @@
 import { isArray } from "lodash";
 import React, { useCallback, useMemo } from "react";
-import ReactSelect from "react-select";
-import { SelectComponents } from "react-select/src/components";
+import Select from "react-select";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
 import "./selector.scss";
 
 export interface SelectorProps<T, M extends boolean> {
@@ -17,7 +17,7 @@ export interface SelectorProps<T, M extends boolean> {
   label?: (item: T) => string;
   defaultValue?: SelectorValueType<T, M>;
   value?: SelectorValueType<T, M>;
-  components?: Partial<SelectComponents<T, M>>;
+  components?: Partial<SelectComponents<T, M, any>>;
 }
 
 export function Selector<T = string, M extends boolean = false>(
@@ -69,15 +69,15 @@ export function Selector<T = string, M extends boolean = false>(
     [label, multiple, nameFromItems]
   );
 
-  const defaultWrapper = useMemo(() => wrapper(defaultValue), [
-    defaultValue,
-    wrapper,
-  ]);
+  const defaultWrapper = useMemo(
+    () => wrapper(defaultValue),
+    [defaultValue, wrapper]
+  );
 
   const valueWrapper = useMemo(() => wrapper(value), [wrapper, value]);
 
   return (
-    <ReactSelect
+    <Select
       isLoading={loading}
       placeholder={placeholder}
       isSearchable={options.length >= 10}
@@ -92,7 +92,7 @@ export function Selector<T = string, M extends boolean = false>(
       className={`custom-selector w-100 ${className ?? ""}`}
       classNamePrefix="selector"
       onFocus={onFocus}
-      onChange={(v) => {
+      onChange={(v: SelectorOption<T>[]) => {
         if (onChange) {
           let res: T | T[] | null = null;
           if (isArray(v)) {
@@ -106,6 +106,6 @@ export function Selector<T = string, M extends boolean = false>(
           onChange(res as any);
         }
       }}
-    ></ReactSelect>
+    ></Select>
   );
 }