Only update react-select child component types where necessary when u…

…sing `moduleResolution: bundler` tsconfig setting (#3056)

* fix: compat with emotion v11.14

* docs: refine changeset

* chore(react-select): only typecast types when necessary for react-select child components

* fix: refine types

* docs: changeset

* docs: remove duplicate changeset

* chore(changeset): add changeset

---------

Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>

.changeset/curvy-colts-brake.md

@@ -0,0 +1,8 @@
+---
+'@commercetools-uikit/async-creatable-select-input': patch
+'@commercetools-uikit/creatable-select-input': patch
+'@commercetools-uikit/async-select-input': patch
+'@commercetools-uikit/select-input': patch
+---
+
+We are now using `moduleResolution: bundler` which attempts to optimize to avoid long paths. The re-exported components from `react-select` need to be explicitly typed now, to avoid TypeScript having to infer an internal import path.

.changeset/small-jars-pay.md

@@ -0,0 +1,9 @@
+---
+'@commercetools-uikit/async-creatable-select-input': patch
+'@commercetools-uikit/creatable-select-input': patch
+'@commercetools-uikit/async-select-input': patch
+'@commercetools-uikit/flat-button': patch
+'@commercetools-uikit/select-input': patch
+---
+
+Remove type annotations from re-exported react-select child components where they are not necessary to reduce verbosity and maintain type consistency

packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx

@@ -3,28 +3,9 @@ import { useIntl } from 'react-intl';
 import isEmpty from 'lodash/isEmpty';
 import {
   components as defaultComponents,
-  type ClearIndicatorProps,
-  type ContainerProps,
-  type ControlProps,
-  type DropdownIndicatorProps,
-  type GroupHeadingProps,
-  type GroupProps,
-  type IndicatorsContainerProps,
-  type InputProps,
-  type MenuListProps,
-  type MultiValueGenericProps,
-  type MultiValueProps,
-  type MultiValueRemoveProps,
-  type NoticeProps,
-  type OptionProps,
-  type PlaceholderProps,
-  type SingleValueProps,
-  type ValueContainerProps,
   type ActionMeta,
-  type GroupBase,
-  type LoadingIndicatorProps,
-  type MenuProps,
   type CommonPropsAndClassName,
+  type GroupBase,
   type MenuPlacement,
   type MenuPosition,
 } from 'react-select';
@@ -561,19 +542,16 @@ AsyncCreatableSelectInput.isTouched = (touched: unknown) => Boolean(touched);
  */
 
 // custom
-AsyncCreatableSelectInput.ClearIndicator =
-  customizedComponents.ClearIndicator as ComponentType<
-    ClearIndicatorProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.Control = defaultComponents.Control as ComponentType<
-  ControlProps<{}, false, GroupBase<{}>>
->;
+AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
+AsyncCreatableSelectInput.Control = defaultComponents.Control;
+//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570
 AsyncCreatableSelectInput.CrossIcon =
   defaultComponents.CrossIcon as ComponentType<
     JSX.IntrinsicElements['svg'] & {
       size?: number;
     }
   >;
+//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570
 AsyncCreatableSelectInput.DownChevron =
   defaultComponents.DownChevron as ComponentType<
     JSX.IntrinsicElements['svg'] & {
@@ -582,46 +560,24 @@ AsyncCreatableSelectInput.DownChevron =
   >;
 // custom
 AsyncCreatableSelectInput.DropdownIndicator =
-  customizedComponents.DropdownIndicator as ComponentType<
-    DropdownIndicatorProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.Group = defaultComponents.Group as ComponentType<
-  GroupProps<{}, false, GroupBase<{}>>
->;
-AsyncCreatableSelectInput.GroupHeading =
-  defaultComponents.GroupHeading as ComponentType<
-    GroupHeadingProps<{}, false, GroupBase<{}>>
-  >;
+  customizedComponents.DropdownIndicator;
+AsyncCreatableSelectInput.Group = defaultComponents.Group;
+AsyncCreatableSelectInput.GroupHeading = defaultComponents.GroupHeading;
 AsyncCreatableSelectInput.IndicatorSeparator =
-  defaultComponents.IndicatorSeparator as ComponentType<
-    LoadingIndicatorProps<{}, false, GroupBase<{}>>
-  >;
+  defaultComponents.IndicatorSeparator;
 AsyncCreatableSelectInput.IndicatorsContainer =
-  defaultComponents.IndicatorsContainer as ComponentType<
-    IndicatorsContainerProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.Input = defaultComponents.Input as ComponentType<
-  InputProps<{}, false, GroupBase<{}>>
->;
+  defaultComponents.IndicatorsContainer;
+AsyncCreatableSelectInput.Input = defaultComponents.Input;
 // custom
 AsyncCreatableSelectInput.LoadingIndicator =
-  customizedComponents.LoadingIndicator as ComponentType<
-    LoadingIndicatorProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.LoadingMessage =
-  defaultComponents.LoadingMessage as ComponentType<
-    NoticeProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.Menu = defaultComponents.Menu as ComponentType<
-  MenuProps<{}, false, GroupBase<{}>>
->;
-AsyncCreatableSelectInput.MenuList =
-  defaultComponents.MenuList as ComponentType<
-    MenuListProps<{}, false, GroupBase<{}>>
-  >;
+  customizedComponents.LoadingIndicator;
+AsyncCreatableSelectInput.LoadingMessage = defaultComponents.LoadingMessage;
+AsyncCreatableSelectInput.Menu = defaultComponents.Menu;
+AsyncCreatableSelectInput.MenuList = defaultComponents.MenuList;
+//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570
 AsyncCreatableSelectInput.MenuPortal =
   defaultComponents.MenuPortal as ComponentType<
-    CommonPropsAndClassName<{}, false, GroupBase<{}>> & {
+    CommonPropsAndClassName<unknown, false, GroupBase<unknown>> & {
       appendTo: HTMLElement | undefined;
       children: ReactNode;
       controlElement: HTMLDivElement | null;
@@ -630,45 +586,18 @@ AsyncCreatableSelectInput.MenuPortal =
       menuPosition: MenuPosition;
     }
   >;
-AsyncCreatableSelectInput.MultiValue =
-  defaultComponents.MultiValue as ComponentType<
-    MultiValueProps<{}, false, GroupBase<{}>>
-  >;
+AsyncCreatableSelectInput.MultiValue = defaultComponents.MultiValue;
 AsyncCreatableSelectInput.MultiValueContainer =
-  defaultComponents.MultiValueContainer as ComponentType<
-    MultiValueGenericProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.MultiValueLabel =
-  defaultComponents.MultiValueLabel as ComponentType<
-    MultiValueGenericProps<{}, false, GroupBase<{}>>
-  >;
+  defaultComponents.MultiValueContainer;
+AsyncCreatableSelectInput.MultiValueLabel = defaultComponents.MultiValueLabel;
 // custom
 AsyncCreatableSelectInput.MultiValueRemove =
-  customizedComponents.MultiValueRemove as ComponentType<
-    MultiValueRemoveProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.NoOptionsMessage =
-  defaultComponents.NoOptionsMessage as ComponentType<
-    NoticeProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.Option = defaultComponents.Option as ComponentType<
-  OptionProps<{}, false, GroupBase<{}>>
->;
-AsyncCreatableSelectInput.Placeholder =
-  defaultComponents.Placeholder as ComponentType<
-    PlaceholderProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.SelectContainer =
-  defaultComponents.SelectContainer as ComponentType<
-    ContainerProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.SingleValue =
-  defaultComponents.SingleValue as ComponentType<
-    SingleValueProps<{}, false, GroupBase<{}>>
-  >;
-AsyncCreatableSelectInput.ValueContainer =
-  defaultComponents.ValueContainer as ComponentType<
-    ValueContainerProps<{}, false, GroupBase<{}>>
-  >;
+  customizedComponents.MultiValueRemove;
+AsyncCreatableSelectInput.NoOptionsMessage = defaultComponents.NoOptionsMessage;
+AsyncCreatableSelectInput.Option = defaultComponents.Option;
+AsyncCreatableSelectInput.Placeholder = defaultComponents.Placeholder;
+AsyncCreatableSelectInput.SelectContainer = defaultComponents.SelectContainer;
+AsyncCreatableSelectInput.SingleValue = defaultComponents.SingleValue;
+AsyncCreatableSelectInput.ValueContainer = defaultComponents.ValueContainer;
 
 export default AsyncCreatableSelectInput;

packages/components/inputs/async-select-input/src/async-select-input.tsx

@@ -6,25 +6,6 @@ import {
   type ActionMeta,
   type GroupBase,
   type OptionsOrGroups,
-  type ClearIndicatorProps,
-  type ContainerProps,
-  type ControlProps,
-  type DropdownIndicatorProps,
-  type GroupHeadingProps,
-  type GroupProps,
-  type IndicatorsContainerProps,
-  type InputProps,
-  type MenuListProps,
-  type MultiValueGenericProps,
-  type MultiValueProps,
-  type MultiValueRemoveProps,
-  type NoticeProps,
-  type OptionProps,
-  type PlaceholderProps,
-  type SingleValueProps,
-  type ValueContainerProps,
-  type LoadingIndicatorProps,
-  type MenuProps,
   type CommonPropsAndClassName,
   type MenuPlacement,
   type MenuPosition,
@@ -575,62 +556,35 @@ AsyncSelectInput.isTouched = (touched: unknown) => Boolean(touched);
  */
 
 // custom
-AsyncSelectInput.ClearIndicator =
-  customizedComponents.ClearIndicator as ComponentType<
-    ClearIndicatorProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.Control = defaultComponents.Control as ComponentType<
-  ControlProps<{}, false, GroupBase<{}>>
->;
+AsyncSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
+AsyncSelectInput.Control = defaultComponents.Control;
+//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570
 AsyncSelectInput.CrossIcon = defaultComponents.CrossIcon as ComponentType<
   JSX.IntrinsicElements['svg'] & {
     size?: number;
   }
 >;
+//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570
 AsyncSelectInput.DownChevron = defaultComponents.DownChevron as ComponentType<
   JSX.IntrinsicElements['svg'] & {
     size?: number;
   }
 >;
 // custom
-AsyncSelectInput.DropdownIndicator =
-  customizedComponents.DropdownIndicator as ComponentType<
-    DropdownIndicatorProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.Group = defaultComponents.Group as ComponentType<
-  GroupProps<{}, false, GroupBase<{}>>
->;
-AsyncSelectInput.GroupHeading = defaultComponents.GroupHeading as ComponentType<
-  GroupHeadingProps<{}, false, GroupBase<{}>>
->;
-AsyncSelectInput.IndicatorSeparator =
-  defaultComponents.IndicatorSeparator as ComponentType<
-    LoadingIndicatorProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.IndicatorsContainer =
-  defaultComponents.IndicatorsContainer as ComponentType<
-    IndicatorsContainerProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.Input = defaultComponents.Input as ComponentType<
-  InputProps<{}, false, GroupBase<{}>>
->;
+AsyncSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
+AsyncSelectInput.Group = defaultComponents.Group;
+AsyncSelectInput.GroupHeading = defaultComponents.GroupHeading;
+AsyncSelectInput.IndicatorSeparator = defaultComponents.IndicatorSeparator;
+AsyncSelectInput.IndicatorsContainer = defaultComponents.IndicatorsContainer;
+AsyncSelectInput.Input = defaultComponents.Input;
 // custom
-AsyncSelectInput.LoadingIndicator =
-  customizedComponents.LoadingIndicator as ComponentType<
-    LoadingIndicatorProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.LoadingMessage =
-  defaultComponents.LoadingMessage as ComponentType<
-    NoticeProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.Menu = defaultComponents.Menu as ComponentType<
-  MenuProps<{}, false, GroupBase<{}>>
->;
-AsyncSelectInput.MenuList = defaultComponents.MenuList as ComponentType<
-  MenuListProps<{}, false, GroupBase<{}>>
->;
+AsyncSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
+AsyncSelectInput.LoadingMessage = defaultComponents.LoadingMessage;
+AsyncSelectInput.Menu = defaultComponents.Menu;
+AsyncSelectInput.MenuList = defaultComponents.MenuList;
+//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570
 AsyncSelectInput.MenuPortal = defaultComponents.MenuPortal as ComponentType<
-  CommonPropsAndClassName<{}, false, GroupBase<{}>> & {
+  CommonPropsAndClassName<unknown, false, GroupBase<unknown>> & {
     appendTo: HTMLElement | undefined;
     children: ReactNode;
     controlElement: HTMLDivElement | null;
@@ -639,42 +593,16 @@ AsyncSelectInput.MenuPortal = defaultComponents.MenuPortal as ComponentType<
     menuPosition: MenuPosition;
   }
 >;
-AsyncSelectInput.MultiValue = defaultComponents.MultiValue as ComponentType<
-  MultiValueProps<{}, false, GroupBase<{}>>
->;
-AsyncSelectInput.MultiValueContainer =
-  defaultComponents.MultiValueContainer as ComponentType<
-    MultiValueGenericProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.MultiValueLabel =
-  defaultComponents.MultiValueLabel as ComponentType<
-    MultiValueGenericProps<{}, false, GroupBase<{}>>
-  >;
+AsyncSelectInput.MultiValue = defaultComponents.MultiValue;
+AsyncSelectInput.MultiValueContainer = defaultComponents.MultiValueContainer;
+AsyncSelectInput.MultiValueLabel = defaultComponents.MultiValueLabel;
 // custom
-AsyncSelectInput.MultiValueRemove =
-  customizedComponents.MultiValueRemove as ComponentType<
-    MultiValueRemoveProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.NoOptionsMessage =
-  defaultComponents.NoOptionsMessage as ComponentType<
-    NoticeProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.Option = defaultComponents.Option as ComponentType<
-  OptionProps<{}, false, GroupBase<{}>>
->;
-AsyncSelectInput.Placeholder = defaultComponents.Placeholder as ComponentType<
-  PlaceholderProps<{}, false, GroupBase<{}>>
->;
-AsyncSelectInput.SelectContainer =
-  defaultComponents.SelectContainer as ComponentType<
-    ContainerProps<{}, false, GroupBase<{}>>
-  >;
-AsyncSelectInput.SingleValue = defaultComponents.SingleValue as ComponentType<
-  SingleValueProps<{}, false, GroupBase<{}>>
->;
-AsyncSelectInput.ValueContainer =
-  defaultComponents.ValueContainer as ComponentType<
-    ValueContainerProps<{}, false, GroupBase<{}>>
-  >;
+AsyncSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
+AsyncSelectInput.NoOptionsMessage = defaultComponents.NoOptionsMessage;
+AsyncSelectInput.Option = defaultComponents.Option;
+AsyncSelectInput.Placeholder = defaultComponents.Placeholder;
+AsyncSelectInput.SelectContainer = defaultComponents.SelectContainer;
+AsyncSelectInput.SingleValue = defaultComponents.SingleValue;
+AsyncSelectInput.ValueContainer = defaultComponents.ValueContainer;
 
 export default AsyncSelectInput;