@commercetools-uikit/async-creatable-select-input 12.2.5 → 13.0.0

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

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
+require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -10,10 +13,8 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-require('@babel/runtime-corejs3/core-js-stable/instance/concat');
-require('prop-types');
 var reactIntl = require('react-intl');
+var isEmpty = require('lodash/isEmpty');
 var react = require('@emotion/react');
 var reactSelect = require('react-select');
 var AsyncCreatableSelect = require('react-select/async-creatable');
@@ -33,13 +34,14 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty);
 var AsyncCreatableSelect__default = /*#__PURE__*/_interopDefault(AsyncCreatableSelect);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+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"], {
@@ -54,11 +56,21 @@ var customizedComponents = {
   LoadingIndicator: LoadingIndicator,
   MultiValueRemove: selectUtils.TagRemove
 };
+var defaultProps = {
+  // Using "null" will ensure that the currently selected value disappears in
+  // case "undefined" gets passed as the next value
+  value: null,
+  isSearchable: true,
+  menuPortalZIndex: 1
+};
 
 var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
   var intl = reactIntl.useIntl();
   var theme = react.useTheme();
   var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
+
+  if (props.isMulti) ;
+
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
@@ -68,7 +80,6 @@ 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 ? {
-          // eslint-disable-next-line react/display-name
           Input: function Input(ownProps) {
             return jsxRuntime.jsx(reactSelect.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
               readOnly: true
@@ -82,7 +93,10 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
           showOptionGroupDivider: props.showOptionGroupDivider,
           menuPortalZIndex: props.menuPortalZIndex,
           isDisabled: props.isDisabled,
-          isReadOnly: props.isReadOnly
+          isReadOnly: props.isReadOnly,
+          iconLeft: props.iconLeft,
+          isMulti: props.isMulti,
+          hasValue: !isEmpty__default["default"](props.value)
         }, theme),
         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)
@@ -100,6 +114,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         maxMenuHeight: props.maxMenuHeight,
         menuPortalTarget: props.menuPortalTarget,
         menuShouldBlockScroll: props.menuShouldBlockScroll,
+        closeMenuOnScroll: props.closeMenuOnSelect,
         name: props.name,
         noOptionsMessage: props.noOptionsMessage || function (_ref) {
           var inputValue = _ref.inputValue;
@@ -120,10 +135,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
                 return "".concat(props.name, ".0");
               }()
             },
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             persist: function persist() {}
           };
-          props.onBlur(event);
+          props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(value, info) {
           // wrapping breaking changes made in react-select v3
@@ -138,7 +152,6 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
               name: props.name,
               value: newValue
             },
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             persist: function persist() {}
           }, info);
         },
@@ -162,7 +175,8 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         isValidNewOption: props.isValidNewOption,
         getNewOptionData: props.getNewOptionData,
         onCreateOption: props.onCreateOption,
-        createOptionPosition: props.createOptionPosition,
+        createOptionPosition: props.createOptionPosition // @ts-ignore
+        ,
         iconLeft: props.iconLeft
       })
     }))
@@ -173,26 +187,21 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
 // a signal of the field having been touched.
 
 
+AsyncCreatableSelectInput.propTypes = {};
+
 AsyncCreatableSelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
 
 AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
-AsyncCreatableSelectInput.defaultProps = {
-  // Using "null" will ensure that the currently selected value disappears in
-  // case "undefined" gets passed as the next value
-  value: null,
-  isSearchable: true,
-  menuPortalZIndex: 1
-};
-AsyncCreatableSelectInput.propTypes = {};
+AsyncCreatableSelectInput.defaultProps = defaultProps;
 utils.addStaticFields(AsyncCreatableSelectInput, _objectSpread(_objectSpread(_objectSpread({}, reactSelect.components), customizedComponents), {}, {
   isTouched: AsyncCreatableSelectInput.isTouched
 }));
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.5";
+var version = "13.0.0";
 
 exports["default"] = AsyncCreatableSelectInput$1;
 exports.version = version;

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

@@ -1,3 +1,6 @@
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _pt from 'prop-types';
+import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
@@ -6,22 +9,20 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
-import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
-import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import isEmpty from 'lodash/isEmpty';
 import { useTheme } from '@emotion/react';
 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 { filterDataAttributes, SafeHTMLElement, addStaticFields } from '@commercetools-uikit/utils';
