Upgrade React Select (#16027)

* I'm not in love with the end result here, but it's been upgraded and compiles.

* Fixing overflow text issue

* Tim CR

airbyte-webapp/package.json

@@ -54,7 +54,7 @@
     "react-query": "^3.39.1",
     "react-reflex": "^4.0.9",
     "react-router-dom": "^6.3.0",
-    "react-select": "^4.3.1",
+    "react-select": "^5.4.0",
     "react-table": "^7.8.0",
     "react-use": "^15.3.8",
     "react-use-intercom": "^1.5.2",
@@ -95,7 +95,6 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-helmet": "^6.1.5",
     "@types/react-lazylog": "^4.5.1",
-    "@types/react-select": "^4.0.16",
     "@types/react-table": "^7.7.12",
     "@types/react-widgets": "^4.4.7",
     "@types/sanitize-html": "^2.6.2",

airbyte-webapp/src/components/base/DropDown/CustomSelect.tsx

@@ -37,6 +37,7 @@ export const CustomSelect = styled(Select)<
 
     & .react-select__value-container {
       overflow: visible;
+      display: flex;
     }
   }
 `;

airbyte-webapp/src/components/base/DropDown/DropDown.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { Props } from "react-select";
-import { SelectComponentsConfig } from "react-select/src/components";
-import { CSSObject } from "styled-components";
+import { CSSObjectWithLabel, GroupBase, Props, SelectComponentsConfig, StylesConfig } from "react-select";
+import Select from "react-select/dist/declarations/src/Select";
 
 import { equal, naturalComparatorBy } from "utils/objects";
 
-import DropdownIndicator from "./components/DropdownIndicator";
+import { DropdownIndicator } from "./components/DropdownIndicator";
 import Menu from "./components/Menu";
 import Option, { IDataItem } from "./components/Option";
 import SingleValue from "./components/SingleValue";
@@ -15,16 +14,22 @@ import { SelectContainer } from "./SelectContainer";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type OptionType = any;
 
-export interface DropdownProps extends Props<OptionType> {
+export interface DropdownProps<T = unknown> extends Props<OptionType> {
   withBorder?: boolean;
+  $withBorder?: boolean;
   fullText?: boolean;
   error?: boolean;
+  selectProps?: T;
 }
 
-export const DropDown: React.FC<DropdownProps> = React.forwardRef((props, ref) => {
+// eslint-disable-next-line react/function-component-definition
+function DropDownInner<T = unknown>(
+  props: DropdownProps<T>,
+  ref: React.ForwardedRef<Select<unknown, boolean, GroupBase<unknown>>>
+) {
   const propsComponents = props.components;
 
-  const components = React.useMemo<SelectComponentsConfig<OptionType, boolean>>(
+  const components = React.useMemo<SelectComponentsConfig<OptionType, boolean, GroupBase<unknown>>>(
     () =>
       ({
         DropdownIndicator,
@@ -49,10 +54,10 @@ export const DropDown: React.FC<DropdownProps> = React.forwardRef((props, ref) =
         : props.options?.find((op) => equal(op.value, props.value))
       : null;
 
-  const styles = {
+  const styles: StylesConfig = {
     ...(props.styles ?? {}),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    menuPortal: (base: CSSObject, menuPortalProps: any) => ({
+    menuPortal: (base: CSSObjectWithLabel, menuPortalProps: any) => ({
       ...(props.styles?.menuPortal?.(base, menuPortalProps) ?? { ...base }),
       zIndex: 9999,
     }),
@@ -76,8 +81,8 @@ export const DropDown: React.FC<DropdownProps> = React.forwardRef((props, ref) =
       components={components}
     />
   );
-});
+}
 
 export const defaultDataItemSort = naturalComparatorBy<IDataItem>((dataItem) => dataItem.label || "");
 
-export default DropDown;
+export const DropDown = React.forwardRef(DropDownInner);

airbyte-webapp/src/components/base/DropDown/SelectContainer.tsx

@@ -3,7 +3,14 @@ import { components, ContainerProps } from "react-select";
 
 import { OptionType } from "./DropDown";
 
-export const SelectContainer: React.FC<ContainerProps<OptionType, false>> = (props) => {
+export const SelectContainer: React.FC<
+  ContainerProps<OptionType, false> & {
+    selectProps: {
+      "data-testid": string;
+      role: string;
+    };
+  }
+> = (props) => {
   const wrapperProps = {
     "data-testid": props.selectProps["data-testid"],
     role: props.selectProps["role"] || "combobox",

airbyte-webapp/src/components/base/DropDown/components/DropdownIndicator.tsx

@@ -1,17 +1,15 @@
 import { faSortDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
-import { components, IndicatorProps, OptionTypeBase } from "react-select";
+import { components, DropdownIndicatorProps } from "react-select";
 import styled from "styled-components";
 
 const Arrow = styled(FontAwesomeIcon)`
   margin-top: -6px;
 `;
 
-const DropdownIndicator: React.FC<IndicatorProps<OptionTypeBase, false>> = (props) => (
+export const DropdownIndicator: React.FC<DropdownIndicatorProps> = (props) => (
   <components.DropdownIndicator {...props}>
     <Arrow icon={faSortDown} />
   </components.DropdownIndicator>
 );
-
-export default DropdownIndicator;

airbyte-webapp/src/components/base/DropDown/components/Option.tsx

@@ -1,14 +1,15 @@
 import React from "react";
-import { components, OptionProps, OptionTypeBase } from "react-select";
+import { components, OptionProps } from "react-select";
 import styled from "styled-components";
 
 import CheckBox from "components/base/CheckBox";
 
+import { OptionType } from "../DropDown";
 import Text from "./Text";
 
 export type IProps = {
   data: { disabled: boolean; index: number; fullText?: boolean } & IDataItem;
-} & OptionProps<OptionTypeBase, false>;
+} & OptionProps<OptionType, boolean>;
 
 export interface IDataItem {
   label?: string;

airbyte-webapp/src/components/base/DropDown/components/SingleValue.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { components, SingleValueProps, OptionTypeBase } from "react-select";
+import { components, SingleValueProps } from "react-select";
 import styled from "styled-components";
 
 import { IDataItem } from "./Option";
 import Text from "./Text";
 
-export type IProps = {
+export type IProps<T> = {
   data?: IDataItem;
-} & SingleValueProps<OptionTypeBase>;
+} & SingleValueProps<T>;
 
 export const ItemView = styled.div`
   display: flex;
