@semcore/date-picker 4.20.1 → 4.21.0-prerelease.1

package/lib/cjs/components/DateRangeComparatorAbstract.js

@@ -30,31 +30,32 @@ var _shortDateRangeFormat = _interopRequireDefault(require("../utils/shortDateRa
 var _checkbox = _interopRequireDefault(require("@semcore/checkbox"));
 var _baseTrigger = require("@semcore/base-trigger");
 /*__reshadow-styles__:"../style/date-picker.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPopper_tb8u3_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_tb8u3_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_tb8u3_gg_:active,.___SPopper_tb8u3_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_tb8u3_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_tb8u3_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_tb8u3_gg_,.___STitle_tb8u3_gg_{display:flex;align-items:center}.___STitle_tb8u3_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_tb8u3_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_tb8u3_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_tb8u3_gg_ .___SInner_tb8u3_gg_{justify-content:flex-start}.___SInputMask_tb8u3_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal}.___SIndicator_tb8u3_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_tb8u3_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_tb8u3_gg_._range_value_tb8u3_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_tb8u3_gg_._range_compare_tb8u3_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SHumanizedDate_tb8u3_gg_{position:absolute;pointer-events:none}.___SDateRange_tb8u3_gg_ .___SMask_tb8u3_gg_,.___SDateRange_tb8u3_gg_ .___SValue_tb8u3_gg_,.___SSingleDateInput_tb8u3_gg_ .___SMask_tb8u3_gg_,.___SSingleDateInput_tb8u3_gg_ .___SValue_tb8u3_gg_{opacity:0}.___SSingleDateInput_tb8u3_gg_:focus-within .___SHumanizedDate_tb8u3_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_tb8u3_gg_:focus-within .___SMask_tb8u3_gg_,.___SSingleDateInput_tb8u3_gg_:focus-within .___SValue_tb8u3_gg_{opacity:1}.___SDateRange_tb8u3_gg_:focus-within .___SHumanizedDate_tb8u3_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_tb8u3_gg_:focus-within .___SMask_tb8u3_gg_,.___SDateRange_tb8u3_gg_:focus-within .___SValue_tb8u3_gg_{opacity:1}.___SInputMask_tb8u3_gg_.__noHumanizedDate_tb8u3_gg_ .___SMask_tb8u3_gg_,.___SInputMask_tb8u3_gg_.__noHumanizedDate_tb8u3_gg_ .___SValue_tb8u3_gg_{opacity:1}.___SDateRange_tb8u3_gg_ .___SInputMask_tb8u3_gg_:focus-within .___SMask_tb8u3_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_tb8u3_gg_:focus-within .___SRangeSep_tb8u3_gg_,.___SRangeSep_tb8u3_gg_.__fulfilled_tb8u3_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_tb8u3_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_tb8u3_gg_,.___SRangeComparatorHeader_tb8u3_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_tb8u3_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_tb8u3_gg_,.___SPeriodsList_tb8u3_gg_{padding:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "tb8u3_gg_") /*__reshadow_css_end__*/, {
-  "__SHeader": "___SHeader_tb8u3_gg_",
-  "__STitle": "___STitle_tb8u3_gg_",
-  "__SToday": "___SToday_tb8u3_gg_",
-  "__SPeriod": "___SPeriod_tb8u3_gg_",
-  "__SButton": "___SButton_tb8u3_gg_",
-  "__SInner": "___SInner_tb8u3_gg_",
-  "__SInputMask": "___SInputMask_tb8u3_gg_",
-  "__SIndicator": "___SIndicator_tb8u3_gg_",
-  "__SRangeIndicator": "___SRangeIndicator_tb8u3_gg_",
-  "_range_value": "_range_value_tb8u3_gg_",
-  "_range_compare": "_range_compare_tb8u3_gg_",
-  "__SHumanizedDate": "___SHumanizedDate_tb8u3_gg_",
-  "__SSingleDateInput": "___SSingleDateInput_tb8u3_gg_",
-  "__SValue": "___SValue_tb8u3_gg_",
-  "__SDateRange": "___SDateRange_tb8u3_gg_",
-  "__SMask": "___SMask_tb8u3_gg_",
-  "_noHumanizedDate": "__noHumanizedDate_tb8u3_gg_",
-  "__SRangeSep": "___SRangeSep_tb8u3_gg_",
-  "_fulfilled": "__fulfilled_tb8u3_gg_",
-  "__SRangeComparatorHeader": "___SRangeComparatorHeader_tb8u3_gg_",
-  "__SRangeCalendar": "___SRangeCalendar_tb8u3_gg_",
-  "__SFooter": "___SFooter_tb8u3_gg_",
-  "__SPeriodsList": "___SPeriodsList_tb8u3_gg_",
-  "__SPopper": "___SPopper_tb8u3_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPopper_16lpn_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_16lpn_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_16lpn_gg_:active,.___SPopper_16lpn_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_16lpn_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_16lpn_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_16lpn_gg_,.___STitle_16lpn_gg_{display:flex;align-items:center}.___STitle_16lpn_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_16lpn_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_16lpn_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_16lpn_gg_ .___SInner_16lpn_gg_{justify-content:flex-start}.___SInputMask_16lpn_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal}.___SIndicator_16lpn_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_16lpn_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_16lpn_gg_._range_value_16lpn_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_16lpn_gg_._range_compare_16lpn_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_16lpn_gg_.__disabled_16lpn_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_16lpn_gg_{position:absolute;pointer-events:none}.___SDateRange_16lpn_gg_ .___SMask_16lpn_gg_,.___SDateRange_16lpn_gg_ .___SValue_16lpn_gg_,.___SSingleDateInput_16lpn_gg_ .___SMask_16lpn_gg_,.___SSingleDateInput_16lpn_gg_ .___SValue_16lpn_gg_{opacity:0}.___SSingleDateInput_16lpn_gg_:focus-within .___SHumanizedDate_16lpn_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_16lpn_gg_:focus-within .___SMask_16lpn_gg_,.___SSingleDateInput_16lpn_gg_:focus-within .___SValue_16lpn_gg_{opacity:1}.___SDateRange_16lpn_gg_:focus-within .___SHumanizedDate_16lpn_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_16lpn_gg_:focus-within .___SMask_16lpn_gg_,.___SDateRange_16lpn_gg_:focus-within .___SValue_16lpn_gg_{opacity:1}.___SInputMask_16lpn_gg_.__noHumanizedDate_16lpn_gg_ .___SMask_16lpn_gg_,.___SInputMask_16lpn_gg_.__noHumanizedDate_16lpn_gg_ .___SValue_16lpn_gg_{opacity:1}.___SDateRange_16lpn_gg_ .___SInputMask_16lpn_gg_:focus-within .___SMask_16lpn_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_16lpn_gg_:focus-within .___SRangeSep_16lpn_gg_,.___SRangeSep_16lpn_gg_.__fulfilled_16lpn_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_16lpn_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_16lpn_gg_,.___SRangeComparatorHeader_16lpn_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_16lpn_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_16lpn_gg_,.___SPeriodsList_16lpn_gg_{padding:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "16lpn_gg_") /*__reshadow_css_end__*/, {
+  "__SHeader": "___SHeader_16lpn_gg_",
+  "__STitle": "___STitle_16lpn_gg_",
+  "__SToday": "___SToday_16lpn_gg_",
+  "__SPeriod": "___SPeriod_16lpn_gg_",
+  "__SButton": "___SButton_16lpn_gg_",
+  "__SInner": "___SInner_16lpn_gg_",
+  "__SInputMask": "___SInputMask_16lpn_gg_",
+  "__SIndicator": "___SIndicator_16lpn_gg_",
+  "__SRangeIndicator": "___SRangeIndicator_16lpn_gg_",
+  "_range_value": "_range_value_16lpn_gg_",
+  "_range_compare": "_range_compare_16lpn_gg_",
+  "_disabled": "__disabled_16lpn_gg_",
+  "__SHumanizedDate": "___SHumanizedDate_16lpn_gg_",
+  "__SSingleDateInput": "___SSingleDateInput_16lpn_gg_",
+  "__SValue": "___SValue_16lpn_gg_",
+  "__SDateRange": "___SDateRange_16lpn_gg_",
+  "__SMask": "___SMask_16lpn_gg_",
+  "_noHumanizedDate": "__noHumanizedDate_16lpn_gg_",
+  "__SRangeSep": "___SRangeSep_16lpn_gg_",
+  "_fulfilled": "__fulfilled_16lpn_gg_",
+  "__SRangeComparatorHeader": "___SRangeComparatorHeader_16lpn_gg_",
+  "__SRangeCalendar": "___SRangeCalendar_16lpn_gg_",
+  "__SFooter": "___SFooter_16lpn_gg_",
+  "__SPeriodsList": "___SPeriodsList_16lpn_gg_",
+  "__SPopper": "___SPopper_16lpn_gg_"
 });
 var defaultDisplayedPeriod = new Date(new Date().setHours(0, 0, 0, 0));
 var getLatestDate = function getLatestDate() {
@@ -81,12 +82,6 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       args[_key2] = arguments[_key2];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      dirtyValue: undefined,
-      dirtyCompare: undefined,
-      dirtyToggler: undefined,
-      range: 'value' // 'value' | 'compare'
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "navigateView", function (direction) {
       var displayedPeriod = _this.asProps.displayedPeriod;
       var action = direction >= 1 ? 'add' : 'subtract';
@@ -106,41 +101,35 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       _this.handlers.visible(false);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (date) {
-      var _dirty, _dirty2, _dirty3;
-      var _this$state = _this.state,
-        dirtyValue = _this$state.dirtyValue,
-        dirtyCompare = _this$state.dirtyCompare,
-        range = _this$state.range;
+      var _value, _value2, _value3;
+      var _this$asProps = _this.asProps,
+        focusedRange = _this$asProps.focusedRange,
+        preselectedCompare = _this$asProps.preselectedCompare,
+        preselectedValue = _this$asProps.preselectedValue;
       var highlighted = [];
-      var dirty = range === 'compare' ? dirtyCompare : dirtyValue;
+      var value = focusedRange === 'compare' ? preselectedCompare : preselectedValue;
       if (Array.isArray(date)) {
-        dirty = date;
-      } else if (!((_dirty = dirty) !== null && _dirty !== void 0 && _dirty.length)) {
-        dirty = [date];
+        value = date;
+      } else if (!((_value = value) !== null && _value !== void 0 && _value.length)) {
+        value = [date];
         highlighted = [date];
-      } else if (((_dirty2 = dirty) === null || _dirty2 === void 0 ? void 0 : _dirty2.length) >= 2) {
-        dirty = [date];
+      } else if (((_value2 = value) === null || _value2 === void 0 ? void 0 : _value2.length) >= 2) {
+        value = [date];
         highlighted = [date];
-      } else if (((_dirty3 = dirty) === null || _dirty3 === void 0 ? void 0 : _dirty3[0]) > date) {
-        var _dirty4;
-        dirty = [date, (_dirty4 = dirty) === null || _dirty4 === void 0 ? void 0 : _dirty4[0]];
+      } else if (((_value3 = value) === null || _value3 === void 0 ? void 0 : _value3[0]) > date) {
+        var _value4;
+        value = [date, (_value4 = value) === null || _value4 === void 0 ? void 0 : _value4[0]];
       } else {
-        var _dirty5;
-        dirty = [(_dirty5 = dirty) === null || _dirty5 === void 0 ? void 0 : _dirty5[0], date];
+        var _value5;
+        value = [(_value5 = value) === null || _value5 === void 0 ? void 0 : _value5[0], date];
       }
-      var state = {};
-      if (range === 'compare') {
-        state['dirtyCompare'] = dirty;
+      if (focusedRange === 'compare') {
+        _this.handlers.preselectedCompare(value);
+        _this.handlers.compareHighlighted(highlighted);
       } else {
-        state['dirtyValue'] = dirty;
+        _this.handlers.preselectedValue(value);
+        _this.handlers.highlighted(highlighted);
       }
-      _this.setState(state, function () {
-        if (range === 'compare') {
-          _this.handlers.compareHighlighted(highlighted);
-        } else {
-          _this.handlers.highlighted(highlighted);
-        }
-      });
     });
     return _this;
   }
@@ -149,36 +138,31 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getPeriodProps() {
       var _this$asProps$value,
         _this2 = this;
-      var _this$asProps = this.asProps,
-        _this$asProps$periods = _this$asProps.periods,
-        periods = _this$asProps$periods === void 0 ? this.getDefaultPeriods() : _this$asProps$periods,
-        onHighlightedChange = _this$asProps.onHighlightedChange,
-        onCompareHighlightedChange = _this$asProps.onCompareHighlightedChange,
-        onDisplayedPeriodChange = _this$asProps.onDisplayedPeriodChange;
-      var _this$state2 = this.state,
-        dirtyValue = _this$state2.dirtyValue,
-        dirtyCompare = _this$state2.dirtyCompare,
-        range = _this$state2.range;
-      var value = dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : (_this$asProps$value = this.asProps.value) === null || _this$asProps$value === void 0 ? void 0 : _this$asProps$value.value;
-      if (range === 'compare') {
+      var _this$asProps2 = this.asProps,
+        _this$asProps2$period = _this$asProps2.periods,
+        periods = _this$asProps2$period === void 0 ? this.getDefaultPeriods() : _this$asProps2$period,
+        onHighlightedChange = _this$asProps2.onHighlightedChange,
+        onCompareHighlightedChange = _this$asProps2.onCompareHighlightedChange,
+        onDisplayedPeriodChange = _this$asProps2.onDisplayedPeriodChange,
+        preselectedValue = _this$asProps2.preselectedValue,
+        preselectedCompare = _this$asProps2.preselectedCompare,
+        focusedRange = _this$asProps2.focusedRange;
+      var value = preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : (_this$asProps$value = this.asProps.value) === null || _this$asProps$value === void 0 ? void 0 : _this$asProps$value.value;
+      if (focusedRange === 'compare') {
         var _this$asProps$value2;
-        value = dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : (_this$asProps$value2 = this.asProps.value) === null || _this$asProps$value2 === void 0 ? void 0 : _this$asProps$value2.compare;
+        value = preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : (_this$asProps$value2 = this.asProps.value) === null || _this$asProps$value2 === void 0 ? void 0 : _this$asProps$value2.compare;
       }
       return {
         periods: periods,
         value: value,
         onChange: function onChange(value) {
-          if (range === 'compare') {
-            _this2.setState({
-              dirtyCompare: value
-            });
+          if (focusedRange === 'compare') {
+            _this2.handlers.preselectedCompare(value);
           } else {
-            _this2.setState({
-              dirtyValue: value
-            });
+            _this2.handlers.preselectedValue(value);
           }
         },
-        onHighlightedChange: range === 'compare' ? onCompareHighlightedChange : onHighlightedChange,
+        onHighlightedChange: focusedRange === 'compare' ? onCompareHighlightedChange : onHighlightedChange,
         onDisplayedPeriodChange: onDisplayedPeriodChange
       };
     }
@@ -211,17 +195,26 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
             var _ref10, _this3$asProps$value$, _this3$asProps$value, _this3$asProps$value2;
             _this3.handlers.highlighted([]);
             _this3.handlers.compareHighlighted([]);
-            _this3.setState({
-              dirtyValue: undefined,
-              dirtyCompare: undefined,
-              dirtyToggler: undefined,
-              range: 'value'
-            });
+            _this3.handlers.preselectedValue(undefined);
+            _this3.handlers.preselectedCompare(undefined);
+            _this3.handlers.compareToggle(undefined);
+            _this3.handlers.focusedRange('value');
             _this3.handlers.displayedPeriod(getLatestDate((_ref10 = (_this3$asProps$value$ = (_this3$asProps$value = _this3.asProps.value) === null || _this3$asProps$value === void 0 ? void 0 : _this3$asProps$value.value) !== null && _this3$asProps$value$ !== void 0 ? _this3$asProps$value$ : (_this3$asProps$value2 = _this3.asProps.value) === null || _this3$asProps$value2 === void 0 ? void 0 : _this3$asProps$value2.compare) !== null && _ref10 !== void 0 ? _ref10 : []) || _this3.props.defaultDisplayedPeriod);
           }
+          var _this3$asProps = _this3.asProps,
+            value = _this3$asProps.value,
+            displayedPeriod = _this3$asProps.displayedPeriod;
+          var newDisplayedPeriod = value ? getLatestDate(value.value, value.compare) : undefined;
+          if (visible && newDisplayedPeriod && newDisplayedPeriod !== displayedPeriod) {
+            _this3.handlers.displayedPeriod(newDisplayedPeriod);
+          }
         }],
         highlighted: null,
         compareHighlighted: null,
+        preselectedValue: null,
+        preselectedCompare: null,
+        compareToggle: null,
+        focusedRange: null,
         value: [null, function (value) {
           var dates = [value === null || value === void 0 ? void 0 : value.value, value === null || value === void 0 ? void 0 : value.compare].flat(2).filter(function (date) {
             var _date$isValid;
@@ -235,16 +228,15 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     key: "getApplyProps",
     value: function getApplyProps() {
       var _this4 = this;
-      var _this$asProps2 = this.asProps,
-        value = _this$asProps2.value,
-        getI18nText = _this$asProps2.getI18nText;
-      var _this$state3 = this.state,
-        dirtyValue = _this$state3.dirtyValue,
-        dirtyCompare = _this$state3.dirtyCompare;
+      var _this$asProps3 = this.asProps,
+        value = _this$asProps3.value,
+        getI18nText = _this$asProps3.getI18nText,
+        preselectedValue = _this$asProps3.preselectedValue,
+        preselectedCompare = _this$asProps3.preselectedCompare;
       return {
         getI18nText: getI18nText,
         onClick: function onClick() {
-          return _this4.handleApply(dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : value === null || value === void 0 ? void 0 : value.value, dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : value === null || value === void 0 ? void 0 : value.compare);
+          return _this4.handleApply(preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : value === null || value === void 0 ? void 0 : value.value, preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare);
         }
       };
     }
@@ -282,9 +274,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
   }, {
     key: "getTitleProps",
     value: function getTitleProps(props, index) {
-      var _this$asProps3 = this.asProps,
-        locale = _this$asProps3.locale,
-        displayedPeriod = _this$asProps3.displayedPeriod;
+      var _this$asProps4 = this.asProps,
+        locale = _this$asProps4.locale,
+        displayedPeriod = _this$asProps4.displayedPeriod;
       return {
         children: new Intl.DateTimeFormat(locale, {
           month: 'long',
@@ -302,9 +294,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         placeholder = _ref11$placeholder === void 0 ? 'Select date ranges' : _ref11$placeholder,
         _ref11$separator = _ref11.separator,
         separator = _ref11$separator === void 0 ? 'vs.' : _ref11$separator;
-      var _this$asProps4 = this.asProps,
-        locale = _this$asProps4.locale,
-        visible = _this$asProps4.visible;
+      var _this$asProps5 = this.asProps,
+        locale = _this$asProps5.locale,
+        visible = _this$asProps5.visible;
       var value = (_this$asProps$value3 = this.asProps.value) === null || _this$asProps$value3 === void 0 ? void 0 : _this$asProps$value3.value;
       var compare = (_this$asProps$value4 = this.asProps.value) === null || _this$asProps$value4 === void 0 ? void 0 : _this$asProps$value4.compare;
       var formattingProps = {
@@ -337,23 +329,20 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     key: "getValueDateRangeProps",
     value: function getValueDateRangeProps() {
       var _this7 = this;
-      var _this$asProps5 = this.asProps,
-        value = _this$asProps5.value,
-        onDisplayedPeriodChange = _this$asProps5.onDisplayedPeriodChange,
-        locale = _this$asProps5.locale,
-        disabled = _this$asProps5.disabled,
-        size = _this$asProps5.size,
-        getI18nText = _this$asProps5.getI18nText;
-      var _this$state4 = this.state,
-        range = _this$state4.range,
-        dirtyValue = _this$state4.dirtyValue;
+      var _this$asProps6 = this.asProps,
+        value = _this$asProps6.value,
+        onDisplayedPeriodChange = _this$asProps6.onDisplayedPeriodChange,
+        locale = _this$asProps6.locale,
+        disabled = _this$asProps6.disabled,
+        size = _this$asProps6.size,
+        getI18nText = _this$asProps6.getI18nText,
+        focusedRange = _this$asProps6.focusedRange,
+        preselectedValue = _this$asProps6.preselectedValue;
       return {
-        focused: range === 'value' ? true : undefined,
-        value: dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : value === null || value === void 0 ? void 0 : value.value,
+        focused: focusedRange === 'value' ? true : undefined,
+        value: preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : value === null || value === void 0 ? void 0 : value.value,
         onChange: function onChange(value) {
-          return _this7.setState({
-            dirtyValue: value
-          });
+          return _this7.handlers.preselectedValue(value);
         },
         onDisplayedPeriodChange: onDisplayedPeriodChange,
         locale: locale,
@@ -362,9 +351,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this7.setState({
-            range: 'value'
-          });
+          _this7.handlers.focusedRange('value');
           return false;
         }
       };
@@ -374,25 +361,22 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getCompareDateRangeProps() {
       var _value$compare,
         _this8 = this;
-      var _this$asProps6 = this.asProps,
-        value = _this$asProps6.value,
-        onDisplayedPeriodChange = _this$asProps6.onDisplayedPeriodChange,
-        locale = _this$asProps6.locale,
-        disabled = _this$asProps6.disabled,
-        size = _this$asProps6.size,
-        getI18nText = _this$asProps6.getI18nText;
-      var _this$state5 = this.state,
-        range = _this$state5.range,
-        dirtyCompare = _this$state5.dirtyCompare,
-        dirtyToggler = _this$state5.dirtyToggler;
+      var _this$asProps7 = this.asProps,
+        value = _this$asProps7.value,
+        onDisplayedPeriodChange = _this$asProps7.onDisplayedPeriodChange,
+        locale = _this$asProps7.locale,
+        disabled = _this$asProps7.disabled,
+        size = _this$asProps7.size,
+        getI18nText = _this$asProps7.getI18nText,
+        focusedRange = _this$asProps7.focusedRange,
+        preselectedCompare = _this$asProps7.preselectedCompare,
+        compareToggle = _this$asProps7.compareToggle;
       return {
-        focused: range === 'compare' ? true : undefined,
-        disabled: !(dirtyToggler !== null && dirtyToggler !== void 0 ? dirtyToggler : value === null || value === void 0 ? void 0 : (_value$compare = value.compare) === null || _value$compare === void 0 ? void 0 : _value$compare.length),
-        value: dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : value === null || value === void 0 ? void 0 : value.compare,
+        focused: focusedRange === 'compare' ? true : undefined,
+        disabled: !(compareToggle !== null && compareToggle !== void 0 ? compareToggle : value === null || value === void 0 ? void 0 : (_value$compare = value.compare) === null || _value$compare === void 0 ? void 0 : _value$compare.length),
+        value: preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare,
         onChange: function onChange(value) {
-          return _this8.setState({
-            dirtyCompare: value
-          });
+          return _this8.handlers.preselectedCompare(value);
         },
         onDisplayedPeriodChange: onDisplayedPeriodChange,
         locale: locale,
@@ -401,9 +385,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this8.setState({
-            range: 'compare'
-          });
+          _this8.handlers.focusedRange('compare');
           return false;
         }
       };
@@ -413,25 +395,20 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getCompareToggleProps() {
       var _value$compare2,
         _this9 = this;
-      var _this$asProps7 = this.asProps,
-        getI18nText = _this$asProps7.getI18nText,
-        value = _this$asProps7.value;
-      var dirtyToggler = this.state.dirtyToggler;
+      var _this$asProps8 = this.asProps,
+        getI18nText = _this$asProps8.getI18nText,
+        value = _this$asProps8.value,
+        compareToggle = _this$asProps8.compareToggle;
       return {
         getI18nText: getI18nText,
-        checked: dirtyToggler !== null && dirtyToggler !== void 0 ? dirtyToggler : value === null || value === void 0 ? void 0 : (_value$compare2 = value.compare) === null || _value$compare2 === void 0 ? void 0 : _value$compare2.length,
+        checked: compareToggle !== null && compareToggle !== void 0 ? compareToggle : value === null || value === void 0 ? void 0 : (_value$compare2 = value.compare) === null || _value$compare2 === void 0 ? void 0 : _value$compare2.length,
         onChange: function onChange(checked) {
           if (checked) {
-            _this9.setState({
-              range: 'compare',
-              dirtyToggler: true
-            });
+            _this9.handlers.compareToggle(true);
+            _this9.handlers.focusedRange('compare');
           } else {
-            _this9.setState({
-              range: 'value',
-              dirtyCompare: [],
-              dirtyToggler: false
-            });
+            _this9.handlers.compareToggle(false);
+            _this9.handlers.focusedRange('value');
           }
         }
       };
@@ -439,19 +416,18 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
   }, {
     key: "getCalendarProps",
     value: function getCalendarProps(_props, index) {
-      var _this$asProps8 = this.asProps,
-        locale = _this$asProps8.locale,
-        displayedPeriod = _this$asProps8.displayedPeriod,
-        disabled = _this$asProps8.disabled,
-        value = _this$asProps8.value,
-        onCompareHighlightedChange = _this$asProps8.onCompareHighlightedChange,
-        highlighted = _this$asProps8.highlighted,
-        compareHighlighted = _this$asProps8.compareHighlighted,
-        onHighlightedChange = _this$asProps8.onHighlightedChange;
-      var _this$state6 = this.state,
-        dirtyValue = _this$state6.dirtyValue,
-        dirtyCompare = _this$state6.dirtyCompare,
-        range = _this$state6.range;
+      var _this$asProps9 = this.asProps,
+        locale = _this$asProps9.locale,
+        displayedPeriod = _this$asProps9.displayedPeriod,
+        disabled = _this$asProps9.disabled,
+        value = _this$asProps9.value,
+        onCompareHighlightedChange = _this$asProps9.onCompareHighlightedChange,
+        highlighted = _this$asProps9.highlighted,
+        compareHighlighted = _this$asProps9.compareHighlighted,
+        onHighlightedChange = _this$asProps9.onHighlightedChange,
+        preselectedCompare = _this$asProps9.preselectedCompare,
+        preselectedValue = _this$asProps9.preselectedValue,
+        focusedRange = _this$asProps9.focusedRange;
       return {
         locale: locale,
         displayedPeriod: (0, _dayjs["default"])(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
@@ -461,9 +437,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         compareHighlighted: compareHighlighted,
         onCompareHighlightedChange: onCompareHighlightedChange,
         onHighlightedChange: onHighlightedChange,
-        range: range,
-        value: dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : value === null || value === void 0 ? void 0 : value.value,
-        compare: dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : value === null || value === void 0 ? void 0 : value.compare
+        range: focusedRange,
+        value: preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : value === null || value === void 0 ? void 0 : value.value,
+        compare: preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare
       };
     }
   }, {
@@ -478,10 +454,10 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _ref = this.asProps,
         _ref4;
-      var _this$asProps9 = this.asProps,
-        Children = _this$asProps9.Children,
-        styles = _this$asProps9.styles,
-        providedAriaLabel = _this$asProps9['aria-label'];
+      var _this$asProps10 = this.asProps,
+        Children = _this$asProps10.Children,
+        styles = _this$asProps10.styles,
+        providedAriaLabel = _this$asProps10['aria-label'];
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (_ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _core.assignProps)({
         "use:aria-label": providedAriaLabel,
         "__excludeProps": ['onChange', 'value']
@@ -502,6 +478,10 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         defaultCompareHighlighted: [],
         defaultDisplayedPeriod: getLatestDate(primaryRange, defaultPrimaryRange, secondaryRange, defaultSecondaryRange) || defaultDisplayedPeriod,
         defaultVisible: false,
+        defaultPreselectedValue: null,
+        defaultPreselectedCompare: null,
+        defaultCompareToggle: null,
+        defaultFocusedRange: 'value',
         disabled: [],
         size: 'm'
       };