From 8a0aa6f2a17500f7613052c8cab81e7eaf917c5a Mon Sep 17 00:00:00 2001
From: Rafa Gares <rafael.gares@commercetools.com>
Date: Mon, 7 Oct 2024 17:42:21 +0200
Subject: [PATCH 1/3] refactor: improve types

---
 .../src/async-select-input.tsx                | 181 +++++++++++++-----
 .../src/search-select-input.tsx               | 169 ++++++++++++----
 .../custom-styled-select-options.tsx          |  48 +++--
 .../search-icon-dropdown-indicator.tsx        |  22 ++-
 .../inputs/select-utils/src/types.ts          |  52 ++---
 5 files changed, 340 insertions(+), 132 deletions(-)

diff --git a/packages/components/inputs/async-select-input/src/async-select-input.tsx b/packages/components/inputs/async-select-input/src/async-select-input.tsx
index c10c796222..f650d94714 100644
--- a/packages/components/inputs/async-select-input/src/async-select-input.tsx
+++ b/packages/components/inputs/async-select-input/src/async-select-input.tsx
@@ -1,8 +1,11 @@
-import type { ReactNode, FocusEvent } from 'react';
+import type { ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import isEmpty from 'lodash/isEmpty';
 import {
   components as defaultComponents,
+  InputProps,
+  OnChangeValue,
+  SelectComponentsConfig,
   type ActionMeta,
   type GroupBase,
   type OptionsOrGroups,
@@ -31,18 +34,30 @@ const customizedComponents = {
   MultiValueRemove: TagRemove,
 };
 
-type TCustomEvent = {
+type TCustomEvent<
+  Option,
+  isMulti extends boolean,
+  Group extends GroupBase<Option>
+> = {
   target: {
-    id?: ReactSelectAsyncProps['inputId'];
-    name?: ReactSelectAsyncProps['name'];
-    value?: unknown;
+    id?: ReactSelectAsyncProps<Option, isMulti, Group>['inputId'];
+    name?: ReactSelectAsyncProps<Option, isMulti, Group>['name'];
+    value?: ReactSelectAsyncProps<Option, isMulti, Group>['value'];
   };
   persist: () => void;
 };
 
-type ReactSelectAsyncProps = AsyncProps<unknown, boolean, GroupBase<unknown>>;
+type ReactSelectAsyncProps<
+  Option,
+  isMulti extends boolean,
+  Group extends GroupBase<Option>
+> = AsyncProps<Option, isMulti, Group>;
 
-export type TAsyncSelectInputProps = {
+export type TAsyncSelectInputProps<
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = {
   /**
    * Horizontal size limit of the input fields.
    */
@@ -89,25 +104,37 @@ export type TAsyncSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-label'?: ReactSelectAsyncProps['aria-label'];
+  'aria-label'?: ReactSelectAsyncProps<Option, isMulti, Group>['aria-label'];
   /**
    * HTML ID of an element that should be used as the label (for assistive tech)
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-labelledby'?: ReactSelectAsyncProps['aria-labelledby'];
+  'aria-labelledby'?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['aria-labelledby'];
   /**
    * Indicate if the value entered in the input is invalid.
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-invalid'?: ReactSelectAsyncProps['aria-invalid'];
+  'aria-invalid'?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['aria-invalid'];
   /**
    * HTML ID of an element containing an error message related to the input.
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-errormessage'?: ReactSelectAsyncProps['aria-errormessage'];
+  'aria-errormessage'?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['aria-errormessage'];
   // renamed autoFocus of react-select
   /**
    * Focus the control when it is mounted
@@ -118,57 +145,69 @@ export type TAsyncSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  backspaceRemovesValue?: ReactSelectAsyncProps['backspaceRemovesValue'];
+  backspaceRemovesValue?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['backspaceRemovesValue'];
   /**
    * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  components?: ReactSelectAsyncProps['components'];
+  components?: ReactSelectAsyncProps<Option, isMulti, Group>['components'];
   /**
    * Control whether the selected values should be rendered in the control
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  controlShouldRenderValue?: ReactSelectAsyncProps['controlShouldRenderValue'];
+  controlShouldRenderValue?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['controlShouldRenderValue'];
   /**
    * Custom method to filter whether an option should be displayed in the menu
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  filterOption?: ReactSelectAsyncProps['filterOption'];
+  filterOption?: ReactSelectAsyncProps<Option, isMulti, Group>['filterOption'];
   /**
    * Custom method to determine whether selected options should be displayed in the menu
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  hideSelectedOptions?: ReactSelectAsyncProps['hideSelectedOptions'];
+  hideSelectedOptions?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['hideSelectedOptions'];
   // This forwarded as react-select's "inputId"
   /**
    * The id of the search input
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  id?: ReactSelectAsyncProps['inputId'];
+  id?: ReactSelectAsyncProps<Option, isMulti, Group>['inputId'];
   /**
    * The value of the search input
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  inputValue?: ReactSelectAsyncProps['inputValue'];
+  inputValue?: ReactSelectAsyncProps<Option, isMulti, Group>['inputValue'];
   // This is forwarded as react-select's "id"
   /**
    * The id to set on the SelectContainer component
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  containerId?: ReactSelectAsyncProps['id'];
+  containerId?: ReactSelectAsyncProps<Option, isMulti, Group>['id'];
   /**
    * Is the select value clearable
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  isClearable?: ReactSelectAsyncProps['isClearable'];
+  isClearable?: ReactSelectAsyncProps<Option, isMulti, Group>['isClearable'];
   /**
    * Use this property to reduce the paddings of the component for a ui compact variant
    */
@@ -178,43 +217,55 @@ export type TAsyncSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  isDisabled?: ReactSelectAsyncProps['isDisabled'];
+  isDisabled?: ReactSelectAsyncProps<Option, isMulti, Group>['isDisabled'];
   /**
    * Override the built-in logic to detect whether an option is disabled
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  isOptionDisabled?: ReactSelectAsyncProps['isOptionDisabled'];
+  isOptionDisabled?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['isOptionDisabled'];
   /**
    * Support multiple selected options
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  isMulti?: ReactSelectAsyncProps['isMulti'];
+  isMulti?: ReactSelectAsyncProps<Option, isMulti, Group>['isMulti'];
   /**
    * Whether to enable search functionality
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  isSearchable?: ReactSelectAsyncProps['isSearchable'];
+  isSearchable?: ReactSelectAsyncProps<Option, isMulti, Group>['isSearchable'];
   /**
    * Can be used to enforce the select input to be opened
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  menuIsOpen?: ReactSelectAsyncProps['menuIsOpen'];
+  menuIsOpen?: ReactSelectAsyncProps<Option, isMulti, Group>['menuIsOpen'];
   /**
    * Maximum height of the menu before scrolling
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  maxMenuHeight?: ReactSelectAsyncProps['maxMenuHeight'];
+  maxMenuHeight?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['maxMenuHeight'];
   /**
    * Dom element to portal the select menu to
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  menuPortalTarget?: ReactSelectAsyncProps['menuPortalTarget'];
+  menuPortalTarget?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['menuPortalTarget'];
   /**
    * z-index value for the menu portal
    * <br>
@@ -226,51 +277,70 @@ export type TAsyncSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  menuShouldBlockScroll?: ReactSelectAsyncProps['menuShouldBlockScroll'];
+  menuShouldBlockScroll?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['menuShouldBlockScroll'];
   /**
    * Whether the menu should close after a value is selected. Defaults to `true`.
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  closeMenuOnSelect?: ReactSelectAsyncProps['closeMenuOnSelect'];
+  closeMenuOnSelect?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['closeMenuOnSelect'];
   /**
    * Name of the HTML Input (optional - without this, no input will be rendered)
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  name?: ReactSelectAsyncProps['name'];
+  name?: ReactSelectAsyncProps<Option, isMulti, Group>['name'];
   /**
    * Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  noOptionsMessage?: ReactSelectAsyncProps['noOptionsMessage'];
+  noOptionsMessage?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['noOptionsMessage'];
   /**
    * Handle blur events on the control
    */
-  onBlur?: (event: TCustomEvent) => void;
+  onBlur?: (event: TCustomEvent<Option, isMulti, Group>) => void;
   /**
    * Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
    */
-  onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
+  onChange?: (
+    event: TCustomEvent<Option, isMulti, Group>,
+    info: ActionMeta<unknown>
+  ) => void;
   /**
    * Handle focus events on the control
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  onFocus?: ReactSelectAsyncProps['onFocus'];
+  onFocus?: ReactSelectAsyncProps<Option, isMulti, Group>['onFocus'];
   /**
    * Handle change events on the input
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  onInputChange?: ReactSelectAsyncProps['onInputChange'];
+  onInputChange?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['onInputChange'];
   /**
    * Placeholder text for the select value
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  placeholder?: ReactSelectAsyncProps['placeholder'];
+  placeholder?: ReactSelectAsyncProps<Option, isMulti, Group>['placeholder'];
   /**
    * loading message shown while the options are being loaded
    */
@@ -280,19 +350,23 @@ export type TAsyncSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  tabIndex?: ReactSelectAsyncProps['tabIndex'];
+  tabIndex?: ReactSelectAsyncProps<Option, isMulti, Group>['tabIndex'];
   /**
    * Select the currently focused option when the user presses tab
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  tabSelectsValue?: ReactSelectAsyncProps['tabSelectsValue'];
+  tabSelectsValue?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['tabSelectsValue'];
   /**
    * The value of the select; reflected by the selected option
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  value?: ReactSelectAsyncProps['value'];
+  value?: ReactSelectAsyncProps<Option, isMulti, Group>['value'];
 
   // Async props
   /**
@@ -300,15 +374,15 @@ export type TAsyncSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  defaultOptions?: OptionsOrGroups<unknown, GroupBase<unknown>> | boolean;
+  defaultOptions?: OptionsOrGroups<Option, Group> | boolean;
   /**
    * Function that returns a promise, which is the set of options to be used once the promise resolves.
    */
-  loadOptions: ReactSelectAsyncProps['loadOptions'];
+  loadOptions: ReactSelectAsyncProps<Option, isMulti, Group>['loadOptions'];
   /**
    * If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
    */
-  cacheOptions?: ReactSelectAsyncProps['cacheOptions'];
+  cacheOptions?: ReactSelectAsyncProps<Option, isMulti, Group>['cacheOptions'];
   /**
    * Determines if option groups will be separated by a divider
    */
@@ -320,7 +394,7 @@ export type TAsyncSelectInputProps = {
 };
 
 const defaultProps: Pick<
-  TAsyncSelectInputProps,
+  TAsyncSelectInputProps<unknown, boolean, GroupBase<unknown>>,
   'value' | 'isSearchable' | 'menuPortalZIndex' | 'controlShouldRenderValue'
 > = {
   // Using "null" will ensure that the currently selected value disappears in
@@ -331,7 +405,13 @@ const defaultProps: Pick<
   controlShouldRenderValue: true,
 };
 
-const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
+const AsyncSelectInput = <
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  props: TAsyncSelectInputProps<Option, IsMulti, Group>
+) => {
   const intl = useIntl();
 
   if (!props.isReadOnly) {
@@ -378,13 +458,13 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
               // react-select doesn't support readOnly mode; this is a workaround:
               ...(props.isReadOnly
                 ? {
-                    Input: (ownProps) => (
+                    Input: (ownProps: InputProps<Option, IsMulti, Group>) => (
                       <defaultComponents.Input {...ownProps} readOnly />
                     ),
                   }
                 : {}),
               ...props.components,
-            } as ReactSelectAsyncProps['components']
+            } as SelectComponentsConfig<Option, IsMulti, Group>
           }
           menuIsOpen={props.isReadOnly ? false : props.menuIsOpen}
           styles={
@@ -401,7 +481,7 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
               hasValue: !isEmpty(props.value),
               controlShouldRenderValue: props.controlShouldRenderValue,
               horizontalConstraint: props.horizontalConstraint,
-            }) as ReactSelectAsyncProps['styles']
+            }) as ReactSelectAsyncProps<Option, IsMulti, Group>['styles']
           }
           filterOption={props.filterOption}
           hideSelectedOptions={props.hideSelectedOptions}