@@ -21,7 +21,7 @@ export const Icon = styled.div`
   display: inline-block;
 `;
 
-const SingleValue: React.FC<IProps> = (props) => {
+const SingleValue = <T extends { data: { img: string } }>(props: React.PropsWithChildren<IProps<T>>) => {
   return (
     <ItemView>
       {props.data.img ? <Icon>{props.data.img}</Icon> : null}

airbyte-webapp/src/components/base/DropDown/components/Text.tsx

@@ -27,7 +27,6 @@ const Text = styled.div<IProps>`
   font-family: ${({ theme }) => theme.regularFont};
   font-style: normal;
   font-weight: normal;
-  max-width: 94%;
   color: ${(props) => setColor(props)};
 
   .rw-list-option.rw-state-selected & {

airbyte-webapp/src/components/base/DropDown/index.tsx

@@ -1,6 +1,4 @@
 import * as DropDownRow from "./components/Option";
-import DropDown from "./DropDown";
 
 export * from "./DropDown";
 export { DropDownRow };
-export default DropDown;

airbyte-webapp/src/components/base/Popout/Popout.tsx

@@ -18,7 +18,7 @@ const OutsideClickListener = styled.div`
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Value = any;
 
-const ControlComponent = (props: ControlProps<Value, false>) => (
+const ControlComponent = (props: ControlProps & { selectProps: Value }) => (
   <div ref={props.innerRef}>
     {props.selectProps.selectProps.targetComponent({
       onOpen: props.selectProps.selectProps.onOpen,
@@ -30,6 +30,7 @@ const ControlComponent = (props: ControlProps<Value, false>) => (
 
 interface PopoutProps extends DropdownProps {
   targetComponent: (props: { onOpen: () => void; isOpen?: boolean; value: Value }) => ReactNode;
+  title?: string;
 }
 
 const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props }) => {

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { components } from "react-select";
-import { MenuListComponentProps } from "react-select/src/components/Menu";
+import { components, MenuListProps } from "react-select";
 import styled from "styled-components";
 
 import { Popout } from "components";
@@ -67,7 +66,7 @@ const List = styled.div`
   }
 `;
 
-type MenuWithRequestButtonProps = MenuListComponentProps<IDataItem, false> & {
+type MenuWithRequestButtonProps = MenuListProps<IDataItem, boolean> & {
   selectedWorkspace: string;
 };
 

airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.tsx

@@ -67,7 +67,6 @@ export const PathPopout: React.FC<PathPopoutProps> = (props) => {
     <Popout
       options={options}
       value={props.path}
-      // @ts-expect-error need to solve issue with typings
       isMulti={props.isMulti}
       isSearchable
       onChange={(options: PathPopoutProps["isMulti"] extends true ? Array<{ value: Path }> : { value: Path }) => {

airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx

@@ -24,8 +24,8 @@ const Separator = styled.div`
   padding: 0 5px;
 `;
 
-const SingleValue: React.FC<IProps> = (props) => {
-  const { syncMode, destinationSyncMode } = props.data.value;
+const SingleValue: React.FC<IProps<unknown>> = (props) => {
+  const { syncMode, destinationSyncMode } = props.data?.value;
   return (
     <Text>
       <ValueView {...props}>

airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx

@@ -2,7 +2,7 @@ import { useField } from "formik";
 import React, { useCallback, useEffect, useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { components } from "react-select";
-import { MenuListComponentProps } from "react-select/src/components/Menu";
+import { MenuListProps } from "react-select";
 import styled from "styled-components";
 
 import { ControlLabels, DropDown, DropDownRow } from "components";
@@ -79,7 +79,8 @@ const SingleValueContent = styled(components.SingleValue)`
   align-items: center;
 `;
 
-type MenuWithRequestButtonProps = MenuListComponentProps<IDataItem, false>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type MenuWithRequestButtonProps = MenuListProps<IDataItem, false> & { selectProps: any };
 
 /**
  * Returns the order for a specific release stage label. This will define
@@ -139,7 +140,8 @@ const Option: React.FC<OptionProps> = (props) => {
   );
 };
 
-const SingleValue: React.FC<SingleValueProps> = (props) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SingleValue: React.FC<SingleValueProps<any>> = (props) => {
   return (
     <SingleValueView>
       {props.data.img && <SingleValueIcon>{props.data.img}</SingleValueIcon>}