@semcore/date-picker 16.2.4 → 17.0.0-prerelease.18

package/lib/cjs/components/RangePickerAbstract.js

@@ -1,206 +1,186 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Apply = Apply;
 exports.Reset = Reset;
-exports["default"] = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _button = _interopRequireDefault(require("@semcore/button"));
 var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
 var _divider = _interopRequireDefault(require("@semcore/divider"));
 var _dropdown = _interopRequireDefault(require("@semcore/dropdown"));
-var _flexBox = require("@semcore/flex-box");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _react = _interopRequireDefault(require("react"));
 var _intergalacticDynamicLocales = require("../translations/__intergalactic-dynamic-locales");
 var _formatDate = require("../utils/formatDate");
 var _includesDate = require("../utils/includesDate");
 /*!__reshadow-styles__:"../style/date-picker.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPopper_gjj0p_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_gjj0p_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_gjj0p_gg_:active,.___SPopper_gjj0p_gg_:focus{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_gjj0p_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SHeader_gjj0p_gg_,.___STitle_gjj0p_gg_{display:flex;align-items:center}.___STitle_gjj0p_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_gjj0p_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_gjj0p_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_gjj0p_gg_ .___SInner_gjj0p_gg_{justify-content:flex-start}.___SInputMask_gjj0p_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_gjj0p_gg_.__animationsDisabled_gjj0p_gg_{transition:none}.___SInputMask_gjj0p_gg_ .___SValue_gjj0p_gg_{letter-spacing:0}.___SInputMask_gjj0p_gg_ .___SValue_gjj0p_gg_:focus{outline:0}.___SIndicator_gjj0p_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_gjj0p_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_gjj0p_gg_._range_value_gjj0p_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_gjj0p_gg_._range_compare_gjj0p_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_gjj0p_gg_.__disabled_gjj0p_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_gjj0p_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_gjj0p_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_gjj0p_gg_ .___SMask_gjj0p_gg_,.___SDateRange_gjj0p_gg_ .___SValue_gjj0p_gg_,.___SSingleDateInput_gjj0p_gg_ .___SMask_gjj0p_gg_,.___SSingleDateInput_gjj0p_gg_ .___SValue_gjj0p_gg_{opacity:0}.___SSingleDateInput_gjj0p_gg_:focus-within .___SHumanizedDate_gjj0p_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_gjj0p_gg_:focus-within .___SMask_gjj0p_gg_,.___SSingleDateInput_gjj0p_gg_:focus-within .___SValue_gjj0p_gg_{opacity:1}.___SDateRange_gjj0p_gg_:focus-within .___SHumanizedDate_gjj0p_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_gjj0p_gg_:focus-within .___SMask_gjj0p_gg_,.___SDateRange_gjj0p_gg_:focus-within .___SValue_gjj0p_gg_{opacity:1}.___SInputMask_gjj0p_gg_.__noHumanizedDate_gjj0p_gg_ .___SMask_gjj0p_gg_,.___SInputMask_gjj0p_gg_.__noHumanizedDate_gjj0p_gg_ .___SValue_gjj0p_gg_{opacity:1}.___SDateRange_gjj0p_gg_ .___SInputMask_gjj0p_gg_:focus-within .___SMask_gjj0p_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_gjj0p_gg_:focus-within .___SRangeSep_gjj0p_gg_,.___SRangeSep_gjj0p_gg_.__fulfilled_gjj0p_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_gjj0p_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_gjj0p_gg_,.___SRangeComparatorHeader_gjj0p_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_gjj0p_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_gjj0p_gg_,.___SPeriodsList_gjj0p_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_gjj0p_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_gjj0p_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_gjj0p_gg_{transition:none}}", /*__inner_css_end__*/"gjj0p_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPopper_9ubmf_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_9ubmf_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_9ubmf_gg_:active,.___SPopper_9ubmf_gg_:focus{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_9ubmf_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SHeader_9ubmf_gg_,.___STitle_9ubmf_gg_{display:flex;align-items:center}.___STitle_9ubmf_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_9ubmf_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_9ubmf_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_9ubmf_gg_ .___SInner_9ubmf_gg_{justify-content:flex-start}.___SInputMask_9ubmf_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_9ubmf_gg_.__animationsDisabled_9ubmf_gg_{transition:none}.___SInputMask_9ubmf_gg_ .___SValue_9ubmf_gg_{letter-spacing:0}.___SInputMask_9ubmf_gg_ .___SValue_9ubmf_gg_:focus{outline:0}.___SIndicator_9ubmf_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_9ubmf_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_9ubmf_gg_._range_value_9ubmf_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_9ubmf_gg_._range_compare_9ubmf_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_9ubmf_gg_.__disabled_9ubmf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_9ubmf_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_9ubmf_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_9ubmf_gg_ .___SMask_9ubmf_gg_,.___SDateRange_9ubmf_gg_ .___SValue_9ubmf_gg_,.___SSingleDateInput_9ubmf_gg_ .___SMask_9ubmf_gg_,.___SSingleDateInput_9ubmf_gg_ .___SValue_9ubmf_gg_{opacity:0}.___SSingleDateInput_9ubmf_gg_:focus-within .___SHumanizedDate_9ubmf_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_9ubmf_gg_:focus-within .___SMask_9ubmf_gg_,.___SSingleDateInput_9ubmf_gg_:focus-within .___SValue_9ubmf_gg_{opacity:1}.___SDateRange_9ubmf_gg_:focus-within .___SHumanizedDate_9ubmf_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_9ubmf_gg_:focus-within .___SMask_9ubmf_gg_,.___SDateRange_9ubmf_gg_:focus-within .___SValue_9ubmf_gg_{opacity:1}.___SInputMask_9ubmf_gg_.__noHumanizedDate_9ubmf_gg_ .___SMask_9ubmf_gg_,.___SInputMask_9ubmf_gg_.__noHumanizedDate_9ubmf_gg_ .___SValue_9ubmf_gg_{opacity:1}.___SDateRange_9ubmf_gg_ .___SInputMask_9ubmf_gg_:focus-within .___SMask_9ubmf_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_9ubmf_gg_:focus-within .___SRangeSep_9ubmf_gg_,.___SRangeSep_9ubmf_gg_.__fulfilled_9ubmf_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_9ubmf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_9ubmf_gg_,.___SRangeComparatorHeader_9ubmf_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_9ubmf_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_9ubmf_gg_,.___SPeriodsList_9ubmf_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_9ubmf_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_9ubmf_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_9ubmf_gg_{transition:none}}", /*__inner_css_end__*/"9ubmf_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHeader": "___SHeader_gjj0p_gg_",