@@ -450,17 +530,14 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => {
                     },
                     persist: () => {},
                   };
-                  props.onBlur &&
-                    props.onBlur(
-                      event as FocusEvent<HTMLInputElement, Element>
-                    );
+                  props.onBlur && props.onBlur(event);
                 }
               : undefined
           }
           onChange={(value, info) => {
             let newValue = value;
             if (props.isMulti && !newValue) {
-              newValue = [];
+              newValue = [] as OnChangeValue<Option, IsMulti>;
             }
 
             props.onChange?.(
diff --git a/packages/components/inputs/search-select-input/src/search-select-input.tsx b/packages/components/inputs/search-select-input/src/search-select-input.tsx
index 78271728ac..08463b48e7 100644
--- a/packages/components/inputs/search-select-input/src/search-select-input.tsx
+++ b/packages/components/inputs/search-select-input/src/search-select-input.tsx
@@ -12,18 +12,30 @@ import {
 import messages from './messages';
 import { SearchSelectInputWrapper } from './search-select-input.styles';
 
-type ReactSelectAsyncProps = AsyncProps<unknown, boolean, GroupBase<unknown>>;
+type ReactSelectAsyncProps<
+  Option,
+  isMulti extends boolean,
+  Group extends GroupBase<Option>
+> = AsyncProps<Option, isMulti, Group>;
 
-type TCustomEvent = {
+type TCustomEvent<
+  Option,
+  isMulti extends boolean,
+  Group extends GroupBase<Option>
+> = {
   target: {
-    id?: ReactSelectAsyncProps['inputId'];
-    name?: ReactSelectAsyncProps['name'];
-    value?: unknown;
+    id?: ReactSelectAsyncProps<Option, isMulti, Group>['inputId'];
+    name?: ReactSelectAsyncProps<Option, isMulti, Group>['name'];
+    value?: ReactSelectAsyncProps<Option, isMulti, Group>['value'];
   };
   persist: () => void;
 };
 
-export type TSearchSelectInputProps = {
+export type TSearchSelectInputProps<
+  Option extends TOptionInnerPropsData = TOptionInnerPropsData,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = {
   /**
    *Horizontal size limit of the input fields.
    */
@@ -49,79 +61,99 @@ export type TSearchSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-label'?: ReactSelectAsyncProps['aria-label'];
+  'aria-label'?: ReactSelectAsyncProps<Option, isMulti, Group>['aria-label'];
   /**
    * HTML ID of an element that should be used as the label (for assistive tech)
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-labelledby'?: ReactSelectAsyncProps['aria-labelledby'];
+  'aria-labelledby'?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['aria-labelledby'];
   /**
    * Indicate if the value entered in the input is invalid.
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-invalid'?: ReactSelectAsyncProps['aria-invalid'];
+  'aria-invalid'?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['aria-invalid'];
   /**
    * HTML ID of an element containing an error message related to the input.
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-errormessage'?: ReactSelectAsyncProps['aria-errormessage'];
+  'aria-errormessage'?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['aria-errormessage'];
   /**
    * The id of the search input. This forwarded as react-select's "inputId"
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  id?: ReactSelectAsyncProps['inputId'];
+  id?: ReactSelectAsyncProps<Option, isMulti, Group>['inputId'];
   /**
    * The id to set on the SelectContainer component. This is forwarded as react-select's "id"
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  containerId?: ReactSelectAsyncProps['id'];
+  containerId?: ReactSelectAsyncProps<Option, isMulti, Group>['id'];
   /**
    * Name of the HTML Input (optional - without this, no input will be rendered)
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  name?: ReactSelectAsyncProps['name'];
+  name?: ReactSelectAsyncProps<Option, isMulti, Group>['name'];
   /**
    * Placeholder text for the select value
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  placeholder?: ReactSelectAsyncProps['placeholder'];
+  placeholder?: ReactSelectAsyncProps<Option, isMulti, Group>['placeholder'];
   /**
    * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  components?: ReactSelectAsyncProps['components'];
+  components?: ReactSelectAsyncProps<Option, isMulti, Group>['components'];
   /**
    * Control whether the selected values should be rendered in the control
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  controlShouldRenderValue?: ReactSelectAsyncProps['controlShouldRenderValue'];
+  controlShouldRenderValue?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['controlShouldRenderValue'];
   /**
    * Sets the tabIndex attribute on the input
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  tabIndex?: ReactSelectAsyncProps['tabIndex'];
+  tabIndex?: ReactSelectAsyncProps<Option, isMulti, Group>['tabIndex'];
   /**
    * The value of the select; reflected by the selected option
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  value?: ReactSelectAsyncProps['value'];
+  value?: ReactSelectAsyncProps<Option, isMulti, Group>['value'];
   /**
    * Remove the currently focused option when the user presses backspace
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  backspaceRemovesValue?: ReactSelectAsyncProps['backspaceRemovesValue'];
+  backspaceRemovesValue?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['backspaceRemovesValue'];
   /**
    * Indicates the input field has an error
    */
@@ -151,13 +183,17 @@ export type TSearchSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  isOptionDisabled?: ReactSelectAsyncProps['isOptionDisabled'];
+  isOptionDisabled?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['isOptionDisabled'];
   /**
    * Support multiple selected options
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  isMulti?: ReactSelectAsyncProps['isMulti'];
+  isMulti?: ReactSelectAsyncProps<Option, isMulti, Group>['isMulti'];
   /**
    * Focus the control when it is mounted. Renamed autoFocus of react-select
    */
@@ -167,25 +203,37 @@ export type TSearchSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  noOptionsMessage?: ReactSelectAsyncProps['noOptionsMessage'];
+  noOptionsMessage?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['noOptionsMessage'];
   /**
    * Can be used to enforce the select input to be opened
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  menuIsOpen?: ReactSelectAsyncProps['menuIsOpen'];
+  menuIsOpen?: ReactSelectAsyncProps<Option, isMulti, Group>['menuIsOpen'];
   /**
    * Maximum height of the menu before scrolling
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  maxMenuHeight?: ReactSelectAsyncProps['maxMenuHeight'];
+  maxMenuHeight?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['maxMenuHeight'];
   /**
    * Dom element to portal the select menu to
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  menuPortalTarget?: ReactSelectAsyncProps['menuPortalTarget'];
+  menuPortalTarget?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['menuPortalTarget'];
   /**
    * z-index value for the menu portal
    * <br>
@@ -197,13 +245,21 @@ export type TSearchSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  menuShouldBlockScroll?: ReactSelectAsyncProps['menuShouldBlockScroll'];
+  menuShouldBlockScroll?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['menuShouldBlockScroll'];
   /**
    * Whether the menu should close after a value is selected. Defaults to `true`.
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  closeMenuOnSelect?: ReactSelectAsyncProps['closeMenuOnSelect'];
+  closeMenuOnSelect?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['closeMenuOnSelect'];
   /**
    * Determines if option groups will be separated by a divider
    */
@@ -213,41 +269,56 @@ export type TSearchSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  defaultOptions?: ReactSelectAsyncProps['defaultOptions'];
+  defaultOptions?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['defaultOptions'];
   /**
    * Handle blur events on the control
    */
-  onBlur?: (event: TCustomEvent) => void;
+  onBlur?: (event: TCustomEvent<Option, isMulti, Group>) => void;
   /**
    * Called with a fake event when value changes.
    * <br />
    * The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
    */
-  onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
+  onChange?: (
+    event: TCustomEvent<Option, isMulti, Group>,
+    info: ActionMeta<unknown>
+  ) => void;
   /**
    * Handle focus events on the control
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  onFocus?: ReactSelectAsyncProps['onFocus'];
+  onFocus?: ReactSelectAsyncProps<Option, isMulti, Group>['onFocus'];
   /**
    * Handle change events on the input
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  onInputChange?: ReactSelectAsyncProps['onInputChange'];
+  onInputChange?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['onInputChange'];
   /**
    * Select the currently focused option when the user presses tab
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  tabSelectsValue?: ReactSelectAsyncProps['tabSelectsValue'];
+  tabSelectsValue?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['tabSelectsValue'];
   /**
    * Function that returns a promise, which is the set of options to be used once the promise resolves.
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  loadOptions: ReactSelectAsyncProps['loadOptions'];
+  loadOptions: ReactSelectAsyncProps<Option, isMulti, Group>['loadOptions'];
   /**
    * The text shown while the options are being loaded
    */
@@ -257,13 +328,13 @@ export type TSearchSelectInputProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  cacheOptions?: ReactSelectAsyncProps['cacheOptions'];
+  cacheOptions?: ReactSelectAsyncProps<Option, isMulti, Group>['cacheOptions'];
   /**
    * Custom method to filter whether an option should be displayed in the menu
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  filterOption?: ReactSelectAsyncProps['filterOption'];
+  filterOption?: ReactSelectAsyncProps<Option, isMulti, Group>['filterOption'];
   /**
    * The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
    */
@@ -280,9 +351,13 @@ type TOptionInnerPropsData = {
   id?: string;
 };
 
-type TOptionInnerProps = {
+type TOptionInnerProps<
+  Option,
+  isMulti extends boolean,
+  Group extends GroupBase<Option>
+> = {
   data?: TOptionInnerPropsData;
-} & OptionProps;
+} & OptionProps<Option, isMulti, Group>;
 
 const defaultProps: Pick<
   TSearchSelectInputProps,
@@ -294,7 +369,13 @@ const defaultProps: Pick<
   controlShouldRenderValue: true,
 };
 
-const SearchSelectInput = (props: TSearchSelectInputProps) => {
+const SearchSelectInput = <
+  Option extends TOptionInnerPropsData = TOptionInnerPropsData,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  props: TSearchSelectInputProps<Option, isMulti, Group>
+) => {
   const intl = useIntl();
 
   if (!props.isReadOnly) {
@@ -322,9 +403,13 @@ const SearchSelectInput = (props: TSearchSelectInputProps) => {
 
   const optionType = props.optionType;
 
-  const components = useMemo(
+  const components: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['components'] = useMemo(
     () => ({
-      Option: (optionInnerProps: TOptionInnerProps) => (
+      Option: (optionInnerProps: TOptionInnerProps<Option, isMulti, Group>) => (
         <CustomSelectInputOption
           {...optionInnerProps}
           optionType={optionType}
@@ -345,7 +430,7 @@ const SearchSelectInput = (props: TSearchSelectInputProps) => {
     >
       <AsyncSelectInput
         {...props}
-        components={components as ReactSelectAsyncProps['components']}
+        components={components}
         placeholder={placeholder}
         iconLeft={props.iconLeft}
         loadingMessage={loadingMessage}
diff --git a/packages/components/inputs/select-utils/src/custom-styled-select-options/custom-styled-select-options.tsx b/packages/components/inputs/select-utils/src/custom-styled-select-options/custom-styled-select-options.tsx
index e476fdf101..f0a7cdaa6c 100644
--- a/packages/components/inputs/select-utils/src/custom-styled-select-options/custom-styled-select-options.tsx
+++ b/packages/components/inputs/select-utils/src/custom-styled-select-options/custom-styled-select-options.tsx
@@ -1,6 +1,6 @@
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
-import { components, OptionProps } from 'react-select';
+import { components, GroupBase, OptionProps } from 'react-select';
 import { NO_VALUE_FALLBACK, SELECT_DROPDOWN_OPTION_TYPES } from './constants';
 
 export type TData = {
@@ -11,14 +11,22 @@ export type TData = {
 
 export type TSelectDropdownOptionTypesKeys =
   keyof typeof SELECT_DROPDOWN_OPTION_TYPES;
-export type TDoublePropertySelectInputOptionProps = {
+export type TDoublePropertySelectInputOptionProps<
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = {
   data?: TData;
   noValueFallback?: string;
   optionType?: (typeof SELECT_DROPDOWN_OPTION_TYPES)[TSelectDropdownOptionTypesKeys];
-} & OptionProps;
+} & OptionProps<Option, isMulti, Group>;
 
-export const MultiplePropertiesSelectInputOption = (
-  props: TDoublePropertySelectInputOptionProps
+export const MultiplePropertiesSelectInputOption = <
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  props: TDoublePropertySelectInputOptionProps<Option, isMulti, Group>
 ) => {
   const { data } = props;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
@@ -39,8 +47,12 @@ export const MultiplePropertiesSelectInputOption = (
 MultiplePropertiesSelectInputOption.displayName =
   'MultiplePropertiesSelectInputOption';
 
-export const DoublePropertySelectInputOption = (
-  props: TDoublePropertySelectInputOptionProps
+export const DoublePropertySelectInputOption = <
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  props: TDoublePropertySelectInputOptionProps<Option, isMulti, Group>
 ) => {
   const { data } = props;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
@@ -58,12 +70,24 @@ export const DoublePropertySelectInputOption = (
 
 DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
 
-export type TCustomSelectInputOptionProps = {
-  optionInnerProps: TDoublePropertySelectInputOptionProps;
-} & TDoublePropertySelectInputOptionProps;
+export type TCustomSelectInputOptionProps<
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = {
+  optionInnerProps: TDoublePropertySelectInputOptionProps<
+    Option,
+    isMulti,
+    Group
+  >;
+} & TDoublePropertySelectInputOptionProps<Option, isMulti, Group>;
 
-export const CustomSelectInputOption = (
-  props: TCustomSelectInputOptionProps
+export const CustomSelectInputOption = <
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  props: TCustomSelectInputOptionProps<Option, isMulti, Group>
 ) => {
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
 
diff --git a/packages/components/inputs/select-utils/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.tsx b/packages/components/inputs/select-utils/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.tsx
index e0e2e78ef5..6f59214002 100644
--- a/packages/components/inputs/select-utils/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.tsx
+++ b/packages/components/inputs/select-utils/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.tsx
@@ -1,11 +1,25 @@
-import { components, DropdownIndicatorProps } from 'react-select';
+import { components, DropdownIndicatorProps, GroupBase } from 'react-select';
 import { SearchIcon } from '@commercetools-uikit/icons';
 import { TSelectInputCustomComponentProps } from '../types';
 
-export type TDropdownIndicatorProps =
-  TSelectInputCustomComponentProps<DropdownIndicatorProps>;
+export type TDropdownIndicatorProps<
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = TSelectInputCustomComponentProps<
+  DropdownIndicatorProps<Option, isMulti, Group>,
+  Option,
+  isMulti,
+  Group
+>;
 
-const SearchIconDropdownIndicator = (props: TDropdownIndicatorProps) => {
+const SearchIconDropdownIndicator = <
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  props: TDropdownIndicatorProps<Option, isMulti, Group>
+) => {
   return (
     <components.DropdownIndicator {...props}>
       <SearchIcon
diff --git a/packages/components/inputs/select-utils/src/types.ts b/packages/components/inputs/select-utils/src/types.ts
index d50ed9079a..66f0a1ea14 100644
--- a/packages/components/inputs/select-utils/src/types.ts
+++ b/packages/components/inputs/select-utils/src/types.ts
@@ -5,6 +5,7 @@ import type {
   ContainerProps,
   ControlProps,
   DropdownIndicatorProps,
+  GroupBase,
   GroupHeadingProps,
   GroupProps,
   IndicatorSeparatorProps,
@@ -23,30 +24,37 @@ import type {
   ValueContainerProps,
 } from 'react-select';
 
-export type TReactSelectCustomComponentsProps =
-  | ClearIndicatorProps
-  | ControlProps
-  | DropdownIndicatorProps
-  | GroupProps
-  | GroupHeadingProps
-  | IndicatorsContainerProps
-  | IndicatorSeparatorProps
-  | InputProps
-  | LoadingIndicatorProps
-  | MenuProps
-  | MenuListProps
-  | NoticeProps
-  | MultiValueProps
-  | MultiValueGenericProps
-  | MultiValueRemoveProps
-  | OptionProps
-  | PlaceholderProps
-  | ContainerProps
-  | SingleValueProps
-  | ValueContainerProps;
+export type TReactSelectCustomComponentsProps<
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> =
+  | ClearIndicatorProps<Option, isMulti, Group>
+  | ControlProps<Option, isMulti, Group>
+  | DropdownIndicatorProps<Option, isMulti, Group>
+  | GroupProps<Option, isMulti, Group>
+  | GroupHeadingProps<Option, isMulti, Group>
+  | IndicatorsContainerProps<Option, isMulti, Group>
+  | IndicatorSeparatorProps<Option, isMulti, Group>
+  | InputProps<Option, isMulti, Group>
+  | LoadingIndicatorProps<Option, isMulti, Group>
+  | MenuProps<Option, isMulti, Group>
+  | MenuListProps<Option, isMulti, Group>
+  | NoticeProps<Option, isMulti, Group>
+  | MultiValueProps<Option, isMulti, Group>
+  | MultiValueGenericProps<Option, isMulti, Group>
+  | MultiValueRemoveProps<Option, isMulti, Group>
+  | OptionProps<Option, isMulti, Group>
+  | PlaceholderProps<Option, isMulti, Group>
+  | ContainerProps<Option, isMulti, Group>
+  | SingleValueProps<Option, isMulti, Group>
+  | ValueContainerProps<Option, isMulti, Group>;
 
 export type TSelectInputCustomComponentProps<
-  T extends TReactSelectCustomComponentsProps
+  T extends TReactSelectCustomComponentsProps<Option, isMulti, Group>,
+  Option = unknown,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
 > = T & {
   selectProps: T['selectProps'] & {
     isCondensed?: boolean;

From f24a37c4db3c6a2912226c5f7c9241f803509717 Mon Sep 17 00:00:00 2001
From: Rafa Gares <rafael.gares@commercetools.com>
Date: Mon, 7 Oct 2024 18:20:19 +0200
Subject: [PATCH 2/3] fix: broken types

---
 .../src/search-select-field.tsx               | 117 +++++++++++++-----
 .../src/search-select-input.stories.tsx       |  12 +-
 .../src/search-select-input.tsx               |   2 +-
 3 files changed, 95 insertions(+), 36 deletions(-)

diff --git a/packages/components/fields/search-select-field/src/search-select-field.tsx b/packages/components/fields/search-select-field/src/search-select-field.tsx
index 059fad6ac3..4a4d14b3dd 100644
--- a/packages/components/fields/search-select-field/src/search-select-field.tsx
+++ b/packages/components/fields/search-select-field/src/search-select-field.tsx
@@ -20,13 +20,21 @@ import SearchSelectInput from '@commercetools-uikit/search-select-input';
 import FieldErrors from '@commercetools-uikit/field-errors';
 import FieldWarnings from '@commercetools-uikit/field-warnings';
 
-type ReactSelectAsyncProps = AsyncProps<unknown, boolean, GroupBase<unknown>>;
+type ReactSelectAsyncProps<
+  Option,
+  isMulti extends boolean,
+  Group extends GroupBase<Option>
+> = AsyncProps<Option, isMulti, Group>;
 
-type TCustomEvent = {
+type TCustomEvent<
+  Option,
+  isMulti extends boolean,
+  Group extends GroupBase<Option>
+> = {
   target: {
-    id?: ReactSelectAsyncProps['inputId'];
-    name?: ReactSelectAsyncProps['name'];
-    value?: unknown;
+    id?: ReactSelectAsyncProps<Option, isMulti, Group>['inputId'];
+    name?: ReactSelectAsyncProps<Option, isMulti, Group>['name'];
+    value?: ReactSelectAsyncProps<Option, isMulti, Group>['value'];
   };
   persist: () => void;
 };
@@ -45,7 +53,11 @@ const hasWarnings = (warnings?: TFieldWarnings) =>
   warnings && Object.values(warnings).some(Boolean);
 const sequentialId = createSequentialId('search-select-field-');
 
-export type TSearchSelectFieldProps = {
+export type TSearchSelectFieldProps<
+  Option extends TOptionInnerPropsData = TOptionInnerPropsData,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = {
   /**
    *Horizontal size limit of the input fields.
    */
@@ -71,67 +83,79 @@ export type TSearchSelectFieldProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-label'?: ReactSelectAsyncProps['aria-label'];
+  'aria-label'?: ReactSelectAsyncProps<Option, isMulti, Group>['aria-label'];
   /**
    * HTML ID of an element that should be used as the label (for assistive tech)
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  'aria-labelledby'?: ReactSelectAsyncProps['aria-labelledby'];
+  'aria-labelledby'?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['aria-labelledby'];
   /**
    * The id of the search input. This forwarded as react-select's "inputId"
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  id?: ReactSelectAsyncProps['inputId'];
+  id?: ReactSelectAsyncProps<Option, isMulti, Group>['inputId'];
   /**
    * The id to set on the SelectContainer component. This is forwarded as react-select's "id"
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  containerId?: ReactSelectAsyncProps['id'];
+  containerId?: ReactSelectAsyncProps<Option, isMulti, Group>['id'];
   /**
    * Name of the HTML Input (optional - without this, no input will be rendered)
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  name?: ReactSelectAsyncProps['name'];
+  name?: ReactSelectAsyncProps<Option, isMulti, Group>['name'];
   /**
    * Placeholder text for the select value
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  placeholder?: ReactSelectAsyncProps['placeholder'];
+  placeholder?: ReactSelectAsyncProps<Option, isMulti, Group>['placeholder'];
   /**
    * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  components?: ReactSelectAsyncProps['components'];
+  components?: ReactSelectAsyncProps<Option, isMulti, Group>['components'];
   /**
    * Control whether the selected values should be rendered in the control
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  controlShouldRenderValue?: ReactSelectAsyncProps['controlShouldRenderValue'];
+  controlShouldRenderValue?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['controlShouldRenderValue'];
   /**
    * Sets the tabIndex attribute on the input
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  tabIndex?: ReactSelectAsyncProps['tabIndex'];
+  tabIndex?: ReactSelectAsyncProps<Option, isMulti, Group>['tabIndex'];
   /**
    * The value of the select; reflected by the selected option
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  value?: ReactSelectAsyncProps['value'];
+  value?: ReactSelectAsyncProps<Option, isMulti, Group>['value'];
   /**
    * Remove the currently focused option when the user presses backspace
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  backspaceRemovesValue?: ReactSelectAsyncProps['backspaceRemovesValue'];
+  backspaceRemovesValue?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['backspaceRemovesValue'];
   /**
    * Indicates the input field has an error
    */
@@ -162,13 +186,17 @@ export type TSearchSelectFieldProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  isOptionDisabled?: ReactSelectAsyncProps['isOptionDisabled'];
+  isOptionDisabled?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['isOptionDisabled'];
   /**
    * Support multiple selected options
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  isMulti?: ReactSelectAsyncProps['isMulti'];
+  isMulti?: ReactSelectAsyncProps<Option, isMulti, Group>['isMulti'];
   /**
    * Focus the control when it is mounted. Renamed autoFocus of react-select
    */
@@ -178,19 +206,31 @@ export type TSearchSelectFieldProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  noOptionsMessage?: ReactSelectAsyncProps['noOptionsMessage'];
+  noOptionsMessage?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['noOptionsMessage'];
   /**
    * Maximum height of the menu before scrolling
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  maxMenuHeight?: ReactSelectAsyncProps['maxMenuHeight'];
+  maxMenuHeight?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['maxMenuHeight'];
   /**
    * Dom element to portal the select menu to
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  menuPortalTarget?: ReactSelectAsyncProps['menuPortalTarget'];
+  menuPortalTarget?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['menuPortalTarget'];
   /**
    * z-index value for the menu portal
    * <br>
@@ -208,37 +248,48 @@ export type TSearchSelectFieldProps = {
   /**
    * Handle blur events on the control
    */
-  onBlur?: (event: TCustomEvent) => void;
+  onBlur?: (event: TCustomEvent<Option, isMulti, Group>) => void;
   /**
    * Called with a fake event when value changes.
    * <br />
    * The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
    */
-  onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
+  onChange?: (
+    event: TCustomEvent<Option, isMulti, Group>,
+    info: ActionMeta<unknown>
+  ) => void;
   /**
    * Handle focus events on the control
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  onFocus?: ReactSelectAsyncProps['onFocus'];
+  onFocus?: ReactSelectAsyncProps<Option, isMulti, Group>['onFocus'];
   /**
    * Handle change events on the input
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  onInputChange?: ReactSelectAsyncProps['onInputChange'];
+  onInputChange?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['onInputChange'];
   /**
    * Select the currently focused option when the user presses tab
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  tabSelectsValue?: ReactSelectAsyncProps['tabSelectsValue'];
+  tabSelectsValue?: ReactSelectAsyncProps<
+    Option,
+    isMulti,
+    Group
+  >['tabSelectsValue'];
   /**
    * Function that returns a promise, which is the set of options to be used once the promise resolves.
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  loadOptions: ReactSelectAsyncProps['loadOptions'];
+  loadOptions: ReactSelectAsyncProps<Option, isMulti, Group>['loadOptions'];
   /**
    * The text shown while the options are being loaded
    */
@@ -248,13 +299,13 @@ export type TSearchSelectFieldProps = {
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  cacheOptions?: ReactSelectAsyncProps['cacheOptions'];
+  cacheOptions?: ReactSelectAsyncProps<Option, isMulti, Group>['cacheOptions'];
   /**
    * Custom method to filter whether an option should be displayed in the menu
    * <br>
    * [Props from React select was used](https://react-select.com/props)
    */
-  filterOption?: ReactSelectAsyncProps['filterOption'];
+  filterOption?: ReactSelectAsyncProps<Option, isMulti, Group>['filterOption'];
   /**
    * The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
    */
@@ -328,6 +379,12 @@ export type TSearchSelectFieldProps = {
   iconLeft?: ReactNode;
 };
 
+type TOptionInnerPropsData = {
+  label?: string;
+  key?: string;
+  id?: string;
+};
+
 const defaultProps: Pick<TSearchSelectFieldProps, 'controlShouldRenderValue'> =
   {
     controlShouldRenderValue: true,
diff --git a/packages/components/inputs/search-select-input/src/search-select-input.stories.tsx b/packages/components/inputs/search-select-input/src/search-select-input.stories.tsx
index 4aed637fab..bdc15c4599 100644
--- a/packages/components/inputs/search-select-input/src/search-select-input.stories.tsx
+++ b/packages/components/inputs/search-select-input/src/search-select-input.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import SearchSelectInput from './search-select-input';
+import SearchSelectInput, {
+  TOptionInnerPropsData,
+} from './search-select-input';
 import { iconArgType } from '@/storybook-helpers';
 import { useState } from 'react';
 import Spacings from '@commercetools-uikit/spacings';
@@ -62,16 +64,16 @@ const loadOptions = (inputValue: string) =>
   delay(500).then(() => filterColors(inputValue));
 
 export const BasicExample: Story = ({ isMulti, ...args }) => {
-  const [value, onChange] = useState<string | string[] | undefined>(
-    isMulti ? [] : undefined
-  );
+  const [value, onChange] = useState<
+    TOptionInnerPropsData | readonly TOptionInnerPropsData[] | null | undefined
+  >(isMulti ? [] : null);
 
   return (
     <div style={{ height: 400 }}>
       <Spacings.Stack scale="m">
         <SearchSelectInput
           onChange={(event) => {
-            onChange(event.target.value as string | string[] | undefined);
+            onChange(event.target.value);
           }}
           value={value}
           {...args}
diff --git a/packages/components/inputs/search-select-input/src/search-select-input.tsx b/packages/components/inputs/search-select-input/src/search-select-input.tsx
index 08463b48e7..9cca2b9294 100644
--- a/packages/components/inputs/search-select-input/src/search-select-input.tsx
+++ b/packages/components/inputs/search-select-input/src/search-select-input.tsx
@@ -345,7 +345,7 @@ export type TSearchSelectInputProps<
   iconLeft?: ReactNode;
 };
 
-type TOptionInnerPropsData = {
+export type TOptionInnerPropsData = {
   label?: string;
   key?: string;
   id?: string;

From 77f2d034f7e81322a3ef48525308ad293206e1c6 Mon Sep 17 00:00:00 2001
From: Rafa Gares <rafael.gares@commercetools.com>
Date: Mon, 14 Oct 2024 16:14:58 +0200
Subject: [PATCH 3/3] chore: add changeset

---
 .changeset/tender-donuts-tie.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/tender-donuts-tie.md

diff --git a/.changeset/tender-donuts-tie.md b/.changeset/tender-donuts-tie.md
new file mode 100644
index 0000000000..68ae6f6f9f
--- /dev/null
+++ b/.changeset/tender-donuts-tie.md
@@ -0,0 +1,8 @@
+---
+'@commercetools-uikit/search-select-field': patch
+'@commercetools-uikit/search-select-input': patch
+'@commercetools-uikit/async-select-input': patch
+'@commercetools-uikit/select-utils': patch
+---
+
+Improve `SearchSelectInput`, `SearchSelectField` and `AsyncSelectInput` types by using the generics of `AsyncSelect` from `react-select/async`