@semcore/date-picker 4.35.0 → 4.36.0

package/lib/es6/components/InputTrigger.js

@@ -22,10 +22,11 @@ var _excluded = ["children", "id", "role", "aria-haspopup", "aria-expanded", "ar
   _excluded3 = ["value", "onChange", "onDisplayedPeriodChange", "locale", "w", "ariaHasPopup"],
   _excluded4 = ["value", "locale", "onDisplayedPeriodChange", "ariaHasPopup"],
   _excluded5 = ["value", "locale", "onDisplayedPeriodChange", "ariaHasPopup"],
-  _excluded6 = ["date", "onDateChange", "onDisplayedPeriodChange", "locale", "styles", "parts", "disabledDates", "forwardRef", "placeholders", "labelPrefix", "__excludeProps", "Root"];
+  _excluded6 = ["date", "onDateChange", "onDisplayedPeriodChange", "locale", "styles", "parts", "disabledDates", "forwardRef", "placeholders", "labelPrefix", "onMaskPipeBlock", "__excludeProps", "Root"];
 import React from 'react';
 import BaseTrigger from '@semcore/base-trigger';
 import InputMask from '@semcore/input-mask';
+import Tooltip from '@semcore/tooltip';
 import { Flex, Box } from '@semcore/flex-box';
 import Calendar from '@semcore/icon/Calendar/m';
 import createComponent, { Root, sstyled, Component } from '@semcore/core';
@@ -33,32 +34,33 @@ import NeighborLocation from '@semcore/neighbor-location';
 import includesDate from '../utils/includesDate';
 import dayjs from 'dayjs';
 /*__reshadow-styles__:"../style/date-picker.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPopper_9t2ng_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_9t2ng_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_9t2ng_gg_:active,.___SPopper_9t2ng_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_9t2ng_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_9t2ng_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_9t2ng_gg_,.___STitle_9t2ng_gg_{display:flex;align-items:center}.___STitle_9t2ng_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_9t2ng_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_9t2ng_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_9t2ng_gg_ .___SInner_9t2ng_gg_{justify-content:flex-start}.___SInputMask_9t2ng_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal}.___SIndicator_9t2ng_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_9t2ng_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_9t2ng_gg_._range_value_9t2ng_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_9t2ng_gg_._range_compare_9t2ng_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_9t2ng_gg_.__disabled_9t2ng_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_9t2ng_gg_{position:absolute;pointer-events:none}.___SDateRange_9t2ng_gg_ .___SMask_9t2ng_gg_,.___SDateRange_9t2ng_gg_ .___SValue_9t2ng_gg_,.___SSingleDateInput_9t2ng_gg_ .___SMask_9t2ng_gg_,.___SSingleDateInput_9t2ng_gg_ .___SValue_9t2ng_gg_{opacity:0}.___SSingleDateInput_9t2ng_gg_:focus-within .___SHumanizedDate_9t2ng_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_9t2ng_gg_:focus-within .___SMask_9t2ng_gg_,.___SSingleDateInput_9t2ng_gg_:focus-within .___SValue_9t2ng_gg_{opacity:1}.___SDateRange_9t2ng_gg_:focus-within .___SHumanizedDate_9t2ng_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_9t2ng_gg_:focus-within .___SMask_9t2ng_gg_,.___SDateRange_9t2ng_gg_:focus-within .___SValue_9t2ng_gg_{opacity:1}.___SInputMask_9t2ng_gg_.__noHumanizedDate_9t2ng_gg_ .___SMask_9t2ng_gg_,.___SInputMask_9t2ng_gg_.__noHumanizedDate_9t2ng_gg_ .___SValue_9t2ng_gg_{opacity:1}.___SDateRange_9t2ng_gg_ .___SInputMask_9t2ng_gg_:focus-within .___SMask_9t2ng_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_9t2ng_gg_:focus-within .___SRangeSep_9t2ng_gg_,.___SRangeSep_9t2ng_gg_.__fulfilled_9t2ng_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_9t2ng_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_9t2ng_gg_,.___SRangeComparatorHeader_9t2ng_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_9t2ng_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_9t2ng_gg_,.___SPeriodsList_9t2ng_gg_{padding:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "9t2ng_gg_") /*__reshadow_css_end__*/, {
-  "__SHeader": "___SHeader_9t2ng_gg_",
-  "__STitle": "___STitle_9t2ng_gg_",
-  "__SToday": "___SToday_9t2ng_gg_",
-  "__SPeriod": "___SPeriod_9t2ng_gg_",
-  "__SButton": "___SButton_9t2ng_gg_",
-  "__SInner": "___SInner_9t2ng_gg_",
-  "__SInputMask": "___SInputMask_9t2ng_gg_",
-  "__SIndicator": "___SIndicator_9t2ng_gg_",
-  "__SRangeIndicator": "___SRangeIndicator_9t2ng_gg_",
-  "_range_value": "_range_value_9t2ng_gg_",
-  "_range_compare": "_range_compare_9t2ng_gg_",
-  "_disabled": "__disabled_9t2ng_gg_",
-  "__SHumanizedDate": "___SHumanizedDate_9t2ng_gg_",
-  "__SSingleDateInput": "___SSingleDateInput_9t2ng_gg_",
-  "__SValue": "___SValue_9t2ng_gg_",
-  "__SDateRange": "___SDateRange_9t2ng_gg_",
-  "__SMask": "___SMask_9t2ng_gg_",
-  "_noHumanizedDate": "__noHumanizedDate_9t2ng_gg_",
-  "__SRangeSep": "___SRangeSep_9t2ng_gg_",
-  "_fulfilled": "__fulfilled_9t2ng_gg_",
-  "__SRangeComparatorHeader": "___SRangeComparatorHeader_9t2ng_gg_",
-  "__SRangeCalendar": "___SRangeCalendar_9t2ng_gg_",
-  "__SFooter": "___SFooter_9t2ng_gg_",
-  "__SPeriodsList": "___SPeriodsList_9t2ng_gg_",
-  "__SPopper": "___SPopper_9t2ng_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPopper_obi8f_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_obi8f_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_obi8f_gg_:active,.___SPopper_obi8f_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_obi8f_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_obi8f_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_obi8f_gg_,.___STitle_obi8f_gg_{display:flex;align-items:center}.___STitle_obi8f_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_obi8f_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_obi8f_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_obi8f_gg_ .___SInner_obi8f_gg_{justify-content:flex-start}.___SInputMask_obi8f_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal}.___SIndicator_obi8f_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_obi8f_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_obi8f_gg_._range_value_obi8f_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_obi8f_gg_._range_compare_obi8f_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_obi8f_gg_.__disabled_obi8f_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_obi8f_gg_{position:absolute;pointer-events:none}.___SDateRange_obi8f_gg_ .___SMask_obi8f_gg_,.___SDateRange_obi8f_gg_ .___SValue_obi8f_gg_,.___SSingleDateInput_obi8f_gg_ .___SMask_obi8f_gg_,.___SSingleDateInput_obi8f_gg_ .___SValue_obi8f_gg_{opacity:0}.___SSingleDateInput_obi8f_gg_:focus-within .___SHumanizedDate_obi8f_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_obi8f_gg_:focus-within .___SMask_obi8f_gg_,.___SSingleDateInput_obi8f_gg_:focus-within .___SValue_obi8f_gg_{opacity:1}.___SDateRange_obi8f_gg_:focus-within .___SHumanizedDate_obi8f_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_obi8f_gg_:focus-within .___SMask_obi8f_gg_,.___SDateRange_obi8f_gg_:focus-within .___SValue_obi8f_gg_{opacity:1}.___SInputMask_obi8f_gg_.__noHumanizedDate_obi8f_gg_ .___SMask_obi8f_gg_,.___SInputMask_obi8f_gg_.__noHumanizedDate_obi8f_gg_ .___SValue_obi8f_gg_{opacity:1}.___SDateRange_obi8f_gg_ .___SInputMask_obi8f_gg_:focus-within .___SMask_obi8f_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_obi8f_gg_:focus-within .___SRangeSep_obi8f_gg_,.___SRangeSep_obi8f_gg_.__fulfilled_obi8f_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_obi8f_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_obi8f_gg_,.___SRangeComparatorHeader_obi8f_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_obi8f_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_obi8f_gg_,.___SPeriodsList_obi8f_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_obi8f_gg_{padding:var(--intergalactic-spacing-3x, 12px)}" /*__inner_css_end__*/, "obi8f_gg_") /*__reshadow_css_end__*/, {
+  "__SHeader": "___SHeader_obi8f_gg_",
+  "__STitle": "___STitle_obi8f_gg_",
+  "__SToday": "___SToday_obi8f_gg_",
+  "__SPeriod": "___SPeriod_obi8f_gg_",
+  "__SButton": "___SButton_obi8f_gg_",
+  "__SInner": "___SInner_obi8f_gg_",
+  "__SInputMask": "___SInputMask_obi8f_gg_",
+  "__SIndicator": "___SIndicator_obi8f_gg_",
+  "__SRangeIndicator": "___SRangeIndicator_obi8f_gg_",
+  "_range_value": "_range_value_obi8f_gg_",
+  "_range_compare": "_range_compare_obi8f_gg_",
+  "_disabled": "__disabled_obi8f_gg_",
+  "__SHumanizedDate": "___SHumanizedDate_obi8f_gg_",
+  "__SSingleDateInput": "___SSingleDateInput_obi8f_gg_",
+  "__SValue": "___SValue_obi8f_gg_",
+  "__SDateRange": "___SDateRange_obi8f_gg_",
+  "__SMask": "___SMask_obi8f_gg_",
+  "_noHumanizedDate": "__noHumanizedDate_obi8f_gg_",
+  "__SRangeSep": "___SRangeSep_obi8f_gg_",
+  "_fulfilled": "__fulfilled_obi8f_gg_",
+  "__SRangeComparatorHeader": "___SRangeComparatorHeader_obi8f_gg_",
+  "__SRangeCalendar": "___SRangeCalendar_obi8f_gg_",
+  "__SFooter": "___SFooter_obi8f_gg_",
+  "__SPeriodsList": "___SPeriodsList_obi8f_gg_",
+  "__STooltip": "___STooltip_obi8f_gg_",
+  "__SPopper": "___SPopper_obi8f_gg_"
 });
 import assignProps from '@semcore/utils/lib/assignProps';
 var defaultAllowedParts = {
@@ -134,10 +136,52 @@ var SingleDateInputRoot = /*#__PURE__*/function (_Component2) {
   _inherits(SingleDateInputRoot, _Component2);
   var _super2 = _createSuper(SingleDateInputRoot);
   function SingleDateInputRoot() {
+    var _this;
     _classCallCheck(this, SingleDateInputRoot);
-    return _super2.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      errorText: null,
+      showError: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleDisabledDateInputAttemptChange", function (value) {
+      if (value === _this.asProps.disabledDateInputAttempt) return;
+      _this.handlers.disabledDateInputAttempt(value);
+    });
+    return _this;
   }
   _createClass(SingleDateInputRoot, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      var _this2 = this;
+      return {
+        disabledDateInputAttempt: [null, function (date) {
+          var errorText = _this2.state.errorText;
+          var showError = false;
+          if (date !== null) {
+            errorText = _this2.asProps.disabledErrorText;
+            if (errorText === undefined) {
+              var key = 'unavailableDate';
+              if (_this2.asProps.parts && !_this2.asProps.parts.day) {
+                key = 'unavailableMonth';
+              }
+              errorText = _this2.asProps.getI18nText(key);
+            }
+            if (typeof errorText === 'function') {
+              errorText = errorText(date);
+            }
+            showError = true;
+          }
+          _this2.setState({
+            errorText: errorText,
+            showError: showError
+          });
+        }]
+      };
+    }
+  }, {
     key: "getMaskedInputProps",
     value: function getMaskedInputProps() {
       var _this$asProps4 = this.asProps,
@@ -153,7 +197,8 @@ var SingleDateInputRoot = /*#__PURE__*/function (_Component2) {
         onDateChange: onChange,
         onDisplayedPeriodChange: onDisplayedPeriodChange,
         locale: locale,
-        'aria-haspopup': 'true'
+        'aria-haspopup': 'true',
+        onMaskPipeBlock: this.handleDisabledDateInputAttemptChange
       }, otherProps);
     }
   }, {
@@ -164,9 +209,19 @@ var SingleDateInputRoot = /*#__PURE__*/function (_Component2) {
       var _this$asProps5 = this.asProps,
         Children = _this$asProps5.Children,
         forwardRef = _this$asProps5.forwardRef,
-        styles = _this$asProps5.styles;
+        styles = _this$asProps5.styles,
+        state = _this$asProps5.state;
+      var _this$state = this.state,
+        errorText = _this$state.errorText,
+        showError = _this$state.showError;
       var SSingleDateInput = InputMask;
       return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(SSingleDateInput, _ref9.cn("SSingleDateInput", _objectSpread({}, _assignProps2({
+        "tag": Tooltip,
+        "placement": 'top-start',
+        "title": errorText,
+        "theme": 'warning',
+        "visible": showError,
+        "state": showError ? 'invalid' : state,
         "ref": forwardRef,
         "__excludeProps": ['onChange', 'style', 'aria-expanded']
       }, _ref2))), /*#__PURE__*/React.createElement(NeighborLocation, _ref9.cn("NeighborLocation", {}), /*#__PURE__*/React.createElement(Children, _ref9.cn("Children", {}))));
@@ -179,71 +234,122 @@ _defineProperty(SingleDateInputRoot, "style", style);
 _defineProperty(SingleDateInputRoot, "defaultProps", {
   children: function children() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SingleDateInput.Indicator, null), /*#__PURE__*/React.createElement(SingleDateInput.MaskedInput, null));
-  }
+  },
+  defaultDisabledDateInputAttempt: false
 });
 var DateRangeRoot = /*#__PURE__*/function (_Component3) {
   _inherits(DateRangeRoot, _Component3);
   var _super3 = _createSuper(DateRangeRoot);
   function DateRangeRoot() {
-    var _this;
+    var _this3;
     _classCallCheck(this, DateRangeRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
-    _this = _super3.call.apply(_super3, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "fromRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "toRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "handleFromChange", function (value, event) {
-      var _this$asProps$value$, _this$asProps$value, _this$asProps$value$2, _this$asProps$value2;
-      var onChange = _this.asProps.onChange;
-      var prevValue = [(_this$asProps$value$ = (_this$asProps$value = _this.asProps.value) === null || _this$asProps$value === void 0 ? void 0 : _this$asProps$value[0]) !== null && _this$asProps$value$ !== void 0 ? _this$asProps$value$ : null, (_this$asProps$value$2 = (_this$asProps$value2 = _this.asProps.value) === null || _this$asProps$value2 === void 0 ? void 0 : _this$asProps$value2[1]) !== null && _this$asProps$value$2 !== void 0 ? _this$asProps$value$2 : null];
+    _this3 = _super3.call.apply(_super3, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this3), "state", {
+      errorText: null,
+      showError: false,
+      lastChangedInput: 'from'
+    });
+    _defineProperty(_assertThisInitialized(_this3), "fromRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this3), "toRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this3), "handleFromChange", function (value, event) {
+      var _this3$asProps$value$, _this3$asProps$value, _this3$asProps$value$2, _this3$asProps$value2;
+      var onChange = _this3.asProps.onChange;
+      var prevValue = [(_this3$asProps$value$ = (_this3$asProps$value = _this3.asProps.value) === null || _this3$asProps$value === void 0 ? void 0 : _this3$asProps$value[0]) !== null && _this3$asProps$value$ !== void 0 ? _this3$asProps$value$ : null, (_this3$asProps$value$2 = (_this3$asProps$value2 = _this3.asProps.value) === null || _this3$asProps$value2 === void 0 ? void 0 : _this3$asProps$value2[1]) !== null && _this3$asProps$value$2 !== void 0 ? _this3$asProps$value$2 : null];
       onChange([value, prevValue[1]], event);
       if (value) {
-        if (!_this.toRef.current) return;
-        _this.toRef.current.focus();
+        if (!_this3.toRef.current) return;
+        _this3.toRef.current.focus();
         setTimeout(function () {
-          if (!_this.toRef.current) return;
-          _this.toRef.current.setSelectionRange(0, 0);
+          if (!_this3.toRef.current) return;
+          _this3.toRef.current.setSelectionRange(0, 0);
         }, 0);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleToChange", function (value, event) {
-      var _this$asProps$value$3, _this$asProps$value3, _this$asProps$value$4, _this$asProps$value4;
-      var onChange = _this.asProps.onChange;
-      var prevValue = [(_this$asProps$value$3 = (_this$asProps$value3 = _this.asProps.value) === null || _this$asProps$value3 === void 0 ? void 0 : _this$asProps$value3[0]) !== null && _this$asProps$value$3 !== void 0 ? _this$asProps$value$3 : null, (_this$asProps$value$4 = (_this$asProps$value4 = _this.asProps.value) === null || _this$asProps$value4 === void 0 ? void 0 : _this$asProps$value4[1]) !== null && _this$asProps$value$4 !== void 0 ? _this$asProps$value$4 : null];
+    _defineProperty(_assertThisInitialized(_this3), "handleToChange", function (value, event) {
+      var _this3$asProps$value$3, _this3$asProps$value3, _this3$asProps$value$4, _this3$asProps$value4;
+      var onChange = _this3.asProps.onChange;
+      var prevValue = [(_this3$asProps$value$3 = (_this3$asProps$value3 = _this3.asProps.value) === null || _this3$asProps$value3 === void 0 ? void 0 : _this3$asProps$value3[0]) !== null && _this3$asProps$value$3 !== void 0 ? _this3$asProps$value$3 : null, (_this3$asProps$value$4 = (_this3$asProps$value4 = _this3.asProps.value) === null || _this3$asProps$value4 === void 0 ? void 0 : _this3$asProps$value4[1]) !== null && _this3$asProps$value$4 !== void 0 ? _this3$asProps$value$4 : null];
       onChange([prevValue[0], value], event);
     });
-    _defineProperty(_assertThisInitialized(_this), "handleFromKeydown", function (event) {
-      if (!_this.toRef.current) return;
-      if (!_this.fromRef.current) return;
-      if (event.key === 'ArrowRight' && _this.fromRef.current.selectionStart === _this.fromRef.current.value.length && _this.fromRef.current.selectionEnd === _this.fromRef.current.value.length) {
-        _this.toRef.current.focus();
+    _defineProperty(_assertThisInitialized(_this3), "handleFromKeydown", function (event) {
+      if (!_this3.toRef.current) return;
+      if (!_this3.fromRef.current) return;
+      _this3.setState({
+        lastChangedInput: 'from'
+      });
+      if (event.key === 'ArrowRight' && _this3.fromRef.current.selectionStart === _this3.fromRef.current.value.length && _this3.fromRef.current.selectionEnd === _this3.fromRef.current.value.length) {
+        _this3.toRef.current.focus();
         setTimeout(function () {
-          _this.toRef.current.setSelectionRange(0, 0);
+          _this3.toRef.current.setSelectionRange(0, 0);
         }, 0);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleToKeydown", function (event) {
-      if (!_this.toRef.current) return;
-      if (!_this.fromRef.current) return;
-      if (event.key === 'Backspace' && !_this.toRef.current.value) {
-        var value = _this.fromRef.current.value;
-        _this.fromRef.current.focus();
+    _defineProperty(_assertThisInitialized(_this3), "handleToKeydown", function (event) {
+      if (!_this3.toRef.current) return;
+      if (!_this3.fromRef.current) return;
+      _this3.setState({
+        lastChangedInput: 'to'
+      });
+      if (event.key === 'Backspace' && !_this3.toRef.current.value) {
+        var value = _this3.fromRef.current.value;
+        _this3.fromRef.current.focus();
         setTimeout(function () {
-          _this.fromRef.current.setSelectionRange(value.length, value.length);
+          _this3.fromRef.current.setSelectionRange(value.length, value.length);
         }, 0);
       }
-      if (event.key === 'ArrowLeft' && _this.toRef.current.selectionStart === 0 && _this.toRef.current.selectionEnd === 0) {
-        var _value = _this.fromRef.current.value;
-        _this.fromRef.current.focus();
+      if (event.key === 'ArrowLeft' && _this3.toRef.current.selectionStart === 0 && _this3.toRef.current.selectionEnd === 0) {
+        var _value = _this3.fromRef.current.value;
+        _this3.fromRef.current.focus();
         setTimeout(function () {
-          _this.fromRef.current.setSelectionRange(_value.length, _value.length);
+          _this3.fromRef.current.setSelectionRange(_value.length, _value.length);
         }, 0);
       }
     });
-    return _this;
+    _defineProperty(_assertThisInitialized(_this3), "handleDisabledDateInputAttemptChange", function (value) {
+      if (value === _this3.asProps.disabledDateInputAttempt) return;
+      _this3.handlers.disabledDateInputAttempt(value);
+    });
+    return _this3;
   }
   _createClass(DateRangeRoot, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      var _this4 = this;
+      return {
+        disabledDateInputAttempt: [null, function (date) {
+          var errorText = _this4.state.errorText;
+          var showError = false;
+          if (date !== null) {
+            errorText = _this4.asProps.disabledErrorText;
+            if (errorText === undefined) {
+              var key = 'unavailableDate';
+              if (_this4.asProps.parts && !_this4.asProps.parts.day) {
+                key = 'unavailableMonth';
+              }
+              if (_this4.state.lastChangedInput === 'to') {
+                key = 'unavailableEndDate';
+                if (_this4.asProps.parts && !_this4.asProps.parts.day) {
+                  key = 'unavailableEndMonth';
+                }
+              }
+              errorText = _this4.asProps.getI18nText(key);
+            }
+            if (typeof errorText === 'function') {
+              errorText = errorText(date);
+            }
+            showError = true;
+          }
+          _this4.setState({
+            errorText: errorText,
+            showError: showError
+          });
+        }]
+      };
+    }
+  }, {
     key: "getFromMaskedInputProps",
     value: function getFromMaskedInputProps() {
       var _this$asProps6 = this.asProps,
@@ -260,7 +366,8 @@ var DateRangeRoot = /*#__PURE__*/function (_Component3) {
         locale: locale,
         flex: 1,
         onDisplayedPeriodChange: onDisplayedPeriodChange,
-        'aria-haspopup': ariaHasPopup
+        'aria-haspopup': ariaHasPopup,
+        onMaskPipeBlock: this.handleDisabledDateInputAttemptChange
       }, otherProps);
     }
   }, {
@@ -280,7 +387,8 @@ var DateRangeRoot = /*#__PURE__*/function (_Component3) {
         locale: locale,
         flex: 1,
         onDisplayedPeriodChange: onDisplayedPeriodChange,
-        'aria-haspopup': ariaHasPopup
+        'aria-haspopup': ariaHasPopup,
+        onMaskPipeBlock: this.handleDisabledDateInputAttemptChange
       }, otherProps);
     }
   }, {
@@ -300,8 +408,19 @@ var DateRangeRoot = /*#__PURE__*/function (_Component3) {
       var _this$asProps8 = this.asProps,
         Children = _this$asProps8.Children,
         styles = _this$asProps8.styles,
-        w = _this$asProps8.w;
+        w = _this$asProps8.w,
+        state = _this$asProps8.state;
+      var _this$state2 = this.state,
+        errorText = _this$state2.errorText,
+        showError = _this$state2.showError,
+        lastChangedInput = _this$state2.lastChangedInput;
       return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(SDateRange, _ref10.cn("SDateRange", _objectSpread({}, _assignProps3({
+        "tag": Tooltip,
+        "placement": lastChangedInput === 'to' ? 'top-end' : 'top-start',
+        "title": errorText,
+        "theme": 'warning',
+        "visible": showError,
+        "state": showError ? 'invalid' : state,
         "__excludeProps": ['onChange', 'value', 'aria-expanded'],
         "w": w
       }, _ref3))), /*#__PURE__*/React.createElement(Children, _ref10.cn("Children", {})));
@@ -314,7 +433,8 @@ _defineProperty(DateRangeRoot, "style", style);
 _defineProperty(DateRangeRoot, "defaultProps", {
   children: function children() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DateRange.Indicator, null), /*#__PURE__*/React.createElement(DateRange.FromMaskedInput, null), /*#__PURE__*/React.createElement(DateRange.RangeSep, null), /*#__PURE__*/React.createElement(DateRange.ToMaskedInput, null));
-  }
+  },
+  defaultDisabledDateInputAttempt: false
 });
 var FromMaskedInput = function FromMaskedInput(props) {
   var _ref4 = arguments[0],
@@ -369,6 +489,7 @@ var MaskedInput = function MaskedInput(_ref16) {
     placeholders = _ref16$placeholders === void 0 ? defaultPlaceholders : _ref16$placeholders,
     _ref16$labelPrefix = _ref16.labelPrefix,
     labelPrefix = _ref16$labelPrefix === void 0 ? 'Date' : _ref16$labelPrefix,
+    onMaskPipeBlock = _ref16.onMaskPipeBlock,
     __excludeProps = _ref16.__excludeProps,
     _root = _ref16.Root,
     otherProps = _objectWithoutProperties(_ref16, _excluded6);
@@ -473,6 +594,7 @@ var MaskedInput = function MaskedInput(_ref16) {
       }
     }
     if (placeholdersOnly) {
+      onMaskPipeBlock === null || onMaskPipeBlock === void 0 ? void 0 : onMaskPipeBlock(null);
       return '';
     }
     var getOffsetTo = function getOffsetTo(partName) {
@@ -542,10 +664,14 @@ var MaskedInput = function MaskedInput(_ref16) {
       date.setMonth(allowedParts.month ? parseInt(month, 10) - 1 : 0);
       date.setDate(allowedParts.day ? parseInt(day, 10) : 1);
       if (disabledDates !== null && disabledDates !== void 0 && disabledDates.some(includesDate(dayjs(date), 'date'))) {
+        onMaskPipeBlock === null || onMaskPipeBlock === void 0 ? void 0 : onMaskPipeBlock(date);
         return false;
       }
       if (allowedParts.day) {
-        if (date.getDate() !== parseInt(day, 10)) return false;
+        if (date.getDate() !== parseInt(day, 10)) {
+          onMaskPipeBlock === null || onMaskPipeBlock === void 0 ? void 0 : onMaskPipeBlock(date);
+          return false;
+        }
       }
     }
     var result = [];
@@ -563,11 +689,12 @@ var MaskedInput = function MaskedInput(_ref16) {
     } finally {
       _iterator4.f();
     }
+    onMaskPipeBlock === null || onMaskPipeBlock === void 0 ? void 0 : onMaskPipeBlock(null);
     return {
       value: result.join(sep),
       indexesOfPipedChars: indexesOfPipedChars
     };
-  }, [placeholders, sep, order, allowedParts, disabledDates]);
+  }, [placeholders, sep, order, allowedParts, disabledDates, onMaskPipeBlock]);
   var handleChange = React.useCallback(function (value) {
     var parsed = {};
     for (var partName in placeholders) {