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

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

@@ -0,0 +1,449 @@
+import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+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 _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
+import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
+import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
+import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
+import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
+import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
+import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import requiredIf from 'react-required-if';
+import { createSequentialId, filterDataAttributes, getFieldId, SafeHTMLElement } from '@commercetools-uikit/utils';
+import Constraints from '@commercetools-uikit/constraints';
+import Spacings from '@commercetools-uikit/spacings';
+import FieldLabel from '@commercetools-uikit/field-label';
+import CreatableSelectInput from '@commercetools-uikit/creatable-select-input';
+import FieldErrors from '@commercetools-uikit/field-errors';
+import { jsx, jsxs } 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 _context8; _forEachInstanceProperty(_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context9; _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(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(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var sequentialId = createSequentialId('creatable-select-field-');
+
+var hasErrors = function hasErrors(errors) {
+  var _context;
+
+  return errors && _someInstanceProperty(_context = _Object$values(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(_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.isTouched(this.props.touched) && hasErrors(this.props.errors);
+      return jsx(Constraints.Horizontal, {
+        max: this.props.horizontalConstraint,
+        children: jsxs(Spacings.Stack, {
+          scale: "xs",
+          children: [jsx(FieldLabel, {
+            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
+          }), jsx(CreatableSelectInput, _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
+          }, filterDataAttributes(this.props))), jsx(FieldErrors, {
+            errors: this.props.errors,
+            isVisible: hasError,
+            renderError: this.props.renderError
+          })]
+        })
+      });
+    }
+  }]);
+
+  return CreatableSelectField;
+}(Component);
+
+CreatableSelectField.displayName = 'CreatableSelectField';
+CreatableSelectField.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+
+CreatableSelectField.getDerivedStateFromProps = function (props, state) {
+  return {
+    id: 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.string,
+
+  /**
+   * Horizontal size limit of the input fields.
+   */
+  horizontalConstraint: PropTypes.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+
+  /**
+   * A map of errors. Error messages for known errors are rendered automatically.
+   * <br />
+   * Unknown errors will be forwarded to `renderError`
+   */
+  errors: PropTypes.shape({
+    missing: PropTypes.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.func,
+
+  /**
+   * Indicates if the value is required. Shows an the "required asterisk" if so.
+   */
+  isRequired: PropTypes.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.arrayOf.apply(PropTypes, _concatInstanceProperty(_context3 = [PropTypes.bool]).call(_context3, rest)).apply(void 0, _concatInstanceProperty(_context4 = [props]).call(_context4, rest)) : PropTypes.bool.apply(PropTypes, _concatInstanceProperty(_context5 = [props]).call(_context5, rest));
+  },
+  // CreatableSelectInput
+
+  /**
+   * 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,
+
+  /**
+   * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
+   */
+  components: PropTypes.objectOf(PropTypes.func),
+
+  /**
+   * Custom method to filter whether an option should be displayed in the menu
+   */
+  filterOption: PropTypes.func,
+
+  /**
+   * The id to set on the SelectContainer component
+   */
+  containerId: PropTypes.string,
+
+  /**
+   * Is the select value clearable
+   */
+  isClearable: PropTypes.bool,
+
+  /**
+   * Is the select disabled
+   */
+  isDisabled: PropTypes.bool,
+
+  /**
+   * Is the select read-only
+   */
+  // eslint-disable-next-line react/no-unused-prop-types
+  isReadOnly: PropTypes.bool,
+
+  /**
+   * Override the built-in logic to detect whether an option is disabled
+   */
+  isOptionDisabled: PropTypes.func,
+
+  /**
+   * Support multiple selected options
+   */
+  isMulti: PropTypes.bool,
+
+  /**
+   * Whether to enable search functionality
+   */
+  isSearchable: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+
+  /**
+   * Maximum height of the menu before scrolling
+   */
+  maxMenuHeight: PropTypes.number,
+
+  /**
+   * 	Dom element to portal the select menu to
+   */
+  menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
+
+  /**
+   * z-index value for the menu portal
+   */
+  menuPortalZIndex: PropTypes.number,
+
+  /**
+   * whether the menu should block scroll while open
+   */
+  menuShouldBlockScroll: PropTypes.bool,
+
+  /**
+   * 	Name of the HTML Input (optional - without this, no input will be rendered)
+   */
+  name: PropTypes.string,
+
+  /**
+   * Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place).
+   * <br/>
+   * Gets called with `{ inputValue: String }`. `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
+   */
+  onBlur: PropTypes.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.func,
+
+  /**
+   * Handle focus events on the control
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * Handle change events on the input
+   */
+  onInputChange: PropTypes.func,
+
+  /**
+   * 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
+    }))
+  })])),
+
+  /**
+   * Placeholder text for the select value
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Sets the tabIndex attribute on the input
+   */
+  tabIndex: PropTypes.string,
+
+  /**
+   * Select the currently focused option when the user presses tab
+   */
+  tabSelectsValue: PropTypes.bool,
+
+  /**
+   * The value of the select; reflected by the selected option
+   */
+  value: function value(props) {
+    var _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.arrayOf(PropTypes.shape({
+      value: PropTypes.string.isRequired
+    })).apply(void 0, _concatInstanceProperty(_context6 = [props]).call(_context6, rest)) : PropTypes.shape({
+      value: PropTypes.string.isRequired
+    }).apply(void 0, _concatInstanceProperty(_context7 = [props]).call(_context7, rest));
+  },
+  showOptionGroupDivider: PropTypes.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.bool,
+
+  /**
+   * Gets the label for the "create new ..." option in the menu. Is given the current input value.
+   */
+  formatCreateLabel: PropTypes.func,
+
+  /**
+   * Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.
+   */
+  isValidNewOption: PropTypes.func,
+
+  /**
+   * Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.
+   */
+  getNewOptionData: PropTypes.func,
+
+  /**
+   * If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created.
+   */
+  onCreateOption: PropTypes.func,
+
+  /**
+   * Sets the position of the createOption element in your options list.
+   */
+  createOptionPosition: PropTypes.string,
+  // LabelField
+
+  /**
+   * Title of the label
+   */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.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(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
+    return props.hintIcon;
+  }),
+
+  /**
+   * Provides a description for the title.
+   */
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.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.func,
+
+  /**
+   * Icon to be displayed beside the hint text.
+   * <br />
+   * Will only get rendered when `hint` is passed as well.
+   */
+  hintIcon: PropTypes.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.node,
+
+  /**
+   * Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
+   */
+  iconLeft: PropTypes.node
+} : {};
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { CreatableSelectField as default, version };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@commercetools-uikit/creatable-select-field",
+  "description": "A controlled input component with validation states and a label getting a selection from the user, and where options can also be created by 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/fields/creatable-select-field"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-creatable-select-field.cjs.js",
+  "module": "dist/commercetools-uikit-creatable-select-field.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/creatable-select-input": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/design-system": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/field-errors": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/field-label": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/spacings": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/utils": "12.2.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "prop-types": "15.7.2",
+    "react-required-if": "1.0.3"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}