npm - @commercetools-uikit/creatable-select-field - Versions diffs - 17.0.1 → 18.0.0 - Mend

@commercetools-uikit/creatable-select-field 17.0.1 → 18.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -55,6 +55,8 @@ export default Example;
 | `horizontalConstraint`    | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          | `'scale'` | Horizontal size limit of the input fields.                                                                                                                                                                                                                                                                                                                                                               |
 | `errors`                  | `Record`                                                                                              |          |           | A map of errors. Error messages for known errors are rendered automatically.&#xA;<br>&#xA;Unknown errors will be forwarded to `renderError`                                                                                                                                                                                                                                                              |
 | `renderError`             | `Function`<br/>[See signature.](#signature-renderError)                                               |          |           | 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.                                                                                                                                                                                                                                                        |
+| `warnings`                | `Record`                                                                                              |          |           | A map of warnings. Warning messages for known warnings are rendered automatically.&#xA;<br />&#xA;Unknown warnings will be forwarded to `renderWarning`                                                                                                                                                                                                                                                  |
+| `renderWarning`           | `Function`<br/>[See signature.](#signature-renderWarning)                                             |          |           | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning.                                                                                                                                                                                                                                                  |
 | `isRequired`              | `boolean`                                                                                             |          |           | Indicates if the value is required. Shows an the "required asterisk" if so.                                                                                                                                                                                                                                                                                                                              |
 | `touched`                 | `union`<br/>Possible values:<br/>`boolean[] , boolean`                                                |          |           | Indicates whether the field was touched. Errors will only be shown when the field was touched.                                                                                                                                                                                                                                                                                                           |
 | `aria-label`              | `CreatableProps['aria-label']`                                                                        |          |           | Aria label (for assistive tech)&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                                          |
@@ -70,7 +72,7 @@ export default Example;
 | `isOptionDisabled`        | `CreatableProps['isOptionDisabled']`                                                                  |          |           | Override the built-in logic to detect whether an option is disabled&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                      |
 | `isMulti`                 | `CreatableProps['isMulti']`                                                                           |          |           | Support multiple selected options&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                                        |
 | `isSearchable`            | `CreatableProps['isSearchable']`                                                                      |          |           | Whether to enable search functionality&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                                   |
-| `hasWarning`              | `boolean`                                                                                             |          |           | Indicates the input field has an error                                                                                                                                                                                                                                                                                                                                                                   |
+| `hasWarning`              | `boolean`                                                                                             |          |           | Indicates the input field has an error&#xA;@deprecated Please use the `warnings` prop instead so users know the reason why the field is in warning state.                                                                                                                                                                                                                                                |
 | `maxMenuHeight`           | `CreatableProps['maxMenuHeight']`                                                                     |          |           | Maximum height of the menu before scrolling&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                              |
 | `menuPortalTarget`        | `CreatableProps['menuPortalTarget']`                                                                  |          |           | Dom element to portal the select menu to&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                                 |
 | `menuPortalZIndex`        | `number`                                                                                              |          |           | z-index value for the menu portal&#xA;<br>&#xA;Use in conjunction with `menuPortalTarget`                                                                                                                                                                                                                                                                                                                |
@@ -109,6 +111,12 @@ export default Example;
 (key: string, error?: boolean) => ReactNode;
 ```
+### Signature `renderWarning`
+```ts
+(key: string, warning?: boolean) => ReactNode;
+```
 ### Signature `onBlur`
 ```ts

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

@@ -14,9 +14,9 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 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 _inherits = require('@babel/runtime-corejs3/helpers/inherits');
 var _pt = require('prop-types');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
@@ -28,6 +28,7 @@ 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 FieldWarnings = require('@commercetools-uikit/field-warnings');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -50,27 +51,32 @@ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
 var CreatableSelectInput__default = /*#__PURE__*/_interopDefault(CreatableSelectInput);
 var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
+var FieldWarnings__default = /*#__PURE__*/_interopDefault(FieldWarnings);
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, 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; } }
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
 const sequentialId = utils.createSequentialId('creatable-select-field-');
 const sequentialErrorsId = utils.createSequentialId('creatable-select-field-error-')();
+const sequentialWarningsId = utils.createSequentialId('creatable-select-field-warning-')();
 const hasErrors = errors => {
   var _context;
   return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
 };