-  "__STitle": "___STitle_gjj0p_gg_",
-  "__SToday": "___SToday_gjj0p_gg_",
-  "__SPeriod": "___SPeriod_gjj0p_gg_",
-  "__SButton": "___SButton_gjj0p_gg_",
-  "__SInner": "___SInner_gjj0p_gg_",
-  "__SInputMask": "___SInputMask_gjj0p_gg_",
-  "_animationsDisabled": "__animationsDisabled_gjj0p_gg_",
-  "__SIndicator": "___SIndicator_gjj0p_gg_",
-  "__SRangeIndicator": "___SRangeIndicator_gjj0p_gg_",
-  "_range_value": "_range_value_gjj0p_gg_",
-  "_range_compare": "_range_compare_gjj0p_gg_",
-  "_disabled": "__disabled_gjj0p_gg_",
-  "__SHumanizedDate": "___SHumanizedDate_gjj0p_gg_",
-  "__SMask": "___SMask_gjj0p_gg_",
-  "__SSingleDateInput": "___SSingleDateInput_gjj0p_gg_",
-  "__SValue": "___SValue_gjj0p_gg_",
-  "__SDateRange": "___SDateRange_gjj0p_gg_",
-  "_noHumanizedDate": "__noHumanizedDate_gjj0p_gg_",
-  "__SRangeSep": "___SRangeSep_gjj0p_gg_",
-  "_fulfilled": "__fulfilled_gjj0p_gg_",
-  "__SRangeComparatorHeader": "___SRangeComparatorHeader_gjj0p_gg_",
-  "__SRangeCalendar": "___SRangeCalendar_gjj0p_gg_",
-  "__SFooter": "___SFooter_gjj0p_gg_",
-  "__SPeriodsList": "___SPeriodsList_gjj0p_gg_",
-  "__STooltip": "___STooltip_gjj0p_gg_",
-  "__SCompareToggle": "___SCompareToggle_gjj0p_gg_",
-  "__SPopper": "___SPopper_gjj0p_gg_"
+  "__SHeader": "___SHeader_9ubmf_gg_",
+  "__STitle": "___STitle_9ubmf_gg_",
+  "__SToday": "___SToday_9ubmf_gg_",
+  "__SPeriod": "___SPeriod_9ubmf_gg_",
+  "__SButton": "___SButton_9ubmf_gg_",
+  "__SInner": "___SInner_9ubmf_gg_",
+  "__SInputMask": "___SInputMask_9ubmf_gg_",
+  "_animationsDisabled": "__animationsDisabled_9ubmf_gg_",
+  "__SIndicator": "___SIndicator_9ubmf_gg_",
+  "__SRangeIndicator": "___SRangeIndicator_9ubmf_gg_",
+  "_range_value": "_range_value_9ubmf_gg_",
+  "_range_compare": "_range_compare_9ubmf_gg_",
+  "_disabled": "__disabled_9ubmf_gg_",
+  "__SHumanizedDate": "___SHumanizedDate_9ubmf_gg_",
+  "__SMask": "___SMask_9ubmf_gg_",
+  "__SSingleDateInput": "___SSingleDateInput_9ubmf_gg_",
+  "__SValue": "___SValue_9ubmf_gg_",
+  "__SDateRange": "___SDateRange_9ubmf_gg_",
+  "_noHumanizedDate": "__noHumanizedDate_9ubmf_gg_",
+  "__SRangeSep": "___SRangeSep_9ubmf_gg_",
+  "_fulfilled": "__fulfilled_9ubmf_gg_",
+  "__SRangeComparatorHeader": "___SRangeComparatorHeader_9ubmf_gg_",
+  "__SRangeCalendar": "___SRangeCalendar_9ubmf_gg_",
+  "__SFooter": "___SFooter_9ubmf_gg_",
+  "__SPeriodsList": "___SPeriodsList_9ubmf_gg_",
+  "__STooltip": "___STooltip_9ubmf_gg_",
+  "__SCompareToggle": "___SCompareToggle_9ubmf_gg_",
+  "__SPopper": "___SPopper_9ubmf_gg_"
 });
