From 924c50df94048829ab66f0a3ac189bd2dd22a0db Mon Sep 17 00:00:00 2001
From: Michael Salzmann <michael.salzmann@commercetools.com>
Date: Thu, 16 Jan 2025 12:43:16 +0100
Subject: [PATCH] refactor(async-select-and-search-select): refactor types in
 async-select-input & search-select-input

---
 .../src/search-select-field.tsx               | 117 ++++++++---
 .../src/async-select-input.tsx                | 179 ++++++++++++-----
 .../src/search-select-input.stories.tsx       |  20 +-
 .../src/search-select-input.tsx               | 188 ++++++++++++------
 .../custom-styled-select-options.tsx          |  48 +++--
 .../search-icon-dropdown-indicator.tsx        |  22 +-
 .../inputs/select-utils/src/types.ts          |  52 +++--
 7 files changed, 439 insertions(+), 187 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 53afe574c3..7f2142a483 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 SearchSelectField = ({
   controlShouldRenderValue = true,
   ...props
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 be5bbe2fd9..ed0064a791 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,
+  type InputProps,
+  type OnChangeValue,
+  type SelectComponentsConfig,
   type ActionMeta,
   type GroupBase,
   type OptionsOrGroups,
@@ -34,18 +37,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.
    */
@@ -92,25 +107,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
@@ -121,57 +148,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
    */
@@ -181,43 +220,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>
@@ -229,51 +280,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
    */
@@ -283,19 +353,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
   /**
@@ -303,15 +377,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
    */
@@ -333,7 +407,11 @@ export type TAsyncSelectInputProps = {
   count?: number;
 };
 
-const AsyncSelectInput = ({
+const AsyncSelectInput = <
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
   // Using "null" will ensure that the currently selected value disappears in
   // case "undefined" gets passed as the next value
   value = null,
@@ -343,7 +421,7 @@ const AsyncSelectInput = ({
   appearance = 'default',
   optionStyle = 'list',
   ...props
-}: TAsyncSelectInputProps) => {
+}: TAsyncSelectInputProps<Option, IsMulti, Group>) => {
   const intl = useIntl();
 
   if (!props.isReadOnly) {
@@ -405,7 +483,7 @@ const AsyncSelectInput = ({
               // 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 />
                     ),
                   }
@@ -418,7 +496,7 @@ const AsyncSelectInput = ({
                 ? optionStyleCheckboxComponents(appearance)
                 : {}),
               ...props.components,
-            } as ReactSelectAsyncProps['components']
+            } as SelectComponentsConfig<Option, IsMulti, Group>
           }
           menuIsOpen={
             props.isReadOnly
@@ -442,7 +520,7 @@ const AsyncSelectInput = ({
               hasValue: !isEmpty(value),
               controlShouldRenderValue: controlShouldRenderValue,
               horizontalConstraint: props.horizontalConstraint,
-            }) as ReactSelectAsyncProps['styles']
+            }) as ReactSelectAsyncProps<Option, IsMulti, Group>['styles']
           }
           filterOption={props.filterOption}
           // react-select uses "id" (for the container) and "inputId" (for the input),
@@ -493,17 +571,14 @@ const AsyncSelectInput = ({
                     },
                     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.stories.tsx b/packages/components/inputs/search-select-input/src/search-select-input.stories.tsx
index 231ebe27fd..b81a72ebb5 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}
@@ -129,16 +131,16 @@ BasicExample.args = {
 };
 
 export const CheckboxOptionStyle: Story = ({ isMulti, ...args }) => {
-  const [value, onChange] = useState<string | string[] | undefined>(
-    isMulti ? [] : undefined
-  );
+  const [value, onChange] = useState<
+    TOptionInnerPropsData | readonly TOptionInnerPropsData[] | null | undefined
+  >(isMulti ? [] : undefined);
 
   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 952cccccab..1f3433210e 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
@@ -14,18 +14,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.
    */
@@ -51,79 +63,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
    */
@@ -153,13 +185,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
    */
@@ -169,25 +205,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>
@@ -199,13 +247,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
    */
@@ -215,41 +271,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
    */
@@ -259,13 +330,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
    */
@@ -287,17 +358,17 @@ export type TSearchSelectInputProps = {
   count?: number;
 };
 
-type TOptionInnerPropsData = {
+export type TOptionInnerPropsData = {
   label?: string;
   key?: string;
   id?: string;
 };
 
-type TOptionInnerProps = {
-  data?: TOptionInnerPropsData;
-} & OptionProps;
-
-const SearchSelectInput = ({
+const SearchSelectInput = <
+  Option extends TOptionInnerPropsData = TOptionInnerPropsData,
+  isMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
   value = null,
   menuPortalZIndex = 1,
   maxMenuHeight = 220,
@@ -305,7 +376,7 @@ const SearchSelectInput = ({
   appearance = 'default',
   optionStyle = 'list',
   ...props
-}: TSearchSelectInputProps) => {
+}: TSearchSelectInputProps<Option, isMulti, Group>) => {
   const intl = useIntl();
 
   if (!props.isReadOnly) {
@@ -336,20 +407,21 @@ const SearchSelectInput = ({
   const optionType = props.optionType;
 
   const components = useMemo(
-    () => ({
-      Option: (optionInnerProps: TOptionInnerProps) => (
-        <CustomSelectInputOption
-          {...optionInnerProps}
-          optionType={optionType}
-          optionInnerProps={optionInnerProps}
-        />
-      ),
-      ...(optionStyle === 'checkbox'
-        ? optionStyleCheckboxComponents(appearance)
-        : {}),
-      ...props.components,
-      DropdownIndicator: SearchIconDropdownIndicator,
-    }),
+    () =>
+      ({
+        Option: (optionInnerProps: OptionProps<Option, isMulti, Group>) => (
+          <CustomSelectInputOption<Option, isMulti, Group>
+            {...optionInnerProps}
+            optionType={optionType}
+            optionInnerProps={optionInnerProps}
+          />
+        ),
+        ...(optionStyle === 'checkbox'
+          ? optionStyleCheckboxComponents(appearance)
+          : {}),
+        ...props.components,
+        DropdownIndicator: SearchIconDropdownIndicator,
+      } as ReactSelectAsyncProps<Option, isMulti, Group>['components']),
     [optionStyle, appearance, props.components, optionType]
   );
 
@@ -366,7 +438,7 @@ const SearchSelectInput = ({
         maxMenuHeight={maxMenuHeight}
         appearance={appearance}
         optionStyle={optionStyle}
-        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;