@semcore/date-picker 4.57.0 → 4.57.1

package/lib/esm/components/RangePickerAbstract.mjs

@@ -1,352 +1,441 @@
-import G from "@babel/runtime/helpers/esm/classCallCheck";
-import U from "@babel/runtime/helpers/esm/createClass";
-import u from "@babel/runtime/helpers/esm/assertThisInitialized";
-import J from "@babel/runtime/helpers/esm/inherits";
-import Q from "@babel/runtime/helpers/esm/createSuper";
-import g from "@babel/runtime/helpers/esm/defineProperty";
-import T from "@babel/runtime/helpers/esm/slicedToArray";
-import { sstyled as W } from "@semcore/utils/lib/core/index";
-import { CORE_INSTANCE as M, sstyled as X, assignProps as E, Component as Z } from "@semcore/core";
-import r from "react";
-import h from "dayjs";
-import N from "@semcore/button";
-import { Flex as S, Box as A } from "@semcore/flex-box";
-import z from "@semcore/divider";
-import ee from "@semcore/dropdown";
-import ae from "@semcore/utils/lib/enhances/i18nEnhance";
-import { localizedMessages as F } from "../translations/__intergalactic-dynamic-locales.mjs";
-import { includesDate as te } from "../utils/includesDate.mjs";
-import { formatMMYY as re, formatDDMMYY as _e } from "../utils/formatDate.mjs";
-var ie = (
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import { CORE_INSTANCE, sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
+import React from "react";
+import dayjs from "dayjs";
+import Button from "@semcore/button";
+import { Flex, Box } from "@semcore/flex-box";
+import Divider from "@semcore/divider";
+import Dropdown from "@semcore/dropdown";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+import { localizedMessages } from "../translations/__intergalactic-dynamic-locales.mjs";
+import { includesDate } from "../utils/includesDate.mjs";
+import { formatMMYY, formatDDMMYY } from "../utils/formatDate.mjs";
+/*!__reshadow-styles__:"../style/date-picker.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (W.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPopper_182qj_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_182qj_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_182qj_gg_:active,.___SPopper_182qj_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_182qj_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_182qj_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_182qj_gg_,.___STitle_182qj_gg_{display:flex;align-items:center}.___STitle_182qj_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_182qj_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_182qj_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_182qj_gg_ .___SInner_182qj_gg_{justify-content:flex-start}.___SInputMask_182qj_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_182qj_gg_.__animationsDisabled_182qj_gg_{transition:none}.___SInputMask_182qj_gg_ .___SValue_182qj_gg_{letter-spacing:0}.___SIndicator_182qj_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_182qj_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_182qj_gg_._range_value_182qj_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_182qj_gg_._range_compare_182qj_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_182qj_gg_.__disabled_182qj_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_182qj_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_182qj_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_182qj_gg_ .___SMask_182qj_gg_,.___SDateRange_182qj_gg_ .___SValue_182qj_gg_,.___SSingleDateInput_182qj_gg_ .___SMask_182qj_gg_,.___SSingleDateInput_182qj_gg_ .___SValue_182qj_gg_{opacity:0}.___SSingleDateInput_182qj_gg_:focus-within .___SHumanizedDate_182qj_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_182qj_gg_:focus-within .___SMask_182qj_gg_,.___SSingleDateInput_182qj_gg_:focus-within .___SValue_182qj_gg_{opacity:1}.___SDateRange_182qj_gg_:focus-within .___SHumanizedDate_182qj_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_182qj_gg_:focus-within .___SMask_182qj_gg_,.___SDateRange_182qj_gg_:focus-within .___SValue_182qj_gg_{opacity:1}.___SInputMask_182qj_gg_.__noHumanizedDate_182qj_gg_ .___SMask_182qj_gg_,.___SInputMask_182qj_gg_.__noHumanizedDate_182qj_gg_ .___SValue_182qj_gg_{opacity:1}.___SDateRange_182qj_gg_ .___SInputMask_182qj_gg_:focus-within .___SMask_182qj_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_182qj_gg_:focus-within .___SRangeSep_182qj_gg_,.___SRangeSep_182qj_gg_.__fulfilled_182qj_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_182qj_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_182qj_gg_,.___SRangeComparatorHeader_182qj_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_182qj_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_182qj_gg_,.___SPeriodsList_182qj_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_182qj_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_182qj_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_182qj_gg_{transition:none}}",
-    "182qj_gg_"
-  ), {
-    __SHeader: "___SHeader_182qj_gg_",
-    __STitle: "___STitle_182qj_gg_",
-    __SToday: "___SToday_182qj_gg_",
-    __SPeriod: "___SPeriod_182qj_gg_",
-    __SButton: "___SButton_182qj_gg_",
-    __SInner: "___SInner_182qj_gg_",
-    __SInputMask: "___SInputMask_182qj_gg_",
-    _animationsDisabled: "__animationsDisabled_182qj_gg_",
-    __SValue: "___SValue_182qj_gg_",
-    __SIndicator: "___SIndicator_182qj_gg_",
-    __SRangeIndicator: "___SRangeIndicator_182qj_gg_",
-    _range_value: "_range_value_182qj_gg_",
-    _range_compare: "_range_compare_182qj_gg_",
-    _disabled: "__disabled_182qj_gg_",
-    __SHumanizedDate: "___SHumanizedDate_182qj_gg_",
-    __SMask: "___SMask_182qj_gg_",
-    __SSingleDateInput: "___SSingleDateInput_182qj_gg_",
-    __SDateRange: "___SDateRange_182qj_gg_",
-    _noHumanizedDate: "__noHumanizedDate_182qj_gg_",
-    __SRangeSep: "___SRangeSep_182qj_gg_",
-    _fulfilled: "__fulfilled_182qj_gg_",
-    __SRangeComparatorHeader: "___SRangeComparatorHeader_182qj_gg_",
-    __SRangeCalendar: "___SRangeCalendar_182qj_gg_",
-    __SFooter: "___SFooter_182qj_gg_",
-    __SPeriodsList: "___SPeriodsList_182qj_gg_",
-    __STooltip: "___STooltip_182qj_gg_",
-    __SCompareToggle: "___SCompareToggle_182qj_gg_",
-    __SPopper: "___SPopper_182qj_gg_"
+    ".___SPopper_svfjr_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_svfjr_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_svfjr_gg_:active,.___SPopper_svfjr_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_svfjr_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_svfjr_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_svfjr_gg_,.___STitle_svfjr_gg_{display:flex;align-items:center}.___STitle_svfjr_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_svfjr_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_svfjr_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_svfjr_gg_ .___SInner_svfjr_gg_{justify-content:flex-start}.___SInputMask_svfjr_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_svfjr_gg_.__animationsDisabled_svfjr_gg_{transition:none}.___SInputMask_svfjr_gg_ .___SValue_svfjr_gg_{letter-spacing:0}.___SIndicator_svfjr_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_svfjr_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_svfjr_gg_._range_value_svfjr_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_svfjr_gg_._range_compare_svfjr_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_svfjr_gg_.__disabled_svfjr_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_svfjr_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_svfjr_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_svfjr_gg_ .___SMask_svfjr_gg_,.___SDateRange_svfjr_gg_ .___SValue_svfjr_gg_,.___SSingleDateInput_svfjr_gg_ .___SMask_svfjr_gg_,.___SSingleDateInput_svfjr_gg_ .___SValue_svfjr_gg_{opacity:0}.___SSingleDateInput_svfjr_gg_:focus-within .___SHumanizedDate_svfjr_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_svfjr_gg_:focus-within .___SMask_svfjr_gg_,.___SSingleDateInput_svfjr_gg_:focus-within .___SValue_svfjr_gg_{opacity:1}.___SDateRange_svfjr_gg_:focus-within .___SHumanizedDate_svfjr_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_svfjr_gg_:focus-within .___SMask_svfjr_gg_,.___SDateRange_svfjr_gg_:focus-within .___SValue_svfjr_gg_{opacity:1}.___SInputMask_svfjr_gg_.__noHumanizedDate_svfjr_gg_ .___SMask_svfjr_gg_,.___SInputMask_svfjr_gg_.__noHumanizedDate_svfjr_gg_ .___SValue_svfjr_gg_{opacity:1}.___SDateRange_svfjr_gg_ .___SInputMask_svfjr_gg_:focus-within .___SMask_svfjr_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_svfjr_gg_:focus-within .___SRangeSep_svfjr_gg_,.___SRangeSep_svfjr_gg_.__fulfilled_svfjr_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_svfjr_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_svfjr_gg_,.___SRangeComparatorHeader_svfjr_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_svfjr_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_svfjr_gg_,.___SPeriodsList_svfjr_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_svfjr_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_svfjr_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_svfjr_gg_{transition:none}}",
+    /*__inner_css_end__*/
+    "svfjr_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHeader": "___SHeader_svfjr_gg_",
+    "__STitle": "___STitle_svfjr_gg_",
+    "__SToday": "___SToday_svfjr_gg_",
+    "__SPeriod": "___SPeriod_svfjr_gg_",
+    "__SButton": "___SButton_svfjr_gg_",
+    "__SInner": "___SInner_svfjr_gg_",
+    "__SInputMask": "___SInputMask_svfjr_gg_",
+    "_animationsDisabled": "__animationsDisabled_svfjr_gg_",
+    "__SValue": "___SValue_svfjr_gg_",
+    "__SIndicator": "___SIndicator_svfjr_gg_",
+    "__SRangeIndicator": "___SRangeIndicator_svfjr_gg_",
+    "_range_value": "_range_value_svfjr_gg_",
+    "_range_compare": "_range_compare_svfjr_gg_",
+    "_disabled": "__disabled_svfjr_gg_",
+    "__SHumanizedDate": "___SHumanizedDate_svfjr_gg_",
+    "__SMask": "___SMask_svfjr_gg_",
+    "__SSingleDateInput": "___SSingleDateInput_svfjr_gg_",
+    "__SDateRange": "___SDateRange_svfjr_gg_",
+    "_noHumanizedDate": "__noHumanizedDate_svfjr_gg_",
+    "__SRangeSep": "___SRangeSep_svfjr_gg_",
+    "_fulfilled": "__fulfilled_svfjr_gg_",
+    "__SRangeComparatorHeader": "___SRangeComparatorHeader_svfjr_gg_",
+    "__SRangeCalendar": "___SRangeCalendar_svfjr_gg_",
+    "__SFooter": "___SFooter_svfjr_gg_",
+    "__SPeriodsList": "___SPeriodsList_svfjr_gg_",
+    "__STooltip": "___STooltip_svfjr_gg_",
+    "__SCompareToggle": "___SCompareToggle_svfjr_gg_",
+    "__SPopper": "___SPopper_svfjr_gg_"
   })