-var INTERACTION_TAGS = ['INPUT'];
-var INTERACTION_KEYS = ['ArrowDown', 'Enter', ' '];
-var defaultDisplayedPeriod = new Date(new Date().setHours(0, 0, 0, 0));
+const INTERACTION_TAGS = ['INPUT'];
+const INTERACTION_KEYS = ['ArrowDown', 'Enter', ' '];
+const defaultDisplayedPeriod = new Date(new Date().setHours(0, 0, 0, 0));
 function getEndDate(value) {
   if (!Array.isArray(value)) return null;
-  var _value = (0, _slicedToArray2["default"])(value, 2),
-    startDate = _value[0],
-    _value$ = _value[1],
-    endDate = _value$ === void 0 ? startDate : _value$;
+  const [startDate, endDate = startDate] = value;
   return endDate;
 }
-var RangePickerAbstract = /*#__PURE__*/function (_Component) {
-  function RangePickerAbstract() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, RangePickerAbstract);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, RangePickerAbstract, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "applyButtonRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "resetButtonRef", /*#__PURE__*/_react["default"].createRef());
-    (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, "periodRefs", []);
-    (0, _defineProperty2["default"])(_this, "unitRefs", {});
-    (0, _defineProperty2["default"])(_this, "navigateStep", void 0);
-    (0, _defineProperty2["default"])(_this, "keyDiff", void 0);
-    (0, _defineProperty2["default"])(_this, "keyStep", void 0);
-    (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);
+class RangePickerAbstract extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "applyButtonRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "resetButtonRef", /*#__PURE__*/_react.default.createRef());
+    (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, "periodRefs", []);
+    (0, _defineProperty2.default)(this, "unitRefs", {});
+    (0, _defineProperty2.default)(this, "navigateStep", void 0);
+    (0, _defineProperty2.default)(this, "keyDiff", void 0);
+    (0, _defineProperty2.default)(this, "keyStep", void 0);
+    (0, _defineProperty2.default)(this, "navigateView", direction => {
+      const {
+        displayedPeriod
+      } = this.asProps;
+      const action = direction >= 1 ? 'add' : 'subtract';
+      const date = (0, _dayjs.default)(displayedPeriod)[action](1, this.navigateStep).toDate();
+      this.handlers.displayedPeriod(date);
     });
