@commercetools-uikit/creatable-select-input 13.0.4 → 14.0.2

package/README.md

@@ -83,7 +83,7 @@ export default Example;
 | `name`                    | `CreatableProps['name']`                                                                              |          |         | Name of the HTML Input (optional - without this, no input will be rendered)&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                 |
 | `noOptionsMessage`        | `CreatableProps['noOptionsMessage']`                                                                  |          |         | 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.&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props) |
 | `onBlur`                  | `Function`<br/>[See signature.](#signature-onBlur)                                                    |          |         | Handle blur events on the control                                                                                                                                                                                                                                                                                                                                                           |
-| `onChange`                | `Function`<br/>[See signature.](#signature-onChange)                                                  |    ✅    |         | 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`                | `Function`<br/>[See signature.](#signature-onChange)                                                  |          |         | 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`.                                                                                                                                     |
 | `onFocus`                 | `CreatableProps['onFocus']`                                                                           |          |         | Handle focus events on the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                          |
 | `onInputChange`           | `CreatableProps['onInputChange']`                                                                     |          |         | Handle change events on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                           |
 | `options`                 | `union`<br/>Possible values:<br/>`TValue[] , { options: TValue[] }[]`                                 |          |         | Array of options that populate the select menu                                                                                                                                                                                                                                                                                                                                              |
@@ -104,13 +104,13 @@ export default Example;
 ### Signature `onBlur`
 
 ```ts
-(event: TEvent) => void
+(event: TCustomEvent) => void
 ```
 
 ### Signature `onChange`
 
 ```ts
-(event: TEvent, info: ActionMeta<unknown>) => void
+(event: TCustomEvent, info: ActionMeta<unknown>) => void
 ```
 
 This input is built on top of [`react-select`](https://github.com/JedWatson/react-select) v2.
@@ -126,36 +126,35 @@ The options support a `isDisabled` property which will render the option with a
 
 ### `isTouched(touched)`
 
-Expects to be called with an array or boolean.
-Returns `true` when truthy.
+Returns truthy value for the Formik `touched` value of this input field.
 
-### Components
+## Components
 
-It is possible to customize `SelectInput` by passing the `components` property.
-`SelectInput` exports the default underlying components as static exports.
+It is possible to customize `CreatableSelectInput` by passing the `components` property.
+`CreatableSelectInput` exports the default underlying components as static exports.
 
 Components available as static exports are:
 
 - `ClearIndicator`
 - `Control`
-- `DropdownIndicator`
-- `DownChevron`
 - `CrossIcon`
+- `DownChevron`
+- `DropdownIndicator`
 - `Group`
 - `GroupHeading`
 - `IndicatorsContainer`
 - `IndicatorSeparator`
 - `Input`
 - `LoadingIndicator`
+- `LoadingMessage`
 - `Menu`
 - `MenuList`
 - `MenuPortal`
-- `LoadingMessage`
-- `NoOptionsMessage`
 - `MultiValue`
 - `MultiValueContainer`
 - `MultiValueLabel`
 - `MultiValueRemove`
+- `NoOptionsMessage`
 - `Option`
 - `Placeholder`
 - `SelectContainer`

package/dist/commercetools-uikit-creatable-select-input.cjs.dev.js

@@ -62,6 +62,11 @@ var defaultProps = {
 var CreatableSelectInput = function CreatableSelectInput(props) {
   var intl = reactIntl.useIntl();
   var theme = react.useTheme();
+
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'CreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
+  }
+
   var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
@@ -119,6 +124,7 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
         onBlur: typeof props.onBlur === 'function' ? function () {
           var event = {
             target: {
+              id: props.id,
               name: function () {
                 if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
                 // state as an array instead of a boolean only.
@@ -133,6 +139,8 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
           props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(value, info) {
+          var _props$onChange;
+
           // selectedOptions is either an array, or a single option, or null
           // depending on whether we're in multi-mode or not (isMulti)
           var newValue = value;
@@ -141,8 +149,9 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
             newValue = [];
           }
 
-          props.onChange({
+          (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
             target: {
+              id: props.id,
               name: props.name,
               value: newValue
             },
@@ -183,7 +192,7 @@ CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   isAutofocussed: _pt__default["default"].bool,
   menuPortalZIndex: _pt__default["default"].number.isRequired,
   onBlur: _pt__default["default"].func,
-  onChange: _pt__default["default"].func.isRequired,
+  onChange: _pt__default["default"].func,
   options: _pt__default["default"].oneOfType([_pt__default["default"].arrayOf(_pt__default["default"].shape({
     value: _pt__default["default"].string.isRequired
   })), _pt__default["default"].arrayOf(_pt__default["default"].shape({
@@ -193,21 +202,54 @@ CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   }))]),
   showOptionGroupDivider: _pt__default["default"].bool
 } : {};
-CreatableSelectInput.displayName = 'CreatableSelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
+CreatableSelectInput.displayName = 'CreatableSelectInput';
+CreatableSelectInput.defaultProps = defaultProps;
+/**
+ * Expose static helper methods.
+ */
+// Both "true" and an empty array [] represent a touched state. The Boolean
 // conveniently handles both cases
 
 CreatableSelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
+/**
+ * Expose react-select components for customization purposes.
+ */
+// custom
 
-CreatableSelectInput.defaultProps = defaultProps;
-utils.addStaticFields(CreatableSelectInput, _objectSpread(_objectSpread(_objectSpread({}, reactSelect.components), customizedComponents), {}, {
-  isTouched: CreatableSelectInput.isTouched
-}));
+
+CreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
+CreatableSelectInput.Control = reactSelect.components.Control;
+CreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
+CreatableSelectInput.DownChevron = reactSelect.components.DownChevron; // custom
+
+CreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
+CreatableSelectInput.Group = reactSelect.components.Group;
+CreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
+CreatableSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
+CreatableSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
+CreatableSelectInput.Input = reactSelect.components.Input;
+CreatableSelectInput.LoadingIndicator = reactSelect.components.LoadingIndicator;
+CreatableSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
+CreatableSelectInput.Menu = reactSelect.components.Menu;
+CreatableSelectInput.MenuList = reactSelect.components.MenuList;
+CreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
+CreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
+CreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
+CreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel; // custom
+
+CreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
+CreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
+CreatableSelectInput.Option = reactSelect.components.Option;
+CreatableSelectInput.Placeholder = reactSelect.components.Placeholder;
+CreatableSelectInput.SelectContainer = reactSelect.components.SelectContainer;
+CreatableSelectInput.SingleValue = reactSelect.components.SingleValue;
+CreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer;
 var CreatableSelectInput$1 = CreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 exports["default"] = CreatableSelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-creatable-select-input.cjs.prod.js

@@ -61,6 +61,9 @@ var defaultProps = {
 var CreatableSelectInput = function CreatableSelectInput(props) {
   var intl = reactIntl.useIntl();
   var theme = react.useTheme();
+
+  if (!props.isReadOnly) ;
+
   var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
@@ -118,6 +121,7 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
         onBlur: typeof props.onBlur === 'function' ? function () {
           var event = {
             target: {
+              id: props.id,
               name: function () {
                 if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
                 // state as an array instead of a boolean only.
@@ -132,6 +136,8 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
           props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(value, info) {
+          var _props$onChange;
+
           // selectedOptions is either an array, or a single option, or null
           // depending on whether we're in multi-mode or not (isMulti)
           var newValue = value;
@@ -140,8 +146,9 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
             newValue = [];
           }
 
-          props.onChange({
+          (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
             target: {
+              id: props.id,
               name: props.name,
               value: newValue
             },
@@ -174,21 +181,54 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
 };
 
 CreatableSelectInput.propTypes = {};
-CreatableSelectInput.displayName = 'CreatableSelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
+CreatableSelectInput.displayName = 'CreatableSelectInput';
+CreatableSelectInput.defaultProps = defaultProps;
+/**
+ * Expose static helper methods.
+ */
+// Both "true" and an empty array [] represent a touched state. The Boolean
 // conveniently handles both cases
 
 CreatableSelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
+/**
+ * Expose react-select components for customization purposes.
+ */
+// custom
 
-CreatableSelectInput.defaultProps = defaultProps;
-utils.addStaticFields(CreatableSelectInput, _objectSpread(_objectSpread(_objectSpread({}, reactSelect.components), customizedComponents), {}, {
-  isTouched: CreatableSelectInput.isTouched
-}));
+
+CreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
+CreatableSelectInput.Control = reactSelect.components.Control;
+CreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
+CreatableSelectInput.DownChevron = reactSelect.components.DownChevron; // custom
+
+CreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
+CreatableSelectInput.Group = reactSelect.components.Group;
+CreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
+CreatableSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
+CreatableSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
+CreatableSelectInput.Input = reactSelect.components.Input;
+CreatableSelectInput.LoadingIndicator = reactSelect.components.LoadingIndicator;
+CreatableSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
+CreatableSelectInput.Menu = reactSelect.components.Menu;
+CreatableSelectInput.MenuList = reactSelect.components.MenuList;
+CreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
+CreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
+CreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
+CreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel; // custom
+
+CreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
+CreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
+CreatableSelectInput.Option = reactSelect.components.Option;
+CreatableSelectInput.Placeholder = reactSelect.components.Placeholder;
+CreatableSelectInput.SelectContainer = reactSelect.components.SelectContainer;
+CreatableSelectInput.SingleValue = reactSelect.components.SingleValue;
+CreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer;
 var CreatableSelectInput$1 = CreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 exports["default"] = CreatableSelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-creatable-select-input.esm.js

@@ -14,7 +14,7 @@ import { useTheme } from '@emotion/react';
 import { components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import Constraints from '@commercetools-uikit/constraints';
-import { filterDataAttributes, addStaticFields } from '@commercetools-uikit/utils';
+import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
 import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
 import { jsx } from '@emotion/react/jsx-runtime';
 
@@ -43,6 +43,11 @@ var defaultProps = {
 var CreatableSelectInput = function CreatableSelectInput(props) {
   var intl = useIntl();
   var theme = useTheme();
+
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'CreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
+  }
+
   var placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
   return jsx(Constraints.Horizontal, {
     max: props.horizontalConstraint,
@@ -100,6 +105,7 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
         onBlur: typeof props.onBlur === 'function' ? function () {
           var event = {
             target: {
+              id: props.id,
               name: function () {
                 if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
                 // state as an array instead of a boolean only.
@@ -114,6 +120,8 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
           props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(value, info) {
+          var _props$onChange;
+
           // selectedOptions is either an array, or a single option, or null
           // depending on whether we're in multi-mode or not (isMulti)
           var newValue = value;
@@ -122,8 +130,9 @@ var CreatableSelectInput = function CreatableSelectInput(props) {
             newValue = [];
           }
 
-          props.onChange({
+          (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
             target: {
+              id: props.id,
               name: props.name,
               value: newValue
             },
@@ -164,7 +173,7 @@ CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   isAutofocussed: _pt.bool,
   menuPortalZIndex: _pt.number.isRequired,
   onBlur: _pt.func,
-  onChange: _pt.func.isRequired,
+  onChange: _pt.func,
   options: _pt.oneOfType([_pt.arrayOf(_pt.shape({
     value: _pt.string.isRequired
   })), _pt.arrayOf(_pt.shape({
@@ -174,20 +183,53 @@ CreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   }))]),
   showOptionGroupDivider: _pt.bool
 } : {};
-CreatableSelectInput.displayName = 'CreatableSelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
+CreatableSelectInput.displayName = 'CreatableSelectInput';
+CreatableSelectInput.defaultProps = defaultProps;
+/**
+ * Expose static helper methods.
+ */
+// Both "true" and an empty array [] represent a touched state. The Boolean
 // conveniently handles both cases
 
 CreatableSelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
+/**
+ * Expose react-select components for customization purposes.
+ */
+// custom
 
-CreatableSelectInput.defaultProps = defaultProps;
-addStaticFields(CreatableSelectInput, _objectSpread(_objectSpread(_objectSpread({}, components), customizedComponents), {}, {
-  isTouched: CreatableSelectInput.isTouched
-}));
+
+CreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
+CreatableSelectInput.Control = components.Control;
+CreatableSelectInput.CrossIcon = components.CrossIcon;
+CreatableSelectInput.DownChevron = components.DownChevron; // custom
+
+CreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
+CreatableSelectInput.Group = components.Group;
+CreatableSelectInput.GroupHeading = components.GroupHeading;
+CreatableSelectInput.IndicatorSeparator = components.IndicatorSeparator;
+CreatableSelectInput.IndicatorsContainer = components.IndicatorsContainer;
+CreatableSelectInput.Input = components.Input;
+CreatableSelectInput.LoadingIndicator = components.LoadingIndicator;
+CreatableSelectInput.LoadingMessage = components.LoadingMessage;
+CreatableSelectInput.Menu = components.Menu;
+CreatableSelectInput.MenuList = components.MenuList;
+CreatableSelectInput.MenuPortal = components.MenuPortal;
+CreatableSelectInput.MultiValue = components.MultiValue;
+CreatableSelectInput.MultiValueContainer = components.MultiValueContainer;
+CreatableSelectInput.MultiValueLabel = components.MultiValueLabel; // custom
+
+CreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
+CreatableSelectInput.NoOptionsMessage = components.NoOptionsMessage;
+CreatableSelectInput.Option = components.Option;
+CreatableSelectInput.Placeholder = components.Placeholder;
+CreatableSelectInput.SelectContainer = components.SelectContainer;
+CreatableSelectInput.SingleValue = components.SingleValue;
+CreatableSelectInput.ValueContainer = components.ValueContainer;
 var CreatableSelectInput$1 = CreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.4";
+var version = "14.0.2";
 
 export { CreatableSelectInput$1 as default, version };

package/dist/declarations/src/creatable-select-input.d.ts

@@ -7,8 +7,9 @@ declare type TValue = {
 declare type TOptions = TValue[] | {
     options: TValue[];
 }[];
-declare type TEvent = {
+declare type TCustomEvent = {
     target: {
+        id?: string;
         name?: string;
         value?: unknown;
     };
@@ -44,8 +45,8 @@ declare type TCreatableSelectInputProps = {
     closeMenuOnSelect?: ReactSelectCreatableProps['closeMenuOnSelect'];
     name?: ReactSelectCreatableProps['name'];
     noOptionsMessage?: ReactSelectCreatableProps['noOptionsMessage'];
-    onBlur?: (event: TEvent) => void;
-    onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
+    onBlur?: (event: TCustomEvent) => void;
+    onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
     onFocus?: ReactSelectCreatableProps['onFocus'];
     onInputChange?: ReactSelectCreatableProps['onInputChange'];
     options?: TOptions;
@@ -64,7 +65,64 @@ declare type TCreatableSelectInputProps = {
 declare const CreatableSelectInput: {
     (props: TCreatableSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
-    isTouched(touched: unknown): boolean;
     defaultProps: Pick<TCreatableSelectInputProps, "value" | "isSearchable" | "menuPortalZIndex">;
+    isTouched(touched: unknown): boolean;
+    ClearIndicator: {
+        (props: {
+            innerProps: {
+                ref: import("react").LegacyRef<HTMLButtonElement>;
+            } & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>;
+        } & import("react-select").ClearIndicatorProps<unknown, boolean, GroupBase<unknown>>): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
+    CrossIcon: (props: import("react-select/dist/declarations/src/components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
+    DownChevron: (props: import("react-select/dist/declarations/src/components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
+    DropdownIndicator: {
+        (props: import("react-select").DropdownIndicatorProps<unknown, boolean, GroupBase<unknown>>): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
+    GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
+    IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
+    IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
+    Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
+    LoadingIndicator: {
+        <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>(props: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>): import("@emotion/react").jsx.JSX.Element;
+        defaultProps: {
+            size: number;
+        };
+    };
+    LoadingMessage: {
+        <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: import("react-select").NoticeProps<Option_11, IsMulti_11, Group_11>): import("@emotion/react").jsx.JSX.Element;
+        defaultProps: {
+            children: string;
+        };
+    };
+    Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
+    MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
+    MenuPortal: typeof import("react-select/dist/declarations/src/components/Menu").MenuPortal;
+    MultiValue: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>(props: import("react-select").MultiValueProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueContainer: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueLabel: <Option_14_1, IsMulti_14_1 extends boolean, Group_14_1 extends GroupBase<Option_14_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_14_1, IsMulti_14_1, Group_14_1>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueRemove: {
+        (props: {
+            selectProps: {
+                isReadOnly: boolean;
+            } & import("react-select/dist/declarations/src/Select").Props<unknown, boolean, GroupBase<unknown>>;
+        } & import("react-select").MultiValueGenericProps<unknown, boolean, GroupBase<unknown>>): import("@emotion/react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    NoOptionsMessage: {
+        <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>(props: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>): import("@emotion/react").jsx.JSX.Element;
+        defaultProps: {
+            children: string;
+        };
+    };
+    Option: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>(props: import("react-select").OptionProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
+    Placeholder: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>(props: import("react-select").PlaceholderProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
+    SelectContainer: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import("react-select").ContainerProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
+    SingleValue: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import("react-select").SingleValueProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
+    ValueContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import("react-select").ValueContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
 };
 export default CreatableSelectInput;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/creatable-select-input",
   "description": "An input component getting a selection from the user, and where options can also be created by the user.",
-  "version": "13.0.4",
+  "version": "14.0.2",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
     "directory": "packages/components/inputs/creatable-select-input"
   },
   "homepage": "https://uikit.commercetools.com",
-  "keywords": ["javascript", "design system", "react", "uikit"],
+  "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -19,15 +19,15 @@
   "module": "dist/commercetools-uikit-creatable-select-input.esm.js",
   "files": ["dist"],
   "dependencies": {
-    "@babel/runtime": "7.17.2",
-    "@babel/runtime-corejs3": "7.17.2",
-    "@commercetools-uikit/constraints": "13.0.2",
-    "@commercetools-uikit/design-system": "13.0.0",
-    "@commercetools-uikit/icons": "13.0.2",
-    "@commercetools-uikit/select-utils": "13.0.4",
-    "@commercetools-uikit/spacings": "13.0.2",
-    "@commercetools-uikit/text": "13.0.4",
-    "@commercetools-uikit/utils": "13.0.2",
+    "@babel/runtime": "^7.17.2",
+    "@babel/runtime-corejs3": "^7.17.2",
+    "@commercetools-uikit/constraints": "14.0.1",
+    "@commercetools-uikit/design-system": "14.0.0",
+    "@commercetools-uikit/icons": "14.0.1",
+    "@commercetools-uikit/select-utils": "14.0.1",
+    "@commercetools-uikit/spacings": "14.0.1",
+    "@commercetools-uikit/text": "14.0.1",
+    "@commercetools-uikit/utils": "14.0.1",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "4.17.21",