+import { warning, filterDataAttributes, addStaticFields } from '@commercetools-uikit/utils';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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, {
@@ -36,11 +37,23 @@ var customizedComponents = {
   LoadingIndicator: LoadingIndicator,
   MultiValueRemove: TagRemove
 };
+var defaultProps = {
+  // Using "null" will ensure that the currently selected value disappears in
+  // case "undefined" gets passed as the next value
+  value: null,
+  isSearchable: true,
+  menuPortalZIndex: 1
+};
 
 var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
   var intl = useIntl();
   var theme = useTheme();
   var placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
+
+  if (props.isMulti) {
+    process.env.NODE_ENV !== "production" ? warning(_Array$isArray(props.value), 'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true') : void 0;
+  }
+
   return jsx(Constraints.Horizontal, {
     max: props.horizontalConstraint,
     children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
@@ -50,7 +63,6 @@ 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 ? {
-          // eslint-disable-next-line react/display-name
           Input: function Input(ownProps) {
             return jsx(components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
               readOnly: true
@@ -64,7 +76,10 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
           showOptionGroupDivider: props.showOptionGroupDivider,
           menuPortalZIndex: props.menuPortalZIndex,
           isDisabled: props.isDisabled,
-          isReadOnly: props.isReadOnly
+          isReadOnly: props.isReadOnly,
+          iconLeft: props.iconLeft,
+          isMulti: props.isMulti,
+          hasValue: !isEmpty(props.value)
         }, theme),
         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)
@@ -82,6 +97,7 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         maxMenuHeight: props.maxMenuHeight,
         menuPortalTarget: props.menuPortalTarget,
         menuShouldBlockScroll: props.menuShouldBlockScroll,
+        closeMenuOnScroll: props.closeMenuOnSelect,
         name: props.name,
         noOptionsMessage: props.noOptionsMessage || function (_ref) {
           var inputValue = _ref.inputValue;
@@ -102,10 +118,9 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
                 return "".concat(props.name, ".0");
               }()
             },
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             persist: function persist() {}
           };
-          props.onBlur(event);
+          props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(value, info) {
           // wrapping breaking changes made in react-select v3
@@ -120,7 +135,6 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
               name: props.name,
               value: newValue
             },
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             persist: function persist() {}
           }, info);
         },
@@ -144,7 +158,8 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
         isValidNewOption: props.isValidNewOption,
         getNewOptionData: props.getNewOptionData,
         onCreateOption: props.onCreateOption,
-        createOptionPosition: props.createOptionPosition,
+        createOptionPosition: props.createOptionPosition // @ts-ignore
+        ,
         iconLeft: props.iconLeft
       })
     }))
@@ -155,263 +170,31 @@ var AsyncCreatableSelectInput = function AsyncCreatableSelectInput(props) {
 // a signal of the field having been touched.
 
 
+AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+  hasError: _pt.bool,
+  hasWarning: _pt.bool,
+  isReadOnly: _pt.bool,
+  iconLeft: _pt.node,
+  isAutofocussed: _pt.bool,
+  menuPortalZIndex: _pt.number.isRequired,
+  onBlur: _pt.func,
+  onChange: _pt.func.isRequired,
+  showOptionGroupDivider: _pt.bool
+} : {};
+
 AsyncCreatableSelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
 
 AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
