intergalactic 15.65.3 → 15.66.0

package/date-picker/lib/cjs/components/DateRangeComparatorAbstract.js

@@ -12,6 +12,7 @@ exports.Header = Header;
 exports.Reset = Reset;
 exports.Trigger = Trigger;
 exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -29,34 +30,36 @@ var _intergalacticDynamicLocales = require("../translations/__intergalactic-dyna
 var _shortDateRangeFormat = _interopRequireDefault(require("../utils/shortDateRangeFormat"));
 var _checkbox = _interopRequireDefault(require("intergalactic/checkbox"));
 var _baseTrigger = require("intergalactic/base-trigger");
+var _formatDate = require("../utils/formatDate");
 /*__reshadow-styles__:"../style/date-picker.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPopper_eeteo_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_eeteo_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_eeteo_gg_:active,.___SPopper_eeteo_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_eeteo_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_eeteo_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_eeteo_gg_,.___STitle_eeteo_gg_{display:flex;align-items:center}.___STitle_eeteo_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_eeteo_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_eeteo_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_eeteo_gg_ .___SInner_eeteo_gg_{justify-content:flex-start}.___SInputMask_eeteo_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal}.___SIndicator_eeteo_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_eeteo_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_eeteo_gg_._range_value_eeteo_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_eeteo_gg_._range_compare_eeteo_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_eeteo_gg_.__disabled_eeteo_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_eeteo_gg_{position:absolute;pointer-events:none}.___SDateRange_eeteo_gg_ .___SMask_eeteo_gg_,.___SDateRange_eeteo_gg_ .___SValue_eeteo_gg_,.___SSingleDateInput_eeteo_gg_ .___SMask_eeteo_gg_,.___SSingleDateInput_eeteo_gg_ .___SValue_eeteo_gg_{opacity:0}.___SSingleDateInput_eeteo_gg_:focus-within .___SHumanizedDate_eeteo_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_eeteo_gg_:focus-within .___SMask_eeteo_gg_,.___SSingleDateInput_eeteo_gg_:focus-within .___SValue_eeteo_gg_{opacity:1}.___SDateRange_eeteo_gg_:focus-within .___SHumanizedDate_eeteo_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_eeteo_gg_:focus-within .___SMask_eeteo_gg_,.___SDateRange_eeteo_gg_:focus-within .___SValue_eeteo_gg_{opacity:1}.___SInputMask_eeteo_gg_.__noHumanizedDate_eeteo_gg_ .___SMask_eeteo_gg_,.___SInputMask_eeteo_gg_.__noHumanizedDate_eeteo_gg_ .___SValue_eeteo_gg_{opacity:1}.___SDateRange_eeteo_gg_ .___SInputMask_eeteo_gg_:focus-within .___SMask_eeteo_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_eeteo_gg_:focus-within .___SRangeSep_eeteo_gg_,.___SRangeSep_eeteo_gg_.__fulfilled_eeteo_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_eeteo_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_eeteo_gg_,.___SRangeComparatorHeader_eeteo_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_eeteo_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_eeteo_gg_,.___SPeriodsList_eeteo_gg_{padding:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "eeteo_gg_") /*__reshadow_css_end__*/, {
-  "__SHeader": "___SHeader_eeteo_gg_",
-  "__STitle": "___STitle_eeteo_gg_",
-  "__SToday": "___SToday_eeteo_gg_",
-  "__SPeriod": "___SPeriod_eeteo_gg_",
-  "__SButton": "___SButton_eeteo_gg_",
-  "__SInner": "___SInner_eeteo_gg_",
-  "__SInputMask": "___SInputMask_eeteo_gg_",
-  "__SIndicator": "___SIndicator_eeteo_gg_",
-  "__SRangeIndicator": "___SRangeIndicator_eeteo_gg_",
-  "_range_value": "_range_value_eeteo_gg_",
-  "_range_compare": "_range_compare_eeteo_gg_",
-  "_disabled": "__disabled_eeteo_gg_",
-  "__SHumanizedDate": "___SHumanizedDate_eeteo_gg_",
-  "__SSingleDateInput": "___SSingleDateInput_eeteo_gg_",
-  "__SValue": "___SValue_eeteo_gg_",
-  "__SDateRange": "___SDateRange_eeteo_gg_",
-  "__SMask": "___SMask_eeteo_gg_",
-  "_noHumanizedDate": "__noHumanizedDate_eeteo_gg_",
-  "__SRangeSep": "___SRangeSep_eeteo_gg_",
-  "_fulfilled": "__fulfilled_eeteo_gg_",
-  "__SRangeComparatorHeader": "___SRangeComparatorHeader_eeteo_gg_",
-  "__SRangeCalendar": "___SRangeCalendar_eeteo_gg_",
-  "__SFooter": "___SFooter_eeteo_gg_",
-  "__SPeriodsList": "___SPeriodsList_eeteo_gg_",
-  "__SPopper": "___SPopper_eeteo_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPopper_l5cgy_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_l5cgy_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_l5cgy_gg_:active,.___SPopper_l5cgy_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_l5cgy_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_l5cgy_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_l5cgy_gg_,.___STitle_l5cgy_gg_{display:flex;align-items:center}.___STitle_l5cgy_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_l5cgy_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_l5cgy_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_l5cgy_gg_ .___SInner_l5cgy_gg_{justify-content:flex-start}.___SInputMask_l5cgy_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal}.___SIndicator_l5cgy_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_l5cgy_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_l5cgy_gg_._range_value_l5cgy_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_l5cgy_gg_._range_compare_l5cgy_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_l5cgy_gg_.__disabled_l5cgy_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_l5cgy_gg_{position:absolute;pointer-events:none}.___SDateRange_l5cgy_gg_ .___SMask_l5cgy_gg_,.___SDateRange_l5cgy_gg_ .___SValue_l5cgy_gg_,.___SSingleDateInput_l5cgy_gg_ .___SMask_l5cgy_gg_,.___SSingleDateInput_l5cgy_gg_ .___SValue_l5cgy_gg_{opacity:0}.___SSingleDateInput_l5cgy_gg_:focus-within .___SHumanizedDate_l5cgy_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_l5cgy_gg_:focus-within .___SMask_l5cgy_gg_,.___SSingleDateInput_l5cgy_gg_:focus-within .___SValue_l5cgy_gg_{opacity:1}.___SDateRange_l5cgy_gg_:focus-within .___SHumanizedDate_l5cgy_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_l5cgy_gg_:focus-within .___SMask_l5cgy_gg_,.___SDateRange_l5cgy_gg_:focus-within .___SValue_l5cgy_gg_{opacity:1}.___SInputMask_l5cgy_gg_.__noHumanizedDate_l5cgy_gg_ .___SMask_l5cgy_gg_,.___SInputMask_l5cgy_gg_.__noHumanizedDate_l5cgy_gg_ .___SValue_l5cgy_gg_{opacity:1}.___SDateRange_l5cgy_gg_ .___SInputMask_l5cgy_gg_:focus-within .___SMask_l5cgy_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_l5cgy_gg_:focus-within .___SRangeSep_l5cgy_gg_,.___SRangeSep_l5cgy_gg_.__fulfilled_l5cgy_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_l5cgy_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_l5cgy_gg_,.___SRangeComparatorHeader_l5cgy_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_l5cgy_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_l5cgy_gg_,.___SPeriodsList_l5cgy_gg_{padding:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "l5cgy_gg_") /*__reshadow_css_end__*/, {
+  "__SHeader": "___SHeader_l5cgy_gg_",
+  "__STitle": "___STitle_l5cgy_gg_",
+  "__SToday": "___SToday_l5cgy_gg_",
+  "__SPeriod": "___SPeriod_l5cgy_gg_",
+  "__SButton": "___SButton_l5cgy_gg_",
+  "__SInner": "___SInner_l5cgy_gg_",
+  "__SInputMask": "___SInputMask_l5cgy_gg_",
+  "__SIndicator": "___SIndicator_l5cgy_gg_",
+  "__SRangeIndicator": "___SRangeIndicator_l5cgy_gg_",
+  "_range_value": "_range_value_l5cgy_gg_",
+  "_range_compare": "_range_compare_l5cgy_gg_",
+  "_disabled": "__disabled_l5cgy_gg_",
+  "__SHumanizedDate": "___SHumanizedDate_l5cgy_gg_",
+  "__SSingleDateInput": "___SSingleDateInput_l5cgy_gg_",
+  "__SValue": "___SValue_l5cgy_gg_",
+  "__SDateRange": "___SDateRange_l5cgy_gg_",
+  "__SMask": "___SMask_l5cgy_gg_",
+  "_noHumanizedDate": "__noHumanizedDate_l5cgy_gg_",
+  "__SRangeSep": "___SRangeSep_l5cgy_gg_",
+  "_fulfilled": "__fulfilled_l5cgy_gg_",
+  "__SRangeComparatorHeader": "___SRangeComparatorHeader_l5cgy_gg_",
+  "__SRangeCalendar": "___SRangeCalendar_l5cgy_gg_",
+  "__SFooter": "___SFooter_l5cgy_gg_",
+  "__SPeriodsList": "___SPeriodsList_l5cgy_gg_",
+  "__SPopper": "___SPopper_l5cgy_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() {
@@ -84,6 +87,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "popperRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "unitRefs", {});
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "navigateView", function (direction) {
       var displayedPeriod = _this.asProps.displayedPeriod;
       var action = direction >= 1 ? 'add' : 'subtract';
@@ -95,6 +99,13 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         return _this.navigateView(direction);
       };
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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);
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleApply", function (value, compare) {
       _this.handlers.value({
         value: value,
@@ -102,26 +113,97 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       });
       _this.handlers.visible(false);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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();
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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 = (0, _slicedToArray2["default"])(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], (0, _dayjs["default"])(highlighted[1] || highlighted[0]).add(day, _this.keyStep).toDate()];
+              changedDate = next_highlighted[1];
+            } else {
+              next_highlighted = [(0, _dayjs["default"])(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 : (0, _dayjs["default"])().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' ? _formatDate.formatMMYY : _formatDate.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();
+          }
+        }
+      };
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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)) {
@@ -154,15 +236,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;
@@ -248,28 +330,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);
         }
       };
     }
