@semcore/date-picker 4.57.2-prerelease.0 → 4.58.0-prerelease.0

package/lib/cjs/components/DateRangeComparatorAbstract.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,56 +16,54 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 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"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _index = require("@semcore/utils/lib/core/index");
 var _core = require("@semcore/core");
-var _react = _interopRequireDefault(require("react"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
+var _baseComponents = require("@semcore/base-components");
+var _baseTrigger = require("@semcore/base-trigger");
 var _button = _interopRequireDefault(require("@semcore/button"));
-var _flexBox = require("@semcore/flex-box");
+var _checkbox = _interopRequireDefault(require("@semcore/checkbox"));
+var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
 var _dropdown = _interopRequireDefault(require("@semcore/dropdown"));
-var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _react = _interopRequireDefault(require("react"));
 var _intergalacticDynamicLocales = require("../translations/__intergalactic-dynamic-locales");
-var _shortDateRangeFormat = _interopRequireDefault(require("../utils/shortDateRangeFormat"));
-var _checkbox = _interopRequireDefault(require("@semcore/checkbox"));
-var _baseTrigger = require("@semcore/base-trigger");
-var _includesDate = require("../utils/includesDate");
 var _formatDate = require("../utils/formatDate");
+var _includesDate = require("../utils/includesDate");
+var _shortDateRangeFormat = _interopRequireDefault(require("../utils/shortDateRangeFormat"));
 /*!__reshadow-styles__:"../style/date-picker.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SPopper_1f8n3_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_1f8n3_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_1f8n3_gg_:active,.___SPopper_1f8n3_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_1f8n3_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_1f8n3_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_1f8n3_gg_,.___STitle_1f8n3_gg_{display:flex;align-items:center}.___STitle_1f8n3_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_1f8n3_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_1f8n3_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_1f8n3_gg_ .___SInner_1f8n3_gg_{justify-content:flex-start}.___SInputMask_1f8n3_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal;padding-right:var(--intergalactic-spacing-2x, 8px);transition:width calc(var(--intergalactic-duration-medium, 300)*1ms) ease,min-width calc(var(--intergalactic-duration-medium, 300)*1ms) ease}.___SInputMask_1f8n3_gg_.__animationsDisabled_1f8n3_gg_{transition:none}.___SInputMask_1f8n3_gg_ .___SValue_1f8n3_gg_{letter-spacing:0}.___SIndicator_1f8n3_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_1f8n3_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_1f8n3_gg_._range_value_1f8n3_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_1f8n3_gg_._range_compare_1f8n3_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_1f8n3_gg_.__disabled_1f8n3_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_1f8n3_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_1f8n3_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_1f8n3_gg_ .___SMask_1f8n3_gg_,.___SDateRange_1f8n3_gg_ .___SValue_1f8n3_gg_,.___SSingleDateInput_1f8n3_gg_ .___SMask_1f8n3_gg_,.___SSingleDateInput_1f8n3_gg_ .___SValue_1f8n3_gg_{opacity:0}.___SSingleDateInput_1f8n3_gg_:focus-within .___SHumanizedDate_1f8n3_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_1f8n3_gg_:focus-within .___SMask_1f8n3_gg_,.___SSingleDateInput_1f8n3_gg_:focus-within .___SValue_1f8n3_gg_{opacity:1}.___SDateRange_1f8n3_gg_:focus-within .___SHumanizedDate_1f8n3_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_1f8n3_gg_:focus-within .___SMask_1f8n3_gg_,.___SDateRange_1f8n3_gg_:focus-within .___SValue_1f8n3_gg_{opacity:1}.___SInputMask_1f8n3_gg_.__noHumanizedDate_1f8n3_gg_ .___SMask_1f8n3_gg_,.___SInputMask_1f8n3_gg_.__noHumanizedDate_1f8n3_gg_ .___SValue_1f8n3_gg_{opacity:1}.___SDateRange_1f8n3_gg_ .___SInputMask_1f8n3_gg_:focus-within .___SMask_1f8n3_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_1f8n3_gg_:focus-within .___SRangeSep_1f8n3_gg_,.___SRangeSep_1f8n3_gg_.__fulfilled_1f8n3_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_1f8n3_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_1f8n3_gg_,.___SRangeComparatorHeader_1f8n3_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_1f8n3_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_1f8n3_gg_,.___SPeriodsList_1f8n3_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_1f8n3_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_1f8n3_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_1f8n3_gg_{transition:none}}", /*__inner_css_end__*/"1f8n3_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPopper_9s22y_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_9s22y_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_9s22y_gg_:active,.___SPopper_9s22y_gg_:focus{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_9s22y_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SHeader_9s22y_gg_,.___STitle_9s22y_gg_{display:flex;align-items:center}.___STitle_9s22y_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));height:32px;width:100%;justify-content:center}.___SToday_9s22y_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_9s22y_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_9s22y_gg_ .___SInner_9s22y_gg_{justify-content:flex-start}.___SInputMask_9s22y_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));line-height:normal;padding-right:var(--intergalactic-spacing-2x, 8px);transition:width calc(var(--intergalactic-duration-medium, 300)*1ms) ease,min-width calc(var(--intergalactic-duration-medium, 300)*1ms) ease}.___SInputMask_9s22y_gg_.__animationsDisabled_9s22y_gg_{transition:none}.___SInputMask_9s22y_gg_ .___SValue_9s22y_gg_{letter-spacing:0}.___SInputMask_9s22y_gg_ .___SValue_9s22y_gg_:focus{outline:0}.___SIndicator_9s22y_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SIndicator_9s22y_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SIndicator_9s22y_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SRangeIndicator_9s22y_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_9s22y_gg_._range_value_9s22y_gg_{background-color:var(--intergalactic-date-picker-cell-active, rgb(123, 130, 220))}.___SRangeIndicator_9s22y_gg_._range_compare_9s22y_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, rgb(162, 97, 253))}.___SRangeIndicator_9s22y_gg_.__disabled_9s22y_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SHumanizedDate_9s22y_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_9s22y_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_9s22y_gg_ .___SMask_9s22y_gg_,.___SDateRange_9s22y_gg_ .___SValue_9s22y_gg_,.___SSingleDateInput_9s22y_gg_ .___SMask_9s22y_gg_,.___SSingleDateInput_9s22y_gg_ .___SValue_9s22y_gg_{opacity:0}.___SSingleDateInput_9s22y_gg_:focus-within .___SHumanizedDate_9s22y_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_9s22y_gg_:focus-within .___SMask_9s22y_gg_,.___SSingleDateInput_9s22y_gg_:focus-within .___SValue_9s22y_gg_{opacity:1}.___SDateRange_9s22y_gg_:focus-within .___SHumanizedDate_9s22y_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_9s22y_gg_:focus-within .___SMask_9s22y_gg_,.___SDateRange_9s22y_gg_:focus-within .___SValue_9s22y_gg_{opacity:1}.___SInputMask_9s22y_gg_.__noHumanizedDate_9s22y_gg_ .___SMask_9s22y_gg_,.___SInputMask_9s22y_gg_.__noHumanizedDate_9s22y_gg_ .___SValue_9s22y_gg_{opacity:1}.___SDateRange_9s22y_gg_ .___SInputMask_9s22y_gg_:focus-within .___SMask_9s22y_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgb(231, 234, 251))}.___SDateRange_9s22y_gg_:focus-within .___SRangeSep_9s22y_gg_,.___SRangeSep_9s22y_gg_.__fulfilled_9s22y_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___SRangeComparatorHeader_9s22y_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));padding:var(--intergalactic-spacing-4x, 16px)}@supports (color:color(display-p3 0 0 0%)){.___SRangeComparatorHeader_9s22y_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SRangeComparatorHeader_9s22y_gg_{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SFooter_9s22y_gg_,.___SRangeCalendar_9s22y_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_9s22y_gg_{border-top:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___SFooter_9s22y_gg_{border-top:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SFooter_9s22y_gg_{border-top:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SPeriodsList_9s22y_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_9s22y_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_9s22y_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_9s22y_gg_{transition:none}}", /*__inner_css_end__*/"9s22y_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHeader": "___SHeader_1f8n3_gg_",
-  "__STitle": "___STitle_1f8n3_gg_",
-  "__SToday": "___SToday_1f8n3_gg_",
-  "__SPeriod": "___SPeriod_1f8n3_gg_",
-  "__SButton": "___SButton_1f8n3_gg_",
-  "__SInner": "___SInner_1f8n3_gg_",
-  "__SInputMask": "___SInputMask_1f8n3_gg_",
-  "_animationsDisabled": "__animationsDisabled_1f8n3_gg_",
-  "__SValue": "___SValue_1f8n3_gg_",
-  "__SIndicator": "___SIndicator_1f8n3_gg_",
-  "__SRangeIndicator": "___SRangeIndicator_1f8n3_gg_",
-  "_range_value": "_range_value_1f8n3_gg_",
-  "_range_compare": "_range_compare_1f8n3_gg_",
-  "_disabled": "__disabled_1f8n3_gg_",
-  "__SHumanizedDate": "___SHumanizedDate_1f8n3_gg_",
-  "__SMask": "___SMask_1f8n3_gg_",
-  "__SSingleDateInput": "___SSingleDateInput_1f8n3_gg_",
-  "__SDateRange": "___SDateRange_1f8n3_gg_",
-  "_noHumanizedDate": "__noHumanizedDate_1f8n3_gg_",
-  "__SRangeSep": "___SRangeSep_1f8n3_gg_",
-  "_fulfilled": "__fulfilled_1f8n3_gg_",
-  "__SRangeComparatorHeader": "___SRangeComparatorHeader_1f8n3_gg_",
-  "__SRangeCalendar": "___SRangeCalendar_1f8n3_gg_",
-  "__SFooter": "___SFooter_1f8n3_gg_",
-  "__SPeriodsList": "___SPeriodsList_1f8n3_gg_",
-  "__STooltip": "___STooltip_1f8n3_gg_",
-  "__SCompareToggle": "___SCompareToggle_1f8n3_gg_",
-  "__SPopper": "___SPopper_1f8n3_gg_"
+  "__SHeader": "___SHeader_9s22y_gg_",
+  "__STitle": "___STitle_9s22y_gg_",
+  "__SToday": "___SToday_9s22y_gg_",
+  "__SPeriod": "___SPeriod_9s22y_gg_",
+  "__SButton": "___SButton_9s22y_gg_",
+  "__SInner": "___SInner_9s22y_gg_",
+  "__SInputMask": "___SInputMask_9s22y_gg_",
+  "_animationsDisabled": "__animationsDisabled_9s22y_gg_",
+  "__SIndicator": "___SIndicator_9s22y_gg_",
+  "__SRangeIndicator": "___SRangeIndicator_9s22y_gg_",
+  "_range_value": "_range_value_9s22y_gg_",
+  "_range_compare": "_range_compare_9s22y_gg_",
+  "_disabled": "__disabled_9s22y_gg_",
+  "__SHumanizedDate": "___SHumanizedDate_9s22y_gg_",
+  "__SMask": "___SMask_9s22y_gg_",
+  "__SSingleDateInput": "___SSingleDateInput_9s22y_gg_",
+  "__SValue": "___SValue_9s22y_gg_",
+  "__SDateRange": "___SDateRange_9s22y_gg_",
+  "_noHumanizedDate": "__noHumanizedDate_9s22y_gg_",
+  "__SRangeSep": "___SRangeSep_9s22y_gg_",
+  "_fulfilled": "__fulfilled_9s22y_gg_",
+  "__SRangeComparatorHeader": "___SRangeComparatorHeader_9s22y_gg_",
+  "__SRangeCalendar": "___SRangeCalendar_9s22y_gg_",
+  "__SFooter": "___SFooter_9s22y_gg_",
+  "__SPeriodsList": "___SPeriodsList_9s22y_gg_",
+  "__STooltip": "___STooltip_9s22y_gg_",
+  "__SCompareToggle": "___SCompareToggle_9s22y_gg_",
+  "__SPopper": "___SPopper_9s22y_gg_"
 });
 var INTERACTION_TAGS = ['INPUT'];
 var INTERACTION_KEYS = ['ArrowDown', 'Enter', ' '];
