@commercetools-uikit/creatable-select-field 0.0.0-canary-2021830134526

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

@@ -0,0 +1,476 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+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 _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
+var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react = require('react');
+var PropTypes = require('prop-types');
+var requiredIf = require('react-required-if');
+var utils = require('@commercetools-uikit/utils');
+var Constraints = require('@commercetools-uikit/constraints');
+var Spacings = require('@commercetools-uikit/spacings');
+var FieldLabel = require('@commercetools-uikit/field-label');
+var CreatableSelectInput = require('@commercetools-uikit/creatable-select-input');
+var FieldErrors = require('@commercetools-uikit/field-errors');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+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 _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
+var CreatableSelectInput__default = /*#__PURE__*/_interopDefault(CreatableSelectInput);
+var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
+
+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 _context8; _forEachInstanceProperty__default['default'](_context8 = ownKeys(Object(source), true)).call(_context8, 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 _context9; _forEachInstanceProperty__default['default'](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default['default'](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default['default']) return false; if (_Reflect$construct__default['default'].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default['default'](Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var sequentialId = utils.createSequentialId('creatable-select-field-');
+
+var hasErrors = function hasErrors(errors) {
+  var _context;
+
+  return errors && _someInstanceProperty__default['default'](_context = _Object$values__default['default'](errors)).call(_context, Boolean);
+};
+
+var CreatableSelectField = /*#__PURE__*/function (_Component) {
+  _inherits(CreatableSelectField, _Component);
+
+  var _super = _createSuper(CreatableSelectField);
+
+  function CreatableSelectField() {
+    var _context2;
+
+    var _this;
+
+    _classCallCheck(this, CreatableSelectField);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, _concatInstanceProperty__default['default'](_context2 = [this]).call(_context2, args));
+    _this.state = {
+      // We generate an id in case no id is provided by the parent to attach the
+      // label to the input component.
+      id: _this.props.id
+    };
+    return _this;
+  }
+
+  _createClass(CreatableSelectField, [{
+    key: "render",
+    value: function render() {
+      var hasError = CreatableSelectInput__default['default'].isTouched(this.props.touched) && hasErrors(this.props.errors);
+      return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+        max: this.props.horizontalConstraint,
+        children: jsxRuntime.jsxs(Spacings__default['default'].Stack, {
+          scale: "xs",
+          children: [jsxRuntime.jsx(FieldLabel__default['default'], {
+            title: this.props.title,
+            hint: this.props.hint,
+            description: this.props.description,
+            onInfoButtonClick: this.props.onInfoButtonClick,
+            hintIcon: this.props.hintIcon,
+            badge: this.props.badge,
+            hasRequiredIndicator: this.props.isRequired,
+            htmlFor: this.state.id
+          }), jsxRuntime.jsx(CreatableSelectInput__default['default'], _objectSpread({
+            horizontalConstraint: "scale",
+            hasError: hasError,
+            "aria-label": this.props['aria-label'],
+            "aria-labelledby": this.props['aria-labelledby'],
+            isAutofocussed: this.props.isAutofocussed,
+            backspaceRemovesValue: this.props.backspaceRemovesValue,
+            components: this.props.components,
+            filterOption: this.props.filterOption,
+            id: this.state.id,
+            containerId: this.props.containerId,
+            isClearable: this.props.isClearable,
+            isDisabled: this.props.isDisabled,
+            isOptionDisabled: this.props.isOptionDisabled,
+            isMulti: this.props.isMulti,
+            isSearchable: this.props.isSearchable,
+            hasWarning: this.props.hasWarning,
+            maxMenuHeight: this.props.maxMenuHeight,
+            menuPortalTarget: this.props.menuPortalTarget,
+            menuPortalZIndex: this.props.menuPortalZIndex,
+            menuShouldBlockScroll: this.props.menuShouldBlockScroll,
+            name: this.props.name,
+            noOptionsMessage: this.props.noOptionsMessage,
+            onBlur: this.props.onBlur,
+            onChange: this.props.onChange,
+            onFocus: this.props.onFocus,
+            onInputChange: this.props.onInputChange,
+            options: this.props.options,
+            placeholder: this.props.placeholder,
+            tabIndex: this.props.tabIndex,
+            tabSelectsValue: this.props.tabSelectsValue,
+            value: this.props.value // Creatable props
+            ,
+            allowCreateWhileLoading: this.props.allowCreateWhileLoading,
+            formatCreateLabel: this.props.formatCreateLabel,
+            isValidNewOption: this.props.isValidNewOption,
+            getNewOptionData: this.props.getNewOptionData,
+            onCreateOption: this.props.onCreateOption,
+            createOptionPosition: this.props.createOptionPosition,
+            showOptionGroupDivider: this.props.showOptionGroupDivider,
+            iconLeft: this.props.iconLeft
+          }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default['default'], {
+            errors: this.props.errors,
+            isVisible: hasError,
+            renderError: this.props.renderError
+          })]
+        })
+      });
+    }
+  }]);
+
+  return CreatableSelectField;
+}(react.Component);
+
+CreatableSelectField.displayName = 'CreatableSelectField';
+CreatableSelectField.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+
+CreatableSelectField.getDerivedStateFromProps = function (props, state) {
+  return {
+    id: utils.getFieldId(props, state, sequentialId)
+  };
+};
+CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+  // CreatableSelectField
+
+  /**
+   * Used as HTML id property. An id is auto-generated when it is not specified.
+   */
+  id: PropTypes__default['default'].string,
+
+  /**
+   * Horizontal size limit of the input fields.
+   */
+  horizontalConstraint: PropTypes__default['default'].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+
+  /**
+   * A map of errors. Error messages for known errors are rendered automatically.
+   * <br />
+   * Unknown errors will be forwarded to `renderError`
+   */
+  errors: PropTypes__default['default'].shape({
+    missing: PropTypes__default['default'].bool
+  }),
+
+  /**
+   * Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
+   * <br />
+   * Signature: `(key, error) => React.node`
+   */
+  renderError: PropTypes__default['default'].func,
+
+  /**
+   * Indicates if the value is required. Shows an the "required asterisk" if so.
+   */
+  isRequired: PropTypes__default['default'].bool,
+
+  /**
+   * Indicates whether the field was touched. Errors will only be shown when the field was touched.
+   */
+  touched: function touched(props) {
+    var _context3, _context4, _context5;
+
+    for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      rest[_key2 - 1] = arguments[_key2];
+    }
+
+    return props.isMulti ? PropTypes__default['default'].arrayOf.apply(PropTypes__default['default'], _concatInstanceProperty__default['default'](_context3 = [PropTypes__default['default'].bool]).call(_context3, rest)).apply(void 0, _concatInstanceProperty__default['default'](_context4 = [props]).call(_context4, rest)) : PropTypes__default['default'].bool.apply(PropTypes__default['default'], _concatInstanceProperty__default['default'](_context5 = [props]).call(_context5, rest));
+  },
+  // CreatableSelectInput
+
+  /**
+   * 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,
+
+  /**
+   * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
+   */
+  components: PropTypes__default['default'].objectOf(PropTypes__default['default'].func),
+
+  /**
+   * Custom method to filter whether an option should be displayed in the menu
+   */
+  filterOption: PropTypes__default['default'].func,
+
+  /**
+   * The id to set on the SelectContainer component
+   */
+  containerId: PropTypes__default['default'].string,
+
+  /**
+   * Is the select value clearable
+   */
+  isClearable: PropTypes__default['default'].bool,
+
+  /**
+   * Is the select disabled
+   */
+  isDisabled: PropTypes__default['default'].bool,
+
+  /**
+   * Is the select read-only
+   */
+  // eslint-disable-next-line react/no-unused-prop-types
+  isReadOnly: PropTypes__default['default'].bool,
+
+  /**
+   * Override the built-in logic to detect whether an option is disabled
+   */
+  isOptionDisabled: PropTypes__default['default'].func,
+
+  /**
+   * Support multiple selected options
+   */
+  isMulti: PropTypes__default['default'].bool,
+
+  /**
+   * Whether to enable search functionality
+   */
+  isSearchable: PropTypes__default['default'].bool,
+  hasWarning: PropTypes__default['default'].bool,
+
+  /**
+   * Maximum height of the menu before scrolling
+   */
+  maxMenuHeight: PropTypes__default['default'].number,
+
+  /**
+   * 	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,
+
+  /**
+   * 	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).
+   * <br/>
+   * Gets called with `{ inputValue: String }`. `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
+   */
+  onBlur: PropTypes__default['default'].func,
+
+  /**
+   * Called with a fake event when value changes.
+   * <br />
+   * The event's `target.name` will be the name supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onChange: PropTypes__default['default'].func,
+
+  /**
+   * Handle focus events on the control
+   */
+  onFocus: PropTypes__default['default'].func,
+
+  /**
+   * Handle change events on the input
+   */
+  onInputChange: PropTypes__default['default'].func,
+
+  /**
+   * 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
+    }))
+  })])),
+
+  /**
+   * Placeholder text for the select value
+   */
+  placeholder: PropTypes__default['default'].string,
+
+  /**
+   * 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 _context6, _context7;
+
+    for (var _len3 = arguments.length, rest = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+      rest[_key3 - 1] = arguments[_key3];
+    }
+
+    return props.isMulti ? PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
+      value: PropTypes__default['default'].string.isRequired
+    })).apply(void 0, _concatInstanceProperty__default['default'](_context6 = [props]).call(_context6, rest)) : PropTypes__default['default'].shape({
+      value: PropTypes__default['default'].string.isRequired
+    }).apply(void 0, _concatInstanceProperty__default['default'](_context7 = [props]).call(_context7, rest));
+  },
+  showOptionGroupDivider: PropTypes__default['default'].bool,
+  // Creatable props
+
+  /**
+   * Allow options to be created while the isLoading prop is true. Useful to prevent the "create new ..." option being displayed while async results are still being loaded.
+   */
+  allowCreateWhileLoading: PropTypes__default['default'].bool,
+
+  /**
+   * Gets the label for the "create new ..." option in the menu. Is given the current input value.
+   */
+  formatCreateLabel: PropTypes__default['default'].func,
+
+  /**
+   * Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.
+   */
+  isValidNewOption: PropTypes__default['default'].func,
+
+  /**
+   * Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.
+   */
+  getNewOptionData: PropTypes__default['default'].func,
+
+  /**
+   * If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created.
+   */
+  onCreateOption: PropTypes__default['default'].func,
+
+  /**
+   * Sets the position of the createOption element in your options list.
+   */
+  createOptionPosition: PropTypes__default['default'].string,
+  // LabelField
+
+  /**
+   * Title of the label
+   */
+  title: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].node]).isRequired,
+
+  /**
+   * Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
+   */
+  hint: requiredIf__default['default'](PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].node]), function (props) {
+    return props.hintIcon;
+  }),
+
+  /**
+   * Provides a description for the title.
+   */
+  description: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].node]),
+
+  /**
+   * Function called when info button is pressed.
+   * <br />
+   * Info button will only be visible when this prop is passed.
+   * <br />
+   * Signature: `(event) => void`
+   */
+  onInfoButtonClick: PropTypes__default['default'].func,
+
+  /**
+   * Icon to be displayed beside the hint text.
+   * <br />
+   * Will only get rendered when `hint` is passed as well.
+   */
+  hintIcon: PropTypes__default['default'].node,
+
+  /**
+   * Badge to be displayed beside the label.
+   * <br />
+   * Might be used to display additional information about the content of the field (E.g verified email)
+   */
+  badge: PropTypes__default['default'].node,
+
+  /**
+   * 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
+} : {};
+
+// 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'] = CreatableSelectField;
+exports.version = version;

package/dist/commercetools-uikit-creatable-select-field.cjs.js

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

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

@@ -0,0 +1,181 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+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 _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
+var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react = require('react');
+require('prop-types');
+require('react-required-if');
+var utils = require('@commercetools-uikit/utils');
+var Constraints = require('@commercetools-uikit/constraints');
+var Spacings = require('@commercetools-uikit/spacings');
+var FieldLabel = require('@commercetools-uikit/field-label');
+var CreatableSelectInput = require('@commercetools-uikit/creatable-select-input');
+var FieldErrors = require('@commercetools-uikit/field-errors');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+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 _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
+var CreatableSelectInput__default = /*#__PURE__*/_interopDefault(CreatableSelectInput);
+var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
+
+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 _context8; _forEachInstanceProperty__default['default'](_context8 = ownKeys(Object(source), true)).call(_context8, 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 _context9; _forEachInstanceProperty__default['default'](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default['default'](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default['default']) return false; if (_Reflect$construct__default['default'].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default['default'](Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var sequentialId = utils.createSequentialId('creatable-select-field-');
+
+var hasErrors = function hasErrors(errors) {
+  var _context;
+
+  return errors && _someInstanceProperty__default['default'](_context = _Object$values__default['default'](errors)).call(_context, Boolean);
+};
+
+var CreatableSelectField = /*#__PURE__*/function (_Component) {
+  _inherits(CreatableSelectField, _Component);
+
+  var _super = _createSuper(CreatableSelectField);
+
+  function CreatableSelectField() {
+    var _context2;
+
+    var _this;
+
+    _classCallCheck(this, CreatableSelectField);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, _concatInstanceProperty__default['default'](_context2 = [this]).call(_context2, args));
+    _this.state = {
+      // We generate an id in case no id is provided by the parent to attach the
+      // label to the input component.
+      id: _this.props.id
+    };
+    return _this;
+  }
+
+  _createClass(CreatableSelectField, [{
+    key: "render",
+    value: function render() {
+      var hasError = CreatableSelectInput__default['default'].isTouched(this.props.touched) && hasErrors(this.props.errors);
+      return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+        max: this.props.horizontalConstraint,
+        children: jsxRuntime.jsxs(Spacings__default['default'].Stack, {
+          scale: "xs",
+          children: [jsxRuntime.jsx(FieldLabel__default['default'], {
+            title: this.props.title,
+            hint: this.props.hint,
+            description: this.props.description,
+            onInfoButtonClick: this.props.onInfoButtonClick,
+            hintIcon: this.props.hintIcon,
+            badge: this.props.badge,
+            hasRequiredIndicator: this.props.isRequired,
+            htmlFor: this.state.id
+          }), jsxRuntime.jsx(CreatableSelectInput__default['default'], _objectSpread({
+            horizontalConstraint: "scale",
+            hasError: hasError,
+            "aria-label": this.props['aria-label'],
+            "aria-labelledby": this.props['aria-labelledby'],
+            isAutofocussed: this.props.isAutofocussed,
+            backspaceRemovesValue: this.props.backspaceRemovesValue,
+            components: this.props.components,
+            filterOption: this.props.filterOption,
+            id: this.state.id,
+            containerId: this.props.containerId,
+            isClearable: this.props.isClearable,
+            isDisabled: this.props.isDisabled,
+            isOptionDisabled: this.props.isOptionDisabled,
+            isMulti: this.props.isMulti,
+            isSearchable: this.props.isSearchable,
+            hasWarning: this.props.hasWarning,
+            maxMenuHeight: this.props.maxMenuHeight,
+            menuPortalTarget: this.props.menuPortalTarget,
+            menuPortalZIndex: this.props.menuPortalZIndex,
+            menuShouldBlockScroll: this.props.menuShouldBlockScroll,
+            name: this.props.name,
+            noOptionsMessage: this.props.noOptionsMessage,
+            onBlur: this.props.onBlur,
+            onChange: this.props.onChange,
+            onFocus: this.props.onFocus,
+            onInputChange: this.props.onInputChange,
+            options: this.props.options,
+            placeholder: this.props.placeholder,
+            tabIndex: this.props.tabIndex,
+            tabSelectsValue: this.props.tabSelectsValue,
+            value: this.props.value // Creatable props
+            ,
+            allowCreateWhileLoading: this.props.allowCreateWhileLoading,
+            formatCreateLabel: this.props.formatCreateLabel,
+            isValidNewOption: this.props.isValidNewOption,
+            getNewOptionData: this.props.getNewOptionData,
+            onCreateOption: this.props.onCreateOption,
+            createOptionPosition: this.props.createOptionPosition,
+            showOptionGroupDivider: this.props.showOptionGroupDivider,
+            iconLeft: this.props.iconLeft
+          }, utils.filterDataAttributes(this.props))), jsxRuntime.jsx(FieldErrors__default['default'], {
+            errors: this.props.errors,
+            isVisible: hasError,
+            renderError: this.props.renderError
+          })]
+        })
+      });
+    }
+  }]);
+
+  return CreatableSelectField;
+}(react.Component);
+
+CreatableSelectField.displayName = 'CreatableSelectField';
+CreatableSelectField.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+
+CreatableSelectField.getDerivedStateFromProps = function (props, state) {
+  return {
+    id: utils.getFieldId(props, state, sequentialId)
+  };
+};
+CreatableSelectField.propTypes = {};
+
+// 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'] = CreatableSelectField;
+exports.version = version;