@semcore/date-picker 4.29.2 → 4.30.0

package/lib/es6/components/DateRangeComparatorAbstract.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -19,34 +20,36 @@ import { localizedMessages } from '../translations/__intergalactic-dynamic-local
 import shortDateRangeFormat from '../utils/shortDateRangeFormat';
 import Checkbox from '@semcore/checkbox';
 import { LinkTrigger } from '@semcore/base-trigger';
+import { formatDDMMYY, formatMMYY } from '../utils/formatDate';
 /*__reshadow-styles__:"../style/date-picker.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPopper_1dfmz_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_1dfmz_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_1dfmz_gg_:active,.___SPopper_1dfmz_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_1dfmz_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_1dfmz_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_1dfmz_gg_,.___STitle_1dfmz_gg_{display:flex;align-items:center}.___STitle_1dfmz_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_1dfmz_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_1dfmz_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_1dfmz_gg_ .___SInner_1dfmz_gg_{justify-content:flex-start}.___SInputMask_1dfmz_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal}.___SIndicator_1dfmz_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_1dfmz_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_1dfmz_gg_._range_value_1dfmz_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_1dfmz_gg_._range_compare_1dfmz_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_1dfmz_gg_.__disabled_1dfmz_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_1dfmz_gg_{position:absolute;pointer-events:none}.___SDateRange_1dfmz_gg_ .___SMask_1dfmz_gg_,.___SDateRange_1dfmz_gg_ .___SValue_1dfmz_gg_,.___SSingleDateInput_1dfmz_gg_ .___SMask_1dfmz_gg_,.___SSingleDateInput_1dfmz_gg_ .___SValue_1dfmz_gg_{opacity:0}.___SSingleDateInput_1dfmz_gg_:focus-within .___SHumanizedDate_1dfmz_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_1dfmz_gg_:focus-within .___SMask_1dfmz_gg_,.___SSingleDateInput_1dfmz_gg_:focus-within .___SValue_1dfmz_gg_{opacity:1}.___SDateRange_1dfmz_gg_:focus-within .___SHumanizedDate_1dfmz_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_1dfmz_gg_:focus-within .___SMask_1dfmz_gg_,.___SDateRange_1dfmz_gg_:focus-within .___SValue_1dfmz_gg_{opacity:1}.___SInputMask_1dfmz_gg_.__noHumanizedDate_1dfmz_gg_ .___SMask_1dfmz_gg_,.___SInputMask_1dfmz_gg_.__noHumanizedDate_1dfmz_gg_ .___SValue_1dfmz_gg_{opacity:1}.___SDateRange_1dfmz_gg_ .___SInputMask_1dfmz_gg_:focus-within .___SMask_1dfmz_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_1dfmz_gg_:focus-within .___SRangeSep_1dfmz_gg_,.___SRangeSep_1dfmz_gg_.__fulfilled_1dfmz_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_1dfmz_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_1dfmz_gg_,.___SRangeComparatorHeader_1dfmz_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_1dfmz_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_1dfmz_gg_,.___SPeriodsList_1dfmz_gg_{padding:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "1dfmz_gg_") /*__reshadow_css_end__*/, {
-  "__SHeader": "___SHeader_1dfmz_gg_",
-  "__STitle": "___STitle_1dfmz_gg_",
-  "__SToday": "___SToday_1dfmz_gg_",
-  "__SPeriod": "___SPeriod_1dfmz_gg_",
-  "__SButton": "___SButton_1dfmz_gg_",
-  "__SInner": "___SInner_1dfmz_gg_",
-  "__SInputMask": "___SInputMask_1dfmz_gg_",
-  "__SIndicator": "___SIndicator_1dfmz_gg_",
-  "__SRangeIndicator": "___SRangeIndicator_1dfmz_gg_",
-  "_range_value": "_range_value_1dfmz_gg_",
-  "_range_compare": "_range_compare_1dfmz_gg_",
-  "_disabled": "__disabled_1dfmz_gg_",
-  "__SHumanizedDate": "___SHumanizedDate_1dfmz_gg_",
-  "__SSingleDateInput": "___SSingleDateInput_1dfmz_gg_",
-  "__SValue": "___SValue_1dfmz_gg_",
-  "__SDateRange": "___SDateRange_1dfmz_gg_",
-  "__SMask": "___SMask_1dfmz_gg_",
-  "_noHumanizedDate": "__noHumanizedDate_1dfmz_gg_",
-  "__SRangeSep": "___SRangeSep_1dfmz_gg_",
-  "_fulfilled": "__fulfilled_1dfmz_gg_",
-  "__SRangeComparatorHeader": "___SRangeComparatorHeader_1dfmz_gg_",
-  "__SRangeCalendar": "___SRangeCalendar_1dfmz_gg_",
-  "__SFooter": "___SFooter_1dfmz_gg_",
-  "__SPeriodsList": "___SPeriodsList_1dfmz_gg_",
-  "__SPopper": "___SPopper_1dfmz_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPopper_hw5in_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_hw5in_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_hw5in_gg_:active,.___SPopper_hw5in_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_hw5in_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_hw5in_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_hw5in_gg_,.___STitle_hw5in_gg_{display:flex;align-items:center}.___STitle_hw5in_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_hw5in_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_hw5in_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_hw5in_gg_ .___SInner_hw5in_gg_{justify-content:flex-start}.___SInputMask_hw5in_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal}.___SIndicator_hw5in_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_hw5in_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_hw5in_gg_._range_value_hw5in_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_hw5in_gg_._range_compare_hw5in_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_hw5in_gg_.__disabled_hw5in_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_hw5in_gg_{position:absolute;pointer-events:none}.___SDateRange_hw5in_gg_ .___SMask_hw5in_gg_,.___SDateRange_hw5in_gg_ .___SValue_hw5in_gg_,.___SSingleDateInput_hw5in_gg_ .___SMask_hw5in_gg_,.___SSingleDateInput_hw5in_gg_ .___SValue_hw5in_gg_{opacity:0}.___SSingleDateInput_hw5in_gg_:focus-within .___SHumanizedDate_hw5in_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_hw5in_gg_:focus-within .___SMask_hw5in_gg_,.___SSingleDateInput_hw5in_gg_:focus-within .___SValue_hw5in_gg_{opacity:1}.___SDateRange_hw5in_gg_:focus-within .___SHumanizedDate_hw5in_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_hw5in_gg_:focus-within .___SMask_hw5in_gg_,.___SDateRange_hw5in_gg_:focus-within .___SValue_hw5in_gg_{opacity:1}.___SInputMask_hw5in_gg_.__noHumanizedDate_hw5in_gg_ .___SMask_hw5in_gg_,.___SInputMask_hw5in_gg_.__noHumanizedDate_hw5in_gg_ .___SValue_hw5in_gg_{opacity:1}.___SDateRange_hw5in_gg_ .___SInputMask_hw5in_gg_:focus-within .___SMask_hw5in_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_hw5in_gg_:focus-within .___SRangeSep_hw5in_gg_,.___SRangeSep_hw5in_gg_.__fulfilled_hw5in_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_hw5in_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_hw5in_gg_,.___SRangeComparatorHeader_hw5in_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_hw5in_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_hw5in_gg_,.___SPeriodsList_hw5in_gg_{padding:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "hw5in_gg_") /*__reshadow_css_end__*/, {
+  "__SHeader": "___SHeader_hw5in_gg_",
+  "__STitle": "___STitle_hw5in_gg_",
+  "__SToday": "___SToday_hw5in_gg_",
+  "__SPeriod": "___SPeriod_hw5in_gg_",
+  "__SButton": "___SButton_hw5in_gg_",
+  "__SInner": "___SInner_hw5in_gg_",
+  "__SInputMask": "___SInputMask_hw5in_gg_",
+  "__SIndicator": "___SIndicator_hw5in_gg_",
+  "__SRangeIndicator": "___SRangeIndicator_hw5in_gg_",
+  "_range_value": "_range_value_hw5in_gg_",
+  "_range_compare": "_range_compare_hw5in_gg_",
+  "_disabled": "__disabled_hw5in_gg_",
+  "__SHumanizedDate": "___SHumanizedDate_hw5in_gg_",
+  "__SSingleDateInput": "___SSingleDateInput_hw5in_gg_",
+  "__SValue": "___SValue_hw5in_gg_",
+  "__SDateRange": "___SDateRange_hw5in_gg_",
+  "__SMask": "___SMask_hw5in_gg_",
+  "_noHumanizedDate": "__noHumanizedDate_hw5in_gg_",
+  "__SRangeSep": "___SRangeSep_hw5in_gg_",
+  "_fulfilled": "__fulfilled_hw5in_gg_",
+  "__SRangeComparatorHeader": "___SRangeComparatorHeader_hw5in_gg_",
+  "__SRangeCalendar": "___SRangeCalendar_hw5in_gg_",
+  "__SFooter": "___SFooter_hw5in_gg_",
+  "__SPeriodsList": "___SPeriodsList_hw5in_gg_",
+  "__SPopper": "___SPopper_hw5in_gg_"
 });
