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

package/lib/esm/components/PickerAbstract.mjs

@@ -1,9 +1,5 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { CORE_INSTANCE, sstyled, assignProps, Component } from "@semcore/core";
+import { Component, CORE_INSTANCE, sstyled, assignProps } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import Dropdown from "@semcore/dropdown";
 import dayjs from "dayjs";
@@ -12,266 +8,275 @@ import { localizedMessages } from "../translations/__intergalactic-dynamic-local
 import { formatMMYY, formatDDMMYY } from "../utils/formatDate.mjs";
 import { includesDate } from "../utils/includesDate.mjs";
 /*!__reshadow-styles__:"../style/date-picker.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (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}}",
+    ".___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__*/
-    "gjj0p_gg_"
+    "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((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
-var PickerAbstract = /* @__PURE__ */ (function(_Component) {
-  function PickerAbstract2() {
-    var _this;
-    _classCallCheck(this, PickerAbstract2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, PickerAbstract2, [].concat(args));
-    _defineProperty(_this, "prevButtonRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "nextButtonRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "popperRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "unitRefs", {});
-    _defineProperty(_this, "navigateStep", void 0);
-    _defineProperty(_this, "keyDiff", void 0);
-    _defineProperty(_this, "keyStep", void 0);
-    _defineProperty(_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);
+const INTERACTION_TAGS = ["INPUT"];
+const INTERACTION_KEYS = ["ArrowDown", "Enter", " "];
+const defaultDisplayedPeriod = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
+class PickerAbstract extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "prevButtonRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "nextButtonRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "popperRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "unitRefs", {});
+    _defineProperty(this, "navigateStep", void 0);
+    _defineProperty(this, "keyDiff", void 0);
+    _defineProperty(this, "keyStep", void 0);
+    _defineProperty(this, "navigateView", (direction) => {
+      const {
+        displayedPeriod
+      } = this.asProps;
+      const action = direction >= 1 ? "add" : "subtract";
+      const date = dayjs(displayedPeriod)[action](1, this.navigateStep).toDate();
+      this.handlers.displayedPeriod(date);
     });
-    _defineProperty(_this, "bindHandlerNavigateClick", function(direction) {
-      return function() {
-        _this.navigateView(direction);
-      };
+    _defineProperty(this, "bindHandlerNavigateClick", (direction) => () => {
+      this.navigateView(direction);
     });
-    _defineProperty(_this, "handlerKeyDown", function(place) {
-      return function(e) {
-        var _this$asProps = _this.asProps, value = _this$asProps.value, displayedPeriod = _this$asProps.displayedPeriod, highlighted = _this$asProps.highlighted;
-        _this$asProps.disabled;
-        var 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[e.key];
-        var getCurrentHighlightedDay = function getCurrentHighlightedDay2(day2) {
-          return day2.toDate();
-        };
-        if (place === "popper" && (e.key === " " || e.key === "Enter") && highlighted.length) {
-          if (!_this.isDisabled(highlighted[0])) {
-            _this.handlers.value(highlighted[0]);
+    _defineProperty(this, "handlerKeyDown", (place) => (e) => {
+      var _a;
+      const {
+        value,
+        displayedPeriod,
+        highlighted,
+        disabled: _disabled,
+        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();
           }
-          e.preventDefault();
+        }, 0);
+      }
+      const day = this.keyDiff[e.key];
+      const getCurrentHighlightedDay = (day2) => {
+        return day2.toDate();
+      };
+      if (place === "popper" && (e.key === " " || e.key === "Enter") && highlighted.length) {
+        if (!this.isDisabled(highlighted[0])) {
+          this.handlers.value(highlighted[0]);
         }
-        if (day) {
-          if (INTERACTION_TAGS.includes(e.target.tagName)) return;
-          var current_highlighted = !highlighted[0] && !value ? dayjs(highlighted[0] || displayedPeriod) : dayjs(displayedPeriod).add(day, _this.keyStep);
-          var current_day = getCurrentHighlightedDay(current_highlighted) || getCurrentHighlightedDay(dayjs(highlighted[0] || displayedPeriod));
-          if (current_day) {
-            var _this$unitRefs$format;
-            _this.handlers.highlighted([current_day]);
-            _this.handlers.displayedPeriod(current_day);
-            e.preventDefault();
-            var formatter = _this.keyStep === "month" ? formatMMYY : formatDDMMYY;
-            var formattedDate = formatter(current_day, _this.asProps.locale);
-            (_this$unitRefs$format = _this.unitRefs[formattedDate]) === null || _this$unitRefs$format === void 0 || _this$unitRefs$format.focus();
-          }
+        e.preventDefault();
+      }
+      if (day) {
+        if (INTERACTION_TAGS.includes(e.target.tagName)) return;
+        const current_highlighted = !highlighted[0] && !value ? dayjs(highlighted[0] || displayedPeriod) : dayjs(displayedPeriod).add(day, this.keyStep);
+        const current_day = getCurrentHighlightedDay(current_highlighted) || getCurrentHighlightedDay(dayjs(highlighted[0] || displayedPeriod));
+        if (current_day) {
+          this.handlers.highlighted([current_day]);
+          this.handlers.displayedPeriod(current_day);
+          e.preventDefault();
+          const formatter = this.keyStep === "month" ? formatMMYY : formatDDMMYY;
+          const formattedDate = formatter(current_day, this.asProps.locale);
+          (_a = this.unitRefs[formattedDate]) == null ? void 0 : _a.focus();
         }
-      };
+      }
     });
-    return _this;
   }
-  _inherits(PickerAbstract2, _Component);
-  return _createClass(PickerAbstract2, [{
-    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;
-          if (!visible) {
-            _this2.handlers.highlighted([]);
-          }
-          if (visible) {
-            if (value && value !== displayedPeriod) {
-              _this2.handlers.displayedPeriod(value);
-            } else if (!value) {
-              var _this2$props = _this2.props, _displayedPeriod = _this2$props.displayedPeriod, _defaultDisplayedPeriod = _this2$props.defaultDisplayedPeriod;
-              _this2.handlers.displayedPeriod(_displayedPeriod || _defaultDisplayedPeriod);
-            }
-          }
-        }],
-        highlighted: null,
-        value: [null, function(value) {
-          if (value) {
-            _this2.handlers.visible(false);
+  static defaultProps({
+    value,
+    defaultValue
+  }) {
+    return {
+      i18n: localizedMessages,
+      locale: "en",
+      defaultDisplayedPeriod: value || defaultValue || defaultDisplayedPeriod,
+      defaultValue: null,
+      defaultVisible: false,
+      defaultHighlighted: [],
+      disabled: [],
+      size: "m"
+    };
+  }
+  uncontrolledProps() {
+    return {
+      displayedPeriod: null,
+      visible: [null, (visible) => {
+        const {
+          value,
+          displayedPeriod
+        } = this.asProps;
+        if (!visible) {
+          this.handlers.highlighted([]);
+        }
+        if (visible) {
+          if (value && value !== displayedPeriod) {
+            this.handlers.displayedPeriod(value);
+          } else if (!value) {
+            const {
+              displayedPeriod: displayedPeriod2,
+              defaultDisplayedPeriod: defaultDisplayedPeriod2
+            } = this.props;
+            this.handlers.displayedPeriod(displayedPeriod2 || defaultDisplayedPeriod2);
           }
-          _this2.handlers.displayedPeriod(value !== null && value !== void 0 ? value : void 0);
-        }]
-      };
-    }
-  }, {
-    key: "isDisabled",
-    value: function isDisabled(date) {
-      var disabled = this.asProps.disabled;
-      return disabled.some(includesDate(dayjs(date), "date"));
-    }
-  }, {
-    key: "getButtonTriggerProps",
-    value: function getButtonTriggerProps() {
-      var _this$asProps2 = this.asProps, value = _this$asProps2.value, size = _this$asProps2.size, visible = _this$asProps2.visible;
-      return {
-        popoverVisible: visible,
-        size,
-        empty: !value,
-        onKeyDown: this.handlerKeyDown("trigger")
-      };
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      var Picker = this[CORE_INSTANCE];
-      return {
-        tabIndex: 0,
-        ref: this.popperRef,
-        onKeyDown: this.handlerKeyDown("popper"),
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Picker.Header, null), /* @__PURE__ */ React.createElement(Picker.Calendar, null))
-      };
-    }
-  }, {
-    key: "getHeaderProps",
-    value: function getHeaderProps() {
-      var Picker = this[CORE_INSTANCE];
-      return {
-        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 getTitleProps() {
-      return {};
-    }
-  }, {
-    key: "getNextProps",
-    value: function getNextProps() {
-      var getI18nText = this.asProps.getI18nText;
-      var navigateStep = this.navigateStep;
-      return {
-        "ref": this.nextButtonRef,
-        "onClick": this.bindHandlerNavigateClick(1),
-        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,
-        "aria-label": navigateStep === "month" ? getI18nText("prevMonth") : getI18nText("prevYear")
-      };
-    }
-  }, {
-    key: "getCalendarProps",
-    value: function getCalendarProps() {
-      var _this$asProps3 = this.asProps, locale = _this$asProps3.locale, displayedPeriod = _this$asProps3.displayedPeriod, disabled = _this$asProps3.disabled, value = _this$asProps3.value, highlighted = _this$asProps3.highlighted, onVisibleChange = _this$asProps3.onVisibleChange, onChange = _this$asProps3.onChange, getI18nText = _this$asProps3.getI18nText;
-      return {
-        locale,
-        displayedPeriod,
-        disabled,
-        onChange,
-        highlighted,
-        value: [value, value],
-        renderOutdated: true,
-        onVisibleChange,
-        unitRefs: this.unitRefs,
-        getI18nText,
-        actionsDescribing: null
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref2;
-      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, providedAriaLabel = _this$asProps4["aria-label"];
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(Dropdown, assignProps({
-        "use:aria-label": providedAriaLabel,
-        "__excludeProps": ["onChange", "value"]
-      }, _ref), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})))));
-    }
-  }], [{
-    key: "defaultProps",
-    value: function defaultProps(_ref3) {
-      var value = _ref3.value, defaultValue = _ref3.defaultValue;
-      return {
-        i18n: localizedMessages,
-        locale: "en",
-        defaultDisplayedPeriod: value || defaultValue || defaultDisplayedPeriod,
-        defaultValue: null,
-        defaultVisible: false,
-        defaultHighlighted: [],
-        disabled: [],
-        size: "m"
-      };
-    }
-  }]);
-})(Component);
+        }
+      }],
+      highlighted: null,
+      value: [null, (value) => {
+        if (value) {
+          this.handlers.visible(false);
+        }
+        this.handlers.displayedPeriod(value ?? void 0);
+      }]
+    };
+  }
+  isDisabled(date) {
+    const {
+      disabled
+    } = this.asProps;
+    return disabled.some(includesDate(dayjs(date), "date"));
+  }
+  getButtonTriggerProps() {
+    const {
+      value,
+      size,
+      visible
+    } = this.asProps;
+    return {
+      popoverVisible: visible,
+      size,
+      empty: !value,
+      onKeyDown: this.handlerKeyDown("trigger")
+    };
+  }
+  getPopperProps() {
+    const Picker = this[CORE_INSTANCE];
+    return {
+      tabIndex: 0,
+      ref: this.popperRef,
+      onKeyDown: this.handlerKeyDown("popper"),
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Picker.Header, null), /* @__PURE__ */ React.createElement(Picker.Calendar, null))
+    };
+  }
+  getHeaderProps() {
+    const Picker = this[CORE_INSTANCE];
+    return {
+      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))
+    };
+  }
+  getTitleProps() {
+    return {};
+  }
+  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() {
+    const {
+      locale,
+      displayedPeriod,
+      disabled,
+      value,
+      highlighted,
+      onVisibleChange,
+      onChange,
+      getI18nText
+    } = this.asProps;
+    return {
+      locale,
+      displayedPeriod,
+      disabled,
+      onChange,
+      highlighted,
+      value: [value, value],
+      renderOutdated: true,
+      onVisibleChange,
+      unitRefs: this.unitRefs,
+      getI18nText,
+      actionsDescribing: null
+    };
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const {
+      styles,
+      Children,
+      "aria-label": providedAriaLabel
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(Dropdown, assignProps({
+      "use:aria-label": providedAriaLabel,
+      "__excludeProps": ["onChange", "value"]
+    }, _ref), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})))));
+  }
+}
 _defineProperty(PickerAbstract, "displayName", "DatePicker");
 _defineProperty(PickerAbstract, "style", style);
 _defineProperty(PickerAbstract, "enhance", [i18nEnhance(localizedMessages)]);
-_defineProperty(PickerAbstract, "add", function(date, amount, unit) {
+_defineProperty(PickerAbstract, "add", (date, amount, unit) => {
   return dayjs(date).add(amount, unit).toDate();
 });
-_defineProperty(PickerAbstract, "subtract", function(date, amount, unit) {
+_defineProperty(PickerAbstract, "subtract", (date, amount, unit) => {
   return dayjs(date).subtract(amount, unit).toDate();
 });
 export {