-), ne = ["INPUT"], le = ["ArrowDown", "Enter", " "], oe = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
-function D(c) {
-  if (!Array.isArray(c)) return null;
-  var p = T(c, 2), s = p[0], a = p[1], e = a === void 0 ? s : a;
-  return e;
+);
+var INTERACTION_TAGS = ["INPUT"];
+var INTERACTION_KEYS = ["ArrowDown", "Enter", " "];
+var defaultDisplayedPeriod = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
+function getEndDate(value) {
+  if (!Array.isArray(value)) return null;
+  var _value = _slicedToArray(value, 2), startDate = _value[0], _value$ = _value[1], endDate = _value$ === void 0 ? startDate : _value$;
+  return endDate;
 }
-var q = /* @__PURE__ */ function(c) {
-  J(s, c);
-  var p = Q(s);
-  function s() {
-    var a;
-    G(this, s);
-    for (var e = arguments.length, i = new Array(e), n = 0; n < e; n++)
-      i[n] = arguments[n];
-    return a = p.call.apply(p, [this].concat(i)), g(u(a), "popperRef", /* @__PURE__ */ r.createRef()), g(u(a), "unitRefs", {}), g(u(a), "navigateStep", void 0), g(u(a), "keyDiff", void 0), g(u(a), "keyStep", void 0), g(u(a), "navigateView", function(t) {
-      var _ = a.asProps.displayedPeriod, l = t >= 1 ? "add" : "subtract", o = h(_)[l](1, a.navigateStep).toDate();
-      a.handlers.displayedPeriod(o);
-    }), g(u(a), "bindHandlerNavigateClick", function(t) {
+var RangePickerAbstract = /* @__PURE__ */ function(_Component) {
+  _inherits(RangePickerAbstract2, _Component);
+  var _super = _createSuper(RangePickerAbstract2);
+  function RangePickerAbstract2() {
+    var _this;
+    _classCallCheck(this, RangePickerAbstract2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "popperRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "unitRefs", {});
+    _defineProperty(_assertThisInitialized(_this), "navigateStep", void 0);
+    _defineProperty(_assertThisInitialized(_this), "keyDiff", void 0);
+    _defineProperty(_assertThisInitialized(_this), "keyStep", void 0);
+    _defineProperty(_assertThisInitialized(_this), "navigateView", function(direction) {
+      var displayedPeriod = _this.asProps.displayedPeriod;
+      var action = direction >= 1 ? "add" : "subtract";
+      var date = dayjs(displayedPeriod)[action](1, _this.navigateStep).toDate();
+      _this.handlers.displayedPeriod(date);
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerNavigateClick", function(direction) {
       return function() {
-        return a.navigateView(t);
+        return _this.navigateView(direction);
       };
-    }), g(u(a), "handlerKeyDown", function(t) {
-      return function(_) {
-        var l = a.asProps, o = l.displayedPeriod, d = l.highlighted, m = l.preselectedValue, x = l.visible, P = _.key;
-        t === "trigger" && le.includes(P) && (_.stopPropagation(), a.handlers.visible(!x), setTimeout(function() {
-          var k = a.popperRef.current;
-          k && k.focus();
-        }, 0));
-        var y = a.keyDiff[P], Y = function($) {
-          var V = T($, 2), O = V[0], L = V[1], v = L || O, I = o == null ? void 0 : o.getDate(), C = v == null ? void 0 : v.getDate();
-          a.navigateStep === "month" && (I = o == null ? void 0 : o.getMonth(), C = v == null ? void 0 : v.getMonth()), a.navigateStep === "year" && (I = o == null ? void 0 : o.getYear(), C = v == null ? void 0 : v.getYear());
-          var H = C - I;
-          return H < 0 || H > 1 ? v : o;
+    });
+    _defineProperty(_assertThisInitialized(_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;
+        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 setNextDisplayedPeriod2(next_highlighted2) {
+          var _next_highlighted = _slicedToArray(next_highlighted2, 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();
+          }
+          var offset = highlightedPeriodNormalized - displayedPeriodNormalized;
+          if (offset < 0 || offset > 1) {
+            return highlightedPeriod;
+          }
+          return displayedPeriod;
         };
-        if (t === "popper" && _.key === "Enter" && (_.metaKey || _.ctrlKey))
-          return a.handleApplyClick();
-        if (t === "popper" && _.key === " " && d.length) {
-          var R = d[1] || d[0];
-          a.isDisabled(R) || a.handleChange(R), _.preventDefault();
+        if (place === "popper" && e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+          return _this.handleApplyClick();
+        }
+        if (place === "popper" && e.key === " " && highlighted.length) {
+          var highlightedDate = highlighted[1] || highlighted[0];
+          if (!_this.isDisabled(highlightedDate)) {
+            _this.handleChange(highlightedDate);
+          }
+          e.preventDefault();
         }
-        var j = void 0;
-        if (y) {
-          if (ne.includes(_.target.tagName)) return;
-          if (d.length) {
-            var f;
-            m.length === 1 ? (f = [m[0], h(d[1] || d[0]).add(y, a.keyStep).toDate()], j = f[1]) : (f = [h(d[0]).add(y, a.keyStep).toDate()], j = f[0]), a.handlers.highlighted(f), a.handlers.displayedPeriod(Y(f));
+        var changedDate = void 0;
+        if (day) {
+          if (INTERACTION_TAGS.includes(e.target.tagName)) return;
+          if (highlighted.length) {
+            var next_highlighted;
+            if (preselectedValue.length === 1) {
+              next_highlighted = [preselectedValue[0], dayjs(highlighted[1] || highlighted[0]).add(day, _this.keyStep).toDate()];
+              changedDate = next_highlighted[1];
+            } else {
+              next_highlighted = [dayjs(highlighted[0]).add(day, _this.keyStep).toDate()];
+              changedDate = next_highlighted[0];
+            }
+            _this.handlers.highlighted(next_highlighted);
+            _this.handlers.displayedPeriod(setNextDisplayedPeriod(next_highlighted));
           } else {
-            var w = [o || h().toDate()];
-            a.handlers.highlighted(w), j = w[0];
+            var _highlighted = [displayedPeriod ? displayedPeriod : dayjs().toDate()];
+            _this.handlers.highlighted(_highlighted);
+            changedDate = _highlighted[0];
           }
-          if (_.preventDefault(), j) {
-            var b, K = a.keyStep === "month" ? re : _e, B = K(j, a.asProps.locale);
-            (b = a.unitRefs[B]) === null || b === void 0 || b.focus();
+          e.preventDefault();
+          if (changedDate) {
+            var _this$unitRefs$format;
+            var formatter = _this.keyStep === "month" ? formatMMYY : formatDDMMYY;
+            var formattedDate = formatter(changedDate, _this.asProps.locale);
+            (_this$unitRefs$format = _this.unitRefs[formattedDate]) === null || _this$unitRefs$format === void 0 ? void 0 : _this$unitRefs$format.focus();
           }
         }
       };
-    }), g(u(a), "handleApply", function(t) {
-      var _ = T(t, 2), l = _[0], o = _[1], d = o === void 0 ? l : o;
-      a.handleChange([]), a.handlers.value([l, d]), a.handlers.visible(!1);
-    }), g(u(a), "handleChange", function(t) {
-      var _ = a.asProps.preselectedValue, l = [];
-      Array.isArray(t) ? _ = t : _.length ? _.length >= 2 ? (_ = [t], l = [t]) : _[0] > t ? _ = [t, _[0]] : _ = [_[0], t] : (_ = [t], l = [t]), a.handlers.preselectedValue(_), a.handlers.highlighted(l);
-    }), g(u(a), "handleApplyClick", function() {
-      var t = a.asProps, _ = t.value, l = t.preselectedValue;
-      return a.handleApply(l.length ? l : _);
-    }), a;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleApply", function(value) {
+      var _value2 = _slicedToArray(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);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function(date) {
+      var preselectedValue = _this.asProps.preselectedValue;
+      var highlighted = [];
+      if (Array.isArray(date)) {
+        preselectedValue = date;
+      } else if (!preselectedValue.length) {
+        preselectedValue = [date];
+        highlighted = [date];
+      } else if (preselectedValue.length >= 2) {
+        preselectedValue = [date];
+        highlighted = [date];
+      } else if (preselectedValue[0] > date) {
+        preselectedValue = [date, preselectedValue[0]];
+      } else {
+        preselectedValue = [preselectedValue[0], date];
+      }
+      _this.handlers.preselectedValue(preselectedValue);
+      _this.handlers.highlighted(highlighted);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleApplyClick", function() {
+      var _this$asProps2 = _this.asProps, value = _this$asProps2.value, preselectedValue = _this$asProps2.preselectedValue;
+      return _this.handleApply(preselectedValue.length ? preselectedValue : value);
+    });
+    return _this;
   }
-  return U(s, [{
+  _createClass(RangePickerAbstract2, [{
     key: "uncontrolledProps",
-    value: function() {
-      var e = this;
+    value: function uncontrolledProps() {
+      var _this2 = this;
       return {
         displayedPeriod: null,
-        visible: [null, function(i) {
-          var n = e.asProps, t = n.value, _ = n.displayedPeriod, l = D(t ?? void 0);
-          if (i || (e.handlers.highlighted([]), e.handlers.preselectedValue([])), i) {
-            if (l && l !== _)
-              e.handlers.displayedPeriod(l);
-            else if (!l) {
-              var o = e.props, d = o.displayedPeriod, m = o.defaultDisplayedPeriod;
-              e.handlers.displayedPeriod(d || m);
+        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 : void 0);
+          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(i) {
-          if (i[0] !== null || i[1] !== null) {
-            var n, t;
-            e.handlers.displayedPeriod(D([(n = i[0]) !== null && n !== void 0 ? n : void 0, (t = i[1]) !== null && t !== void 0 ? t : void 0]));
+        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 : void 0, (_value$3 = value[1]) !== null && _value$3 !== void 0 ? _value$3 : void 0]));
           }
         }]
       };
     }
   }, {
     key: "isDisabled",
-    value: function(e) {
-      var i = this.asProps.disabled;
-      return i.some(te(h(e), "date"));
+    value: function isDisabled(date) {
+      var disabled = this.asProps.disabled;
+      return disabled.some(includesDate(dayjs(date), "date"));
     }
   }, {
     key: "getDefaultPeriods",
-    value: function() {
+    value: function getDefaultPeriods() {
       return [];
     }
   }, {
     key: "getButtonTriggerProps",
-    value: function() {
-      var e = this.asProps, i = e.value, n = e.size, t = e.visible;
+    value: function getButtonTriggerProps() {
+      var _this$asProps3 = this.asProps, value = _this$asProps3.value, size = _this$asProps3.size, visible = _this$asProps3.visible;
       return {
-        popoverVisible: t,
-        size: n,
-        empty: !i[0] && !i[1],
+        popoverVisible: visible,
+        size,
+        empty: !value[0] && !value[1],
         onKeyDown: this.handlerKeyDown("trigger")
       };
     }
   }, {
     key: "getPopperProps",
-    value: function() {
-      var e = this[M], i = this.asProps, n = i.periods, t = n === void 0 ? this.getDefaultPeriods() : n, _ = i.unclearable, l = /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(e.Apply, null), !_ && /* @__PURE__ */ r.createElement(e.Reset, {
+    value: function getPopperProps() {
+      var Picker = this[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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Picker.Apply, null), !unclearable && /* @__PURE__ */ React.createElement(Picker.Reset, {
         ml: 2
       }));
       return {
         tabIndex: 0,
         ref: this.popperRef,
         onKeyDown: this.handlerKeyDown("popper"),
-        children: /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(S, null, /* @__PURE__ */ r.createElement(S, null, /* @__PURE__ */ r.createElement(A, {
+        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, null, /* @__PURE__ */ React.createElement(Flex, null, /* @__PURE__ */ React.createElement(Box, {
           mr: 2
-        }, /* @__PURE__ */ r.createElement(e.Header, null, /* @__PURE__ */ r.createElement(e.Prev, null), /* @__PURE__ */ r.createElement(e.Title, null)), /* @__PURE__ */ r.createElement(e.Calendar, null)), /* @__PURE__ */ r.createElement(A, {
+        }, /* @__PURE__ */ React.createElement(Picker.Header, null, /* @__PURE__ */ React.createElement(Picker.Prev, null), /* @__PURE__ */ React.createElement(Picker.Title, null)), /* @__PURE__ */ React.createElement(Picker.Calendar, null)), /* @__PURE__ */ React.createElement(Box, {
           ml: 2
-        }, /* @__PURE__ */ r.createElement(e.Header, null, /* @__PURE__ */ r.createElement(e.Title, {
+        }, /* @__PURE__ */ React.createElement(Picker.Header, null, /* @__PURE__ */ React.createElement(Picker.Title, {
           "aria-live": void 0
-        }), /* @__PURE__ */ r.createElement(e.Next, null)), /* @__PURE__ */ r.createElement(e.Calendar, null))), t.length > 0 && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(z, {
+        }), /* @__PURE__ */ React.createElement(Picker.Next, null)), /* @__PURE__ */ React.createElement(Picker.Calendar, null))), periods.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, {
           m: "-16px 16px",
           orientation: "vertical",
           h: "auto"
-        }), /* @__PURE__ */ r.createElement(S, {
+        }), /* @__PURE__ */ React.createElement(Flex, {
           direction: "column"
-        }, /* @__PURE__ */ r.createElement(e.Period, null), /* @__PURE__ */ r.createElement(S, {
+        }, /* @__PURE__ */ React.createElement(Picker.Period, null), /* @__PURE__ */ React.createElement(Flex, {
           mt: "auto"
-        }, l)))), t.length === 0 && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(z, {
+        }, buttons)))), periods.length === 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, {
           m: "16px -16px",
           orientation: "horizontal",
           w: "auto"
-        }), /* @__PURE__ */ r.createElement(S, null, /* @__PURE__ */ r.createElement(e.Period, null), /* @__PURE__ */ r.createElement(S, {
+        }), /* @__PURE__ */ React.createElement(Flex, null, /* @__PURE__ */ React.createElement(Picker.Period, null), /* @__PURE__ */ React.createElement(Flex, {
           mt: "auto"
-        }, l))))
+        }, buttons))))
       };
     }
   }, {
     key: "getHeaderProps",
-    value: function() {
-      var e = this[M];
+    value: function getHeaderProps() {
+      var Picker = this[CORE_INSTANCE];
       return {
-        children: /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(e.Prev, null), /* @__PURE__ */ r.createElement(e.Title, null), /* @__PURE__ */ r.createElement(e.Next, null))
+        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Picker.Prev, null), /* @__PURE__ */ React.createElement(Picker.Title, null), /* @__PURE__ */ React.createElement(Picker.Next, null))
       };
     }
   }, {
     key: "getTitleProps",
-    value: function(e, i) {
-      var n = this.asProps, t = n.locale, _ = n.displayedPeriod;
+    value: function getTitleProps(props, index) {
+      var _this$asProps5 = this.asProps, locale = _this$asProps5.locale, displayedPeriod = _this$asProps5.displayedPeriod;
       return {
-        children: new Intl.DateTimeFormat(t, {
+        children: new Intl.DateTimeFormat(locale, {
           month: "long",
           year: "numeric"
-        }).format(h(_).add(i, this.navigateStep).startOf(this.navigateStep).toDate())
+        }).format(dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate())
       };
     }
   }, {
     key: "getNextProps",
-    value: function() {
-      var e = this.asProps.getI18nText, i = this.navigateStep;
+    value: function getNextProps() {
+      var getI18nText = this.asProps.getI18nText;
+      var navigateStep = this.navigateStep;
       return {
         onClick: this.bindHandlerNavigateClick(1),
-        getI18nText: e,
-        "aria-label": e(i === "month" ? "nextMonth" : "nextYear")
+        getI18nText,
+        "aria-label": navigateStep === "month" ? getI18nText("nextMonth") : getI18nText("nextYear")
       };
     }
   }, {
     key: "getPrevProps",
-    value: function() {
-      var e = this.asProps.getI18nText, i = this.navigateStep;
+    value: function getPrevProps() {
+      var getI18nText = this.asProps.getI18nText;
+      var navigateStep = this.navigateStep;
       return {
         onClick: this.bindHandlerNavigateClick(-1),
-        getI18nText: e,
-        "aria-label": e(i === "month" ? "prevMonth" : "prevYear")
+        getI18nText,
+        "aria-label": navigateStep === "month" ? getI18nText("prevMonth") : getI18nText("prevYear")
       };
     }
   }, {
     key: "getCalendarProps",
-    value: function(e, i) {
-      var n = this.asProps, t = n.locale, _ = n.displayedPeriod, l = n.disabled, o = n.value, d = n.highlighted, m = n.onHighlightedChange, x = n.onVisibleChange, P = n.preselectedValue, y = n.getI18nText;
+    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: t,
-        displayedPeriod: h(_).add(i, this.navigateStep).startOf(this.navigateStep).toDate(),
-        disabled: l,
-        highlighted: d,
-        onHighlightedChange: m,
-        onVisibleChange: x,
-        value: P.length ? P : o,
+        locale,
+        displayedPeriod: dayjs(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: y,
-        actionsDescribing: i === 0 ? "range" : null,
-        tabIndex: i === 0 ? 0 : -1
+        getI18nText,
+        actionsDescribing: index === 0 ? "range" : null,
+        tabIndex: index === 0 ? 0 : -1
       };
     }
   }, {
     key: "getPeriodProps",
-    value: function() {
-      var e = this.asProps, i = e.periods, n = i === void 0 ? this.getDefaultPeriods() : i, t = e.value, _ = e.onHighlightedChange, l = e.onDisplayedPeriodChange, o = e.preselectedValue, d = e.getI18nText;
+    value: function getPeriodProps() {
+      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: n,
-        value: o.length ? o : t,
+        periods,
+        value: preselectedValue.length ? preselectedValue : value,
         onChange: this.handleApply,
-        onHighlightedChange: _,
-        onDisplayedPeriodChange: l,
+        onHighlightedChange,
+        onDisplayedPeriodChange,
         role: "listbox",
-        "aria-label": d("periods")
+        "aria-label": getI18nText("periods")
       };
     }
   }, {
     key: "getApplyProps",
-    value: function() {
-      var e = this.asProps.getI18nText;
+    value: function getApplyProps() {
+      var getI18nText = this.asProps.getI18nText;
       return {
-        getI18nText: e,
+        getI18nText,
         onClick: this.handleApplyClick
       };
     }
   }, {
     key: "getResetProps",
-    value: function() {
-      var e = this, i = this.asProps.getI18nText;
+    value: function getResetProps() {
+      var _this3 = this;
+      var getI18nText = this.asProps.getI18nText;
       return {
-        getI18nText: i,
-        onClick: function() {
-          return e.handleApply([]);
+        getI18nText,
+        onClick: function onClick() {
+          return _this3.handleApply([]);
         }
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var e = this.asProps, i, n = this.asProps, t = n.Children, _ = n.styles, l = n["aria-label"];
-      return /* @__PURE__ */ r.createElement(r.Fragment, null, (i = X(_), /* @__PURE__ */ r.createElement(ee, E({
-        "use:aria-label": l,
-        __excludeProps: ["onChange", "value"]
-      }, e), /* @__PURE__ */ r.createElement(t, i.cn("Children", {})))));
+    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.createElement(React.Fragment, null, (_ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(Dropdown, assignProps({
+        "use:aria-label": providedAriaLabel,
+        "__excludeProps": ["onChange", "value"]
+      }, _ref), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})))));
     }
   }], [{
     key: "defaultProps",
-    value: function(e) {
-      var i = e.value, n = e.defaultValue;
+    value: function defaultProps(_ref5) {
+      var value = _ref5.value, defaultValue = _ref5.defaultValue;
       return {
-        i18n: F,
+        i18n: localizedMessages,
         locale: "en",
-        defaultDisplayedPeriod: D(i) || D(n) || oe,
+        defaultDisplayedPeriod: getEndDate(value) || getEndDate(defaultValue) || defaultDisplayedPeriod,
         defaultValue: [],
         defaultHighlighted: [],
-        defaultVisible: !1,
+        defaultVisible: false,
         defaultPreselectedValue: [],
         disabled: [],
         size: "m"
       };
     }
-  }]), s;
-}(Z);
-g(q, "displayName", "DatePicker");
-g(q, "style", ie);
-g(q, "enhance", [ae(F)]);
-g(q, "add", function(c, p, s) {
-  return h(c).add(p, s).toDate();
+  }]);
+  return RangePickerAbstract2;
+}(Component);
+_defineProperty(RangePickerAbstract, "displayName", "DatePicker");
+_defineProperty(RangePickerAbstract, "style", style);
+_defineProperty(RangePickerAbstract, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(RangePickerAbstract, "add", function(date, amount, unit) {
+  return dayjs(date).add(amount, unit).toDate();
 });
-g(q, "subtract", function(c, p, s) {
-  return h(c).subtract(p, s).toDate();
+_defineProperty(RangePickerAbstract, "subtract", function(date, amount, unit) {
+  return dayjs(date).subtract(amount, unit).toDate();
 });
-function Ie(c) {
-  var p = arguments[0], s = c.getI18nText;
-  return /* @__PURE__ */ r.createElement(N, E({
-    use: "primary",
-    children: s("apply")
-  }, p));
+function Apply(props) {
+  var _ref2 = arguments[0];
+  var getI18nText = props.getI18nText;
+  return /* @__PURE__ */ React.createElement(Button, assignProps({
+    "use": "primary",
+    "children": getI18nText("apply")
+  }, _ref2));
 }
-function Ce(c) {
-  var p = arguments[0], s = c.getI18nText;
-  return /* @__PURE__ */ r.createElement(N, E({
-    use: "tertiary",
-    theme: "muted",
-    children: s("reset")
-  }, p));
+function Reset(props) {
+  var _ref3 = arguments[0];
+  var getI18nText = props.getI18nText;
+  return /* @__PURE__ */ React.createElement(Button, assignProps({
+    "use": "tertiary",
+    "theme": "muted",
+    "children": getI18nText("reset")
+  }, _ref3));
 }
 export {
-  Ie as Apply,
-  Ce as Reset,
-  q as default
+  Apply,
+  Reset,
+  RangePickerAbstract as default
 };