@commercetools-uikit/select-input 12.2.7 → 13.0.2

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

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
 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 _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
@@ -9,13 +14,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');
-var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
-var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
-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 has = require('lodash/has');
 var flatMap = require('lodash/flatMap');
@@ -27,6 +27,9 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
@@ -34,22 +37,24 @@ 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 _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
-var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
-var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty);
 var has__default = /*#__PURE__*/_interopDefault(has);
 var flatMap__default = /*#__PURE__*/_interopDefault(flatMap);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 
-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 _context5; _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source), true)).call(_context5, 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 _context6; _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source))).call(_context6, 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 _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var customizedComponents = {
   DropdownIndicator: selectUtils.DropdownIndicator,
   ClearIndicator: selectUtils.ClearIndicator,
   MultiValueRemove: selectUtils.TagRemove
 };
+var defaultProps = {
+  maxMenuHeight: 220,
+  menuPortalZIndex: 1
+};
 
 var SelectInput = function SelectInput(props) {
   var _context, _context2;
@@ -86,7 +91,6 @@ var SelectInput = function SelectInput(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(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
               readOnly: true
@@ -100,7 +104,10 @@ var SelectInput = function SelectInput(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"](selectedOptions)
         }, 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)
@@ -112,17 +119,19 @@ var SelectInput = function SelectInput(props) {
         inputValue: props.inputValue,
         isClearable: props.isReadOnly ? false : props.isClearable,
         isDisabled: props.isDisabled,
+        isOptionDisabled: props.isOptionDisabled // @ts-ignore
+        ,
         isReadOnly: props.isReadOnly,
-        isOptionDisabled: props.isOptionDisabled,
         isMulti: props.isMulti,
         isSearchable: props.isSearchable,
         maxMenuHeight: props.maxMenuHeight,
         menuPortalTarget: props.menuPortalTarget,
         menuShouldBlockScroll: props.menuShouldBlockScroll,
+        closeMenuOnSelect: props.closeMenuOnSelect,
         name: props.name,
         noOptionsMessage: props.noOptionsMessage || function (_ref) {
           var inputValue = _ref.inputValue;
-          return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
+          return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
             inputValue: inputValue
           });
         },
@@ -138,10 +147,9 @@ var SelectInput = function SelectInput(props) {
                 return props.name ? "".concat(props.name, ".0") : undefined;
               }()
             },
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             persist: function persist() {}
           };
-          props.onBlur(event);
+          props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(nextSelectedOptions) {
           // nextSelectedOptions is either an array, or a single option, or null
@@ -150,7 +158,9 @@ var SelectInput = function SelectInput(props) {
 
           if (props.isMulti) {
             if (nextSelectedOptions) {
-              value = _mapInstanceProperty__default["default"](nextSelectedOptions).call(nextSelectedOptions, function (option) {
+              var _context3;
+
+              value = _mapInstanceProperty__default["default"](_context3 = nextSelectedOptions).call(_context3, function (option) {
                 return option.value;
               });
             } else {
@@ -160,12 +170,11 @@ var SelectInput = function SelectInput(props) {
             value = nextSelectedOptions.value;
           }
 
-          props.onChange({
+          props.onChange && props.onChange({
             target: {
               name: props.name,
               value: value
             },
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             persist: function persist() {}
           });
         },
@@ -175,13 +184,15 @@ var SelectInput = function SelectInput(props) {
         placeholder: placeholder,
         tabIndex: props.tabIndex,
         tabSelectsValue: props.tabSelectsValue,
-        value: selectedOptions,
+        value: selectedOptions //@ts-ignore
+        ,
         iconLeft: props.iconLeft
       })
     }))
   });
 };
 
+SelectInput.propTypes = {};
 SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
 // conveniently handles both cases
 
@@ -189,18 +200,14 @@ SelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
 
-SelectInput.defaultProps = {
-  maxMenuHeight: 220,
-  menuPortalZIndex: 1
-};
-SelectInput.propTypes = {};
+SelectInput.defaultProps = defaultProps;
 utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, Select.components), customizedComponents), {}, {
   isTouched: SelectInput.isTouched
 }));
 var SelectInput$1 = SelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.7";
+var version = "13.0.2";
 
 exports["default"] = SelectInput$1;
 exports.version = version;

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

@@ -1,3 +1,8 @@
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _pt from 'prop-types';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
 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 _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
@@ -5,30 +10,29 @@ 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 _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
-import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
-import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
-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 has from 'lodash/has';
 import flatMap from 'lodash/flatMap';
 import Select, { components } from 'react-select';
 import Constraints from '@commercetools-uikit/constraints';
 import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