+var INTERACTION_TAGS = ['INPUT'];
 var INTERACTION_KEYS = ['ArrowDown', 'Enter', 'Space'];
 var defaultDisplayedPeriod = new Date(new Date().setHours(0, 0, 0, 0));
 var getLatestDate = function getLatestDate() {
@@ -74,6 +77,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "popperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "unitRefs", {});
     _defineProperty(_assertThisInitialized(_this), "navigateView", function (direction) {
       var displayedPeriod = _this.asProps.displayedPeriod;
       var action = direction >= 1 ? 'add' : 'subtract';
@@ -85,6 +89,13 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         return _this.navigateView(direction);
       };
     });
+    _defineProperty(_assertThisInitialized(_this), "handleApplyClick", function () {
+      var _this$asProps = _this.asProps,
+        value = _this$asProps.value,
+        preselectedValue = _this$asProps.preselectedValue,
+        preselectedCompare = _this$asProps.preselectedCompare;
+      return _this.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);
+    });
     _defineProperty(_assertThisInitialized(_this), "handleApply", function (value, compare) {
       _this.handlers.value({
         value: value,
@@ -92,26 +103,97 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       });
       _this.handlers.visible(false);
     });
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
-      var visible = _this.asProps.visible;
-      var key = e.code;
-      if (INTERACTION_KEYS.includes(key)) {
-        e.stopPropagation();
-        _this.handlers.visible(!visible);
-        setTimeout(function () {
-          var popper = _this.popperRef.current;
-          if (popper) {
-            popper.focus();
+    _defineProperty(_assertThisInitialized(_this), "handleKeydownDown", function (place) {
+      return function (e) {
+        var _this$asProps2 = _this.asProps,
+          displayedPeriod = _this$asProps2.displayedPeriod,
+          preselectedValue = _this$asProps2.preselectedValue,
+          visible = _this$asProps2.visible,
+          focusedRange = _this$asProps2.focusedRange;
+        var key = e.code;
+        var highlighted = focusedRange === 'compare' ? _this.asProps.compareHighlighted : _this.asProps.highlighted;
+        if (place === 'trigger' && INTERACTION_KEYS.includes(key)) {
+          e.stopPropagation();
+          _this.handlers.visible(!visible);
+          setTimeout(function () {
+            var popper = _this.popperRef.current;
+            if (popper) {
+              popper.focus();
+            }
+          }, 0);
+        }
+        var day = _this.keyDiff[key];
+        var setNextDisplayedPeriod = function setNextDisplayedPeriod(next_highlighted) {
+          var _next_highlighted = _slicedToArray(next_highlighted, 2),
+            left_period = _next_highlighted[0],
+            right_period = _next_highlighted[1];
+          var monthDisplayedPeriod = displayedPeriod === null || displayedPeriod === void 0 ? void 0 : displayedPeriod.getMonth();
+          var period = right_period || left_period;
+          if (period) {
+            if (!monthDisplayedPeriod) {
+              return period;
+            }
+            if (period.getMonth() - monthDisplayedPeriod > 1) {
+              return DateRangeComparatorAbstract.subtract(period, 1, 'month');
+            } else if (period.getMonth() - monthDisplayedPeriod < 0) {
+              return period;
+            }
           }
-        }, 0);
-      }
+          return displayedPeriod;
+        };
+        if (place === 'popper' && e.code === 'Space' && highlighted.length) {
+          var highlightedDate = highlighted[1] || highlighted[0];
+          if (!_this.isDisabled(highlightedDate)) {
+            _this.handleChange(highlightedDate);
+          }
+          e.preventDefault();
+        }
+        if (place === 'popper' && e.code === 'Enter' && (e.metaKey || e.ctrlKey)) {
+          return _this.handleApplyClick();
+        }
+        var changedDate = undefined;
+        if (day) {
+          if (INTERACTION_TAGS.includes(e.target.tagName)) return;
+          if (highlighted.length) {
+            var next_highlighted;
+            if ((preselectedValue === null || preselectedValue === void 0 ? void 0 : preselectedValue.length) === 1) {
+              next_highlighted = [preselectedValue[0], dayjs(highlighted[1] || highlighted[0]).add(day, _this.keyStep).toDate()];
+              changedDate = next_highlighted[1];
+            } else {
+              next_highlighted = [dayjs(highlighted[0]).add(day, _this.keyStep).toDate()];
+              changedDate = next_highlighted[0];
+            }
+            if (focusedRange === 'compare') {
+              _this.handlers.compareHighlighted(next_highlighted);
+            } else {
+              _this.handlers.highlighted(next_highlighted);
+            }
+            _this.handlers.displayedPeriod(setNextDisplayedPeriod(next_highlighted));
+          } else {
+            var _highlighted = [displayedPeriod ? displayedPeriod : dayjs().toDate()];
+            if (focusedRange === 'compare') {
+              _this.handlers.compareHighlighted(_highlighted);
+            } else {
+              _this.handlers.highlighted(_highlighted);
+            }
+            changedDate = _highlighted[0];
+          }
+          e.preventDefault();
+          if (changedDate) {
+            var _this$unitRefs$format;
+            var formatter = _this.keyStep === 'month' ? formatMMYY : formatDDMMYY;
+            var formattedDate = formatter(changedDate, _this.asProps.locale);
+            (_this$unitRefs$format = _this.unitRefs[formattedDate]) === null || _this$unitRefs$format === void 0 ? void 0 : _this$unitRefs$format.focus();
+          }
+        }
+      };
     });
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (date) {
       var _value, _value2, _value3;
-      var _this$asProps = _this.asProps,
-        focusedRange = _this$asProps.focusedRange,
-        preselectedCompare = _this$asProps.preselectedCompare,
-        preselectedValue = _this$asProps.preselectedValue;
+      var _this$asProps3 = _this.asProps,
+        focusedRange = _this$asProps3.focusedRange,
+        preselectedCompare = _this$asProps3.preselectedCompare,
+        preselectedValue = _this$asProps3.preselectedValue;
       var highlighted = [];
       var value = focusedRange === 'compare' ? preselectedCompare : preselectedValue;
       if (Array.isArray(date)) {
@@ -144,15 +226,15 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getPeriodProps() {
       var _this$asProps$value,
         _this2 = this;
-      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 _this$asProps4 = this.asProps,
+        _this$asProps4$period = _this$asProps4.periods,
+        periods = _this$asProps4$period === void 0 ? this.getDefaultPeriods() : _this$asProps4$period,
+        onHighlightedChange = _this$asProps4.onHighlightedChange,
+        onCompareHighlightedChange = _this$asProps4.onCompareHighlightedChange,
+        onDisplayedPeriodChange = _this$asProps4.onDisplayedPeriodChange,
+        preselectedValue = _this$asProps4.preselectedValue,
+        preselectedCompare = _this$asProps4.preselectedCompare,
+        focusedRange = _this$asProps4.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;
@@ -238,28 +320,21 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
   }, {
     key: "getApplyProps",
     value: function getApplyProps() {
-      var _this4 = this;
-      var _this$asProps3 = this.asProps,
-        value = _this$asProps3.value,
-        getI18nText = _this$asProps3.getI18nText,
-        preselectedValue = _this$asProps3.preselectedValue,
-        preselectedCompare = _this$asProps3.preselectedCompare;
+      var getI18nText = this.asProps.getI18nText;
       return {
         getI18nText: getI18nText,
-        onClick: function onClick() {
-          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);
-        }
+        onClick: this.handleApplyClick
       };
     }
   }, {
     key: "getResetProps",
     value: function getResetProps() {
-      var _this5 = this;
+      var _this4 = this;
       var getI18nText = this.asProps.getI18nText;
       return {
         getI18nText: getI18nText,
         onClick: function onClick() {
-          return _this5.handleApply(null, null);
+          return _this4.handleApply(null, null);
         }
       };
     }
@@ -285,9 +360,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
   }, {
     key: "getTitleProps",
     value: function getTitleProps(props, index) {
-      var _this$asProps4 = this.asProps,
-        locale = _this$asProps4.locale,
-        displayedPeriod = _this$asProps4.displayedPeriod;
+      var _this$asProps5 = this.asProps,
+        locale = _this$asProps5.locale,
+        displayedPeriod = _this$asProps5.displayedPeriod;
       return {
         children: new Intl.DateTimeFormat(locale, {
           month: 'long',
@@ -300,14 +375,14 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getTriggerProps(_ref10) {
       var _this$asProps$value3,
         _this$asProps$value4,
-        _this6 = this;
+        _this5 = this;
       var _ref10$placeholder = _ref10.placeholder,
         placeholder = _ref10$placeholder === void 0 ? 'Select date ranges' : _ref10$placeholder,
         _ref10$separator = _ref10.separator,
         separator = _ref10$separator === void 0 ? 'vs.' : _ref10$separator;
-      var _this$asProps5 = this.asProps,
-        locale = _this$asProps5.locale,
-        visible = _this$asProps5.visible;
+      var _this$asProps6 = this.asProps,
+        locale = _this$asProps6.locale,
+        visible = _this$asProps6.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 = {
@@ -327,9 +402,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: children,
         visible: visible,
         onClick: function onClick() {
-          return _this6.handlers.visible(!visible);
+          return _this5.handlers.visible(!visible);
         },
-        onKeyDown: this.handleKeyDown
+        onKeyDown: this.handleKeydownDown('trigger')
       };
     }
   }, {
@@ -340,21 +415,21 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
   }, {
     key: "getValueDateRangeProps",
     value: function getValueDateRangeProps() {
-      var _this7 = 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,
-        focusedRange = _this$asProps6.focusedRange,
-        preselectedValue = _this$asProps6.preselectedValue;
+      var _this6 = this;
+      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,
+        preselectedValue = _this$asProps7.preselectedValue;
       return {
         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.handlers.preselectedValue(value);
+          return _this6.handlers.preselectedValue(value);
         },
         onDisplayedPeriodChange: onDisplayedPeriodChange,
         locale: locale,
@@ -363,7 +438,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this7.handlers.focusedRange('value');
+          _this6.handlers.focusedRange('value');
           return false;
         }
       };
@@ -372,23 +447,23 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     key: "getCompareDateRangeProps",
     value: function getCompareDateRangeProps() {
       var _value$compare,
-        _this8 = this;
-      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;
+        _this7 = this;
+      var _this$asProps8 = this.asProps,
+        value = _this$asProps8.value,
+        onDisplayedPeriodChange = _this$asProps8.onDisplayedPeriodChange,
+        locale = _this$asProps8.locale,
+        disabled = _this$asProps8.disabled,
+        size = _this$asProps8.size,
+        getI18nText = _this$asProps8.getI18nText,
+        focusedRange = _this$asProps8.focusedRange,
+        preselectedCompare = _this$asProps8.preselectedCompare,
+        compareToggle = _this$asProps8.compareToggle;
       return {
         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.handlers.preselectedCompare(value);
+          return _this7.handlers.preselectedCompare(value);
         },
         onDisplayedPeriodChange: onDisplayedPeriodChange,
         locale: locale,
@@ -397,7 +472,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this8.handlers.focusedRange('compare');
+          _this7.handlers.focusedRange('compare');
           return false;
         }
       };
@@ -406,21 +481,21 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     key: "getCompareToggleProps",
     value: function getCompareToggleProps() {
       var _value$compare2,
-        _this9 = this;
-      var _this$asProps8 = this.asProps,
-        getI18nText = _this$asProps8.getI18nText,
-        value = _this$asProps8.value,
-        compareToggle = _this$asProps8.compareToggle;
+        _this8 = this;
+      var _this$asProps9 = this.asProps,
+        getI18nText = _this$asProps9.getI18nText,
+        value = _this$asProps9.value,
+        compareToggle = _this$asProps9.compareToggle;
       return {
         getI18nText: getI18nText,
         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.handlers.compareToggle(true);
-            _this9.handlers.focusedRange('compare');
+            _this8.handlers.compareToggle(true);
+            _this8.handlers.focusedRange('compare');
           } else {
-            _this9.handlers.compareToggle(false);
-            _this9.handlers.focusedRange('value');
+            _this8.handlers.compareToggle(false);
+            _this8.handlers.focusedRange('value');
           }
         }
       };
@@ -428,18 +503,19 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
   }, {
     key: "getCalendarProps",
     value: function getCalendarProps(_props, index) {
-      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;
+      var _this$asProps10 = this.asProps,
+        locale = _this$asProps10.locale,
+        displayedPeriod = _this$asProps10.displayedPeriod,
+        disabled = _this$asProps10.disabled,
+        value = _this$asProps10.value,
+        onCompareHighlightedChange = _this$asProps10.onCompareHighlightedChange,
+        highlighted = _this$asProps10.highlighted,
+        compareHighlighted = _this$asProps10.compareHighlighted,
+        onHighlightedChange = _this$asProps10.onHighlightedChange,
+        preselectedCompare = _this$asProps10.preselectedCompare,
+        preselectedValue = _this$asProps10.preselectedValue,
+        focusedRange = _this$asProps10.focusedRange,
+        getI18nText = _this$asProps10.getI18nText;
       return {
         locale: locale,
         displayedPeriod: dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
@@ -451,7 +527,10 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         onHighlightedChange: onHighlightedChange,
         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
+        compare: preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare,
+        unitRefs: this.unitRefs,
+        getI18nText: getI18nText,
+        actionsDescribing: index === 0 ? 'range-compare' : null
       };
     }
   }, {
@@ -459,7 +538,8 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getPopperProps() {
       return {
         p: 0,
-        ref: this.popperRef
+        ref: this.popperRef,
+        onKeyDown: this.handleKeydownDown('popper')
       };
     }
   }, {
@@ -467,10 +547,10 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _ref = this.asProps,
         _ref4;
-      var _this$asProps10 = this.asProps,
-        Children = _this$asProps10.Children,
-        styles = _this$asProps10.styles,
-        providedAriaLabel = _this$asProps10['aria-label'];
+      var _this$asProps11 = this.asProps,
+        Children = _this$asProps11.Children,
+        styles = _this$asProps11.styles,
+        providedAriaLabel = _this$asProps11['aria-label'];
       return /*#__PURE__*/React.createElement(React.Fragment, null, (_ref4 = sstyled(styles), /*#__PURE__*/React.createElement(Dropdown, _assignProps({
         "use:aria-label": providedAriaLabel,
         "__excludeProps": ['onChange', 'value']
@@ -505,6 +585,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
 _defineProperty(DateRangeComparatorAbstract, "displayName", 'DateRangeComparator');
 _defineProperty(DateRangeComparatorAbstract, "style", style);
 _defineProperty(DateRangeComparatorAbstract, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(DateRangeComparatorAbstract, "subtract", function (date, amount, unit) {
+  return dayjs(date).subtract(amount, unit).toDate();
+});
 function Apply(props) {
   var _ref2 = arguments[0];
   var getI18nText = props.getI18nText;