@@ -85,51 +83,56 @@ var getLatestDate = function getLatestDate() {
   return latestDate;
 };
 var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(DateRangeComparatorAbstract, _Component);
-  var _super = (0, _createSuper2["default"])(DateRangeComparatorAbstract);
   function DateRangeComparatorAbstract() {
     var _this;
     (0, _classCallCheck2["default"])(this, DateRangeComparatorAbstract);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _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) {
+    _this = (0, _callSuper2["default"])(this, DateRangeComparatorAbstract, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "prevButtonRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "nextButtonRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "popperRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "resetButtonRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "applyButtonRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "periodRefs", []);
+    (0, _defineProperty2["default"])(_this, "unitRefs", {});
+    (0, _defineProperty2["default"])(_this, "navigateView", function (direction) {
       var displayedPeriod = _this.asProps.displayedPeriod;
       var action = direction >= 1 ? 'add' : 'subtract';
       var date = (0, _dayjs["default"])(displayedPeriod)[action](1, _this.navigateStep).toDate();
       _this.handlers.displayedPeriod(date);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerNavigateClick", function (direction) {
+    (0, _defineProperty2["default"])(_this, "bindHandlerNavigateClick", function (direction) {
       return function () {
         return _this.navigateView(direction);
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleApplyClick", function () {
+    (0, _defineProperty2["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) {
+    (0, _defineProperty2["default"])(_this, "handleApply", function (value, compare) {
       _this.handlers.value({
         value: value,
         compare: compare
       });
       _this.handlers.visible(false);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeydownDown", function (place) {
+    (0, _defineProperty2["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.key;
+        var key = e.key,
+          target = e.target;
         var highlighted = focusedRange === 'compare' ? _this.asProps.compareHighlighted : _this.asProps.highlighted;
+        if ([' ', 'Enter'].includes(key) && [_this.prevButtonRef.current, _this.nextButtonRef.current].includes(target)) return;
         if (place === 'trigger' && INTERACTION_KEYS.includes(key)) {
           e.preventDefault();
           e.stopPropagation();
@@ -163,7 +166,13 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
           }
           return displayedPeriod;
         };
-        if (place === 'popper' && e.key === ' ' && highlighted.length) {
+        var isPeriodTarget = _this.periodRefs.find(function (el) {
+          return el === target;
+        });
+        var isResetButtonTarget = target === _this.resetButtonRef.current;
+        var isApplyButtonTarget = target === _this.applyButtonRef.current;
+        var areTargetedControls = isPeriodTarget || isResetButtonTarget || isApplyButtonTarget;
+        if (place === 'popper' && e.key === ' ' && highlighted.length && !areTargetedControls) {
           var highlightedDate = highlighted[1] || highlighted[0];
           if (!_this.isDisabled(highlightedDate)) {
             _this.handleChange(highlightedDate);
@@ -205,17 +214,17 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
             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();
+            (_this$unitRefs$format = _this.unitRefs[formattedDate]) === null || _this$unitRefs$format === void 0 || _this$unitRefs$format.focus();
           }
         }
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "triggerFormattingProps", {
+    (0, _defineProperty2["default"])(_this, "triggerFormattingProps", {
       day: 'numeric',
       month: 'short',
       year: 'numeric'
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (date) {
+    (0, _defineProperty2["default"])(_this, "handleChange", function (date) {
       var _value, _value2, _value3;
       var _this$asProps3 = _this.asProps,
         focusedRange = _this$asProps3.focusedRange,
@@ -248,7 +257,8 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  (0, _createClass2["default"])(DateRangeComparatorAbstract, [{
+  (0, _inherits2["default"])(DateRangeComparatorAbstract, _Component);
+  return (0, _createClass2["default"])(DateRangeComparatorAbstract, [{
     key: "getPeriodProps",
     value: function getPeriodProps() {
       var _this$asProps$value,
@@ -271,17 +281,23 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       return {
         periods: periods,
         value: value,
-        onChange: function onChange(value) {
+        'onChange': function onChange(value) {
           if (focusedRange === 'compare') {
             _this2.handlers.preselectedCompare(value);
           } else {
             _this2.handlers.preselectedValue(value);
           }
         },
-        onHighlightedChange: focusedRange === 'compare' ? onCompareHighlightedChange : onHighlightedChange,
+        'onHighlightedChange': focusedRange === 'compare' ? onCompareHighlightedChange : onHighlightedChange,
         onDisplayedPeriodChange: onDisplayedPeriodChange,
-        role: 'listbox',
-        'aria-label': getI18nText('periods')
+        'role': 'listbox',
+        'aria-label': getI18nText('periods'),
+        'periodRef': function periodRef(index) {
+          return function (element) {
+            if (!element) return;
+            _this2.periodRefs[index] = element;
+          };
+        }
       };
     }
   }, {
@@ -291,7 +307,8 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       var navigateStep = this.navigateStep;
       return {
         getI18nText: getI18nText,
-        onClick: this.bindHandlerNavigateClick(-1),
+        'ref': this.prevButtonRef,
+        'onClick': this.bindHandlerNavigateClick(-1),
         'aria-label': navigateStep === 'month' ? getI18nText('prevMonth') : getI18nText('prevYear')
       };
     }
@@ -302,7 +319,8 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       var navigateStep = this.navigateStep;
       return {
         getI18nText: getI18nText,
-        onClick: this.bindHandlerNavigateClick(1),
+        'ref': this.nextButtonRef,
+        'onClick': this.bindHandlerNavigateClick(1),
         'aria-label': navigateStep === 'month' ? getI18nText('nextMonth') : getI18nText('nextYear')
       };
     }
@@ -321,8 +339,8 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
             _this3.handlers.compareToggle(undefined);
             _this3.handlers.focusedRange('value');
           } else {
-            var _this3$asProps$value, _this3$asProps$value$;
-            _this3.handlers.compareToggle(!!((_this3$asProps$value = _this3.asProps.value) !== null && _this3$asProps$value !== void 0 && (_this3$asProps$value$ = _this3$asProps$value.compare) !== null && _this3$asProps$value$ !== void 0 && _this3$asProps$value$.length));
+            var _this3$asProps$value;
+            _this3.handlers.compareToggle(!!((_this3$asProps$value = _this3.asProps.value) !== null && _this3$asProps$value !== void 0 && (_this3$asProps$value = _this3$asProps$value.compare) !== null && _this3$asProps$value !== void 0 && _this3$asProps$value.length));
           }
           var _this3$asProps = _this3.asProps,
             value = _this3$asProps.value,
@@ -348,7 +366,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         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;
-            return date === null || date === void 0 ? void 0 : (_date$isValid = date.isValid) === null || _date$isValid === void 0 ? void 0 : _date$isValid.call(date);
+            return date === null || date === void 0 || (_date$isValid = date.isValid) === null || _date$isValid === void 0 ? void 0 : _date$isValid.call(date);
           });
           if (dates.length > 0) _this3.handlers.displayedPeriod(getLatestDate(value));
         }]
@@ -360,7 +378,8 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       var getI18nText = this.asProps.getI18nText;
       return {
         getI18nText: getI18nText,
-        onClick: this.handleApplyClick
+        onClick: this.handleApplyClick,
+        ref: this.applyButtonRef
       };
     }
   }, {
@@ -372,7 +391,8 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         getI18nText: getI18nText,
         onClick: function onClick() {
           return _this4.handleApply(null, null);
-        }
+        },
+        ref: this.resetButtonRef
       };
     }
   }, {
@@ -402,7 +422,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "getTitleProps",
-    value: function getTitleProps(props, index) {
+    value: function getTitleProps(_props, index) {
       var _this$asProps5 = this.asProps,
         locale = _this$asProps5.locale,
         displayedPeriod = _this$asProps5.displayedPeriod;
@@ -415,14 +435,14 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "getTriggerProps",
-    value: function getTriggerProps(_ref10) {
+    value: function getTriggerProps(_ref0) {
       var _this$asProps$value3,
         _this$asProps$value4,
         _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 _ref0$placeholder = _ref0.placeholder,
+        placeholder = _ref0$placeholder === void 0 ? 'Select date ranges' : _ref0$placeholder,
+        _ref0$separator = _ref0.separator,
+        separator = _ref0$separator === void 0 ? 'vs.' : _ref0$separator;
       var _this$asProps6 = this.asProps,
         locale = _this$asProps6.locale,
         visible = _this$asProps6.visible;
@@ -513,7 +533,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       return {
         popoverVisible: visible,
         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),
+        disabled: !(compareToggle !== null && compareToggle !== void 0 ? compareToggle : value === null || value === 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 _this7.handlers.preselectedCompare(value);
@@ -536,7 +556,6 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       var _this8 = this;
       var _this$asProps9 = this.asProps,
         getI18nText = _this$asProps9.getI18nText,
-        value = _this$asProps9.value,
         compareToggle = _this$asProps9.compareToggle;
       return {
         getI18nText: getI18nText,
@@ -556,19 +575,19 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
   }, {
     key: "getCalendarProps",
     value: function getCalendarProps(_props, index) {
-      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;
+      var _this$asProps0 = this.asProps,
+        locale = _this$asProps0.locale,
+        displayedPeriod = _this$asProps0.displayedPeriod,
+        disabled = _this$asProps0.disabled,
+        value = _this$asProps0.value,
+        onCompareHighlightedChange = _this$asProps0.onCompareHighlightedChange,
+        highlighted = _this$asProps0.highlighted,
+        compareHighlighted = _this$asProps0.compareHighlighted,
+        onHighlightedChange = _this$asProps0.onHighlightedChange,
+        preselectedCompare = _this$asProps0.preselectedCompare,
+        preselectedValue = _this$asProps0.preselectedValue,
+        focusedRange = _this$asProps0.focusedRange,
+        getI18nText = _this$asProps0.getI18nText;
       return {
         locale: locale,
         displayedPeriod: (0, _dayjs["default"])(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
@@ -601,10 +620,10 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _ref = this.asProps,
         _ref4;
-      var _this$asProps11 = this.asProps,
-        Children = _this$asProps11.Children,
-        styles = _this$asProps11.styles,
-        providedAriaLabel = _this$asProps11['aria-label'];
+      var _this$asProps1 = this.asProps,
+        Children = _this$asProps1.Children,
+        styles = _this$asProps1.styles,
+        providedAriaLabel = _this$asProps1['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']
@@ -612,11 +631,11 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     }
   }], [{
     key: "defaultProps",
-    value: function defaultProps(_ref11) {
-      var primaryRange = _ref11.primaryRange,
-        defaultPrimaryRange = _ref11.defaultPrimaryRange,
-        secondaryRange = _ref11.secondaryRange,
-        defaultSecondaryRange = _ref11.defaultSecondaryRange;
+    value: function defaultProps(_ref1) {
+      var primaryRange = _ref1.primaryRange,
+        defaultPrimaryRange = _ref1.defaultPrimaryRange,
+        secondaryRange = _ref1.secondaryRange,
+        defaultSecondaryRange = _ref1.defaultSecondaryRange;
       return {
         i18n: _intergalacticDynamicLocales.localizedMessages,
         locale: 'en',
@@ -634,7 +653,6 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       };
     }
   }]);
-  return DateRangeComparatorAbstract;
 }(_core.Component);
 (0, _defineProperty2["default"])(DateRangeComparatorAbstract, "displayName", 'DateRangeComparator');
 (0, _defineProperty2["default"])(DateRangeComparatorAbstract, "style", style);
@@ -684,7 +702,7 @@ function Header(props) {
     Children = props.Children,
     styles = props.styles;
   return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SRangeComparatorHeader, _ref7.cn("SRangeComparatorHeader", {
-    "render": _flexBox.Flex,
+    "render": _baseComponents.Flex,
     "gap": 4,
     "alignItems": 'center'
   }), /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {})));
@@ -695,7 +713,7 @@ function Body(props) {
     Children = props.Children,
     styles = props.styles;
   return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBody, _ref8.cn("SBody", {
-    "render": _flexBox.Flex,
+    "render": _baseComponents.Flex,
     "gap": 4
   }), /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {})));
 }
@@ -705,10 +723,9 @@ function Footer(props) {
     styles = props.styles,
     Children = props.Children;
   return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SFooter, _ref9.cn("SFooter", {
-    "render": _flexBox.Flex,
+    "render": _baseComponents.Flex,
     "gap": 2
   }), /*#__PURE__*/_react["default"].createElement(Children, _ref9.cn("Children", {})));
 }
-var _default = DateRangeComparatorAbstract;
-exports["default"] = _default;
+var _default = exports["default"] = DateRangeComparatorAbstract;
 //# sourceMappingURL=DateRangeComparatorAbstract.js.map