+const hasWarnings = warnings => {
+  var _context2;
+  return warnings && _someInstanceProperty__default["default"](_context2 = _Object$values__default["default"](warnings)).call(_context2, Boolean);
+};
 let CreatableSelectField = /*#__PURE__*/function (_Component) {
   _inherits(CreatableSelectField, _Component);
-  var _super = _createSuper(CreatableSelectField);
   function CreatableSelectField() {
     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(this, ...args);
+    _this = _callSuper(this, CreatableSelectField, [...args]);
     _this.state = {
       // We generate an id in case no id is provided by the parent to attach the
       // label to the input component.
@@ -82,6 +88,7 @@ let CreatableSelectField = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       const hasError = CreatableSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
+      const hasWarning = this.props.hasWarning || CreatableSelectInput__default["default"].isTouched(this.props.touched) && hasWarnings(this.props.warnings);
       if (!this.props.isReadOnly) {
         process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'CreatableSelectField: `onChange` is required when field is not read only.') : void 0;
       }
@@ -123,7 +130,7 @@ let CreatableSelectField = /*#__PURE__*/function (_Component) {
             isOptionDisabled: this.props.isOptionDisabled,
             isMulti: this.props.isMulti,
             isSearchable: this.props.isSearchable,
-            hasWarning: this.props.hasWarning,
+            hasWarning: hasWarning,
             maxMenuHeight: this.props.maxMenuHeight,
             menuPortalTarget: this.props.menuPortalTarget,
             menuPortalZIndex: this.props.menuPortalZIndex,
@@ -154,6 +161,11 @@ let CreatableSelectField = /*#__PURE__*/function (_Component) {
             errors: this.props.errors,
             isVisible: hasError,
             renderError: this.props.renderError
+          }), jsxRuntime.jsx(FieldWarnings__default["default"], {
+            id: sequentialWarningsId,
+            warnings: this.props.warnings,
+            isVisible: hasWarning,
+            renderWarning: this.props.renderWarning
           })]
         })
       });
@@ -183,6 +195,8 @@ CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
   errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
   renderError: _pt__default["default"].func,
+  warnings: _pt__default["default"].objectOf(_pt__default["default"].bool),
+  renderWarning: _pt__default["default"].func,
   isRequired: _pt__default["default"].bool,
   touched: _pt__default["default"].oneOfType([_pt__default["default"].arrayOf(_pt__default["default"].bool), _pt__default["default"].bool]),
   isAutofocussed: _pt__default["default"].bool,
@@ -211,7 +225,7 @@ CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 // NOTE: This string will be replaced on build time with the package version.
-var version = "17.0.1";
+var version = "18.0.0";
 exports["default"] = CreatableSelectField;
 exports.version = version;

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

@@ -14,9 +14,9 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 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 _inherits = require('@babel/runtime-corejs3/helpers/inherits');
 require('prop-types');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
@@ -28,6 +28,7 @@ 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 FieldWarnings = require('@commercetools-uikit/field-warnings');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -48,27 +49,32 @@ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
 var CreatableSelectInput__default = /*#__PURE__*/_interopDefault(CreatableSelectInput);
 var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
+var FieldWarnings__default = /*#__PURE__*/_interopDefault(FieldWarnings);
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, 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; } }
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
 const sequentialId = utils.createSequentialId('creatable-select-field-');
 const sequentialErrorsId = utils.createSequentialId('creatable-select-field-error-')();
+const sequentialWarningsId = utils.createSequentialId('creatable-select-field-warning-')();
 const hasErrors = errors => {
   var _context;
   return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
 };
+const hasWarnings = warnings => {
+  var _context2;
+  return warnings && _someInstanceProperty__default["default"](_context2 = _Object$values__default["default"](warnings)).call(_context2, Boolean);
+};
 let CreatableSelectField = /*#__PURE__*/function (_Component) {
   _inherits(CreatableSelectField, _Component);
-  var _super = _createSuper(CreatableSelectField);
   function CreatableSelectField() {
     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(this, ...args);
+    _this = _callSuper(this, CreatableSelectField, [...args]);
     _this.state = {
       // We generate an id in case no id is provided by the parent to attach the
       // label to the input component.
@@ -80,6 +86,7 @@ let CreatableSelectField = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       const hasError = CreatableSelectInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
+      const hasWarning = this.props.hasWarning || CreatableSelectInput__default["default"].isTouched(this.props.touched) && hasWarnings(this.props.warnings);
       if (!this.props.isReadOnly) ;
       if (this.props.hintIcon) ;
       if (this.props.isMulti) ;
@@ -114,7 +121,7 @@ let CreatableSelectField = /*#__PURE__*/function (_Component) {
             isOptionDisabled: this.props.isOptionDisabled,
             isMulti: this.props.isMulti,
             isSearchable: this.props.isSearchable,
-            hasWarning: this.props.hasWarning,
+            hasWarning: hasWarning,
             maxMenuHeight: this.props.maxMenuHeight,
             menuPortalTarget: this.props.menuPortalTarget,
             menuPortalZIndex: this.props.menuPortalZIndex,
@@ -145,6 +152,11 @@ let CreatableSelectField = /*#__PURE__*/function (_Component) {
             errors: this.props.errors,
             isVisible: hasError,
             renderError: this.props.renderError
+          }), jsxRuntime.jsx(FieldWarnings__default["default"], {
+            id: sequentialWarningsId,
+            warnings: this.props.warnings,
+            isVisible: hasWarning,
+            renderWarning: this.props.renderWarning
           })]
         })
       });