-import { filterDataAttributes, SafeHTMLElement, addStaticFields } from '@commercetools-uikit/utils';
+import { 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 _context5; _forEachInstanceProperty(_context5 = ownKeys(Object(source), true)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context6; _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var customizedComponents = {
   DropdownIndicator: DropdownIndicator,
   ClearIndicator: ClearIndicator,
   MultiValueRemove: TagRemove
 };
+var defaultProps = {
+  maxMenuHeight: 220,
+  menuPortalZIndex: 1
+};
 
 var SelectInput = function SelectInput(props) {
   var _context, _context2;
@@ -65,7 +69,6 @@ var SelectInput = function SelectInput(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
@@ -79,7 +82,10 @@ var SelectInput = function SelectInput(props) {
           showOptionGroupDivider: props.showOptionGroupDivider,
           menuPortalZIndex: props.menuPortalZIndex,
           isDisabled: props.isDisabled,
-          isReadOnly: props.isReadOnly
+          isReadOnly: props.isReadOnly,
+          iconLeft: props.iconLeft,
+          isMulti: props.isMulti,
+          hasValue: !isEmpty(selectedOptions)
         }, 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)
@@ -91,17 +97,19 @@ var SelectInput = function SelectInput(props) {
         inputValue: props.inputValue,
         isClearable: props.isReadOnly ? false : props.isClearable,
         isDisabled: props.isDisabled,
+        isOptionDisabled: props.isOptionDisabled // @ts-ignore
+        ,
         isReadOnly: props.isReadOnly,
-        isOptionDisabled: props.isOptionDisabled,
         isMulti: props.isMulti,
         isSearchable: props.isSearchable,
         maxMenuHeight: props.maxMenuHeight,
         menuPortalTarget: props.menuPortalTarget,
         menuShouldBlockScroll: props.menuShouldBlockScroll,
+        closeMenuOnSelect: props.closeMenuOnSelect,
         name: props.name,
         noOptionsMessage: props.noOptionsMessage || function (_ref) {
           var inputValue = _ref.inputValue;
-          return inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
+          return !inputValue || inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
             inputValue: inputValue
           });
         },
@@ -117,10 +125,9 @@ var SelectInput = function SelectInput(props) {
                 return props.name ? "".concat(props.name, ".0") : undefined;
               }()
             },
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             persist: function persist() {}
           };
-          props.onBlur(event);
+          props.onBlur && props.onBlur(event);
         } : undefined,
         onChange: function onChange(nextSelectedOptions) {
           // nextSelectedOptions is either an array, or a single option, or null
@@ -129,7 +136,9 @@ var SelectInput = function SelectInput(props) {
 
           if (props.isMulti) {
             if (nextSelectedOptions) {
-              value = _mapInstanceProperty(nextSelectedOptions).call(nextSelectedOptions, function (option) {
+              var _context3;
+
+              value = _mapInstanceProperty(_context3 = nextSelectedOptions).call(_context3, function (option) {
                 return option.value;
               });
             } else {
@@ -139,12 +148,11 @@ var SelectInput = function SelectInput(props) {
             value = nextSelectedOptions.value;
           }
 
-          props.onChange({
+          props.onChange && props.onChange({
             target: {
               name: props.name,
               value: value
             },
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             persist: function persist() {}
           });
         },
@@ -154,13 +162,33 @@ var SelectInput = function SelectInput(props) {
         placeholder: placeholder,
         tabIndex: props.tabIndex,
         tabSelectsValue: props.tabSelectsValue,
-        value: selectedOptions,
+        value: selectedOptions //@ts-ignore
+        ,
         iconLeft: props.iconLeft
       })
     }))
   });
 };
 
+SelectInput.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,
+  isReadOnly: _pt.bool,
+  hasWarning: _pt.bool,
+  iconLeft: _pt.node,
+  isAutofocussed: _pt.bool,
+  menuPortalZIndex: _pt.number,
+  onBlur: _pt.func,
+  onChange: _pt.func,
+  options: _pt.oneOfType([_pt.arrayOf(_pt.shape({
+    value: _pt.string.isRequired
+  })), _pt.arrayOf(_pt.shape({
+    options: _pt.arrayOf(_pt.shape({
+      value: _pt.string.isRequired
+    })).isRequired
+  }))]),
+  showOptionGroupDivider: _pt.bool
+} : {};
 SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
 // conveniently handles both cases
 
