@commercetools-uikit/select-input 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,154 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# SelectInput
+
+## Description
+
+An input component getting a selection from the user.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/select-input
+```
+
+```
+npm --save install @commercetools-uikit/select-input
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react react-intl
+```
+
+```
+npm --save install react react-intl
+```
+
+## Usage
+
+```jsx
+import PropTypes from 'prop-types';
+import SelectInput from '@commercetools-uikit/select-input';
+
+const Example = (props) => (
+  <SelectInput
+    name="form-field-name"
+    value={props.value}
+    onChange={
+      (/** event */) => {
+        // console.log(event.target.value)
+      }
+    }
+    options={[
+      { value: 'one', label: 'One' },
+      { value: 'two', label: 'Two' },
+    ]}
+  />
+);
+
+Example.propTypes = {
+  value: PropTypes.string,
+};
+
+export default Example;
+```
+
+## Properties
+
+| Props                              | Type                                                                                               | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                    |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------- | :------: | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `horizontalConstraint`             | `enum`<br/>Possible values:<br/>`3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          |         |                                                                                                                                                                                                                                                                                                                                                                |
+| `hasError`                         | `bool`                                                                                             |          |         | Indicates that input has errors                                                                                                                                                                                                                                                                                                                                |
+| `isReadOnly`                       | `bool`                                                                                             |          |         | Is the select read-only                                                                                                                                                                                                                                                                                                                                        |
+| `hasWarning`                       | `bool`                                                                                             |          |         | Control to indicate on the input if there are selected values that are potentially invalid                                                                                                                                                                                                                                                                     |
+| `iconLeft`                         | `node`                                                                                             |          |         | Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.                                                                                                                                                                                                                                                 |
+| `aria-label`                       | `string`                                                                                           |          |         | Aria label (for assistive tech)                                                                                                                                                                                                                                                                                                                                |
+| `aria-labelledby`                  | `string`                                                                                           |          |         | HTML ID of an element that should be used as the label (for assistive tech)                                                                                                                                                                                                                                                                                    |
+| `isAutofocussed`                   | `bool`                                                                                             |          |         | Focus the control when it is mounted                                                                                                                                                                                                                                                                                                                           |
+| `backspaceRemovesValue`            | `bool`                                                                                             |          |         | Remove the currently focused option when the user presses backspace                                                                                                                                                                                                                                                                                            |
+| `components`                       | `objectOf(func)`                                                                                   |          |         | Map of components to overwrite the default ones, see what components you can override                                                                                                                                                                                                                                                                          |
+| `filterOption`                     | `func`                                                                                             |          |         | Custom method to filter whether an option should be displayed in the menu&#xA;<br />&#xA;Signature: `(option, rawInput) => boolean`                                                                                                                                                                                                                            |
+| `id`                               | `string`                                                                                           |          |         | Used as HTML id property. An id is generated automatically when not provided.&#xA;This forwarded as react-select's "inputId"                                                                                                                                                                                                                                   |
+| `inputValue`                       | `string`                                                                                           |          |         |                                                                                                                                                                                                                                                                                                                                                                |
+| `containerId`                      | `string`                                                                                           |          |         | The id to set on the SelectContainer component&#xA;This is forwarded as react-select's "id"                                                                                                                                                                                                                                                                    |
+| `isClearable`                      | `bool`                                                                                             |          |         | Is the select value clearable                                                                                                                                                                                                                                                                                                                                  |
+| `isDisabled`                       | `bool`                                                                                             |          |         | Is the select disabled                                                                                                                                                                                                                                                                                                                                         |
+| `isOptionDisabled`                 | `func`                                                                                             |          |         | Override the built-in logic to detect whether an option is disabled                                                                                                                                                                                                                                                                                            |
+| `isMulti`                          | `bool`                                                                                             |          |         | Support multiple selected options                                                                                                                                                                                                                                                                                                                              |
+| `isSearchable`                     | `bool`                                                                                             |          |         | Whether to enable search functionality                                                                                                                                                                                                                                                                                                                         |
+| `maxMenuHeight`                    | `number`                                                                                           |          | `220`   | Maximum height of the menu before scrolling                                                                                                                                                                                                                                                                                                                    |
+| `menuPortalTarget`                 | `SafeHTMLElement`                                                                                  |          |         | Dom element to portal the select menu to                                                                                                                                                                                                                                                                                                                       |
+| `menuPortalZIndex`                 | `number`                                                                                           |          | `1`     | z-index value for the menu portal                                                                                                                                                                                                                                                                                                                              |
+| `menuShouldBlockScroll`            | `bool`                                                                                             |          |         | whether the menu should block scroll while open                                                                                                                                                                                                                                                                                                                |
+| `name`                             | `string`                                                                                           |          |         | Name of the HTML Input (optional - without this, no input will be rendered)                                                                                                                                                                                                                                                                                    |
+| `noOptionsMessage`                 | `func`                                                                                             |          |         | 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 }.&#xA;<br />&#xA;`inputValue` will be an empty string when no search text is present.&#xA;<br />&#xA;Signature: `({ inputValue}) => string` |
+| `onBlur`                           | `func`                                                                                             |          |         | Handle blur events on the control&#xA;<br />&#xA;Signature: `(event) => void`                                                                                                                                                                                                                                                                                  |
+| `onChange`                         | `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.&#xA;<br/>&#xA;The value will be the selected option, or an array of options in case isMulti is true.&#xA;<br />&#xA;Signature: `(event) => void`                                                        |
+| `onFocus`                          | `func`                                                                                             |          |         | Handle focus events on the control&#xA;<br />&#xA;Signature: `(event) => void`                                                                                                                                                                                                                                                                                 |
+| `onInputChange`                    | `func`                                                                                             |          |         | Handle change events on the input&#xA;<br />&#xA;Signature: `(newValue, actionMeta) => void`                                                                                                                                                                                                                                                                   |
+| `options`                          | `array`                                                                                            |          |         | Array of options that populate the select menu                                                                                                                                                                                                                                                                                                                 |
+| `options[]<shape>`                 | `object`                                                                                           |          |         |                                                                                                                                                                                                                                                                                                                                                                |
+| `options[]<shape>.value`           | `string`                                                                                           |    ✅    |         |                                                                                                                                                                                                                                                                                                                                                                |
+| `options[]<shape>.options`         | `array`                                                                                            |          |         |                                                                                                                                                                                                                                                                                                                                                                |
+| `options[]<shape>.options[].value` | `string`                                                                                           |    ✅    |         |                                                                                                                                                                                                                                                                                                                                                                |
+| `showOptionGroupDivider`           | `bool`                                                                                             |          |         |                                                                                                                                                                                                                                                                                                                                                                |
+| `placeholder`                      | `string`                                                                                           |          |         | Placeholder text for the select value                                                                                                                                                                                                                                                                                                                          |
+| `tabIndex`                         | `string`                                                                                           |          |         | Sets the tabIndex attribute on the input                                                                                                                                                                                                                                                                                                                       |
+| `tabSelectsValue`                  | `bool`                                                                                             |          |         | Select the currently focused option when the user presses tab                                                                                                                                                                                                                                                                                                  |
+| `value`                            | `custom`                                                                                           |          |         | The value of the select; reflected by the selected option                                                                                                                                                                                                                                                                                                      |
+
+## `react-select` under the hood
+
+This input is built on top of [`react-select`](https://github.com/JedWatson/react-select) v2.
+It supports mostly same properties as `react-select`. Behaviour for some props was changed, and support for others was dropped.
+
+In case you need one of the currently excluded props, feel free to open a PR adding them.
+
+## `options`
+
+The options support a `isDisabled` property which will render the option with a disabled style and will prevent users from selecting it.
+
+## Static Properties
+
+### `isTouched(touched)`
+
+Expects to be called with an array or boolean.
+Returns `true` when truthy.
+
+## Components
+
+It is possible to customize `SelectInput` by passing the `components` property.
+`SelectInput` exports the default underlying components as static exports.
+
+Components available as static exports are:
+
+- `ClearIndicator`
+- `Control`
+- `DropdownIndicator`
+- `DownChevron`
+- `CrossIcon`
+- `Group`
+- `GroupHeading`
+- `IndicatorsContainer`
+- `IndicatorSeparator`
+- `Input`
+- `LoadingIndicator`
+- `Menu`
+- `MenuList`
+- `MenuPortal`
+- `LoadingMessage`
+- `NoOptionsMessage`
+- `MultiValue`
+- `MultiValueContainer`
+- `MultiValueLabel`
+- `MultiValueRemove`
+- `Option`
+- `Placeholder`
+- `SelectContainer`
+- `SingleValue`
+- `ValueContainer`
+
+See the [official documentation](https://react-select.com/components) for more information about the props they receive.

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

@@ -0,0 +1,447 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+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');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var PropTypes = require('prop-types');
+var reactIntl = require('react-intl');
+var react = require('@emotion/react');
+var has = require('lodash/has');
+var flatMap = require('lodash/flatMap');
+var Select = require('react-select');
+var Constraints = require('@commercetools-uikit/constraints');
+var selectUtils = require('@commercetools-uikit/select-utils');
+var utils = require('@commercetools-uikit/utils');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+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 _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+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 _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; }
+var customizedComponents = {
+  DropdownIndicator: selectUtils.DropdownIndicator,
+  ClearIndicator: selectUtils.ClearIndicator,
+  MultiValueRemove: selectUtils.TagRemove
+};
+
+var SelectInput = function SelectInput(props) {
+  var _context, _context2;
+
+  var intl = reactIntl.useIntl();
+  var theme = react.useTheme();
+  var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
+  //   const colourOptions = [{ value: 'green', label: 'Green' }];
+  //   const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
+  //   const groupedOptions = [
+  //     { label: 'Colours', options: colourOptions },
+  //     { label: 'Flavours', options: flavourOptions },
+  //   ];
+  // So we "ungroup" the options by merging them all into one list first.
+
+  var optionsWithoutGroups = flatMap__default['default'](props.options, function (option) {
+    return has__default['default'](option, 'value') ? option : option.options;
+  });
+  var selectedOptions = props.isMulti ? _filterInstanceProperty__default['default'](_context = _mapInstanceProperty__default['default'](_context2 = props.value // Pass the options in the order selected by the use, so that the
+  // sorting is not lost
+  ).call(_context2, function (value) {
+    return _findInstanceProperty__default['default'](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
+      return option.value === value;
+    });
+  })).call(_context, Boolean) : _findInstanceProperty__default['default'](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
+    return has__default['default'](option, 'value') && option.value === props.value;
+  }) || null;
+  return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
+      children: jsxRuntime.jsx(Select__default['default'], {
+        "aria-label": props['aria-label'],
+        "aria-labelledby": props['aria-labelledby'],
+        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
+            }));
+          }
+        } : {}), props.components),
+        menuIsOpen: props.isReadOnly ? false : undefined,
+        styles: selectUtils.createSelectStyles({
+          hasWarning: props.hasWarning,
+          hasError: props.hasError,
+          showOptionGroupDivider: props.showOptionGroupDivider,
+          menuPortalZIndex: props.menuPortalZIndex,
+          isDisabled: props.isDisabled,
+          isReadOnly: props.isReadOnly
+        }, 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)
+        // instead.
+        // This makes it easier to less confusing to use with <label />s.
+        ,
+        id: props.containerId,
+        inputId: props.id,
+        inputValue: props.inputValue,
+        isClearable: props.isReadOnly ? false : props.isClearable,
+        isDisabled: props.isDisabled,
+        isReadOnly: props.isReadOnly,
+        isOptionDisabled: props.isOptionDisabled,
+        isMulti: props.isMulti,
+        isSearchable: props.isSearchable,
+        maxMenuHeight: props.maxMenuHeight,
+        menuPortalTarget: props.menuPortalTarget,
+        menuShouldBlockScroll: props.menuShouldBlockScroll,
+        name: props.name,
+        noOptionsMessage: props.noOptionsMessage || function (_ref) {
+          var inputValue = _ref.inputValue;
+          return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
+            inputValue: inputValue
+          });
+        },
+        onBlur: typeof props.onBlur === 'function' ? function () {
+          var event = {
+            target: {
+              name: function () {
+                if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
+                // state as an array instead of a boolean only.
+                // Otherwise the shapes would clash on submission, as
+                // Formik will create an array on submission anyways.
+
+                return props.name ? "".concat(props.name, ".0") : undefined;
+              }()
+            },
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            persist: function persist() {}
+          };
+          props.onBlur(event);
+        } : undefined,
+        onChange: function onChange(nextSelectedOptions) {
+          // nextSelectedOptions is either an array, or a single option, or null
+          // depending on whether we're in multi-mode or not (isMulti)
+          var value = null;
+
+          if (props.isMulti) {
+            if (nextSelectedOptions) {
+              value = _mapInstanceProperty__default['default'](nextSelectedOptions).call(nextSelectedOptions, function (option) {
+                return option.value;
+              });
+            } else {
+              value = [];
+            }
+          } else if (nextSelectedOptions) {
+            value = nextSelectedOptions.value;
+          }
+
+          props.onChange({
+            target: {
+              name: props.name,
+              value: value
+            },
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            persist: function persist() {}
+          });
+        },
+        onFocus: props.onFocus,
+        onInputChange: props.onInputChange,
+        options: props.options,
+        placeholder: placeholder,
+        tabIndex: props.tabIndex,
+        tabSelectsValue: props.tabSelectsValue,
+        value: selectedOptions,
+        iconLeft: props.iconLeft
+      })
+    }))
+  });
+};
+
+SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
+// conveniently handles both cases
+
+SelectInput.isTouched = function (touched) {
+  return Boolean(touched);
+};
+
+SelectInput.defaultProps = {
+  maxMenuHeight: 220,
+  menuPortalZIndex: 1
+};
+SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  horizontalConstraint: PropTypes__default['default'].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+
+  /**
+   * Indicates that input has errors
+   */
+  hasError: PropTypes__default['default'].bool,
+
+  /**
+   * Is the select read-only
+   */
+  isReadOnly: PropTypes__default['default'].bool,
+
+  /**
+   * Control to indicate on the input if there are selected values that are potentially invalid
+   */
+  hasWarning: PropTypes__default['default'].bool,
+
+  /**
+   * 	Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
+   */
+  iconLeft: PropTypes__default['default'].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__default['default'].string,
+
+  /**
+   * HTML ID of an element that should be used as the label (for assistive tech)
+   */
+  'aria-labelledby': PropTypes__default['default'].string,
+
+  /**
+   * Focus the control when it is mounted
+   */
+  isAutofocussed: PropTypes__default['default'].bool,
+
+  /**
+   * Remove the currently focused option when the user presses backspace
+   */
+  backspaceRemovesValue: PropTypes__default['default'].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__default['default'].objectOf(PropTypes__default['default'].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__default['default'].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__default['default'].string,
+  inputValue: PropTypes__default['default'].string,
+
+  /**
+   * The id to set on the SelectContainer component
+   * This is forwarded as react-select's "id"
+   */
+  containerId: PropTypes__default['default'].string,
+  // instanceId: PropTypes.string,
+
+  /**
+   * Is the select value clearable
+   */
+  isClearable: PropTypes__default['default'].bool,
+
+  /**
+   * Is the select disabled
+   */
+  isDisabled: PropTypes__default['default'].bool,
+  // isLoading: PropTypes.bool,
+
+  /**
+   * Override the built-in logic to detect whether an option is disabled
+   */
+  isOptionDisabled: PropTypes__default['default'].func,
+  // isOptionSelected: PropTypes.func,
+
+  /**
+   * Support multiple selected options
+   */
+  isMulti: PropTypes__default['default'].bool,
+  // isRtl: PropTypes.bool,
+
+  /**
+   * Whether to enable search functionality
+   */
+  isSearchable: PropTypes__default['default'].bool,
+  // loadingMessage: PropTypes.func,
+  // minMenuHeight: PropTypes.number,
+
+  /**
+   * Maximum height of the menu before scrolling
+   */
+  maxMenuHeight: PropTypes__default['default'].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__default['default'].instanceOf(utils.SafeHTMLElement),
+
+  /**
+   * z-index value for the menu portal
+   */
+  menuPortalZIndex: PropTypes__default['default'].number,
+
+  /**
+   * whether the menu should block scroll while open
+   */
+  menuShouldBlockScroll: PropTypes__default['default'].bool,
+  // menuShouldScrollIntoView: PropTypes.bool,
+
+  /**
+   * Name of the HTML Input (optional - without this, no input will be rendered)
+   */
+  name: PropTypes__default['default'].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__default['default'].func,
+
+  /**
+   * Handle blur events on the control
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onBlur: PropTypes__default['default'].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__default['default'].func,
+
+  /**
+   * Handle focus events on the control
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onFocus: PropTypes__default['default'].func,
+
+  /**
+   * Handle change events on the input
+   * <br />
+   * Signature: `(newValue, actionMeta) => void`
+   */
+  onInputChange: PropTypes__default['default'].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__default['default'].arrayOf(PropTypes__default['default'].oneOfType([PropTypes__default['default'].shape({
+    value: PropTypes__default['default'].string.isRequired
+  }), PropTypes__default['default'].shape({
+    options: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
+      value: PropTypes__default['default'].string.isRequired
+    }))
+  })])),
+  showOptionGroupDivider: PropTypes__default['default'].bool,
+  // pageSize: PropTypes.number,
+
+  /**
+   * Placeholder text for the select value
+   */
+  placeholder: PropTypes__default['default'].string,
+  // screenReaderStatus: PropTypes.func,
+  // styles: PropTypes.objectOf(PropTypes.func),
+  // theme: PropTypes.object,
+
+  /**
+   * Sets the tabIndex attribute on the input
+   */
+  tabIndex: PropTypes__default['default'].string,
+
+  /**
+   * Select the currently focused option when the user presses tab
+   */
+  tabSelectsValue: PropTypes__default['default'].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__default['default'].arrayOf(PropTypes__default['default'].string)).isRequired.apply(_PropTypes$arrayOf, _concatInstanceProperty__default['default'](_context3 = [props]).call(_context3, rest)) : PropTypes__default['default'].string.apply(PropTypes__default['default'], _concatInstanceProperty__default['default'](_context4 = [props]).call(_context4, rest));
+  }
+} : {};
+utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, Select.components), customizedComponents), {}, {
+  isTouched: SelectInput.isTouched
+}));
+var SelectInput$1 = SelectInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = SelectInput$1;
+exports.version = version;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-select-input.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-select-input.cjs.dev.js");
+}

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

@@ -0,0 +1,206 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+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 react = require('@emotion/react');
+var has = require('lodash/has');
+var flatMap = require('lodash/flatMap');
+var Select = require('react-select');
+var Constraints = require('@commercetools-uikit/constraints');
+var selectUtils = require('@commercetools-uikit/select-utils');
+var utils = require('@commercetools-uikit/utils');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+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 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 _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; }
+var customizedComponents = {
+  DropdownIndicator: selectUtils.DropdownIndicator,
+  ClearIndicator: selectUtils.ClearIndicator,
+  MultiValueRemove: selectUtils.TagRemove
+};
+
+var SelectInput = function SelectInput(props) {
+  var _context, _context2;
+
+  var intl = reactIntl.useIntl();
+  var theme = react.useTheme();
+  var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
+  //   const colourOptions = [{ value: 'green', label: 'Green' }];
+  //   const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
+  //   const groupedOptions = [
+  //     { label: 'Colours', options: colourOptions },
+  //     { label: 'Flavours', options: flavourOptions },
+  //   ];
+  // So we "ungroup" the options by merging them all into one list first.
+
+  var optionsWithoutGroups = flatMap__default['default'](props.options, function (option) {
+    return has__default['default'](option, 'value') ? option : option.options;
+  });
+  var selectedOptions = props.isMulti ? _filterInstanceProperty__default['default'](_context = _mapInstanceProperty__default['default'](_context2 = props.value // Pass the options in the order selected by the use, so that the
+  // sorting is not lost
+  ).call(_context2, function (value) {
+    return _findInstanceProperty__default['default'](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
+      return option.value === value;
+    });
+  })).call(_context, Boolean) : _findInstanceProperty__default['default'](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
+    return has__default['default'](option, 'value') && option.value === props.value;
+  }) || null;
+  return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
+      children: jsxRuntime.jsx(Select__default['default'], {
+        "aria-label": props['aria-label'],
+        "aria-labelledby": props['aria-labelledby'],
+        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
+            }));
+          }
+        } : {}), props.components),
+        menuIsOpen: props.isReadOnly ? false : undefined,
+        styles: selectUtils.createSelectStyles({
+          hasWarning: props.hasWarning,
+          hasError: props.hasError,
+          showOptionGroupDivider: props.showOptionGroupDivider,
+          menuPortalZIndex: props.menuPortalZIndex,
+          isDisabled: props.isDisabled,
+          isReadOnly: props.isReadOnly
+        }, 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)
+        // instead.
+        // This makes it easier to less confusing to use with <label />s.
+        ,
+        id: props.containerId,
+        inputId: props.id,
+        inputValue: props.inputValue,
+        isClearable: props.isReadOnly ? false : props.isClearable,
+        isDisabled: props.isDisabled,
+        isReadOnly: props.isReadOnly,
+        isOptionDisabled: props.isOptionDisabled,
+        isMulti: props.isMulti,
+        isSearchable: props.isSearchable,
+        maxMenuHeight: props.maxMenuHeight,
+        menuPortalTarget: props.menuPortalTarget,
+        menuShouldBlockScroll: props.menuShouldBlockScroll,
+        name: props.name,
+        noOptionsMessage: props.noOptionsMessage || function (_ref) {
+          var inputValue = _ref.inputValue;
+          return inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
+            inputValue: inputValue
+          });
+        },
+        onBlur: typeof props.onBlur === 'function' ? function () {
+          var event = {
+            target: {
+              name: function () {
+                if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
+                // state as an array instead of a boolean only.
+                // Otherwise the shapes would clash on submission, as
+                // Formik will create an array on submission anyways.
+
+                return props.name ? "".concat(props.name, ".0") : undefined;
+              }()
+            },
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            persist: function persist() {}
+          };
+          props.onBlur(event);
+        } : undefined,
+        onChange: function onChange(nextSelectedOptions) {
+          // nextSelectedOptions is either an array, or a single option, or null
+          // depending on whether we're in multi-mode or not (isMulti)
+          var value = null;
+
+          if (props.isMulti) {
+            if (nextSelectedOptions) {
+              value = _mapInstanceProperty__default['default'](nextSelectedOptions).call(nextSelectedOptions, function (option) {
+                return option.value;
+              });
+            } else {
+              value = [];
+            }
+          } else if (nextSelectedOptions) {
+            value = nextSelectedOptions.value;
+          }
+
+          props.onChange({
+            target: {
+              name: props.name,
+              value: value
+            },
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            persist: function persist() {}
+          });
+        },
+        onFocus: props.onFocus,
+        onInputChange: props.onInputChange,
+        options: props.options,
+        placeholder: placeholder,
+        tabIndex: props.tabIndex,
+        tabSelectsValue: props.tabSelectsValue,
+        value: selectedOptions,
+        iconLeft: props.iconLeft
+      })
+    }))
+  });
+};
+
+SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
+// conveniently handles both cases
+
+SelectInput.isTouched = function (touched) {
+  return Boolean(touched);
+};
+
+SelectInput.defaultProps = {
+  maxMenuHeight: 220,
+  menuPortalZIndex: 1
+};
+SelectInput.propTypes = {};
+utils.addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, Select.components), customizedComponents), {}, {
+  isTouched: SelectInput.isTouched
+}));
+var SelectInput$1 = SelectInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = SelectInput$1;
+exports.version = version;

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

@@ -0,0 +1,423 @@
+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';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+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 { 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 { 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 _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; }
+var customizedComponents = {
+  DropdownIndicator: DropdownIndicator,
+  ClearIndicator: ClearIndicator,
+  MultiValueRemove: TagRemove
+};
+
+var SelectInput = function SelectInput(props) {
+  var _context, _context2;
+
+  var intl = useIntl();
+  var theme = useTheme();
+  var placeholder = props.placeholder || intl.formatMessage(messages.placeholder); // Options can be grouped as
+  //   const colourOptions = [{ value: 'green', label: 'Green' }];
+  //   const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
+  //   const groupedOptions = [
+  //     { label: 'Colours', options: colourOptions },
+  //     { label: 'Flavours', options: flavourOptions },
+  //   ];
+  // So we "ungroup" the options by merging them all into one list first.
+
+  var optionsWithoutGroups = flatMap(props.options, function (option) {
+    return has(option, 'value') ? option : option.options;
+  });
+  var selectedOptions = props.isMulti ? _filterInstanceProperty(_context = _mapInstanceProperty(_context2 = props.value // Pass the options in the order selected by the use, so that the
+  // sorting is not lost
+  ).call(_context2, function (value) {
+    return _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
+      return option.value === value;
+    });
+  })).call(_context, Boolean) : _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
+    return has(option, 'value') && option.value === props.value;
+  }) || null;
+  return jsx(Constraints.Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
+      children: jsx(Select, {
+        "aria-label": props['aria-label'],
+        "aria-labelledby": props['aria-labelledby'],
+        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
+            }));
+          }
+        } : {}), props.components),
+        menuIsOpen: props.isReadOnly ? false : undefined,
+        styles: createSelectStyles({
+          hasWarning: props.hasWarning,
+          hasError: props.hasError,
+          showOptionGroupDivider: props.showOptionGroupDivider,
+          menuPortalZIndex: props.menuPortalZIndex,
+          isDisabled: props.isDisabled,
+          isReadOnly: props.isReadOnly
+        }, 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)
+        // instead.
+        // This makes it easier to less confusing to use with <label />s.
+        ,
+        id: props.containerId,
+        inputId: props.id,
+        inputValue: props.inputValue,
+        isClearable: props.isReadOnly ? false : props.isClearable,
+        isDisabled: props.isDisabled,
+        isReadOnly: props.isReadOnly,
+        isOptionDisabled: props.isOptionDisabled,
+        isMulti: props.isMulti,
+        isSearchable: props.isSearchable,
+        maxMenuHeight: props.maxMenuHeight,
+        menuPortalTarget: props.menuPortalTarget,
+        menuShouldBlockScroll: props.menuShouldBlockScroll,
+        name: props.name,
+        noOptionsMessage: props.noOptionsMessage || function (_ref) {
+          var inputValue = _ref.inputValue;
+          return inputValue === '' ? intl.formatMessage(messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(messages.noOptionsMessageWithInputValue, {
+            inputValue: inputValue
+          });
+        },
+        onBlur: typeof props.onBlur === 'function' ? function () {
+          var event = {
+            target: {
+              name: function () {
+                if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
+                // state as an array instead of a boolean only.
+                // Otherwise the shapes would clash on submission, as
+                // Formik will create an array on submission anyways.
+
+                return props.name ? "".concat(props.name, ".0") : undefined;
+              }()
+            },
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            persist: function persist() {}
+          };
+          props.onBlur(event);
+        } : undefined,
+        onChange: function onChange(nextSelectedOptions) {
+          // nextSelectedOptions is either an array, or a single option, or null
+          // depending on whether we're in multi-mode or not (isMulti)
+          var value = null;
+
+          if (props.isMulti) {
+            if (nextSelectedOptions) {
+              value = _mapInstanceProperty(nextSelectedOptions).call(nextSelectedOptions, function (option) {
+                return option.value;
+              });
+            } else {
+              value = [];
+            }
+          } else if (nextSelectedOptions) {
+            value = nextSelectedOptions.value;
+          }
+
+          props.onChange({
+            target: {
+              name: props.name,
+              value: value
+            },
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            persist: function persist() {}
+          });
+        },
+        onFocus: props.onFocus,
+        onInputChange: props.onInputChange,
+        options: props.options,
+        placeholder: placeholder,
+        tabIndex: props.tabIndex,
+        tabSelectsValue: props.tabSelectsValue,
+        value: selectedOptions,
+        iconLeft: props.iconLeft
+      })
+    }))
+  });
+};
+
+SelectInput.displayName = 'SelectInput'; // Both "true" and an empty array [] represent a touched state. The Boolean
+// conveniently handles both cases
+
+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));
+  }
+} : {};
+addStaticFields(SelectInput, _objectSpread(_objectSpread(_objectSpread({}, components), customizedComponents), {}, {
+  isTouched: SelectInput.isTouched
+}));
+var SelectInput$1 = SelectInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { SelectInput$1 as default, version };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@commercetools-uikit/select-input",
+  "description": "An input component getting a selection from the user.",
+  "version": "0.0.0-canary-2021830134526",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/inputs/select-input"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-select-input.cjs.js",
+  "module": "dist/commercetools-uikit-select-input.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "../../../../scripts/version.js replace"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.8",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@commercetools-uikit/constraints": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/design-system": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/icons": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/select-utils": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/utils": "12.2.0",
+    "@emotion/is-prop-valid": "1.1.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "lodash": "4.17.21",
+    "prop-types": "15.7.2",
+    "react-select": "4.3.1"
+  },
+  "devDependencies": {
+    "react": "17.0.2",
+    "react-intl": "5.20.7"
+  },
+  "peerDependencies": {
+    "react": "17.x",
+    "react-intl": "5.x"
+  }
+}