@semcore/date-picker 4.17.0 → 4.18.0

package/lib/cjs/components/DateRangeComparatorAbstract.js

@@ -0,0 +1,584 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Apply = Apply;
+exports.Body = Body;
+exports.CompareToggle = CompareToggle;
+exports.Footer = Footer;
+exports.Header = Header;
+exports.Reset = Reset;
+exports.Trigger = Trigger;
+exports["default"] = void 0;
+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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@semcore/core");
+var _react = _interopRequireDefault(require("react"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _button = _interopRequireDefault(require("@semcore/button"));
+var _flexBox = require("@semcore/flex-box");
+var _dropdown = _interopRequireDefault(require("@semcore/dropdown"));
+var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
+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");
+/*__reshadow-styles__:"../style/date-picker.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPopper_opjge_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_opjge_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_opjge_gg_:active,.___SPopper_opjge_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_opjge_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_opjge_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_opjge_gg_,.___STitle_opjge_gg_{display:flex;align-items:center}.___STitle_opjge_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_opjge_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_opjge_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_opjge_gg_ .___SInner_opjge_gg_{justify-content:flex-start}.___SInputMask_opjge_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal}.___SIndicator_opjge_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_opjge_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_opjge_gg_._range_value_opjge_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_opjge_gg_._range_compare_opjge_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SHumanizedDate_opjge_gg_{position:absolute;pointer-events:none}.___SDateRange_opjge_gg_ .___SMask_opjge_gg_,.___SDateRange_opjge_gg_ .___SValue_opjge_gg_,.___SSingleDateInput_opjge_gg_ .___SMask_opjge_gg_,.___SSingleDateInput_opjge_gg_ .___SValue_opjge_gg_{opacity:0}.___SSingleDateInput_opjge_gg_:focus-within .___SHumanizedDate_opjge_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_opjge_gg_:focus-within .___SMask_opjge_gg_,.___SSingleDateInput_opjge_gg_:focus-within .___SValue_opjge_gg_{opacity:1}.___SDateRange_opjge_gg_:focus-within .___SHumanizedDate_opjge_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_opjge_gg_:focus-within .___SMask_opjge_gg_,.___SDateRange_opjge_gg_:focus-within .___SValue_opjge_gg_{opacity:1}.___SInputMask_opjge_gg_.__noHumanizedDate_opjge_gg_ .___SMask_opjge_gg_,.___SInputMask_opjge_gg_.__noHumanizedDate_opjge_gg_ .___SValue_opjge_gg_{opacity:1}.___SDateRange_opjge_gg_ .___SInputMask_opjge_gg_:focus-within .___SMask_opjge_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_opjge_gg_:focus-within .___SRangeSep_opjge_gg_,.___SRangeSep_opjge_gg_.__fulfilled_opjge_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_opjge_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_opjge_gg_,.___SRangeComparatorHeader_opjge_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_opjge_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_opjge_gg_,.___SPeriodsList_opjge_gg_{padding:var(--intergalactic-spacing-4x, 16px)}" /*__inner_css_end__*/, "opjge_gg_") /*__reshadow_css_end__*/, {
+  "__SHeader": "___SHeader_opjge_gg_",
+  "__STitle": "___STitle_opjge_gg_",
+  "__SToday": "___SToday_opjge_gg_",
+  "__SPeriod": "___SPeriod_opjge_gg_",
+  "__SButton": "___SButton_opjge_gg_",
+  "__SInner": "___SInner_opjge_gg_",
+  "__SInputMask": "___SInputMask_opjge_gg_",
+  "__SIndicator": "___SIndicator_opjge_gg_",
+  "__SRangeIndicator": "___SRangeIndicator_opjge_gg_",
+  "_range_value": "_range_value_opjge_gg_",
+  "_range_compare": "_range_compare_opjge_gg_",
+  "__SHumanizedDate": "___SHumanizedDate_opjge_gg_",
+  "__SSingleDateInput": "___SSingleDateInput_opjge_gg_",
+  "__SValue": "___SValue_opjge_gg_",
+  "__SDateRange": "___SDateRange_opjge_gg_",
+  "__SMask": "___SMask_opjge_gg_",
+  "_noHumanizedDate": "__noHumanizedDate_opjge_gg_",
+  "__SRangeSep": "___SRangeSep_opjge_gg_",
+  "_fulfilled": "__fulfilled_opjge_gg_",
+  "__SRangeComparatorHeader": "___SRangeComparatorHeader_opjge_gg_",
+  "__SRangeCalendar": "___SRangeCalendar_opjge_gg_",
+  "__SFooter": "___SFooter_opjge_gg_",
+  "__SPeriodsList": "___SPeriodsList_opjge_gg_",
+  "__SPopper": "___SPopper_opjge_gg_"
+});
+var defaultDisplayedPeriod = new Date(new Date().setHours(0, 0, 0, 0));
+var getLatestDate = function getLatestDate() {
+  for (var _len = arguments.length, dateRanges = new Array(_len), _key = 0; _key < _len; _key++) {
+    dateRanges[_key] = arguments[_key];
+  }
+  var allDates = dateRanges.flat().filter(Boolean).filter(function (date) {
+    return !Number.isNaN(new Date(date).getTime());
+  });
+  if (!allDates.length) return null;
+  allDates.sort(function (a, b) {
+    return new Date(b).getTime() - new Date(a).getTime();
+  });
+  var latestDate = allDates[0];
+  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), "state", {
+      dirtyValue: undefined,
+      dirtyCompare: undefined,
+      dirtyToggler: undefined,
+      range: 'value' // 'value' | 'compare'
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "navigateView", function (direction) {
+      var displayedPeriod = _this.asProps.displayedPeriod;
+      var action = direction >= 1 ? 'add' : 'subtract';
+      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) {
+      return function () {
+        return _this.navigateView(direction);
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleApply", function (value, compare) {
+      _this.handlers.value({
+        value: value,
+        compare: compare
+      });
+      _this.handlers.visible(false);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (date) {
+      var _dirty, _dirty2, _dirty3;
+      var _this$state = _this.state,
+        dirtyValue = _this$state.dirtyValue,
+        dirtyCompare = _this$state.dirtyCompare,
+        range = _this$state.range;
+      var highlighted = [];
+      var dirty = range === 'compare' ? dirtyCompare : dirtyValue;
+      if (Array.isArray(date)) {
+        dirty = date;
+      } else if (!((_dirty = dirty) !== null && _dirty !== void 0 && _dirty.length)) {
+        dirty = [date];
+        highlighted = [date];
+      } else if (((_dirty2 = dirty) === null || _dirty2 === void 0 ? void 0 : _dirty2.length) >= 2) {
+        dirty = [date];
+        highlighted = [date];
+      } else if (((_dirty3 = dirty) === null || _dirty3 === void 0 ? void 0 : _dirty3[0]) > date) {
+        var _dirty4;
+        dirty = [date, (_dirty4 = dirty) === null || _dirty4 === void 0 ? void 0 : _dirty4[0]];
+      } else {
+        var _dirty5;
+        dirty = [(_dirty5 = dirty) === null || _dirty5 === void 0 ? void 0 : _dirty5[0], date];
+      }
+      var state = {};
+      if (range === 'compare') {
+        state['dirtyCompare'] = dirty;
+      } else {
+        state['dirtyValue'] = dirty;
+      }
+      _this.setState(state, function () {
+        if (range === 'compare') {
+          _this.handlers.compareHighlighted(highlighted);
+        } else {
+          _this.handlers.highlighted(highlighted);
+        }
+      });
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(DateRangeComparatorAbstract, [{
+    key: "getPeriodProps",
+    value: function getPeriodProps() {
+      var _this$asProps$value,
+        _this2 = this;
+      var _this$asProps = this.asProps,
+        _this$asProps$periods = _this$asProps.periods,
+        periods = _this$asProps$periods === void 0 ? this.getDefaultPeriods() : _this$asProps$periods,
+        onHighlightedChange = _this$asProps.onHighlightedChange,
+        onCompareHighlightedChange = _this$asProps.onCompareHighlightedChange,
+        onDisplayedPeriodChange = _this$asProps.onDisplayedPeriodChange;
+      var _this$state2 = this.state,
+        dirtyValue = _this$state2.dirtyValue,
+        dirtyCompare = _this$state2.dirtyCompare,
+        range = _this$state2.range;
+      var value = dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : (_this$asProps$value = this.asProps.value) === null || _this$asProps$value === void 0 ? void 0 : _this$asProps$value.value;
+      if (range === 'compare') {
+        var _this$asProps$value2;
+        value = dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : (_this$asProps$value2 = this.asProps.value) === null || _this$asProps$value2 === void 0 ? void 0 : _this$asProps$value2.compare;
+      }
+      return {
+        periods: periods,
+        value: value,
+        onChange: function onChange(value) {
+          if (range === 'compare') {
+            _this2.setState({
+              dirtyCompare: value
+            });
+          } else {
+            _this2.setState({
+              dirtyValue: value
+            });
+          }
+        },
+        onHighlightedChange: range === 'compare' ? onCompareHighlightedChange : onHighlightedChange,
+        onDisplayedPeriodChange: onDisplayedPeriodChange
+      };
+    }
+  }, {
+    key: "getPrevProps",
+    value: function getPrevProps() {
+      var getI18nText = this.asProps.getI18nText;
+      return {
+        getI18nText: getI18nText,
+        onClick: this.bindHandlerNavigateClick(-1)
+      };
+    }
+  }, {
+    key: "getNextProps",
+    value: function getNextProps() {
+      var getI18nText = this.asProps.getI18nText;
+      return {
+        getI18nText: getI18nText,
+        onClick: this.bindHandlerNavigateClick(1)
+      };
+    }
+  }, {
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      var _this3 = this;
+      return {
+        displayedPeriod: null,
+        visible: [null, function (visible) {
+          if (!visible) {
+            var _ref10, _this3$asProps$value$, _this3$asProps$value, _this3$asProps$value2;
+            _this3.handlers.highlighted([]);
+            _this3.handlers.compareHighlighted([]);
+            _this3.setState({
+              dirtyValue: undefined,
+              dirtyCompare: undefined,
+              dirtyToggler: undefined,
+              range: 'value'
+            });
+            _this3.handlers.displayedPeriod(getLatestDate((_ref10 = (_this3$asProps$value$ = (_this3$asProps$value = _this3.asProps.value) === null || _this3$asProps$value === void 0 ? void 0 : _this3$asProps$value.value) !== null && _this3$asProps$value$ !== void 0 ? _this3$asProps$value$ : (_this3$asProps$value2 = _this3.asProps.value) === null || _this3$asProps$value2 === void 0 ? void 0 : _this3$asProps$value2.compare) !== null && _ref10 !== void 0 ? _ref10 : []) || _this3.props.defaultDisplayedPeriod);
+          }
+        }],
+        highlighted: null,
+        compareHighlighted: null,
+        value: [null, function (value) {
+          var dates = [value === null || value === void 0 ? void 0 : value.value, value === null || value === void 0 ? void 0 : value.compare].flat(2).filter(function (date) {
+            var _date$isValid;
+            return date === null || date === void 0 ? 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));
+        }]
+      };
+    }
+  }, {
+    key: "getApplyProps",
+    value: function getApplyProps() {
+      var _this4 = this;
+      var _this$asProps2 = this.asProps,
+        value = _this$asProps2.value,
+        getI18nText = _this$asProps2.getI18nText;
+      var _this$state3 = this.state,
+        dirtyValue = _this$state3.dirtyValue,
+        dirtyCompare = _this$state3.dirtyCompare;
+      return {
+        getI18nText: getI18nText,
+        onClick: function onClick() {
+          return _this4.handleApply(dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : value === null || value === void 0 ? void 0 : value.value, dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : value === null || value === void 0 ? void 0 : value.compare);
+        }
+      };
+    }
+  }, {
+    key: "getResetProps",
+    value: function getResetProps() {
+      var _this5 = this;
+      var getI18nText = this.asProps.getI18nText;
+      return {
+        getI18nText: getI18nText,
+        onClick: function onClick() {
+          return _this5.handleApply(null, null);
+        }
+      };
+    }
+  }, {
+    key: "getDefaultPeriods",
+    value: function getDefaultPeriods() {
+      var getI18nText = this.asProps.getI18nText;
+      var today = new Date(new Date().setHours(0, 0, 0, 0));
+      return [{
+        children: getI18nText('lastMonth'),
+        value: [(0, _dayjs["default"])(today).subtract(1, 'month').startOf('month').toDate(), (0, _dayjs["default"])(today).startOf('month').toDate()]
+      }, {
+        children: getI18nText('last3Months'),
+        value: [(0, _dayjs["default"])(today).subtract(2, 'month').startOf('month').toDate(), (0, _dayjs["default"])(today).startOf('month').toDate()]
+      }, {
+        children: getI18nText('last6Months'),
+        value: [(0, _dayjs["default"])(today).subtract(5, 'month').startOf('month').toDate(), (0, _dayjs["default"])(today).startOf('month').toDate()]
+      }, {
+        children: getI18nText('last12Months'),
+        value: [(0, _dayjs["default"])(today).subtract(11, 'month').startOf('month').toDate(), (0, _dayjs["default"])(today).startOf('month').toDate()]
+      }];
+    }
+  }, {
+    key: "getTitleProps",
+    value: function getTitleProps(props, index) {
+      var _this$asProps3 = this.asProps,
+        locale = _this$asProps3.locale,
+        displayedPeriod = _this$asProps3.displayedPeriod;
+      return {
+        children: new Intl.DateTimeFormat(locale, {
+          month: 'long',
+          year: 'numeric'
+        }).format((0, _dayjs["default"])(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate())
+      };
+    }
+  }, {
+    key: "getTriggerProps",
+    value: function getTriggerProps(_ref11) {
+      var _this$asProps$value3,
+        _this$asProps$value4,
+        _this6 = this;
+      var _ref11$placeholder = _ref11.placeholder,
+        placeholder = _ref11$placeholder === void 0 ? 'Select date ranges' : _ref11$placeholder,
+        _ref11$separator = _ref11.separator,
+        separator = _ref11$separator === void 0 ? 'vs.' : _ref11$separator;
+      var _this$asProps4 = this.asProps,
+        locale = _this$asProps4.locale,
+        visible = _this$asProps4.visible;
+      var 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 = {
+        locale: locale,
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric'
+      };
+      var children = placeholder;
+      if (value !== null && value !== void 0 && value[0] && value !== null && value !== void 0 && value[1]) {
+        children = (0, _shortDateRangeFormat["default"])(value, formattingProps);
+      }
+      if (compare !== null && compare !== void 0 && compare[0] && compare !== null && compare !== void 0 && compare[1]) {
+        children = "".concat(children || '', " ").concat(separator, " ").concat((0, _shortDateRangeFormat["default"])(compare, formattingProps));
+      }
+      return {
+        children: children,
+        visible: visible,
+        onClick: function onClick() {
+          return _this6.handlers.visible(!visible);
+        }
+      };
+    }
+  }, {
+    key: "getRangeInput",
+    value: function getRangeInput() {
+      throw new Error('not implemented');
+    }
+  }, {
+    key: "getValueDateRangeProps",
+    value: function getValueDateRangeProps() {
+      var _this7 = this;
+      var _this$asProps5 = this.asProps,
+        value = _this$asProps5.value,
+        onDisplayedPeriodChange = _this$asProps5.onDisplayedPeriodChange,
+        locale = _this$asProps5.locale,
+        disabled = _this$asProps5.disabled,
+        size = _this$asProps5.size,
+        getI18nText = _this$asProps5.getI18nText;
+      var _this$state4 = this.state,
+        range = _this$state4.range,
+        dirtyValue = _this$state4.dirtyValue;
+      return {
+        focused: range === 'value' ? true : undefined,
+        value: dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : value === null || value === void 0 ? void 0 : value.value,
+        onChange: function onChange(value) {
+          return _this7.setState({
+            dirtyValue: value
+          });
+        },
+        onDisplayedPeriodChange: onDisplayedPeriodChange,
+        locale: locale,
+        w: size === 'm' ? 300 : 330,
+        disabledDates: disabled,
+        children: this.getRangeInput(),
+        getI18nText: getI18nText,
+        onFocus: function onFocus() {
+          _this7.setState({
+            range: 'value'
+          });
+          return false;
+        }
+      };
+    }
+  }, {
+    key: "getCompareDateRangeProps",
+    value: function getCompareDateRangeProps() {
+      var _value$compare,
+        _this8 = this;
+      var _this$asProps6 = this.asProps,
+        value = _this$asProps6.value,
+        onDisplayedPeriodChange = _this$asProps6.onDisplayedPeriodChange,
+        locale = _this$asProps6.locale,
+        disabled = _this$asProps6.disabled,
+        size = _this$asProps6.size,
+        getI18nText = _this$asProps6.getI18nText;
+      var _this$state5 = this.state,
+        range = _this$state5.range,
+        dirtyCompare = _this$state5.dirtyCompare,
+        dirtyToggler = _this$state5.dirtyToggler;
+      return {
+        focused: range === 'compare' ? true : undefined,
+        disabled: !(dirtyToggler !== null && dirtyToggler !== void 0 ? dirtyToggler : value === null || value === void 0 ? void 0 : (_value$compare = value.compare) === null || _value$compare === void 0 ? void 0 : _value$compare.length),
+        value: dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : value === null || value === void 0 ? void 0 : value.compare,
+        onChange: function onChange(value) {
+          return _this8.setState({
+            dirtyCompare: value
+          });
+        },
+        onDisplayedPeriodChange: onDisplayedPeriodChange,
+        locale: locale,
+        w: size === 'm' ? 300 : 330,
+        disabledDates: disabled,
+        children: this.getRangeInput(),
+        getI18nText: getI18nText,
+        onFocus: function onFocus() {
+          _this8.setState({
+            range: 'compare'
+          });
+          return false;
+        }
+      };
+    }
+  }, {
+    key: "getCompareToggleProps",
+    value: function getCompareToggleProps() {
+      var _value$compare2,
+        _this9 = this;
+      var _this$asProps7 = this.asProps,
+        getI18nText = _this$asProps7.getI18nText,
+        value = _this$asProps7.value;
+      var dirtyToggler = this.state.dirtyToggler;
+      return {
+        getI18nText: getI18nText,
+        checked: dirtyToggler !== null && dirtyToggler !== void 0 ? dirtyToggler : value === null || value === void 0 ? void 0 : (_value$compare2 = value.compare) === null || _value$compare2 === void 0 ? void 0 : _value$compare2.length,
+        onChange: function onChange(checked) {
+          if (checked) {
+            _this9.setState({
+              range: 'compare',
+              dirtyToggler: true
+            });
+          } else {
+            _this9.setState({
+              range: 'value',
+              dirtyCompare: [],
+              dirtyToggler: false
+            });
+          }
+        }
+      };
+    }
+  }, {
+    key: "getCalendarProps",
+    value: function getCalendarProps(_props, index) {
+      var _this$asProps8 = this.asProps,
+        locale = _this$asProps8.locale,
+        displayedPeriod = _this$asProps8.displayedPeriod,
+        disabled = _this$asProps8.disabled,
+        value = _this$asProps8.value,
+        onCompareHighlightedChange = _this$asProps8.onCompareHighlightedChange,
+        highlighted = _this$asProps8.highlighted,
+        compareHighlighted = _this$asProps8.compareHighlighted,
+        onHighlightedChange = _this$asProps8.onHighlightedChange;
+      var _this$state6 = this.state,
+        dirtyValue = _this$state6.dirtyValue,
+        dirtyCompare = _this$state6.dirtyCompare,
+        range = _this$state6.range;
+      return {
+        locale: locale,
+        displayedPeriod: (0, _dayjs["default"])(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
+        disabled: disabled,
+        onChange: this.handleChange,
+        highlighted: highlighted,
+        compareHighlighted: compareHighlighted,
+        onCompareHighlightedChange: onCompareHighlightedChange,
+        onHighlightedChange: onHighlightedChange,
+        range: range,
+        value: dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : value === null || value === void 0 ? void 0 : value.value,
+        compare: dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : value === null || value === void 0 ? void 0 : value.compare
+      };
+    }
+  }, {
+    key: "getPopperProps",
+    value: function getPopperProps() {
+      return {
+        p: 0
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref4;
+      var _this$asProps9 = this.asProps,
+        Children = _this$asProps9.Children,
+        styles = _this$asProps9.styles,
+        providedAriaLabel = _this$asProps9['aria-label'];
+      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']
+      }, _ref), /*#__PURE__*/_react["default"].createElement(Children, _ref4.cn("Children", {})))));
+    }
+  }], [{
+    key: "defaultProps",
+    value: function defaultProps(_ref12) {
+      var primaryRange = _ref12.primaryRange,
+        defaultPrimaryRange = _ref12.defaultPrimaryRange,
+        secondaryRange = _ref12.secondaryRange,
+        defaultSecondaryRange = _ref12.defaultSecondaryRange;
+      return {
+        i18n: _intergalacticDynamicLocales.localizedMessages,
+        locale: 'en',
+        defaultValue: null,
+        defaultHighlighted: [],
+        defaultCompareHighlighted: [],
+        defaultDisplayedPeriod: getLatestDate(primaryRange, defaultPrimaryRange, secondaryRange, defaultSecondaryRange) || defaultDisplayedPeriod,
+        defaultVisible: false,
+        disabled: [],
+        size: 'm'
+      };
+    }
+  }]);
+  return DateRangeComparatorAbstract;
+}(_core.Component);
+(0, _defineProperty2["default"])(DateRangeComparatorAbstract, "displayName", 'DateRangeComparator');
+(0, _defineProperty2["default"])(DateRangeComparatorAbstract, "style", style);
+(0, _defineProperty2["default"])(DateRangeComparatorAbstract, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
+function Apply(props) {
+  var _ref2 = arguments[0];
+  var getI18nText = props.getI18nText;
+  return /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _core.assignProps)({
+    "use": 'primary',
+    "children": getI18nText('apply')
+  }, _ref2));
+}
+function Reset(props) {
+  var _ref3 = arguments[0];
+  var getI18nText = props.getI18nText;
+  return /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _core.assignProps)({
+    "use": 'tertiary',
+    "theme": 'muted',
+    "children": getI18nText('reset')
+  }, _ref3));
+}
+function Trigger(props) {
+  var _ref5;
+  var STrigger = props.Root,
+    styles = props.styles;
+  return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STrigger, _ref5.cn("STrigger", {
+    "render": _dropdown["default"].Trigger,
+    "tag": _baseTrigger.LinkTrigger
+  }));
+}
+function CompareToggle(props) {
+  var _ref6;
+  var SCompareToggle = props.Root,
+    styles = props.styles,
+    getI18nText = props.getI18nText;
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCompareToggle, _ref6.cn("SCompareToggle", {
+    "render": _checkbox["default"],
+    "label": getI18nText('compare')
+  }));
+}
+function Header(props) {
+  var _ref7;
+  var SRangeComparatorHeader = props.Root,
+    Children = props.Children,
+    styles = props.styles;
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SRangeComparatorHeader, _ref7.cn("SRangeComparatorHeader", {
+    "render": _flexBox.Flex,
+    "gap": 4,
+    "alignItems": 'center'
+  }), /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {})));
+}
+function Body(props) {
+  var _ref8;
+  var SBody = props.Root,
+    Children = props.Children,
+    styles = props.styles;
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBody, _ref8.cn("SBody", {
+    "render": _flexBox.Flex,
+    "gap": 4
+  }), /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {})));
+}
+function Footer(props) {
+  var _ref9;
+  var SFooter = props.Root,
+    styles = props.styles,
+    Children = props.Children;
+  return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SFooter, _ref9.cn("SFooter", {
+    "render": _flexBox.Flex,
+    "gap": 2
+  }), /*#__PURE__*/_react["default"].createElement(Children, _ref9.cn("Children", {})));
+}
+var _default = DateRangeComparatorAbstract;
+exports["default"] = _default;
+//# sourceMappingURL=DateRangeComparatorAbstract.js.map