@@ -173,7 +185,7 @@ CreatableSelectField.getDerivedStateFromProps = (props, state) => ({
 CreatableSelectField.propTypes = {};
 // NOTE: This string will be replaced on build time with the package version.
-var version = "17.0.1";
+var version = "18.0.0";
 exports["default"] = CreatableSelectField;
 exports.version = version;

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

@@ -10,9 +10,9 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
 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 _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
 import _pt from 'prop-types';
 import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
 import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
@@ -24,28 +24,33 @@ 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 FieldWarnings from '@commercetools-uikit/field-warnings';
 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); 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, 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; } }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
 const sequentialId = createSequentialId('creatable-select-field-');
 const sequentialErrorsId = createSequentialId('creatable-select-field-error-')();
+const sequentialWarningsId = createSequentialId('creatable-select-field-warning-')();
 const hasErrors = errors => {
   var _context;
   return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
 };
+const hasWarnings = warnings => {
+  var _context2;
+  return warnings && _someInstanceProperty(_context2 = _Object$values(warnings)).call(_context2, Boolean);
+};
 let CreatableSelectField = /*#__PURE__*/function (_Component) {
   _inherits(CreatableSelectField, _Component);
-  var _super = _createSuper(CreatableSelectField);
   function CreatableSelectField() {
     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(this, ...args);
+    _this = _callSuper(this, CreatableSelectField, [...args]);
     _this.state = {
       // We generate an id in case no id is provided by the parent to attach the
       // label to the input component.
@@ -57,6 +62,7 @@ let CreatableSelectField = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       const hasError = CreatableSelectInput.isTouched(this.props.touched) && hasErrors(this.props.errors);
+      const hasWarning = this.props.hasWarning || CreatableSelectInput.isTouched(this.props.touched) && hasWarnings(this.props.warnings);
       if (!this.props.isReadOnly) {
         process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'CreatableSelectField: `onChange` is required when field is not read only.') : void 0;
       }
@@ -98,7 +104,7 @@ let CreatableSelectField = /*#__PURE__*/function (_Component) {
             isOptionDisabled: this.props.isOptionDisabled,
             isMulti: this.props.isMulti,
             isSearchable: this.props.isSearchable,
-            hasWarning: this.props.hasWarning,
+            hasWarning: hasWarning,
             maxMenuHeight: this.props.maxMenuHeight,
             menuPortalTarget: this.props.menuPortalTarget,
             menuPortalZIndex: this.props.menuPortalZIndex,
@@ -129,6 +135,11 @@ let CreatableSelectField = /*#__PURE__*/function (_Component) {
             errors: this.props.errors,
             isVisible: hasError,
             renderError: this.props.renderError
+          }), jsx(FieldWarnings, {
+            id: sequentialWarningsId,
+            warnings: this.props.warnings,
+            isVisible: hasWarning,
+            renderWarning: this.props.renderWarning
           })]
         })
       });
@@ -158,6 +169,8 @@ CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
   errors: _pt.objectOf(_pt.bool),
   renderError: _pt.func,
+  warnings: _pt.objectOf(_pt.bool),
+  renderWarning: _pt.func,
   isRequired: _pt.bool,
   touched: _pt.oneOfType([_pt.arrayOf(_pt.bool), _pt.bool]),
   isAutofocussed: _pt.bool,
@@ -186,6 +199,6 @@ CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 // NOTE: This string will be replaced on build time with the package version.
-var version = "17.0.1";
+var version = "18.0.0";
 export { CreatableSelectField as default, version };

package/dist/declarations/src/creatable-select-field.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import type { GroupBase, ActionMeta } from 'react-select';
 import type { CreatableProps } from 'react-select/creatable';
 type ReactSelectCreatableProps = CreatableProps<unknown, boolean, GroupBase<unknown>>;
 type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
+type TFieldWarnings = Record<string, boolean>;
 type TFieldErrors = Record<string, boolean>;
 type TCustomFormErrors<Values> = {
     [K in keyof Values]?: TFieldErrors;
@@ -27,6 +28,8 @@ export type TCreatableSelectFieldProps = {
     horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
     errors?: TFieldErrors;
     renderError?: TErrorRenderer;
+    warnings?: TFieldWarnings;
+    renderWarning?: (key: string, warning?: boolean) => ReactNode;
     isRequired?: boolean;
     touched?: boolean[] | boolean;
     'aria-label'?: ReactSelectCreatableProps['aria-label'];

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "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": "17.0.1",
+  "version": "18.0.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,13 +21,14 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "17.0.1",
-    "@commercetools-uikit/creatable-select-input": "17.0.1",
-    "@commercetools-uikit/design-system": "17.0.1",
-    "@commercetools-uikit/field-errors": "17.0.1",
-    "@commercetools-uikit/field-label": "17.0.1",
-    "@commercetools-uikit/spacings": "17.0.1",
-    "@commercetools-uikit/utils": "17.0.1",
+    "@commercetools-uikit/constraints": "18.0.0",
+    "@commercetools-uikit/creatable-select-input": "18.0.0",
+    "@commercetools-uikit/design-system": "18.0.0",
+    "@commercetools-uikit/field-errors": "18.0.0",
+    "@commercetools-uikit/field-label": "18.0.0",
+    "@commercetools-uikit/field-warnings": "18.0.0",
+    "@commercetools-uikit/spacings": "18.0.0",
+    "@commercetools-uikit/utils": "18.0.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",