-    (0, _defineProperty2["default"])(_this, "bindHandlerNavigateClick", function (direction) {
-      return function () {
-        return _this.navigateView(direction);
-      };
-    });
-    (0, _defineProperty2["default"])(_this, "handlerKeyDown", function (place) {
-      return function (e) {
-        var _this$asProps = _this.asProps,
-          displayedPeriod = _this$asProps.displayedPeriod,
-          highlighted = _this$asProps.highlighted,
-          preselectedValue = _this$asProps.preselectedValue,
-          visible = _this$asProps.visible;
-        var key = e.key,
-          target = e.target;
-        if ([' ', 'Enter'].includes(key) && [_this.prevButtonRef.current, _this.nextButtonRef.current].includes(target)) return;
-        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),
-            startPeriod = _next_highlighted[0],
-            endPeriod = _next_highlighted[1];
-          var highlightedPeriod = endPeriod || startPeriod;
-          var displayedPeriodNormalized = displayedPeriod === null || displayedPeriod === void 0 ? void 0 : displayedPeriod.getDate();
-          var highlightedPeriodNormalized = highlightedPeriod === null || highlightedPeriod === void 0 ? void 0 : highlightedPeriod.getDate();
-          if (_this.navigateStep === 'month') {
-            displayedPeriodNormalized = displayedPeriod === null || displayedPeriod === void 0 ? void 0 : displayedPeriod.getMonth();
-            highlightedPeriodNormalized = highlightedPeriod === null || highlightedPeriod === void 0 ? void 0 : highlightedPeriod.getMonth();
-          }
-          if (_this.navigateStep === 'year') {
-            displayedPeriodNormalized = displayedPeriod === null || displayedPeriod === void 0 ? void 0 : displayedPeriod.getYear();
-            highlightedPeriodNormalized = highlightedPeriod === null || highlightedPeriod === void 0 ? void 0 : highlightedPeriod.getYear();
+    (0, _defineProperty2.default)(this, "bindHandlerNavigateClick", direction => () => this.navigateView(direction));
+    (0, _defineProperty2.default)(this, "handlerKeyDown", place => e => {
+      const {
+        displayedPeriod,
+        highlighted,
+        preselectedValue,
+        visible
+      } = this.asProps;
+      const {
+        key,
+        target
+      } = e;
+      if ([' ', 'Enter'].includes(key) && [this.prevButtonRef.current, this.nextButtonRef.current].includes(target)) return;
+      if (place === 'trigger' && INTERACTION_KEYS.includes(key)) {
+        e.stopPropagation();
+        this.handlers.visible(!visible);
+        setTimeout(() => {
+          const popper = this.popperRef.current;
+          if (popper) {
+            popper.focus();
           }
-          var offset = highlightedPeriodNormalized - displayedPeriodNormalized;
-          if (offset < 0 || offset > 1) {
-            return highlightedPeriod;
-          }
-          return displayedPeriod;
-        };
-        if (place === 'popper' && e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-          return _this.handleApplyClick();
+        }, 0);
+      }
+      const day = this.keyDiff[key];
+      const setNextDisplayedPeriod = next_highlighted => {
+        const [startPeriod, endPeriod] = next_highlighted;
+        const highlightedPeriod = endPeriod || startPeriod;
+        let displayedPeriodNormalized = displayedPeriod?.getDate();
+        let highlightedPeriodNormalized = highlightedPeriod?.getDate();
+        if (this.navigateStep === 'month') {
+          displayedPeriodNormalized = displayedPeriod?.getMonth();
+          highlightedPeriodNormalized = highlightedPeriod?.getMonth();
         }
-        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);
-          }
-          e.preventDefault();
+        if (this.navigateStep === 'year') {
+          displayedPeriodNormalized = displayedPeriod?.getYear();
+          highlightedPeriodNormalized = highlightedPeriod?.getYear();
         }
-        var changedDate = undefined;
-        if (day) {
-          if (INTERACTION_TAGS.includes(e.target.tagName)) return;
-          if (highlighted.length) {
-            var next_highlighted;
-            if (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];
-            }
-            _this.handlers.highlighted(next_highlighted);
-            _this.handlers.displayedPeriod(setNextDisplayedPeriod(next_highlighted));
+        const offset = highlightedPeriodNormalized - displayedPeriodNormalized;
+        if (offset < 0 || offset > 1) {
+          return highlightedPeriod;
+        }
+        return displayedPeriod;
+      };
+      if (place === 'popper' && e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        return this.handleApplyClick();
+      }
+      const isPeriodTarget = this.periodRefs.find(el => el === target);
+      const isResetButtonTarget = target === this.resetButtonRef.current;
+      const isApplyButtonTarget = target === this.applyButtonRef.current;
+      const areTargetedControls = isPeriodTarget || isResetButtonTarget || isApplyButtonTarget;
+      if (place === 'popper' && e.key === ' ' && highlighted.length && !areTargetedControls) {
+        const highlightedDate = highlighted[1] || highlighted[0];
+        if (!this.isDisabled(highlightedDate)) {
+          this.handleChange(highlightedDate);
+        }
+        e.preventDefault();
+      }
+      let changedDate = undefined;
+      if (day) {
+        if (INTERACTION_TAGS.includes(e.target.tagName)) return;
+        if (highlighted.length) {
+          let next_highlighted;
+          if (preselectedValue.length === 1) {
+            next_highlighted = [preselectedValue[0], (0, _dayjs.default)(highlighted[1] || highlighted[0]).add(day, this.keyStep).toDate()];
+            changedDate = next_highlighted[1];
           } else {
-            var _highlighted = [displayedPeriod ? displayedPeriod : (0, _dayjs["default"])().toDate()];
-            _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 || _this$unitRefs$format.focus();
+            next_highlighted = [(0, _dayjs.default)(highlighted[0]).add(day, this.keyStep).toDate()];
+            changedDate = next_highlighted[0];
           }
+          this.handlers.highlighted(next_highlighted);
+          this.handlers.displayedPeriod(setNextDisplayedPeriod(next_highlighted));
+        } else {
+          const highlighted = [displayedPeriod ? displayedPeriod : (0, _dayjs.default)().toDate()];
+          this.handlers.highlighted(highlighted);
+          changedDate = highlighted[0];
         }
-      };
+        e.preventDefault();
+        if (changedDate) {
+          const formatter = this.keyStep === 'month' ? _formatDate.formatMMYY : _formatDate.formatDDMMYY;
+          const formattedDate = formatter(changedDate, this.asProps.locale);
+          this.unitRefs[formattedDate]?.focus();
+        }
+      }
     });
-    (0, _defineProperty2["default"])(_this, "handleReset", function () {
-      _this.handleChange([]);
-      _this.handlers.value([]);
-      _this.handlers.visible(false);
+    (0, _defineProperty2.default)(this, "handleReset", () => {
+      this.handleChange([]);
+      this.handlers.value([]);
+      this.handlers.visible(false);
     });
-    (0, _defineProperty2["default"])(_this, "handleApply", function (value) {
-      var _value2 = (0, _slicedToArray2["default"])(value, 2),
-        startDate = _value2[0],
-        _value2$ = _value2[1],
-        endDate = _value2$ === void 0 ? startDate : _value2$;
-      _this.handleChange([]);
-      _this.handlers.value([startDate, endDate]);
-      _this.handlers.visible(false);
+    (0, _defineProperty2.default)(this, "handleApply", value => {
+      const [startDate, endDate = startDate] = value;
+      this.handleChange([]);
+      this.handlers.value([startDate, endDate]);
+      this.handlers.visible(false);
     });
-    (0, _defineProperty2["default"])(_this, "handleChange", function (date) {
-      var preselectedValue = _this.asProps.preselectedValue;
-      var highlighted = [];
+    (0, _defineProperty2.default)(this, "handleChange", date => {
+      let {
+        preselectedValue
+      } = this.asProps;
+      let highlighted = [];
       if (Array.isArray(date)) {
         preselectedValue = date;
       } else if (!preselectedValue.length) {
@@ -214,296 +194,284 @@ var RangePickerAbstract = /*#__PURE__*/function (_Component) {
       } else {
         preselectedValue = [preselectedValue[0], date];
       }
-      _this.handlers.preselectedValue(preselectedValue);
-      _this.handlers.highlighted(highlighted);
+      this.handlers.preselectedValue(preselectedValue);
+      this.handlers.highlighted(highlighted);
     });
-    (0, _defineProperty2["default"])(_this, "handleApplyClick", function () {
-      var _this$asProps2 = _this.asProps,
-        value = _this$asProps2.value,
-        preselectedValue = _this$asProps2.preselectedValue;
-      return _this.handleApply(preselectedValue.length ? preselectedValue : value);
+    (0, _defineProperty2.default)(this, "handleApplyClick", () => {
+      const {
+        value,
+        preselectedValue
+      } = this.asProps;
+      return this.handleApply(preselectedValue.length ? preselectedValue : value);
     });
-    return _this;
   }
-  (0, _inherits2["default"])(RangePickerAbstract, _Component);
-  return (0, _createClass2["default"])(RangePickerAbstract, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      var _this2 = this;
-      return {
-        displayedPeriod: null,
-        visible: [null, function (visible) {
-          var _this2$asProps = _this2.asProps,
-            value = _this2$asProps.value,
-            displayedPeriod = _this2$asProps.displayedPeriod;
-          var endDate = getEndDate(value !== null && value !== void 0 ? value : undefined);
-          if (!visible) {
-            _this2.handlers.highlighted([]);
-            _this2.handlers.preselectedValue([]);
-          }
-          if (visible) {
-            if (endDate && endDate !== displayedPeriod) {
-              _this2.handlers.displayedPeriod(endDate);
-            } else if (!endDate) {
-              var _this2$props = _this2.props,
-                _displayedPeriod = _this2$props.displayedPeriod,
-                _defaultDisplayedPeriod = _this2$props.defaultDisplayedPeriod;
-              _this2.handlers.displayedPeriod(_displayedPeriod || _defaultDisplayedPeriod);
-            }
-          }
-        }],
-        highlighted: null,
-        preselectedValue: null,
-        value: [null, function (value) {
-          if (value[0] !== null || value[1] !== null) {
-            var _value$2, _value$3;
-            _this2.handlers.displayedPeriod(getEndDate([(_value$2 = value[0]) !== null && _value$2 !== void 0 ? _value$2 : undefined, (_value$3 = value[1]) !== null && _value$3 !== void 0 ? _value$3 : undefined]));
+  static defaultProps({
+    value,
+    defaultValue
+  }) {
+    return {
+      i18n: _intergalacticDynamicLocales.localizedMessages,
+      locale: 'en',
+      defaultDisplayedPeriod: getEndDate(value) || getEndDate(defaultValue) || defaultDisplayedPeriod,
+      defaultValue: [],
+      defaultHighlighted: [],
+      defaultVisible: false,
+      defaultPreselectedValue: [],
+      disabled: [],
+      size: 'm'
+    };
+  }
+  uncontrolledProps() {
+    return {
+      displayedPeriod: null,
+      visible: [null, visible => {
+        const {
+          value,
+          displayedPeriod
+        } = this.asProps;
+        const endDate = getEndDate(value ?? undefined);
+        if (!visible) {
+          this.handlers.highlighted([]);
+          this.handlers.preselectedValue([]);
+        }
+        if (visible) {
+          if (endDate && endDate !== displayedPeriod) {
+            this.handlers.displayedPeriod(endDate);
+          } else if (!endDate) {
+            const {
+              displayedPeriod,
+              defaultDisplayedPeriod
+            } = this.props;
+            this.handlers.displayedPeriod(displayedPeriod || defaultDisplayedPeriod);
           }
-        }]
-      };
-    }
-  }, {
-    key: "isDisabled",
-    value: function isDisabled(date) {
-      var disabled = this.asProps.disabled;
-      return disabled.some((0, _includesDate.includesDate)((0, _dayjs["default"])(date), 'date'));
-    }
-  }, {
-    key: "getDefaultPeriods",
-    value: function getDefaultPeriods() {
-      return [];
-    }
-  }, {
-    key: "getButtonTriggerProps",
-    value: function getButtonTriggerProps() {
-      var _this$asProps3 = this.asProps,
-        value = _this$asProps3.value,
-        size = _this$asProps3.size,
-        visible = _this$asProps3.visible;
-      return {
-        popoverVisible: visible,
-        size: size,
-        empty: !value[0] && !value[1],
-        onKeyDown: this.handlerKeyDown('trigger')
-      };
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      var Picker = this[_core.CORE_INSTANCE];
-      var _this$asProps4 = this.asProps,
-        _this$asProps4$period = _this$asProps4.periods,
-        periods = _this$asProps4$period === void 0 ? this.getDefaultPeriods() : _this$asProps4$period,
-        unclearable = _this$asProps4.unclearable;
-      var buttons = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Picker.Apply, null), !unclearable && /*#__PURE__*/_react["default"].createElement(Picker.Reset, {
-        ml: 2
-      }));
-      return {
-        tabIndex: 0,
-        ref: this.popperRef,
-        onKeyDown: this.handlerKeyDown('popper'),
-        children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, null, /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, null, /*#__PURE__*/_react["default"].createElement(_flexBox.Box, {
-          mr: 2
-        }, /*#__PURE__*/_react["default"].createElement(Picker.Header, null, /*#__PURE__*/_react["default"].createElement(Picker.Prev, null), /*#__PURE__*/_react["default"].createElement(Picker.Title, null)), /*#__PURE__*/_react["default"].createElement(Picker.Calendar, null)), /*#__PURE__*/_react["default"].createElement(_flexBox.Box, {
-          ml: 2
-        }, /*#__PURE__*/_react["default"].createElement(Picker.Header, null, /*#__PURE__*/_react["default"].createElement(Picker.Title, {
-          "aria-live": undefined
-        }), /*#__PURE__*/_react["default"].createElement(Picker.Next, null)), /*#__PURE__*/_react["default"].createElement(Picker.Calendar, null))), periods.length > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-          m: "-16px 16px",
-          orientation: "vertical",
-          h: "auto"
-        }), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, {
-          direction: "column"
-        }, /*#__PURE__*/_react["default"].createElement(Picker.Period, null), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, {
-          mt: "auto"
-        }, buttons)))), periods.length === 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-          m: "16px -16px",
-          orientation: "horizontal",
-          w: "auto"
-        }), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, null, /*#__PURE__*/_react["default"].createElement(Picker.Period, null), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, {
-          mt: "auto"
-        }, buttons))))
-      };
-    }
-  }, {
-    key: "getHeaderProps",
-    value: function getHeaderProps() {
-      var Picker = this[_core.CORE_INSTANCE];
-      return {
-        children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Picker.Prev, null), /*#__PURE__*/_react["default"].createElement(Picker.Title, null), /*#__PURE__*/_react["default"].createElement(Picker.Next, null))
-      };
-    }
-  }, {
-    key: "getTitleProps",
-    value: function getTitleProps(_props, index) {
-      var _this$asProps5 = this.asProps,
-        locale = _this$asProps5.locale,
-        displayedPeriod = _this$asProps5.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: "getNextProps",
-    value: function getNextProps() {
-      var getI18nText = this.asProps.getI18nText;
-      var navigateStep = this.navigateStep;
-      return {
-        'ref': this.nextButtonRef,
-        'onClick': this.bindHandlerNavigateClick(1),
-        getI18nText: getI18nText,
-        'aria-label': navigateStep === 'month' ? getI18nText('nextMonth') : getI18nText('nextYear')
-      };
-    }
-  }, {
-    key: "getPrevProps",
-    value: function getPrevProps() {
-      var getI18nText = this.asProps.getI18nText;
-      var navigateStep = this.navigateStep;
-      return {
-        'ref': this.prevButtonRef,
-        'onClick': this.bindHandlerNavigateClick(-1),
-        getI18nText: getI18nText,
-        'aria-label': navigateStep === 'month' ? getI18nText('prevMonth') : getI18nText('prevYear')
-      };
-    }
-  }, {
-    key: "getCalendarProps",
-    value: function getCalendarProps(_props, index) {
-      var _this$asProps6 = this.asProps,
-        locale = _this$asProps6.locale,
-        displayedPeriod = _this$asProps6.displayedPeriod,
-        disabled = _this$asProps6.disabled,
-        value = _this$asProps6.value,
-        highlighted = _this$asProps6.highlighted,
-        onHighlightedChange = _this$asProps6.onHighlightedChange,
-        onVisibleChange = _this$asProps6.onVisibleChange,
-        preselectedValue = _this$asProps6.preselectedValue,
-        getI18nText = _this$asProps6.getI18nText;
-      return {
-        locale: locale,
-        displayedPeriod: (0, _dayjs["default"])(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
-        disabled: disabled,
-        highlighted: highlighted,
-        onHighlightedChange: onHighlightedChange,
-        onVisibleChange: onVisibleChange,
-        value: preselectedValue.length ? preselectedValue : value,
-        onChange: this.handleChange,
-        unitRefs: this.unitRefs,
-        getI18nText: getI18nText,
-        actionsDescribing: index === 0 ? 'range' : null,
-        tabIndex: index === 0 ? 0 : -1
-      };
-    }
-  }, {
-    key: "getPeriodProps",
-    value: function getPeriodProps() {
-      var _this3 = this;
-      var _this$asProps7 = this.asProps,
-        _this$asProps7$period = _this$asProps7.periods,
-        periods = _this$asProps7$period === void 0 ? this.getDefaultPeriods() : _this$asProps7$period,
-        value = _this$asProps7.value,
-        onHighlightedChange = _this$asProps7.onHighlightedChange,
-        onDisplayedPeriodChange = _this$asProps7.onDisplayedPeriodChange,
-        preselectedValue = _this$asProps7.preselectedValue,
-        getI18nText = _this$asProps7.getI18nText;
-      return {
-        periods: periods,
-        'value': preselectedValue.length ? preselectedValue : value,
-        'onChange': this.handleApply,
-        onHighlightedChange: onHighlightedChange,
-        onDisplayedPeriodChange: onDisplayedPeriodChange,
-        'role': 'listbox',
-        'aria-label': getI18nText('periods'),
-        'periodRef': function periodRef(index) {
-          return function (element) {
-            if (!element) return;
-            _this3.periodRefs[index] = element;
-          };
         }
-      };
-    }
-  }, {
-    key: "getApplyProps",
-    value: function getApplyProps() {
-      var getI18nText = this.asProps.getI18nText;
-      return {
-        getI18nText: getI18nText,
-        onClick: this.handleApplyClick,
-        ref: this.applyButtonRef
-      };
-    }
-  }, {
-    key: "getResetProps",
-    value: function getResetProps() {
-      var getI18nText = this.asProps.getI18nText;
-      return {
-        getI18nText: getI18nText,
-        onClick: this.handleReset,
-        ref: this.resetButtonRef
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref4;
-      var _this$asProps8 = this.asProps,
-        Children = _this$asProps8.Children,
-        styles = _this$asProps8.styles,
-        providedAriaLabel = _this$asProps8['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(_ref5) {
-      var value = _ref5.value,
-        defaultValue = _ref5.defaultValue;
-      return {
-        i18n: _intergalacticDynamicLocales.localizedMessages,
-        locale: 'en',
-        defaultDisplayedPeriod: getEndDate(value) || getEndDate(defaultValue) || defaultDisplayedPeriod,
-        defaultValue: [],
-        defaultHighlighted: [],
-        defaultVisible: false,
-        defaultPreselectedValue: [],
-        disabled: [],
-        size: 'm'
-      };
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(RangePickerAbstract, "displayName", 'DatePicker');
-(0, _defineProperty2["default"])(RangePickerAbstract, "style", style);
-(0, _defineProperty2["default"])(RangePickerAbstract, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
-(0, _defineProperty2["default"])(RangePickerAbstract, "add", function (date, amount, unit) {
-  return (0, _dayjs["default"])(date).add(amount, unit).toDate();
+      }],
+      highlighted: null,
+      preselectedValue: null,
+      value: [null, value => {
+        if (value[0] !== null || value[1] !== null) {
+          this.handlers.displayedPeriod(getEndDate([value[0] ?? undefined, value[1] ?? undefined]));
+        }
+      }]
+    };
+  }
+  isDisabled(date) {
+    const {
+      disabled
+    } = this.asProps;
+    return disabled.some((0, _includesDate.includesDate)((0, _dayjs.default)(date), 'date'));
+  }
+  getDefaultPeriods() {
+    return [];
+  }
+  getButtonTriggerProps() {
+    const {
+      value,
+      size,
+      visible
+    } = this.asProps;
+    return {
+      popoverVisible: visible,
+      size,
+      empty: !value[0] && !value[1],
+      onKeyDown: this.handlerKeyDown('trigger')
+    };
+  }
+  getPopperProps() {
+    const Picker = this[_core.CORE_INSTANCE];
+    const {
+      periods = this.getDefaultPeriods(),
+      unclearable
+    } = this.asProps;
+    const buttons = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Picker.Apply, null), !unclearable && /*#__PURE__*/_react.default.createElement(Picker.Reset, {
+      ml: 2
+    }));
+    return {
+      tabIndex: 0,
+      ref: this.popperRef,
+      onKeyDown: this.handlerKeyDown('popper'),
+      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, null, /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, null, /*#__PURE__*/_react.default.createElement(_baseComponents.Box, {
+        mr: 2
+      }, /*#__PURE__*/_react.default.createElement(Picker.Header, null, /*#__PURE__*/_react.default.createElement(Picker.Prev, null), /*#__PURE__*/_react.default.createElement(Picker.Title, null)), /*#__PURE__*/_react.default.createElement(Picker.Calendar, null)), /*#__PURE__*/_react.default.createElement(_baseComponents.Box, {
+        ml: 2
+      }, /*#__PURE__*/_react.default.createElement(Picker.Header, null, /*#__PURE__*/_react.default.createElement(Picker.Title, {
+        "aria-live": undefined
+      }), /*#__PURE__*/_react.default.createElement(Picker.Next, null)), /*#__PURE__*/_react.default.createElement(Picker.Calendar, null))), periods.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_divider.default, {
+        m: "-16px 16px",
+        orientation: "vertical",
+        h: "auto"
+      }), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, {
+        direction: "column"
+      }, /*#__PURE__*/_react.default.createElement(Picker.Period, null), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, {
+        mt: "auto"
+      }, buttons)))), periods.length === 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_divider.default, {
+        m: "16px -16px",
+        orientation: "horizontal",
+        w: "auto"
+      }), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, null, /*#__PURE__*/_react.default.createElement(Picker.Period, null), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, {
+        mt: "auto"
+      }, buttons))))
+    };
+  }
+  getHeaderProps() {
+    const Picker = this[_core.CORE_INSTANCE];
+    return {
+      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Picker.Prev, null), /*#__PURE__*/_react.default.createElement(Picker.Title, null), /*#__PURE__*/_react.default.createElement(Picker.Next, null))
+    };
+  }
+  getTitleProps(_props, index) {
+    const {
+      locale,
+      displayedPeriod
+    } = this.asProps;
+    return {
+      children: new Intl.DateTimeFormat(locale, {
+        month: 'long',
+        year: 'numeric'
+      }).format((0, _dayjs.default)(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate())
+    };
+  }
+  getNextProps() {
+    const {
+      getI18nText
+    } = this.asProps;
+    const {
+      navigateStep
+    } = this;
+    return {
+      'ref': this.nextButtonRef,
+      'onClick': this.bindHandlerNavigateClick(1),
+      getI18nText,
+      'aria-label': navigateStep === 'month' ? getI18nText('nextMonth') : getI18nText('nextYear')
+    };
+  }
+  getPrevProps() {
+    const {
+      getI18nText
+    } = this.asProps;
+    const {
+      navigateStep
+    } = this;
+    return {
+      'ref': this.prevButtonRef,
+      'onClick': this.bindHandlerNavigateClick(-1),
+      getI18nText,
+      'aria-label': navigateStep === 'month' ? getI18nText('prevMonth') : getI18nText('prevYear')
+    };
+  }
+  getCalendarProps(_props, index) {
+    const {
+      locale,
+      displayedPeriod,
+      disabled,
+      value,
+      highlighted,
+      onHighlightedChange,
+      onVisibleChange,
+      preselectedValue,
+      getI18nText
+    } = this.asProps;
+    return {
+      locale,
+      displayedPeriod: (0, _dayjs.default)(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
+      disabled,
+      highlighted,
+      onHighlightedChange,
+      onVisibleChange,
+      value: preselectedValue.length ? preselectedValue : value,
+      onChange: this.handleChange,
+      unitRefs: this.unitRefs,
+      getI18nText,
+      actionsDescribing: index === 0 ? 'range' : null,
+      tabIndex: index === 0 ? 0 : -1
+    };
+  }
+  getPeriodProps() {
+    const {
+      periods = this.getDefaultPeriods(),
+      value,
+      onHighlightedChange,
+      onDisplayedPeriodChange,
+      preselectedValue,
+      getI18nText
+    } = this.asProps;
+    return {
+      periods,
+      'value': preselectedValue.length ? preselectedValue : value,
+      'onChange': this.handleApply,
+      onHighlightedChange,
+      onDisplayedPeriodChange,
+      'role': 'listbox',
+      'aria-label': getI18nText('periods'),
+      'periodRef': index => element => {
+        if (!element) return;
+        this.periodRefs[index] = element;
+      }
+    };
+  }
+  getApplyProps() {
+    const {
+      getI18nText
+    } = this.asProps;
+    return {
+      getI18nText,
+      onClick: this.handleApplyClick,
+      ref: this.applyButtonRef
+    };
+  }
+  getResetProps() {
+    const {
+      getI18nText
+    } = this.asProps;
+    return {
+      getI18nText,
+      onClick: this.handleReset,
+      ref: this.resetButtonRef
+    };
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref4;
+    const {
+      Children,
+      styles,
+      'aria-label': providedAriaLabel
+    } = this.asProps;
+    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", {})))));
+  }
+}
+(0, _defineProperty2.default)(RangePickerAbstract, "displayName", 'DatePicker');
+(0, _defineProperty2.default)(RangePickerAbstract, "style", style);
+(0, _defineProperty2.default)(RangePickerAbstract, "enhance", [(0, _i18nEnhance.default)(_intergalacticDynamicLocales.localizedMessages)]);
+(0, _defineProperty2.default)(RangePickerAbstract, "add", (date, amount, unit) => {
+  return (0, _dayjs.default)(date).add(amount, unit).toDate();
 });
-(0, _defineProperty2["default"])(RangePickerAbstract, "subtract", function (date, amount, unit) {
-  return (0, _dayjs["default"])(date).subtract(amount, unit).toDate();
+(0, _defineProperty2.default)(RangePickerAbstract, "subtract", (date, amount, unit) => {
+  return (0, _dayjs.default)(date).subtract(amount, unit).toDate();
 });
 function Apply(props) {
   var _ref2 = arguments[0];
-  var getI18nText = props.getI18nText;
-  return /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _core.assignProps)({
+  const {
+    getI18nText
+  } = props;
+  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)({
+  const {
+    getI18nText
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_button.default, (0, _core.assignProps)({
     "use": 'tertiary',
     "theme": 'muted',
     "children": getI18nText('reset')
   }, _ref3));
 }
-var _default = exports["default"] = RangePickerAbstract;
+var _default = exports.default = RangePickerAbstract;
 //# sourceMappingURL=RangePickerAbstract.js.map