@@ -168,256 +196,13 @@ SelectInput.isTouched = function (touched) {
   return Boolean(touched);
 };
 
-SelectInput.defaultProps = {
-  maxMenuHeight: 220,
-  menuPortalZIndex: 1
-};
-SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  horizontalConstraint: PropTypes.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
-
-  /**
-   * Indicates that input has errors
-   */
-  hasError: PropTypes.bool,
-
-  /**
-   * Is the select read-only
-   */
-  isReadOnly: PropTypes.bool,
-
-  /**
-   * Control to indicate on the input if there are selected values that are potentially invalid
-   */
-  hasWarning: 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,
-
-  /**
-   * Remove the currently focused option when the user presses backspace
-   */
-  backspaceRemovesValue: PropTypes.bool,
-  // blurInputOnSelect: PropTypes.bool,
-  // captureMenuScroll: PropTypes.bool,
-  // className: PropTypes.string,
-  // classNamePrefix: PropTypes.string,
-  // closeMenuOnSelect: PropTypes.bool,
-  // closeMenuOnScroll: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-
-  /**
-   * Map of components to overwrite the default ones, see what components you can override
-   */
-  components: PropTypes.objectOf(PropTypes.func),
-  // controlShouldRenderValue: PropTypes.bool,
-  // delimiter: PropTypes.string,
-  // escapeClearsValue: PropTypes.bool,
-
-  /**
-   * Custom method to filter whether an option should be displayed in the menu
-   * <br />
-   * Signature: `(option, rawInput) => boolean`
-   */
-  filterOption: PropTypes.func,
-  // formatGroupLabel: PropTypes.func,
-  // formatOptionLabel: PropTypes.func,
-  // getOptionLabel: PropTypes.func,
-  // getOptionValue: PropTypes.func,
-  // hideSelectedOptions: PropTypes.bool,
-
-  /**
-   * Used as HTML id property. An id is generated automatically when not provided.
-   *This forwarded as react-select's "inputId"
-   */
-  id: PropTypes.string,
-  inputValue: PropTypes.string,
-
-  /**
-   * The id to set on the SelectContainer component
-   * This is forwarded as react-select's "id"
-   */
-  containerId: PropTypes.string,
-  // instanceId: PropTypes.string,
-
-  /**
-   * Is the select value clearable
-   */
-  isClearable: PropTypes.bool,
-
-  /**
-   * Is the select disabled
-   */
-  isDisabled: PropTypes.bool,
-  // isLoading: PropTypes.bool,
-
-  /**
-   * Override the built-in logic to detect whether an option is disabled
-   */
-  isOptionDisabled: PropTypes.func,
-  // isOptionSelected: PropTypes.func,
-
-  /**
-   * Support multiple selected options
-   */
-  isMulti: PropTypes.bool,
-  // isRtl: PropTypes.bool,
-
-  /**
-   * Whether to enable search functionality
-   */
-  isSearchable: PropTypes.bool,
-  // loadingMessage: PropTypes.func,
-  // minMenuHeight: PropTypes.number,
-
-  /**
-   * Maximum height of the menu before scrolling
-   */
-  maxMenuHeight: PropTypes.number,
-  // menuIsOpen: PropTypes.bool,
-  // menuPlacement: PropTypes.oneOf(['auto', 'bottom', 'top']),
-  // menuPosition: PropTypes.oneOf(['absolute', 'fixed']),
-
-  /**
-   * Dom element to portal the select menu to
-   */
-  menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
-
-  /**
-   * z-index value for the menu portal
-   */
-  menuPortalZIndex: PropTypes.number,
-
-  /**
-   * whether the menu should block scroll while open
-   */
-  menuShouldBlockScroll: PropTypes.bool,
-  // menuShouldScrollIntoView: 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 }.
-   * <br />
-   * `inputValue` will be an empty string when no search text is present.
-   * <br />
-   * Signature: `({ inputValue}) => string`
-   */
-  noOptionsMessage: PropTypes.func,
-
-  /**
-   * Handle blur events on the control
-   * <br />
-   * Signature: `(event) => void`
-   */
-  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.
-   * <br/>
-   * The value will be the selected option, or an array of options in case isMulti is true.
-   * <br />
-   * Signature: `(event) => void`
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Handle focus events on the control
-   * <br />
-   * Signature: `(event) => void`
-   */
-  onFocus: PropTypes.func,
-
-  /**
-   * Handle change events on the input
-   * <br />
-   * Signature: `(newValue, actionMeta) => void`
-   */
-  onInputChange: PropTypes.func,
-  // onKeyDown: PropTypes.func,
-  // onMenuOpen: PropTypes.func,
-  // onMenuClose: PropTypes.func,
-  // onMenuScrollToTop: PropTypes.func,
-  // onMenuScrollToBottom: PropTypes.func,
-  // openMenuOnFocus: PropTypes.bool,
-  // openMenuOnClick: PropTypes.bool,
-
-  /**
-   * Array of options that populate the select menu
-   */
-  options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
-    value: PropTypes.string.isRequired
-  }), PropTypes.shape({
-    options: PropTypes.arrayOf(PropTypes.shape({
-      value: PropTypes.string.isRequired
-    }))
-  })])),
-  showOptionGroupDivider: PropTypes.bool,
-  // pageSize: PropTypes.number,
-
-  /**
-   * Placeholder text for the select value
-   */
-  placeholder: PropTypes.string,
-  // screenReaderStatus: PropTypes.func,
-  // styles: PropTypes.objectOf(PropTypes.func),
-  // theme: PropTypes.object,
-
-  /**
-   * 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 _PropTypes$arrayOf, _context3, _context4;
-
-    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.arrayOf(PropTypes.string)).isRequired.apply(_PropTypes$arrayOf, _concatInstanceProperty(_context3 = [props]).call(_context3, rest)) : PropTypes.string.apply(PropTypes, _concatInstanceProperty(_context4 = [props]).call(_context4, rest));
-  }
-} : {};
+SelectInput.defaultProps = defaultProps;
 addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, components), customizedComponents), {}, {
   isTouched: SelectInput.isTouched
 }));
 var SelectInput$1 = SelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.7";
+var version = "13.0.2";
 
 export { SelectInput$1 as default, version };

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

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

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

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+import { type Props as ReactSelectProps } from 'react-select';
+declare type TOption = {
+    value: string;
+};
+declare type TOptionObject = {
+    options: TOption[];
+};
+declare type TOptions = TOption[] | TOptionObject[];
+declare type TEvent = {
+    target: {
+        name: ReactSelectProps['name'];
+        value?: string | string[] | null;
+    };
+    persist: () => void;
+};
+declare type TSelectInputProps = {
+    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    hasError?: boolean;
+    isReadOnly?: boolean;
+    hasWarning?: boolean;
+    iconLeft?: ReactNode;
+    'aria-label'?: ReactSelectProps['aria-label'];
+    'aria-labelledby'?: ReactSelectProps['aria-labelledby'];
+    isAutofocussed?: boolean;
+    backspaceRemovesValue?: ReactSelectProps['backspaceRemovesValue'];
+    components?: ReactSelectProps['components'];
+    filterOption?: ReactSelectProps['filterOption'];
+    id?: ReactSelectProps['inputId'];
+    inputValue?: ReactSelectProps['inputValue'];
+    containerId?: ReactSelectProps['id'];
+    isClearable?: ReactSelectProps['isClearable'];
+    isDisabled?: ReactSelectProps['isDisabled'];
+    isOptionDisabled?: ReactSelectProps['isOptionDisabled'];
+    isMulti?: ReactSelectProps['isMulti'];
+    isSearchable?: ReactSelectProps['isSearchable'];
+    maxMenuHeight?: ReactSelectProps['maxMenuHeight'];
+    menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
+    menuPortalZIndex?: number;
+    menuShouldBlockScroll?: ReactSelectProps['menuShouldBlockScroll'];
+    closeMenuOnSelect?: ReactSelectProps['closeMenuOnSelect'];
+    name?: ReactSelectProps['name'];
+    noOptionsMessage?: ReactSelectProps['noOptionsMessage'];
+    onBlur?: (event: TEvent) => void;
+    onChange?: (event: TEvent) => void;
+    onFocus?: ReactSelectProps['onFocus'];
+    onInputChange?: ReactSelectProps['onInputChange'];
+    options?: TOptions;
+    showOptionGroupDivider?: boolean;
+    placeholder?: ReactSelectProps['placeholder'];
+    tabIndex?: ReactSelectProps['tabIndex'];
+    tabSelectsValue?: ReactSelectProps['tabSelectsValue'];
+    value: ReactSelectProps['value'];
+};
+declare const SelectInput: {
+    (props: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    isTouched(touched: boolean | unknown[]): boolean;
+    defaultProps: Pick<TSelectInputProps, "maxMenuHeight" | "menuPortalZIndex">;
+};
+export default SelectInput;

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

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