fix: compat with emotion v11.14 (#3054)

* fix: compat with emotion v11.14

* docs: refine changeset

* ci: trigger

.changeset/curvy-colts-brake.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
+---
+
+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.

packages/components/buttons/flat-button/src/flat-button.tsx

@@ -177,10 +177,12 @@ const FlatButton = <TStringOrComponent extends ElementType = 'button'>({
       buttonAttributes={buttonAttributes}
     >
       {props.icon && iconPosition === 'left' && (
+        // @ts-ignore: relates to https://github.com/emotion-js/emotion/issues/3245
         <ButtonIcon<TStringOrComponent> {...buttonIconProps} />
       )}
       <span>{props.label}</span>
       {props.icon && iconPosition === 'right' && (
+        // @ts-ignore: relates to https://github.com/emotion-js/emotion/issues/3245
         <ButtonIcon<TStringOrComponent> {...buttonIconProps} />
       )}
     </AccessibleButton>

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

@@ -1,10 +1,32 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 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 MenuPlacement,
+  type MenuPosition,
 } from 'react-select';
 import AsyncCreatableSelect, {
   type AsyncCreatableProps,
@@ -539,39 +561,114 @@ AsyncCreatableSelectInput.isTouched = (touched: unknown) => Boolean(touched);
  */
 
 // custom
-AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
-AsyncCreatableSelectInput.Control = defaultComponents.Control;
-AsyncCreatableSelectInput.CrossIcon = defaultComponents.CrossIcon;
-AsyncCreatableSelectInput.DownChevron = defaultComponents.DownChevron;
+AsyncCreatableSelectInput.ClearIndicator =
+  customizedComponents.ClearIndicator as ComponentType<
+    ClearIndicatorProps<{}, false, GroupBase<{}>>
+  >;
+AsyncCreatableSelectInput.Control = defaultComponents.Control as ComponentType<
+  ControlProps<{}, false, GroupBase<{}>>
+>;
+AsyncCreatableSelectInput.CrossIcon =
+  defaultComponents.CrossIcon as ComponentType<
+    JSX.IntrinsicElements['svg'] & {
+      size?: number;
+    }
+  >;
+AsyncCreatableSelectInput.DownChevron =
+  defaultComponents.DownChevron as ComponentType<
+    JSX.IntrinsicElements['svg'] & {
+      size?: number;
+    }
+  >;
 // custom
 AsyncCreatableSelectInput.DropdownIndicator =
-  customizedComponents.DropdownIndicator;
-AsyncCreatableSelectInput.Group = defaultComponents.Group;
-AsyncCreatableSelectInput.GroupHeading = defaultComponents.GroupHeading;
+  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<{}>>
+  >;
 AsyncCreatableSelectInput.IndicatorSeparator =
-  defaultComponents.IndicatorSeparator;
+  defaultComponents.IndicatorSeparator as ComponentType<
+    LoadingIndicatorProps<{}, false, GroupBase<{}>>
+  >;
 AsyncCreatableSelectInput.IndicatorsContainer =
-  defaultComponents.IndicatorsContainer;
-AsyncCreatableSelectInput.Input = defaultComponents.Input;
+  defaultComponents.IndicatorsContainer as ComponentType<
+    IndicatorsContainerProps<{}, false, GroupBase<{}>>
+  >;
+AsyncCreatableSelectInput.Input = defaultComponents.Input as ComponentType<
+  InputProps<{}, false, GroupBase<{}>>
+>;
 // custom
 AsyncCreatableSelectInput.LoadingIndicator =
-  customizedComponents.LoadingIndicator;
-AsyncCreatableSelectInput.LoadingMessage = defaultComponents.LoadingMessage;
-AsyncCreatableSelectInput.Menu = defaultComponents.Menu;
-AsyncCreatableSelectInput.MenuList = defaultComponents.MenuList;
-AsyncCreatableSelectInput.MenuPortal = defaultComponents.MenuPortal;
-AsyncCreatableSelectInput.MultiValue = defaultComponents.MultiValue;
+  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<{}>>
+  >;
+AsyncCreatableSelectInput.MenuPortal =
+  defaultComponents.MenuPortal as ComponentType<
+    CommonPropsAndClassName<{}, false, GroupBase<{}>> & {
+      appendTo: HTMLElement | undefined;
+      children: ReactNode;
+      controlElement: HTMLDivElement | null;
+      innerProps: JSX.IntrinsicElements['div'];
+      menuPlacement: MenuPlacement;
+      menuPosition: MenuPosition;
+    }
+  >;
+AsyncCreatableSelectInput.MultiValue =
+  defaultComponents.MultiValue as ComponentType<
+    MultiValueProps<{}, false, GroupBase<{}>>
+  >;
 AsyncCreatableSelectInput.MultiValueContainer =
-  defaultComponents.MultiValueContainer;
-AsyncCreatableSelectInput.MultiValueLabel = defaultComponents.MultiValueLabel;
+  defaultComponents.MultiValueContainer as ComponentType<
+    MultiValueGenericProps<{}, false, GroupBase<{}>>
+  >;
+AsyncCreatableSelectInput.MultiValueLabel =
+  defaultComponents.MultiValueLabel as ComponentType<
+    MultiValueGenericProps<{}, false, GroupBase<{}>>
+  >;
 // custom
 AsyncCreatableSelectInput.MultiValueRemove =
-  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;
+  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<{}>>
+  >;
 
 export default AsyncCreatableSelectInput;

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

@@ -1,11 +1,33 @@
-import type { ReactNode, FocusEvent } from 'react';
+import type { ReactNode, FocusEvent, ComponentType } from 'react';
 import { useIntl } from 'react-intl';
 import isEmpty from 'lodash/isEmpty';
 import {
   components as defaultComponents,
   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,
 } from 'react-select';
 import AsyncSelect, { type AsyncProps } from 'react-select/async';
 import { filterDataAttributes, warning } from '@commercetools-uikit/utils';
@@ -553,33 +575,106 @@ AsyncSelectInput.isTouched = (touched: unknown) => Boolean(touched);
  */
 
 // custom
-AsyncSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
-AsyncSelectInput.Control = defaultComponents.Control;
-AsyncSelectInput.CrossIcon = defaultComponents.CrossIcon;
-AsyncSelectInput.DownChevron = defaultComponents.DownChevron;
+AsyncSelectInput.ClearIndicator =
+  customizedComponents.ClearIndicator as ComponentType<
+    ClearIndicatorProps<{}, false, GroupBase<{}>>
+  >;
+AsyncSelectInput.Control = defaultComponents.Control as ComponentType<
+  ControlProps<{}, false, GroupBase<{}>>
+>;
+AsyncSelectInput.CrossIcon = defaultComponents.CrossIcon as ComponentType<
+  JSX.IntrinsicElements['svg'] & {
+    size?: number;
+  }
+>;
+AsyncSelectInput.DownChevron = defaultComponents.DownChevron as ComponentType<
+  JSX.IntrinsicElements['svg'] & {
+    size?: number;
+  }
+>;
 // custom
-AsyncSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
-AsyncSelectInput.Group = defaultComponents.Group;
-AsyncSelectInput.GroupHeading = defaultComponents.GroupHeading;
-AsyncSelectInput.IndicatorSeparator = defaultComponents.IndicatorSeparator;
-AsyncSelectInput.IndicatorsContainer = defaultComponents.IndicatorsContainer;
-AsyncSelectInput.Input = defaultComponents.Input;
+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<{}>>
+>;
 // custom
-AsyncSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
-AsyncSelectInput.LoadingMessage = defaultComponents.LoadingMessage;
-AsyncSelectInput.Menu = defaultComponents.Menu;
-AsyncSelectInput.MenuList = defaultComponents.MenuList;
-AsyncSelectInput.MenuPortal = defaultComponents.MenuPortal;
-AsyncSelectInput.MultiValue = defaultComponents.MultiValue;
-AsyncSelectInput.MultiValueContainer = defaultComponents.MultiValueContainer;
-AsyncSelectInput.MultiValueLabel = defaultComponents.MultiValueLabel;
+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.MenuPortal = defaultComponents.MenuPortal as ComponentType<
+  CommonPropsAndClassName<{}, false, GroupBase<{}>> & {
+    appendTo: HTMLElement | undefined;
+    children: ReactNode;
+    controlElement: HTMLDivElement | null;
+    innerProps: JSX.IntrinsicElements['div'];
+    menuPlacement: MenuPlacement;
+    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<{}>>
+  >;
 // custom
-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;
+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<{}>>
+  >;
 
 export default AsyncSelectInput;