-AsyncCreatableSelectInput.defaultProps = {
-  // Using "null" will ensure that the currently selected value disappears in
-  // case "undefined" gets passed as the next value
-  value: null,
-  isSearchable: true,
-  menuPortalZIndex: 1
-};
-AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Horizontal size limit of the input fields.
-   */
-  horizontalConstraint: PropTypes.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
-
-  /**
-   * Indicates the input field has an error
-   */
-  hasError: PropTypes.bool,
-
-  /**
-   * Indicates the input field has a warning
-   */
-  hasWarning: PropTypes.bool,
-
-  /**
-   *  Is the select read-only
-   */
-  isReadOnly: PropTypes.bool,
-
-  /**
-   * Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
-   */
-  iconLeft: PropTypes.node,
-  // react-select base props
-  //
-  // Currently unsupported props are commented out. In case you need one of
-  // these props when using UI Kit, you can submit a PR and enable the
-  // prop. Don't forget to add it to the story, docs and other select input
-  // components as well!
-  //
-  // See https://react-select.com/props#select-props
-
-  /**
-   * Aria label (for assistive tech)
-   */
-  'aria-label': PropTypes.string,
-
-  /**
-   * HTML ID of an element that should be used as the label (for assistive tech)
-   */
-  'aria-labelledby': PropTypes.string,
-
-  /**
-   * Focus the control when it is mounted
-   */
-  isAutofocussed: PropTypes.bool,
-  // original: autoFocus
-
-  /**
-   * Remove the currently focused option when the user presses backspace
-   */
-  backspaceRemovesValue: PropTypes.bool,
-
-  /**
-   * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
-   */
-  components: PropTypes.objectOf(PropTypes.func),
-
-  /**
-   * Custom method to filter whether an option should be displayed in the menu
-   */
-  filterOption: PropTypes.func,
-  // This forwarded as react-select's "inputId"
-
-  /**
-   * The id of the search input
-   */
-  id: PropTypes.string,
-  // This is forwarded as react-select's "id"
-  inputValue: PropTypes.string,
-
-  /**
-   * The id to set on the SelectContainer component
-   */
-  containerId: PropTypes.string,
-
-  /**
-   * Is the select value clearable
-   */
-  isClearable: PropTypes.bool,
-
-  /**
-   * Is the select disabled
-   */
-  isDisabled: PropTypes.bool,
-
-  /**
-   * Override the built-in logic to detect whether an option is disabled
-   */
-  isOptionDisabled: PropTypes.func,
-
-  /**
-   * Support multiple selected options
-   */
-  isMulti: PropTypes.bool,
-
-  /**
-   * Whether to enable search functionality
-   */
-  isSearchable: PropTypes.bool,
-
-  /**
-   * Maximum height of the menu before scrolling
-   */
-  maxMenuHeight: PropTypes.number,
-
-  /**
-   * Dom element to portal the select menu to
-   */
-  menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
-
-  /**
-   * z-index value for the menu portal
-   */
-  menuPortalZIndex: PropTypes.number.isRequired,
-
-  /**
-   * whether the menu should block scroll while open
-   */
-  menuShouldBlockScroll: PropTypes.bool,
-
-  /**
-   * Name of the HTML Input (optional - without this, no input will be rendered)
-   */
-  name: PropTypes.string,
-
-  /**
-   * 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.
-   */
-  noOptionsMessage: PropTypes.func,
-
-  /**
-   * Handle blur events on the control
-   */
-  onBlur: PropTypes.func,
-
-  /**
-   * 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: PropTypes.func.isRequired,
-
-  /**
-   * Handle focus events on the control
-   */
-  onFocus: PropTypes.func,
-
-  /**
-   * Handle change events on the input
-   */
-  onInputChange: PropTypes.func,
-
-  /**
-   * Placeholder text for the select value
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Sets the tabIndex attribute on the input
-   */
-  tabIndex: PropTypes.string,
-
-  /**
-   * Select the currently focused option when the user presses tab
-   */
-  tabSelectsValue: PropTypes.bool,
-
-  /**
-   * The value of the select; reflected by the selected option
-   */
-  value: function value(props) {
-    var _context, _context2;
-
-    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      rest[_key - 1] = arguments[_key];
-    }
-
-    return props.isMulti ? PropTypes.arrayOf(PropTypes.shape({
-      value: PropTypes.string.isRequired
-    })).apply(void 0, _concatInstanceProperty(_context = [props]).call(_context, rest)) : PropTypes.shape({
-      value: PropTypes.string.isRequired
-    }).apply(void 0, _concatInstanceProperty(_context2 = [props]).call(_context2, rest));
-  },
-  // Async props
-
-  /**
-   * The default set of options to show before the user starts searching. When set to true, the results for loadOptions('') will be autoloaded.
-   */
-  defaultOptions: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired
-  }))]),
-
-  /**
-   * Function that returns a promise, which is the set of options to be used once the promise resolves.
-   */
-  loadOptions: PropTypes.func.isRequired,
-
-  /**
-   * If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
-   */
-  cacheOptions: PropTypes.any,
-  // Creatable props
-
-  /**
-   * Allow options to be created while the isLoading prop is true. Useful to prevent the "create new ..." option being displayed while async results are still being loaded.
-   */
-  allowCreateWhileLoading: PropTypes.bool,
-
-  /**
-   * Gets the label for the "create new ..." option in the menu. Is given the current input value.
-   */
-  formatCreateLabel: PropTypes.func,
-
-  /**
-   * Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.
-   */
-  isValidNewOption: PropTypes.func,
-
-  /**
-   * Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.
-   */
-  getNewOptionData: PropTypes.func,
-
-  /**
-   * If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created.
-   */
-  onCreateOption: PropTypes.func,
-
-  /**
-   * Sets the position of the createOption element in your options list.
-   */
-  createOptionPosition: PropTypes.string,
-
-  /**
-   * Determines if option groups will be separated by a divider
-   */
-  showOptionGroupDivider: PropTypes.bool
-} : {};
+AsyncCreatableSelectInput.defaultProps = defaultProps;
 addStaticFields(AsyncCreatableSelectInput, _objectSpread(_objectSpread(_objectSpread({}, components), customizedComponents), {}, {
   isTouched: AsyncCreatableSelectInput.isTouched
 }));
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.5";
+var version = "13.0.0";
 
 export { AsyncCreatableSelectInput$1 as default, version };

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

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import { type ActionMeta, type GroupBase } from 'react-select';
+import { type AsyncCreatableProps } from 'react-select/async-creatable';
+declare type TEvent = {
+    target: {
+        name?: string;
+        value?: unknown;
+    };
+    persist: () => void;
+};
+declare type ReactSelectAsyncCreatableProps = AsyncCreatableProps<unknown, boolean, GroupBase<unknown>>;
+declare type TAsyncCreatableSelectInputProps = {
+    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    hasError?: boolean;
+    hasWarning?: boolean;
+    isReadOnly?: boolean;
+    iconLeft?: ReactNode;
+    'aria-label'?: ReactSelectAsyncCreatableProps['aria-label'];
+    'aria-labelledby'?: ReactSelectAsyncCreatableProps['aria-labelledby'];
+    isAutofocussed?: boolean;
+    backspaceRemovesValue?: ReactSelectAsyncCreatableProps['backspaceRemovesValue'];
+    components?: ReactSelectAsyncCreatableProps['components'];
+    filterOption?: ReactSelectAsyncCreatableProps['filterOption'];
+    id?: ReactSelectAsyncCreatableProps['inputId'];
+    inputValue?: ReactSelectAsyncCreatableProps['inputValue'];
+    containerId?: ReactSelectAsyncCreatableProps['id'];
+    isClearable?: ReactSelectAsyncCreatableProps['isClearable'];
+    isDisabled?: ReactSelectAsyncCreatableProps['isDisabled'];
+    isOptionDisabled?: ReactSelectAsyncCreatableProps['isOptionDisabled'];
+    isMulti?: ReactSelectAsyncCreatableProps['isMulti'];
+    isSearchable?: ReactSelectAsyncCreatableProps['isSearchable'];
+    maxMenuHeight?: ReactSelectAsyncCreatableProps['maxMenuHeight'];
+    menuPortalTarget?: ReactSelectAsyncCreatableProps['menuPortalTarget'];
+    menuPortalZIndex: number;
+    menuShouldBlockScroll?: ReactSelectAsyncCreatableProps['menuShouldBlockScroll'];
+    closeMenuOnSelect?: ReactSelectAsyncCreatableProps['closeMenuOnSelect'];
+    name?: ReactSelectAsyncCreatableProps['name'];
+    noOptionsMessage?: ReactSelectAsyncCreatableProps['noOptionsMessage'];
+    onBlur?: (event: TEvent) => void;
+    onChange: (event: TEvent, info: ActionMeta<unknown>) => void;
+    onFocus?: ReactSelectAsyncCreatableProps['onFocus'];
+    onInputChange?: ReactSelectAsyncCreatableProps['onInputChange'];
+    placeholder?: ReactSelectAsyncCreatableProps['placeholder'];
+    tabIndex?: ReactSelectAsyncCreatableProps['tabIndex'];
+    tabSelectsValue?: ReactSelectAsyncCreatableProps['tabSelectsValue'];
+    value?: ReactSelectAsyncCreatableProps['value'];
+    defaultOptions?: ReactSelectAsyncCreatableProps['defaultOptions'];
+    loadOptions: ReactSelectAsyncCreatableProps['loadOptions'];
+    cacheOptions?: ReactSelectAsyncCreatableProps['cacheOptions'];
+    allowCreateWhileLoading?: ReactSelectAsyncCreatableProps['allowCreateWhileLoading'];
+    formatCreateLabel?: ReactSelectAsyncCreatableProps['formatCreateLabel'];
+    isValidNewOption?: ReactSelectAsyncCreatableProps['isValidNewOption'];
+    getNewOptionData?: ReactSelectAsyncCreatableProps['getNewOptionData'];
+    onCreateOption?: ReactSelectAsyncCreatableProps['onCreateOption'];
+    createOptionPosition?: ReactSelectAsyncCreatableProps['createOptionPosition'];
+    showOptionGroupDivider?: boolean;
+};
+declare const AsyncCreatableSelectInput: {
+    (props: TAsyncCreatableSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    isTouched(touched: unknown): boolean;
+    displayName: string;
+    defaultProps: Pick<TAsyncCreatableSelectInputProps, "value" | "isSearchable" | "menuPortalZIndex">;
+};
+export default AsyncCreatableSelectInput;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './async-creatable-select-input';
+export { default as version } from './version';

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;