@@ -295,9 +370,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',
@@ -310,14 +385,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 = {
@@ -337,9 +412,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')
       };
     }
   }, {
@@ -350,21 +425,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,
@@ -373,7 +448,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this7.handlers.focusedRange('value');
+          _this6.handlers.focusedRange('value');
           return false;
         }
       };
@@ -382,23 +457,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,
@@ -407,7 +482,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this8.handlers.focusedRange('compare');
+          _this7.handlers.focusedRange('compare');
           return false;
         }
       };
@@ -416,21 +491,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');
           }
         }
       };
@@ -438,18 +513,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: (0, _dayjs["default"])(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
@@ -461,7 +537,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
       };
     }
   }, {
@@ -469,7 +548,8 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getPopperProps() {
       return {
         p: 0,
-        ref: this.popperRef
+        ref: this.popperRef,
+        onKeyDown: this.handleKeydownDown('popper')
       };
     }
   }, {
@@ -477,10 +557,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["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']
@@ -515,6 +595,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
 (0, _defineProperty2["default"])(DateRangeComparatorAbstract, "displayName", 'DateRangeComparator');
 (0, _defineProperty2["default"])(DateRangeComparatorAbstract, "style", style);
 (0, _defineProperty2["default"])(DateRangeComparatorAbstract, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
+(0, _defineProperty2["default"])(DateRangeComparatorAbstract, "subtract", function (date, amount, unit) {
+  return (0, _dayjs["default"])(date).subtract(amount, unit).toDate();
+});
 function Apply(props) {
   var _ref2 = arguments[0];
   var getI18nText = props.getI18nText;