@commercetools-uikit/date-range-field 17.0.1 → 18.0.0

package/README.md

@@ -51,6 +51,8 @@ export default Example;
 | `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 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, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.&#xA;<br />&#xA;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`              | `boolean`                                                                                    |          |           | Indicates whether the field was touched. Errors will only be shown when the field was touched.                                                                                                                                                                        |
 | `name`                 | `string`                                                                                     |          |           | Used as HTML name of the input component.                                                                                                                                                                                                                             |
@@ -76,6 +78,12 @@ export default Example;
 (key: string, error?: boolean) => ReactNode;
 ```
 
+### Signature `renderWarning`
+
+```ts
+(key: string, warning?: boolean) => ReactNode;
+```
+
 ### Signature `onChange`
 
 ```ts

package/dist/commercetools-uikit-date-range-field.cjs.dev.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 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');
@@ -27,6 +27,7 @@ var Spacings = require('@commercetools-uikit/spacings');
 var FieldLabel = require('@commercetools-uikit/field-label');
 var DateRangeInput = require('@commercetools-uikit/date-range-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 DateRangeInput__default = /*#__PURE__*/_interopDefault(DateRangeInput);
 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('date-range-field-');
 const sequentialErrorsId = utils.createSequentialId('date-range-field-error-')();
+const sequentialWarningsId = utils.createSequentialId('date-range-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 DateRangeField = /*#__PURE__*/function (_Component) {
   _inherits(DateRangeField, _Component);
-  var _super = _createSuper(DateRangeField);
   function DateRangeField() {
     var _this;
     _classCallCheck(this, DateRangeField);
     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, DateRangeField, [...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 DateRangeField = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       const hasError = this.props.touched && hasErrors(this.props.errors);
+      const hasWarning = this.props.touched && hasWarnings(this.props.warnings);
       if (!this.props.isReadOnly) {
         process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateRangeField: `onChange` is required when field is not read only.') : void 0;
       }
@@ -109,6 +116,7 @@ let DateRangeField = /*#__PURE__*/function (_Component) {
             isDisabled: this.props.isDisabled,
             isReadOnly: this.props.isReadOnly,
             hasError: hasError,
+            hasWarning: hasWarning,
             placeholder: this.props.placeholder,
             horizontalConstraint: "scale"
           }, utils.filterDataAttributes(this.props)), {}, {
@@ -119,6 +127,11 @@ let DateRangeField = /*#__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
           })]
         })
       });
@@ -149,6 +162,8 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
   horizontalConstraint: _pt__default["default"].oneOf([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"].bool,
   name: _pt__default["default"].string,
@@ -169,7 +184,7 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
 var DateRangeField$1 = DateRangeField;
 
 // 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"] = DateRangeField$1;
 exports.version = version;

package/dist/commercetools-uikit-date-range-field.cjs.prod.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 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');
@@ -27,6 +27,7 @@ var Spacings = require('@commercetools-uikit/spacings');
 var FieldLabel = require('@commercetools-uikit/field-label');
 var DateRangeInput = require('@commercetools-uikit/date-range-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 }; }
@@ -47,27 +48,32 @@ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
 var DateRangeInput__default = /*#__PURE__*/_interopDefault(DateRangeInput);
 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('date-range-field-');
 const sequentialErrorsId = utils.createSequentialId('date-range-field-error-')();
+const sequentialWarningsId = utils.createSequentialId('date-range-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 DateRangeField = /*#__PURE__*/function (_Component) {
   _inherits(DateRangeField, _Component);
-  var _super = _createSuper(DateRangeField);
   function DateRangeField() {
     var _this;
     _classCallCheck(this, DateRangeField);
     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, DateRangeField, [...args]);
     _this.state = {
       // We generate an id in case no id is provided by the parent to attach the
       // label to the input component.
@@ -79,6 +85,7 @@ let DateRangeField = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       const hasError = this.props.touched && hasErrors(this.props.errors);
+      const hasWarning = this.props.touched && hasWarnings(this.props.warnings);
       if (!this.props.isReadOnly) ;
       if (this.props.hintIcon) ;
       return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
@@ -104,6 +111,7 @@ let DateRangeField = /*#__PURE__*/function (_Component) {
             isDisabled: this.props.isDisabled,
             isReadOnly: this.props.isReadOnly,
             hasError: hasError,
+            hasWarning: hasWarning,
             placeholder: this.props.placeholder,
             horizontalConstraint: "scale"
           }, utils.filterDataAttributes(this.props)), {}, {
@@ -114,6 +122,11 @@ let DateRangeField = /*#__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
           })]
         })
       });
@@ -143,7 +156,7 @@ DateRangeField.propTypes = {};
 var DateRangeField$1 = DateRangeField;
 
 // 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"] = DateRangeField$1;
 exports.version = version;

package/dist/commercetools-uikit-date-range-field.esm.js

@@ -1,9 +1,9 @@
 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';
@@ -23,28 +23,33 @@ import Spacings from '@commercetools-uikit/spacings';
 import FieldLabel from '@commercetools-uikit/field-label';
 import DateRangeInput from '@commercetools-uikit/date-range-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('date-range-field-');
 const sequentialErrorsId = createSequentialId('date-range-field-error-')();
+const sequentialWarningsId = createSequentialId('date-range-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 DateRangeField = /*#__PURE__*/function (_Component) {
   _inherits(DateRangeField, _Component);
-  var _super = _createSuper(DateRangeField);
   function DateRangeField() {
     var _this;
     _classCallCheck(this, DateRangeField);
     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, DateRangeField, [...args]);
     _this.state = {
       // We generate an id in case no id is provided by the parent to attach the
       // label to the input component.
@@ -56,6 +61,7 @@ let DateRangeField = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       const hasError = this.props.touched && hasErrors(this.props.errors);
+      const hasWarning = this.props.touched && hasWarnings(this.props.warnings);
       if (!this.props.isReadOnly) {
         process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'DateRangeField: `onChange` is required when field is not read only.') : void 0;
       }
@@ -85,6 +91,7 @@ let DateRangeField = /*#__PURE__*/function (_Component) {
             isDisabled: this.props.isDisabled,
             isReadOnly: this.props.isReadOnly,
             hasError: hasError,
+            hasWarning: hasWarning,
             placeholder: this.props.placeholder,
             horizontalConstraint: "scale"
           }, filterDataAttributes(this.props)), {}, {
@@ -95,6 +102,11 @@ let DateRangeField = /*#__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
           })]
         })
       });
@@ -125,6 +137,8 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
   horizontalConstraint: _pt.oneOf([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.bool,
   name: _pt.string,
@@ -145,6 +159,6 @@ DateRangeField.propTypes = process.env.NODE_ENV !== "production" ? {
 var DateRangeField$1 = DateRangeField;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "17.0.1";
+var version = "18.0.0";
 
 export { DateRangeField$1 as default, version };

package/dist/declarations/src/date-range-field.d.ts

@@ -1,6 +1,7 @@
 import { Component, type ReactElement, type ReactNode } from 'react';
 import type { MomentInput } from 'moment';
 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;
@@ -17,6 +18,8 @@ export type TDateRangeFieldProps = {
     horizontalConstraint?: 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;
     name?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/date-range-field",
   "description": "A controlled date input component for a date range, with validation states and a label.",
-  "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/date-range-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/date-range-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",