From e717a650b6465dc35f380ddd753f98bd91d46ea5 Mon Sep 17 00:00:00 2001 From: Byron Wall <87667330+ByronDWall@users.noreply.github.com> Date: Mon, 10 Feb 2025 04:16:30 -0500 Subject: [PATCH] Only update react-select child component types where necessary when using `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 --- .changeset/curvy-colts-brake.md | 8 ++ .changeset/small-jars-pay.md | 9 ++ .../src/async-creatable-select-input.tsx | 125 ++++------------- .../src/async-select-input.tsx | 124 ++++------------- .../src/creatable-select-input.tsx | 126 ++++-------------- .../inputs/select-input/src/select-input.tsx | 123 ++++------------- 6 files changed, 122 insertions(+), 393 deletions(-) create mode 100644 .changeset/curvy-colts-brake.md create mode 100644 .changeset/small-jars-pay.md diff --git a/.changeset/curvy-colts-brake.md b/.changeset/curvy-colts-brake.md new file mode 100644 index 0000000000..687d15959d --- /dev/null +++ b/.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. diff --git a/.changeset/small-jars-pay.md b/.changeset/small-jars-pay.md new file mode 100644 index 0000000000..a47a08115e --- /dev/null +++ b/.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 diff --git a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx index c3951ad83e..a45156d88a 100644 --- a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx +++ b/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> & { 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; 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 bfc643ccf7..b86570a5b6 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 @@ -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> & { 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; diff --git a/packages/components/inputs/creatable-select-input/src/creatable-select-input.tsx b/packages/components/inputs/creatable-select-input/src/creatable-select-input.tsx index 3e0d4ec4fc..da88fbf874 100644 --- a/packages/components/inputs/creatable-select-input/src/creatable-select-input.tsx +++ b/packages/components/inputs/creatable-select-input/src/creatable-select-input.tsx @@ -3,27 +3,8 @@ 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, @@ -536,18 +517,15 @@ CreatableSelectInput.isTouched = (touched: unknown) => Boolean(touched); */ // custom -CreatableSelectInput.ClearIndicator = - customizedComponents.ClearIndicator as ComponentType< - ClearIndicatorProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.Control = defaultComponents.Control as ComponentType< - ControlProps<{}, false, GroupBase<{}>> ->; +CreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator; +CreatableSelectInput.Control = defaultComponents.Control; +//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570 CreatableSelectInput.CrossIcon = defaultComponents.CrossIcon as ComponentType< JSX.IntrinsicElements['svg'] & { size?: number; } >; +//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570 CreatableSelectInput.DownChevron = defaultComponents.DownChevron as ComponentType< JSX.IntrinsicElements['svg'] & { @@ -555,45 +533,20 @@ CreatableSelectInput.DownChevron = } >; // custom -CreatableSelectInput.DropdownIndicator = - customizedComponents.DropdownIndicator as ComponentType< - DropdownIndicatorProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.Group = defaultComponents.Group as ComponentType< - GroupProps<{}, false, GroupBase<{}>> ->; -CreatableSelectInput.GroupHeading = - defaultComponents.GroupHeading as ComponentType< - GroupHeadingProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.IndicatorSeparator = - defaultComponents.IndicatorSeparator as ComponentType< - LoadingIndicatorProps<{}, false, GroupBase<{}>> - >; +CreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator; +CreatableSelectInput.Group = defaultComponents.Group; +CreatableSelectInput.GroupHeading = defaultComponents.GroupHeading; +CreatableSelectInput.IndicatorSeparator = defaultComponents.IndicatorSeparator; CreatableSelectInput.IndicatorsContainer = - defaultComponents.IndicatorsContainer as ComponentType< - IndicatorsContainerProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.Input = defaultComponents.Input as ComponentType< - InputProps<{}, false, GroupBase<{}>> ->; -// custom -CreatableSelectInput.LoadingIndicator = - defaultComponents.LoadingIndicator as ComponentType< - LoadingIndicatorProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.LoadingMessage = - defaultComponents.LoadingMessage as ComponentType< - NoticeProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.Menu = defaultComponents.Menu as ComponentType< - MenuProps<{}, false, GroupBase<{}>> ->; -CreatableSelectInput.MenuList = defaultComponents.MenuList as ComponentType< - MenuListProps<{}, false, GroupBase<{}>> ->; + defaultComponents.IndicatorsContainer; +CreatableSelectInput.Input = defaultComponents.Input; +CreatableSelectInput.LoadingIndicator = defaultComponents.LoadingIndicator; +CreatableSelectInput.LoadingMessage = defaultComponents.LoadingMessage; +CreatableSelectInput.Menu = defaultComponents.Menu; +CreatableSelectInput.MenuList = defaultComponents.MenuList; +//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570 CreatableSelectInput.MenuPortal = defaultComponents.MenuPortal as ComponentType< - CommonPropsAndClassName<{}, false, GroupBase<{}>> & { + CommonPropsAndClassName> & { appendTo: HTMLElement | undefined; children: ReactNode; controlElement: HTMLDivElement | null; @@ -602,44 +555,17 @@ CreatableSelectInput.MenuPortal = defaultComponents.MenuPortal as ComponentType< menuPosition: MenuPosition; } >; -CreatableSelectInput.MultiValue = defaultComponents.MultiValue as ComponentType< - MultiValueProps<{}, false, GroupBase<{}>> ->; +CreatableSelectInput.MultiValue = defaultComponents.MultiValue; CreatableSelectInput.MultiValueContainer = - defaultComponents.MultiValueContainer as ComponentType< - MultiValueGenericProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.MultiValueLabel = - defaultComponents.MultiValueLabel as ComponentType< - MultiValueGenericProps<{}, false, GroupBase<{}>> - >; + defaultComponents.MultiValueContainer; +CreatableSelectInput.MultiValueLabel = defaultComponents.MultiValueLabel; // custom -CreatableSelectInput.MultiValueRemove = - customizedComponents.MultiValueRemove as ComponentType< - MultiValueRemoveProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.NoOptionsMessage = - defaultComponents.NoOptionsMessage as ComponentType< - NoticeProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.Option = defaultComponents.Option as ComponentType< - OptionProps<{}, false, GroupBase<{}>> ->; -CreatableSelectInput.Placeholder = - defaultComponents.Placeholder as ComponentType< - PlaceholderProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.SelectContainer = - defaultComponents.SelectContainer as ComponentType< - ContainerProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.SingleValue = - defaultComponents.SingleValue as ComponentType< - SingleValueProps<{}, false, GroupBase<{}>> - >; -CreatableSelectInput.ValueContainer = - defaultComponents.ValueContainer as ComponentType< - ValueContainerProps<{}, false, GroupBase<{}>> - >; +CreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove; +CreatableSelectInput.NoOptionsMessage = defaultComponents.NoOptionsMessage; +CreatableSelectInput.Option = defaultComponents.Option; +CreatableSelectInput.Placeholder = defaultComponents.Placeholder; +CreatableSelectInput.SelectContainer = defaultComponents.SelectContainer; +CreatableSelectInput.SingleValue = defaultComponents.SingleValue; +CreatableSelectInput.ValueContainer = defaultComponents.ValueContainer; export default CreatableSelectInput; diff --git a/packages/components/inputs/select-input/src/select-input.tsx b/packages/components/inputs/select-input/src/select-input.tsx index fc94fdd6d5..d92809d6e1 100644 --- a/packages/components/inputs/select-input/src/select-input.tsx +++ b/packages/components/inputs/select-input/src/select-input.tsx @@ -5,26 +5,7 @@ import has from 'lodash/has'; import Select, { components as defaultComponents, type Props as ReactSelectProps, - 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 GroupBase, - type LoadingIndicatorProps, - type MenuProps, type CommonPropsAndClassName, type MenuPlacement, type MenuPosition, @@ -656,61 +637,34 @@ SelectInput.isTouched = (touched: boolean | unknown[]) => Boolean(touched); */ // custom -SelectInput.ClearIndicator = - customizedComponents.ClearIndicator as ComponentType< - ClearIndicatorProps<{}, false, GroupBase<{}>> - >; -SelectInput.Control = defaultComponents.Control as ComponentType< - ControlProps<{}, false, GroupBase<{}>> ->; +SelectInput.ClearIndicator = customizedComponents.ClearIndicator; +SelectInput.Control = defaultComponents.Control; +//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570 SelectInput.CrossIcon = defaultComponents.CrossIcon as ComponentType< JSX.IntrinsicElements['svg'] & { size?: number; } >; +//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570 SelectInput.DownChevron = defaultComponents.DownChevron as ComponentType< JSX.IntrinsicElements['svg'] & { size?: number; } >; // custom -SelectInput.DropdownIndicator = - customizedComponents.DropdownIndicator as ComponentType< - DropdownIndicatorProps<{}, false, GroupBase<{}>> - >; -SelectInput.Group = defaultComponents.Group as ComponentType< - GroupProps<{}, false, GroupBase<{}>> ->; -SelectInput.GroupHeading = defaultComponents.GroupHeading as ComponentType< - GroupHeadingProps<{}, false, GroupBase<{}>> ->; -SelectInput.IndicatorSeparator = - defaultComponents.IndicatorSeparator as ComponentType< - LoadingIndicatorProps<{}, false, GroupBase<{}>> - >; -SelectInput.IndicatorsContainer = - defaultComponents.IndicatorsContainer as ComponentType< - IndicatorsContainerProps<{}, false, GroupBase<{}>> - >; -SelectInput.Input = defaultComponents.Input as ComponentType< - InputProps<{}, false, GroupBase<{}>> ->; -// custom -SelectInput.LoadingIndicator = - defaultComponents.LoadingIndicator as ComponentType< - LoadingIndicatorProps<{}, false, GroupBase<{}>> - >; -SelectInput.LoadingMessage = defaultComponents.LoadingMessage as ComponentType< - NoticeProps<{}, false, GroupBase<{}>> ->; -SelectInput.Menu = defaultComponents.Menu as ComponentType< - MenuProps<{}, false, GroupBase<{}>> ->; -SelectInput.MenuList = defaultComponents.MenuList as ComponentType< - MenuListProps<{}, false, GroupBase<{}>> ->; +SelectInput.DropdownIndicator = customizedComponents.DropdownIndicator; +SelectInput.Group = defaultComponents.Group; +SelectInput.GroupHeading = defaultComponents.GroupHeading; +SelectInput.IndicatorSeparator = defaultComponents.IndicatorSeparator; +SelectInput.IndicatorsContainer = defaultComponents.IndicatorsContainer; +SelectInput.Input = defaultComponents.Input; +SelectInput.LoadingIndicator = defaultComponents.LoadingIndicator; +SelectInput.LoadingMessage = defaultComponents.LoadingMessage; +SelectInput.Menu = defaultComponents.Menu; +SelectInput.MenuList = defaultComponents.MenuList; +//https://github.com/commercetools/ui-kit/pull/3054/files#r1943026570 SelectInput.MenuPortal = defaultComponents.MenuPortal as ComponentType< - CommonPropsAndClassName<{}, false, GroupBase<{}>> & { + CommonPropsAndClassName> & { appendTo: HTMLElement | undefined; children: ReactNode; controlElement: HTMLDivElement | null; @@ -719,41 +673,16 @@ SelectInput.MenuPortal = defaultComponents.MenuPortal as ComponentType< menuPosition: MenuPosition; } >; -SelectInput.MultiValue = defaultComponents.MultiValue as ComponentType< - MultiValueProps<{}, false, GroupBase<{}>> ->; -SelectInput.MultiValueContainer = - defaultComponents.MultiValueContainer as ComponentType< - MultiValueGenericProps<{}, false, GroupBase<{}>> - >; -SelectInput.MultiValueLabel = - defaultComponents.MultiValueLabel as ComponentType< - MultiValueGenericProps<{}, false, GroupBase<{}>> - >; +SelectInput.MultiValue = defaultComponents.MultiValue; +SelectInput.MultiValueContainer = defaultComponents.MultiValueContainer; +SelectInput.MultiValueLabel = defaultComponents.MultiValueLabel; // custom -SelectInput.MultiValueRemove = - customizedComponents.MultiValueRemove as ComponentType< - MultiValueRemoveProps<{}, false, GroupBase<{}>> - >; -SelectInput.NoOptionsMessage = - defaultComponents.NoOptionsMessage as ComponentType< - NoticeProps<{}, false, GroupBase<{}>> - >; -SelectInput.Option = defaultComponents.Option as ComponentType< - OptionProps<{}, false, GroupBase<{}>> ->; -SelectInput.Placeholder = defaultComponents.Placeholder as ComponentType< - PlaceholderProps<{}, false, GroupBase<{}>> ->; -SelectInput.SelectContainer = - defaultComponents.SelectContainer as ComponentType< - ContainerProps<{}, false, GroupBase<{}>> - >; -SelectInput.SingleValue = defaultComponents.SingleValue as ComponentType< - SingleValueProps<{}, false, GroupBase<{}>> ->; -SelectInput.ValueContainer = defaultComponents.ValueContainer as ComponentType< - ValueContainerProps<{}, false, GroupBase<{}>> ->; +SelectInput.MultiValueRemove = customizedComponents.MultiValueRemove; +SelectInput.NoOptionsMessage = defaultComponents.NoOptionsMessage; +SelectInput.Option = defaultComponents.Option; +SelectInput.Placeholder = defaultComponents.Placeholder; +SelectInput.SelectContainer = defaultComponents.SelectContainer; +SelectInput.SingleValue = defaultComponents.SingleValue; +SelectInput.ValueContainer = defaultComponents.ValueContainer; export default SelectInput;