npm - @commercetools-uikit/async-creatable-select-input - Versions diffs - 15.14.3 → 15.15.1 - Mend

@commercetools-uikit/async-creatable-select-input 15.14.3 → 15.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -83,7 +83,7 @@ export default Example;
 | `isSearchable`            | `AsyncCreatableProps['isSearchable']`                                                                 |          | `true`  | Whether to enable search functionality&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                      |
 | `maxMenuHeight`           | `AsyncCreatableProps['maxMenuHeight']`                                                                |          |         | Maximum height of the menu before scrolling&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                 |
 | `menuPortalTarget`        | `AsyncCreatableProps['menuPortalTarget']`                                                             |          |         | Dom element to portal the select menu to&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                    |
-| `menuPortalZIndex`        | `number`                                                                                              |          | `1`     | z-index value for the menu portal                                                                                                                                                                                                                                                                                                                                           |
+| `menuPortalZIndex`        | `number`                                                                                              |          | `1`     | z-index value for the menu portal&#xA;<br>&#xA;Use in conjunction with `menuPortalTarget`                                                                                                                                                                                                                                                                                   |
 | `menuShouldBlockScroll`   | `AsyncCreatableProps['menuShouldBlockScroll']`                                                        |          |         | whether the menu should block scroll while open&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                             |
 | `closeMenuOnSelect`       | `AsyncCreatableProps['closeMenuOnSelect']`                                                            |          |         | Whether the menu should close after a value is selected. Defaults to `true`.&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                |
 | `name`                    | `AsyncCreatableProps['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)                                                                                                                                                                                                                 |

package/dist/commercetools-uikit-async-creatable-select-input.cjs.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from "./declarations/src/index";
 export { default } from "./declarations/src/index";
+//# sourceMappingURL=commercetools-uikit-async-creatable-select-input.cjs.d.ts.map

package/dist/commercetools-uikit-async-creatable-select-input.cjs.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"commercetools-uikit-async-creatable-select-input.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}

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

@@ -45,20 +45,18 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var LoadingIndicator = function LoadingIndicator() {
-  return jsxRuntime.jsx(LoadingSpinner__default["default"], {
-    scale: "s"
-  });
-};
+const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
+  scale: "s"
+});
 LoadingIndicator.displayName = 'LoadingIndicator';
-var customizedComponents = {
+const customizedComponents = {
   DropdownIndicator: selectUtils.DropdownIndicator,
   ClearIndicator: selectUtils.ClearIndicator,
-  LoadingIndicator: LoadingIndicator,
+  LoadingIndicator,
   MultiValueRemove: selectUtils.TagRemove
 };
-var defaultProps = {
+const defaultProps = {
   // Using "null" will ensure that the currently selected value disappears in
   // case "undefined" gets passed as the next value
   value: null,
@@ -66,13 +64,13 @@ var defaultProps = {
   menuPortalZIndex: 1
 };
-var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
-  var intl = reactIntl.useIntl();
+const AsyncCreatableSelectInput = props => {
+  const intl = reactIntl.useIntl();
-  var _useTheme = designSystem.useTheme(),
-      isNewTheme = _useTheme.isNewTheme;
+  const _useTheme = designSystem.useTheme(),
+        isNewTheme = _useTheme.isNewTheme;
-  var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
+  const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'AsyncCreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
@@ -82,6 +80,11 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
     process.env.NODE_ENV !== "production" ? utils.warning(_Array$isArray__default["default"](props.value), 'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true') : void 0;
   }
+  selectUtils.warnIfMenuPortalPropsAreMissing({
+    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalTarget: props.menuPortalTarget,
+    componentName: 'AsyncCreatableSelectInput'
+  });
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
@@ -93,11 +96,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         autoFocus: props.isAutofocussed,
         backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
         components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
-          Input: function Input(ownProps) {
-            return jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
-              readOnly: true
-            }));
-          }
+          Input: ownProps => jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
+            readOnly: true
+          }))
         } : {}), props.components),
         menuIsOpen: props.isReadOnly ? false : undefined,
         styles: selectUtils.createSelectStyles({
@@ -110,7 +111,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
           iconLeft: props.iconLeft,
           isMulti: props.isMulti,
           hasValue: !isEmpty__default["default"](props.value),
-          isNewTheme: isNewTheme
+          isNewTheme
         }),
         filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
         // but we use "id" (for the input) and "containerId" (for the container)
@@ -130,17 +131,17 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         menuShouldBlockScroll: props.menuShouldBlockScroll,
         closeMenuOnScroll: props.closeMenuOnSelect,
         name: props.name,
-        noOptionsMessage: props.noOptionsMessage || function (_ref) {
-          var inputValue = _ref.inputValue;
+        noOptionsMessage: props.noOptionsMessage || (_ref => {
+          let inputValue = _ref.inputValue;
           return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
-            inputValue: inputValue
+            inputValue
           });
-        },
-        onBlur: props.onBlur ? function () {
-          var event = {
+        }),
+        onBlur: props.onBlur ? () => {
+          const event = {
             target: {
               id: props.id,
-              name: function () {
+              name: (() => {
                 if (!props.name) return undefined;
                 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.
@@ -148,17 +149,17 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
                 // Formik will create an array on submission anyways.
                 return "".concat(props.name, ".0");
-              }()
+              })()
             },
-            persist: function persist() {}
+            persist: () => {}
           };
           props.onBlur && props.onBlur(event);
         } : undefined,
-        onChange: function onChange(value, info) {
+        onChange: (value, info) => {
           var _props$onChange;
           // wrapping breaking changes made in react-select v3
-          var newValue = value;
+          let newValue = value;
           if (props.isMulti && !newValue) {
             newValue = [];
@@ -170,7 +171,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
               name: props.name,
               value: newValue
             },
-            persist: function persist() {}
+            persist: () => {}
           }, info);
         },
         onFocus: props.onFocus,
@@ -185,11 +186,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         cacheOptions: props.cacheOptions // Creatable props
         ,
         allowCreateWhileLoading: props.allowCreateWhileLoading,
-        formatCreateLabel: props.formatCreateLabel || function (inputValue) {
-          return intl.formatMessage(selectUtils.messages.createLabel, {
-            inputValue: inputValue
-          });
-        },
+        formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(selectUtils.messages.createLabel, {
+          inputValue
+        })),
         isValidNewOption: props.isValidNewOption,
         getNewOptionData: props.getNewOptionData,
         onCreateOption: props.onCreateOption,
@@ -223,9 +222,7 @@ AsyncCreatableSelectInput.defaultProps = defaultProps;
 // values were removed only. So we have to treat any array we receive as
 // a signal of the field having been touched.
-AsyncCreatableSelectInput.isTouched = function (touched) {
-  return Boolean(touched);
-};
+AsyncCreatableSelectInput.isTouched = touched => Boolean(touched);
 /**
  * Expose react-select components for customization purposes.
  */
@@ -263,7 +260,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.3";
+var version = "15.15.1";
 exports["default"] = AsyncCreatableSelectInput$1;
 exports.version = version;

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

@@ -43,20 +43,18 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var LoadingIndicator = function LoadingIndicator() {
-  return jsxRuntime.jsx(LoadingSpinner__default["default"], {
-    scale: "s"
-  });
-};
+const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
+  scale: "s"
+});
 LoadingIndicator.displayName = 'LoadingIndicator';
-var customizedComponents = {
+const customizedComponents = {
   DropdownIndicator: selectUtils.DropdownIndicator,
   ClearIndicator: selectUtils.ClearIndicator,
-  LoadingIndicator: LoadingIndicator,
+  LoadingIndicator,
   MultiValueRemove: selectUtils.TagRemove
 };
-var defaultProps = {
+const defaultProps = {
   // Using "null" will ensure that the currently selected value disappears in
   // case "undefined" gets passed as the next value
   value: null,
@@ -64,18 +62,23 @@ var defaultProps = {
   menuPortalZIndex: 1
 };
-var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
-  var intl = reactIntl.useIntl();
+const AsyncCreatableSelectInput = props => {
+  const intl = reactIntl.useIntl();
-  var _useTheme = designSystem.useTheme(),
-      isNewTheme = _useTheme.isNewTheme;
+  const _useTheme = designSystem.useTheme(),
+        isNewTheme = _useTheme.isNewTheme;
-  var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
+  const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
   if (!props.isReadOnly) ;
   if (props.isMulti) ;
+  selectUtils.warnIfMenuPortalPropsAreMissing({
+    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalTarget: props.menuPortalTarget,
+    componentName: 'AsyncCreatableSelectInput'
+  });
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
@@ -87,11 +90,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         autoFocus: props.isAutofocussed,
         backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
         components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? selectUtils.customComponentsWithIcons : {}), props.isReadOnly ? {
-          Input: function Input(ownProps) {
-            return jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
-              readOnly: true
-            }));
-          }
+          Input: ownProps => jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
+            readOnly: true
+          }))
         } : {}), props.components),
         menuIsOpen: props.isReadOnly ? false : undefined,
         styles: selectUtils.createSelectStyles({
@@ -104,7 +105,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
           iconLeft: props.iconLeft,
           isMulti: props.isMulti,
           hasValue: !isEmpty__default["default"](props.value),
-          isNewTheme: isNewTheme
+          isNewTheme
         }),
         filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
         // but we use "id" (for the input) and "containerId" (for the container)
@@ -124,17 +125,17 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         menuShouldBlockScroll: props.menuShouldBlockScroll,
         closeMenuOnScroll: props.closeMenuOnSelect,
         name: props.name,
-        noOptionsMessage: props.noOptionsMessage || function (_ref) {
-          var inputValue = _ref.inputValue;
+        noOptionsMessage: props.noOptionsMessage || (_ref => {
+          let inputValue = _ref.inputValue;
           return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
-            inputValue: inputValue
+            inputValue
           });
-        },
-        onBlur: props.onBlur ? function () {
-          var event = {
+        }),
+        onBlur: props.onBlur ? () => {
+          const event = {
             target: {
               id: props.id,
-              name: function () {
+              name: (() => {
                 if (!props.name) return undefined;
                 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.
@@ -142,17 +143,17 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
                 // Formik will create an array on submission anyways.
                 return "".concat(props.name, ".0");
-              }()
+              })()
             },
-            persist: function persist() {}
+            persist: () => {}
           };
           props.onBlur && props.onBlur(event);
         } : undefined,
-        onChange: function onChange(value, info) {
+        onChange: (value, info) => {
           var _props$onChange;
           // wrapping breaking changes made in react-select v3
-          var newValue = value;
+          let newValue = value;
           if (props.isMulti && !newValue) {
             newValue = [];
@@ -164,7 +165,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
               name: props.name,
               value: newValue
             },
-            persist: function persist() {}
+            persist: () => {}
           }, info);
         },
         onFocus: props.onFocus,
@@ -179,11 +180,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         cacheOptions: props.cacheOptions // Creatable props
         ,
         allowCreateWhileLoading: props.allowCreateWhileLoading,
-        formatCreateLabel: props.formatCreateLabel || function (inputValue) {
-          return intl.formatMessage(selectUtils.messages.createLabel, {
-            inputValue: inputValue
-          });
-        },
+        formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(selectUtils.messages.createLabel, {
+          inputValue
+        })),
         isValidNewOption: props.isValidNewOption,
         getNewOptionData: props.getNewOptionData,
         onCreateOption: props.onCreateOption,
@@ -206,9 +205,7 @@ AsyncCreatableSelectInput.defaultProps = defaultProps;
 // values were removed only. So we have to treat any array we receive as
 // a signal of the field having been touched.
-AsyncCreatableSelectInput.isTouched = function (touched) {
-  return Boolean(touched);
-};
+AsyncCreatableSelectInput.isTouched = touched => Boolean(touched);
 /**
  * Expose react-select components for customization purposes.
  */
@@ -246,7 +243,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.3";
+var version = "15.15.1";
 exports["default"] = AsyncCreatableSelectInput$1;
 exports.version = version;

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

@@ -15,7 +15,7 @@ import { components } from 'react-select';
 import AsyncCreatableSelect from 'react-select/async-creatable';
 import Constraints from '@commercetools-uikit/constraints';
 import LoadingSpinner from '@commercetools-uikit/loading-spinner';
-import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
+import { messages, warnIfMenuPortalPropsAreMissing, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
 import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
 import { useTheme } from '@commercetools-uikit/design-system';
 import { jsx } from '@emotion/react/jsx-runtime';
@@ -24,20 +24,18 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var LoadingIndicator = function LoadingIndicator() {
-  return jsx(LoadingSpinner, {
-    scale: "s"
-  });
-};
+const LoadingIndicator = () => jsx(LoadingSpinner, {
+  scale: "s"
+});
 LoadingIndicator.displayName = 'LoadingIndicator';
-var customizedComponents = {
-  DropdownIndicator: DropdownIndicator,
-  ClearIndicator: ClearIndicator,
-  LoadingIndicator: LoadingIndicator,
+const customizedComponents = {
+  DropdownIndicator,
+  ClearIndicator,
+  LoadingIndicator,
   MultiValueRemove: TagRemove
 };
-var defaultProps = {
+const defaultProps = {
   // Using "null" will ensure that the currently selected value disappears in
   // case "undefined" gets passed as the next value
   value: null,
@@ -45,13 +43,13 @@ var defaultProps = {
   menuPortalZIndex: 1
 };
-var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
-  var intl = useIntl();
+const AsyncCreatableSelectInput = props => {
+  const intl = useIntl();
-  var _useTheme = useTheme(),
-      isNewTheme = _useTheme.isNewTheme;
+  const _useTheme = useTheme(),
+        isNewTheme = _useTheme.isNewTheme;
-  var placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
+  const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'AsyncCreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
@@ -61,6 +59,11 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
     process.env.NODE_ENV !== "production" ? warning(_Array$isArray(props.value), 'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true') : void 0;
   }
+  warnIfMenuPortalPropsAreMissing({
+    menuPortalZIndex: props.menuPortalZIndex,
+    menuPortalTarget: props.menuPortalTarget,
+    componentName: 'AsyncCreatableSelectInput'
+  });
   return jsx(Constraints.Horizontal, {
     max: props.horizontalConstraint,
     children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
@@ -72,11 +75,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         autoFocus: props.isAutofocussed,
         backspaceRemovesValue: props.isReadOnly ? false : props.backspaceRemovesValue,
         components: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customizedComponents), props.iconLeft && !props.isMulti ? customComponentsWithIcons : {}), props.isReadOnly ? {
-          Input: function Input(ownProps) {
-            return jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
-              readOnly: true
-            }));
-          }
+          Input: ownProps => jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
+            readOnly: true
+          }))
         } : {}), props.components),
         menuIsOpen: props.isReadOnly ? false : undefined,
         styles: createSelectStyles({
@@ -89,7 +90,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
           iconLeft: props.iconLeft,
           isMulti: props.isMulti,
           hasValue: !isEmpty(props.value),
-          isNewTheme: isNewTheme
+          isNewTheme
         }),
         filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
         // but we use "id" (for the input) and "containerId" (for the container)
@@ -109,17 +110,17 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         menuShouldBlockScroll: props.menuShouldBlockScroll,
         closeMenuOnScroll: props.closeMenuOnSelect,
         name: props.name,
-        noOptionsMessage: props.noOptionsMessage || function (_ref) {
-          var inputValue = _ref.inputValue;
+        noOptionsMessage: props.noOptionsMessage || (_ref => {
+          let inputValue = _ref.inputValue;
           return inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
-            inputValue: inputValue
+            inputValue
           });
-        },
-        onBlur: props.onBlur ? function () {
-          var event = {
+        }),
+        onBlur: props.onBlur ? () => {
+          const event = {
             target: {
               id: props.id,
-              name: function () {
+              name: (() => {
                 if (!props.name) return undefined;
                 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.
@@ -127,17 +128,17 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
                 // Formik will create an array on submission anyways.
                 return "".concat(props.name, ".0");
-              }()
+              })()
             },
-            persist: function persist() {}
+            persist: () => {}
           };
           props.onBlur && props.onBlur(event);
         } : undefined,
-        onChange: function onChange(value, info) {
+        onChange: (value, info) => {
           var _props$onChange;
           // wrapping breaking changes made in react-select v3
-          var newValue = value;
+          let newValue = value;
           if (props.isMulti && !newValue) {
             newValue = [];
@@ -149,7 +150,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
               name: props.name,
               value: newValue
             },
-            persist: function persist() {}
+            persist: () => {}
           }, info);
         },
         onFocus: props.onFocus,
@@ -164,11 +165,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         cacheOptions: props.cacheOptions // Creatable props
         ,
         allowCreateWhileLoading: props.allowCreateWhileLoading,
-        formatCreateLabel: props.formatCreateLabel || function (inputValue) {
-          return intl.formatMessage(messages.createLabel, {
-            inputValue: inputValue
-          });
-        },
+        formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(messages.createLabel, {
+          inputValue
+        })),
         isValidNewOption: props.isValidNewOption,
         getNewOptionData: props.getNewOptionData,
         onCreateOption: props.onCreateOption,
@@ -202,9 +201,7 @@ AsyncCreatableSelectInput.defaultProps = defaultProps;
 // values were removed only. So we have to treat any array we receive as
 // a signal of the field having been touched.
-AsyncCreatableSelectInput.isTouched = function (touched) {
-  return Boolean(touched);
-};
+AsyncCreatableSelectInput.isTouched = touched => Boolean(touched);
 /**
  * Expose react-select components for customization purposes.
  */
@@ -242,6 +239,6 @@ AsyncCreatableSelectInput.ValueContainer = components.ValueContainer;
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.3";
+var version = "15.15.1";
 export { AsyncCreatableSelectInput$1 as default, version };

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/async-creatable-select-input",
   "description": "An input component getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.",
-  "version": "15.14.3",
+  "version": "15.15.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,20 +21,20 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "15.14.3",
-    "@commercetools-uikit/design-system": "15.14.3",
-    "@commercetools-uikit/icons": "15.14.3",
-    "@commercetools-uikit/loading-spinner": "15.14.3",
-    "@commercetools-uikit/select-utils": "15.14.3",
-    "@commercetools-uikit/spacings": "15.14.3",
-    "@commercetools-uikit/text": "15.14.3",
-    "@commercetools-uikit/utils": "15.14.3",
+    "@commercetools-uikit/constraints": "15.15.1",
+    "@commercetools-uikit/design-system": "15.15.1",
+    "@commercetools-uikit/icons": "15.15.1",
+    "@commercetools-uikit/loading-spinner": "15.15.1",
+    "@commercetools-uikit/select-utils": "15.15.1",
+    "@commercetools-uikit/spacings": "15.15.1",
+    "@commercetools-uikit/text": "15.15.1",
+    "@commercetools-uikit/utils": "15.15.1",
     "@emotion/is-prop-valid": "1.2.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-select": "5.7.1"
+    "react-select": "5.7.2"
   },
   "devDependencies": {
     "react": "17.0.2",