one-design-next 0.0.4-alpha.57

package/dist/date-range-picker/index.js

@@ -0,0 +1,1034 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["allowClear", "minDate", "maxDate", "value", "onChange", "visible", "onVisibleChange", "disabled", "lang", "disabledDays", "placeholder", "onStartDaySelect", "onEndDaySelect", "shortcuts", "popupRender", "light", "triggerElement", "popupStyle", "captionLayout", "captionPrevIcon", "captionNextIcon", "components", "classNames", "format", "closeOnSelect", "onClick", "maxDays", "minDays", "prefix"],
+  _excluded2 = ["DayButton"],
+  _excluded3 = ["day", "modifiers", "onMouseEnter", "onMouseLeave", "onClick", "onMouseDown"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { DayPicker } from 'react-day-picker-for-od';
+import { enUS, zhCN } from 'react-day-picker-for-od/locale';
+import { DATE_RANGE_INPUT_PLACEHOLDER, MONTHS, convertDateRangeToString, convertDateToString, getDefaultMaxDate, getDefaultMinDate, isDayAfter, isDayBefore, isDayInRange, isLegalDateRangeString, isSameDay, isSameMonth, today } from "../_util/date";
+import "../date-picker/style";
+import HoverFill from "../hover-fill";
+import Icon from "../icon";
+import Popover from "../popover";
+var DateRangePicker = function DateRangePicker(_ref) {
+  var _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    _ref$minDate = _ref.minDate,
+    minDate = _ref$minDate === void 0 ? getDefaultMinDate() : _ref$minDate,
+    _ref$maxDate = _ref.maxDate,
+    maxDate = _ref$maxDate === void 0 ? getDefaultMaxDate() : _ref$maxDate,
+    _ref$value = _ref.value,
+    valueProp = _ref$value === void 0 ? undefined : _ref$value,
+    onChange = _ref.onChange,
+    _ref$visible = _ref.visible,
+    visibleProp = _ref$visible === void 0 ? null : _ref$visible,
+    onVisibleChange = _ref.onVisibleChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? 'zhCN' : _ref$lang,
+    disabledDays = _ref.disabledDays,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? DATE_RANGE_INPUT_PLACEHOLDER[lang] : _ref$placeholder,
+    onStartDaySelect = _ref.onStartDaySelect,
+    onEndDaySelect = _ref.onEndDaySelect,
+    shortcuts = _ref.shortcuts,
+    popupRender = _ref.popupRender,
+    light = _ref.light,
+    triggerElement = _ref.triggerElement,
+    popupStyle = _ref.popupStyle,
+    _ref$captionLayout = _ref.captionLayout,
+    captionLayout = _ref$captionLayout === void 0 ? 'dropdown' : _ref$captionLayout,
+    captionPrevIcon = _ref.captionPrevIcon,
+    captionNextIcon = _ref.captionNextIcon,
+    components = _ref.components,
+    classNames = _ref.classNames,
+    format = _ref.format,
+    _ref$closeOnSelect = _ref.closeOnSelect,
+    closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
+    _onClick = _ref.onClick,
+    maxDays = _ref.maxDays,
+    minDays = _ref.minDays,
+    prefix = _ref.prefix,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  /**
+   * DayButton 关系到 HoverFill 样式因此单独处理
+   */
+  var _ref2 = components || {},
+    _DayButton = _ref2.DayButton,
+    otherComponents = _objectWithoutProperties(_ref2, _excluded2);
+  /**
+   * selectedDay 为传给 DayPicker 的最终 Date Object，
+   * value 为 input 的输入 String。
+   */
+  var getInitialState = function getInitialState() {
+    var rangeValue = '';
+    var from = undefined;
+    var to = undefined;
+    if (valueProp !== null && valueProp !== undefined) {
+      var _valueProp = _slicedToArray(valueProp, 2);
+      from = _valueProp[0];
+      to = _valueProp[1];
+      if (isDayBefore(to, from)) {
+        var _ref3 = [to, from];
+        from = _ref3[0];
+        to = _ref3[1];
+      }
+      rangeValue = convertDateRangeToString(valueProp, lang);
+    }
+
+    // 如果 from 和 to 是同一个月，则 month 初始化为上一个月，否则初始化为 from
+    var month = from || today;
+    if (isSameMonth(from, to)) {
+      var _from$getFullYear, _from, _from$getMonth, _from2, _from$getDate, _from3;
+      month = new Date((_from$getFullYear = (_from = from) === null || _from === void 0 ? void 0 : _from.getFullYear()) !== null && _from$getFullYear !== void 0 ? _from$getFullYear : today.getFullYear(), ((_from$getMonth = (_from2 = from) === null || _from2 === void 0 ? void 0 : _from2.getMonth()) !== null && _from$getMonth !== void 0 ? _from$getMonth : today.getMonth()) - 1, (_from$getDate = (_from3 = from) === null || _from3 === void 0 ? void 0 : _from3.getDate()) !== null && _from$getDate !== void 0 ? _from$getDate : today.getDate());
+    }
+    return {
+      from: from,
+      month: month,
+      rangeValue: rangeValue,
+      to: to
+    };
+  };
+  var initialState = useMemo(getInitialState, []);
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    enteredTo = _useState2[0],
+    setEnteredTo = _useState2[1];
+  var _useState3 = useState(initialState.from),
+    _useState4 = _slicedToArray(_useState3, 2),
+    from = _useState4[0],
+    setFrom = _useState4[1];
+  var _useState5 = useState(initialState.to),
+    _useState6 = _slicedToArray(_useState5, 2),
+    to = _useState6[0],
+    setTo = _useState6[1];
+  var _useState7 = useState(initialState.month),
+    _useState8 = _slicedToArray(_useState7, 2),
+    month = _useState8[0],
+    setMonth = _useState8[1];
+  var _useState9 = useState(valueProp),
+    _useState10 = _slicedToArray(_useState9, 2),
+    prevValueProp = _useState10[0],
+    setPrevValueProp = _useState10[1];
+  var _useState11 = useState(initialState.rangeValue),
+    _useState12 = _slicedToArray(_useState11, 2),
+    rangeValue = _useState12[0],
+    setRangeValue = _useState12[1];
+  var nextClickInsideRef = useRef(false);
+  var containerRef = useRef(null);
+  var popupRef = useRef(null);
+  var prefixRef = useRef(null);
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    prefixWidth = _useState14[0],
+    setPrefixWidth = _useState14[1];
+  var navHoverFillRef = useRef(null);
+  var navHoverFillInnerRef = useRef(null);
+  var navHoverFillTimer = useRef(0);
+  var navHoverFillVisible = useRef(false);
+  var tdHoverFillRef = useRef(null);
+  var tdHoverFillInnerRef = useRef(null);
+  var tdHoverFillTimer = useRef(0);
+  var tdHoverFillVisible = useRef(false);
+  var shortcutsEnabled = shortcuts && shortcuts.length > 0;
+  var _useState15 = useState(function () {
+      if (visibleProp !== null && visibleProp !== undefined) {
+        return visibleProp;
+      }
+      return false;
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    visible = _useState16[0],
+    setVisible = _useState16[1];
+  var fromFinal;
+  var enteredToFinal = to || enteredTo;
+  var isReverse = from && enteredToFinal && isDayAfter(from, enteredToFinal);
+  if (isReverse) {
+    fromFinal = enteredToFinal;
+    enteredToFinal = from;
+  } else {
+    fromFinal = from;
+  }
+  var selectedDays = {
+    from: fromFinal,
+    to: enteredToFinal
+  };
+  useEffect(function () {
+    if (valueProp !== undefined && valueProp !== prevValueProp) {
+      var _ref4 = valueProp || [undefined, undefined],
+        _ref5 = _slicedToArray(_ref4, 2),
+        newFrom = _ref5[0],
+        newTo = _ref5[1];
+      if (isDayBefore(newTo, newFrom)) {
+        var _ref6 = [newTo, newFrom];
+        newFrom = _ref6[0];
+        newTo = _ref6[1];
+      }
+      setFrom(newFrom);
+      setTo(newTo);
+      var shouldReplaceInput = true;
+      if (isLegalDateRangeString(rangeValue, lang)) {
+        var rangeValueStrs = rangeValue.split(' - ');
+        var oldFrom = new Date(rangeValueStrs[0]);
+        var oldTo = new Date(rangeValueStrs[1]);
+        if (isSameDay(newFrom, oldFrom) && isSameDay(newTo, oldTo)) {
+          shouldReplaceInput = false;
+        }
+      }
+      if (shouldReplaceInput) {
+        setRangeValue(convertDateRangeToString([newFrom, newTo], lang));
+      }
+      setPrevValueProp(valueProp);
+      var newMonth = newFrom || today;
+      setMonth(newMonth);
+    }
+    if (visibleProp !== null && visible !== !!visibleProp) {
+      setVisible(!!visibleProp);
+    }
+  }, [valueProp]);
+  useEffect(function () {
+    if (visibleProp !== null && visible !== !!visibleProp) {
+      setVisible(!!visibleProp);
+    }
+  }, [visibleProp]);
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      var _containerRef$current, _popupRef$current;
+      var target = event.target;
+
+      // 如果弹窗没有显示，不需要处理
+      if (!visible) {
+        return;
+      }
+
+      // 检查点击是否在 containerRef 或 popupRef 内部
+      var isInsideContainer = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.contains(target);
+      var isInsidePopup = (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.contains(target);
+
+      // 如果点击在两者之外，则关闭弹窗
+      if (!isInsideContainer && !isInsidePopup) {
+        handleVisibleChange(false);
+      }
+    };
+
+    // 添加点击事件监听器
+    document.addEventListener('click', handleClickOutside);
+
+    // 清理函数
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [visible, onVisibleChange, visibleProp, from, to, month, rangeValue]);
+
+  // ResizeObserver 监听 prefix 宽度变化
+  useEffect(function () {
+    if (!prefix || !prefixRef.current) {
+      setPrefixWidth(0);
+      return;
+    }
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          var _entry$target$getBoun = entry.target.getBoundingClientRect(),
+            width = _entry$target$getBoun.width;
+          setPrefixWidth(width);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    resizeObserver.observe(prefixRef.current);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [prefix]);
+
+  // 计算日期范围限制
+  var getDayRangeLimits = function getDayRangeLimits(startDay) {
+    var minLimitForward;
+    var maxLimitForward;
+    var minLimitBackward;
+    var maxLimitBackward;
+    if (minDays) {
+      // 向前最少选择 minDays 天
+      minLimitForward = new Date(startDay.getTime() + (minDays - 1) * 24 * 60 * 60 * 1000);
+      // 向后最少选择 minDays 天
+      minLimitBackward = new Date(startDay.getTime() - (minDays - 1) * 24 * 60 * 60 * 1000);
+    }
+    if (maxDays) {
+      // 向前最多选择 maxDays 天
+      maxLimitForward = new Date(startDay.getTime() + (maxDays - 1) * 24 * 60 * 60 * 1000);
+      // 向后最多选择 maxDays 天
+      maxLimitBackward = new Date(startDay.getTime() - (maxDays - 1) * 24 * 60 * 60 * 1000);
+    }
+    return {
+      minLimitForward: minLimitForward,
+      maxLimitForward: maxLimitForward,
+      minLimitBackward: minLimitBackward,
+      maxLimitBackward: maxLimitBackward
+    };
+  };
+  var isDayDisabled = function isDayDisabled(day) {
+    return disabledDays && (Array.isArray(disabledDays) ? disabledDays.some(function (d) {
+      return isSameDay(d, day);
+    }) : disabledDays(day)) || isDayBefore(day, minDate) || isDayAfter(day, maxDate);
+  };
+  var handleInputChange = function handleInputChange(_ref7) {
+    var target = _ref7.target;
+    var val = target.value;
+    setRangeValue(val);
+    if (val.trim() === '') {
+      if (allowClear) {
+        if (valueProp == undefined) {
+          setEnteredTo(undefined);
+          setFrom(undefined);
+          setTo(undefined);
+        }
+        if (onChange) {
+          onChange(null, {
+            dateString: ''
+          });
+        }
+      }
+    } else if (isLegalDateRangeString(val, lang)) {
+      var rangeValueStrs = val.split(' - ');
+      var newFrom = new Date(rangeValueStrs[0]);
+      var newTo = new Date(rangeValueStrs[1]);
+      newFrom.setHours(0, 0, 0, 0);
+      newTo.setHours(0, 0, 0, 0);
+
+      // 计算日期范围天数
+      var daysDiff = Math.ceil((newTo.getTime() - newFrom.getTime()) / (24 * 60 * 60 * 1000)) + 1;
+
+      // 检查是否满足 maxDays 和 minDays 限制
+      var meetsMaxDays = !maxDays || daysDiff <= maxDays;
+      var meetsMinDays = !minDays || daysDiff >= minDays;
+      console.log('[yijie]', meetsMaxDays, meetsMinDays);
+      if (!isDayDisabled(newFrom) && !isDayDisabled(newTo) && !isDayBefore(newTo, newFrom) && meetsMaxDays && meetsMinDays && !(isSameDay(from, newFrom) && isSameDay(to, newTo))) {
+        if (valueProp === undefined) {
+          setFrom(newFrom);
+          setTo(newTo);
+        }
+        // 修改日期后的 month 跳转
+        if (!isSameDay(from, newFrom)) {
+          setMonth(newFrom);
+        } else if (!isSameDay(to, newTo)) {
+          setMonth(newTo);
+        }
+        if (onChange) {
+          onChange([newFrom, newTo], {
+            dateString: val
+          });
+        }
+      }
+    }
+  };
+  var handleCaptionHoverEnter = function handleCaptionHoverEnter(e) {
+    var _popupRef$current2, _popupRef$current3;
+    e.persist();
+    clearTimeout(navHoverFillTimer.current);
+    if (!navHoverFillInnerRef.current || !navHoverFillRef.current) {
+      return;
+    }
+    var offsetWidth = e.currentTarget.offsetWidth;
+    var popupTop = ((_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.getBoundingClientRect().top) || 0;
+    var popupLeft = ((_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.getBoundingClientRect().left) || 0;
+    var targetTop = e.currentTarget.getBoundingClientRect().top || 0;
+    var targetLeft = e.currentTarget.getBoundingClientRect().left || 0;
+    var finalLeft = targetLeft - popupLeft;
+    var finalTop = targetTop - popupTop;
+    setTimeout(function () {
+      if (!navHoverFillRef.current || !navHoverFillInnerRef.current) {
+        return;
+      }
+      navHoverFillRef.current.style.width = "".concat(offsetWidth, "px");
+      navHoverFillRef.current.style.left = "".concat(finalLeft, "px");
+      navHoverFillRef.current.style.top = "".concat(finalTop, "px");
+      navHoverFillInnerRef.current.style.background = 'var(--odn-dp-hover-fill-color)';
+    }, 0);
+    if (!navHoverFillVisible.current) {
+      navHoverFillVisible.current = true;
+      navHoverFillRef.current.style.transitionDuration = '0s';
+      var clientX = e.clientX,
+        clientY = e.clientY;
+      var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
+        x = _e$currentTarget$getB.x,
+        y = _e$currentTarget$getB.y;
+      navHoverFillInnerRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+    } else {
+      navHoverFillRef.current.style.transitionDuration = 'var(--odn-hoverfill-duration)';
+    }
+  };
+  var handleCaptionHoverLeave = function handleCaptionHoverLeave(e) {
+    e.persist();
+    clearTimeout(navHoverFillTimer.current);
+    if (!navHoverFillInnerRef.current || !navHoverFillRef.current) {
+      return;
+    }
+    var clientX = e.clientX,
+      clientY = e.clientY;
+    var _e$currentTarget$getB2 = e.currentTarget.getBoundingClientRect(),
+      x = _e$currentTarget$getB2.x,
+      y = _e$currentTarget$getB2.y;
+    navHoverFillTimer.current = window.setTimeout(function () {
+      navHoverFillVisible.current = false;
+      if (navHoverFillInnerRef.current) {
+        navHoverFillInnerRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+        navHoverFillInnerRef.current.style.background = 'transparent';
+      }
+    }, 100);
+  };
+  var resetNavHoverFill = function resetNavHoverFill() {
+    navHoverFillVisible.current = false;
+    if (navHoverFillRef.current && navHoverFillInnerRef.current) {
+      navHoverFillInnerRef.current.style.transformOrigin = '';
+      navHoverFillInnerRef.current.style.background = 'transparent';
+    }
+  };
+  var handleCaptionChange = function handleCaptionChange(date) {
+    var newDate = date;
+    if (minDate && isDayBefore(date, minDate)) {
+      newDate.setMonth(minDate.getMonth());
+    } else if (maxDate && isDayAfter(date, maxDate)) {
+      newDate.setMonth(maxDate.getMonth());
+    }
+    setMonth(newDate);
+  };
+  var handleYearChange = function handleYearChange(e) {
+    var newYear = parseInt(e.currentTarget.value, 10);
+    var baseDate = month || today;
+    var newDate = new Date(baseDate.getTime());
+    newDate.setFullYear(newYear);
+    handleCaptionChange(newDate);
+  };
+  var handleMonthChange = function handleMonthChange(e) {
+    var newMonth = parseInt(e.currentTarget.value, 10);
+    var baseDate = month || today;
+    var newDate = new Date(baseDate.getTime());
+    newDate.setMonth(newMonth);
+    handleCaptionChange(newDate);
+  };
+  var handleTdHoverEnter = function handleTdHoverEnter(e) {
+    var _popupRef$current4, _popupRef$current5;
+    e.persist();
+    clearTimeout(tdHoverFillTimer.current);
+    if (!tdHoverFillInnerRef.current || !tdHoverFillRef.current) {
+      return;
+    }
+    var target = e.currentTarget;
+    var targetTop = target.getBoundingClientRect().top || 0;
+    var targetLeft = target.getBoundingClientRect().left || 0;
+    var popupTop = ((_popupRef$current4 = popupRef.current) === null || _popupRef$current4 === void 0 ? void 0 : _popupRef$current4.getBoundingClientRect().top) || 0;
+    var popupLeft = ((_popupRef$current5 = popupRef.current) === null || _popupRef$current5 === void 0 ? void 0 : _popupRef$current5.getBoundingClientRect().left) || 0;
+    var finalLeft = targetLeft - popupLeft;
+    var finalTop = targetTop - popupTop;
+    setTimeout(function () {
+      if (!tdHoverFillRef.current || !tdHoverFillInnerRef.current) {
+        return;
+      }
+      tdHoverFillRef.current.style.left = "".concat(finalLeft, "px");
+      tdHoverFillRef.current.style.top = "".concat(finalTop, "px");
+      tdHoverFillInnerRef.current.style.background = 'var(--odn-dp-hover-fill-color)';
+    }, 0);
+    if (!tdHoverFillVisible.current) {
+      tdHoverFillVisible.current = true;
+      tdHoverFillRef.current.style.transitionDuration = '0s';
+      var clientX = e.clientX,
+        clientY = e.clientY;
+      var _target$getBoundingCl = target.getBoundingClientRect(),
+        x = _target$getBoundingCl.x,
+        y = _target$getBoundingCl.y;
+      tdHoverFillInnerRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+    } else {
+      tdHoverFillRef.current.style.transitionDuration = 'var(--odn-hoverfill-duration)';
+    }
+  };
+  var handleTdHoverLeave = function handleTdHoverLeave(e) {
+    e.persist();
+    clearTimeout(tdHoverFillTimer.current);
+    if (!tdHoverFillInnerRef.current || !tdHoverFillRef.current) {
+      return;
+    }
+    var target = e.currentTarget;
+    var clientX = e.clientX,
+      clientY = e.clientY;
+    var _target$getBoundingCl2 = target.getBoundingClientRect(),
+      x = _target$getBoundingCl2.x,
+      y = _target$getBoundingCl2.y;
+    tdHoverFillTimer.current = window.setTimeout(function () {
+      tdHoverFillVisible.current = false;
+      if (tdHoverFillInnerRef.current) {
+        tdHoverFillInnerRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+        tdHoverFillInnerRef.current.style.background = 'rgba(33, 34, 38, 0)';
+      }
+    }, 100);
+  };
+  var isSelectingFirstDay = function isSelectingFirstDay(fromArg, toArg) {
+    var isRangeSelected = fromArg && toArg;
+    return !fromArg || isRangeSelected;
+  };
+  var handleDayClick = function handleDayClick(day) {
+    day.setHours(0, 0, 0, 0);
+    if (isDayBefore(day, minDate) || isDayAfter(day, maxDate)) {
+      return;
+    }
+    if (isSelectingFirstDay(from, to)) {
+      // 选择开始日期
+      if (onStartDaySelect) {
+        onStartDaySelect(day);
+      }
+      setEnteredTo(undefined);
+      setFrom(day);
+      setTo(undefined);
+    } else {
+      // 选择结束日期
+      if (onEndDaySelect) {
+        onEndDaySelect(day);
+      }
+      var newRange;
+      var fromStr = convertDateToString(from);
+      var toStr = convertDateToString(day);
+      var newRangeValue = '';
+      if (isDayAfter(day, from)) {
+        newRange = [from, day];
+        newRangeValue = "".concat(fromStr, " - ").concat(toStr);
+      } else {
+        newRange = [day, from];
+        newRangeValue = "".concat(toStr, " - ").concat(fromStr);
+      }
+      if (valueProp === undefined) {
+        setEnteredTo(day);
+        setRangeValue(newRangeValue);
+        setTo(day);
+      }
+      if (onChange) {
+        onChange(newRange, {
+          dateString: newRangeValue
+        });
+      }
+      if (closeOnSelect) {
+        setTimeout(function () {
+          if (onVisibleChange) {
+            onVisibleChange(false);
+          }
+          if (visibleProp === null) {
+            setVisible(false);
+          }
+        }, 150);
+      }
+    }
+  };
+  var handleInputIconClick = function handleInputIconClick(e) {
+    if (disabled) {
+      return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    if (allowClear) {
+      setEnteredTo(undefined);
+      setFrom(undefined);
+      setTo(undefined);
+      setRangeValue('');
+      if (onChange) {
+        onChange(null, {
+          dateString: ''
+        });
+      }
+      if (onVisibleChange) {
+        onVisibleChange(false);
+      }
+      if (visibleProp === null) {
+        setVisible(false);
+      }
+    }
+  };
+  var modifiers = {
+    // 选择完后的开始日期
+    rangeStart: isReverse ? to && fromFinal : fromFinal,
+    // 选择了结束日期，将要选择的开始日期
+    rangeStartHover: isReverse && !to && fromFinal,
+    // 选择完后的结束日期
+    rangeEnd: isReverse ? enteredToFinal : to && enteredToFinal,
+    // 选择了开始日期，将要选择的结束日期
+    rangeEndHover: !isReverse && !to && enteredToFinal,
+    // 在范围的日期
+    selectedRange: function selectedRange(day) {
+      return isDayInRange(day, [fromFinal, enteredToFinal], true);
+    },
+    // 选择了开始日期，还没有选择结束日期时的开始日期
+    rangeStartSelecting: function rangeStartSelecting(day) {
+      return isSameDay(day, fromFinal) && enteredToFinal && !to;
+    },
+    // 选择了结束日期，还没有选择开始日期时的结束日期
+    rangeEndWithSelecting: function rangeEndWithSelecting(day) {
+      return isSameDay(day, enteredToFinal) && fromFinal && !to;
+    },
+    // 还没有选择完的在范围的日期
+    selectedRangeSelecting: function selectedRangeSelecting(day) {
+      return isDayInRange(day, [fromFinal, enteredToFinal], false) && !to;
+    }
+  };
+  var handleDayMouseEnter = function handleDayMouseEnter(day) {
+    if (!isSelectingFirstDay(from, to)) {
+      setEnteredTo(day);
+    }
+  };
+  var handleDayMouseLeave = function handleDayMouseLeave() {
+    setEnteredTo(undefined);
+  };
+  var handleVisibleChange = function handleVisibleChange(bool) {
+    if (disabled) {
+      return;
+    }
+    if (bool) {
+      setMonth(from || today);
+    }
+    setTimeout(function () {
+      if (nextClickInsideRef.current === true) {
+        nextClickInsideRef.current = false;
+        // 展开时，如果在内部元素点击，则不做默认的收起操作
+        if (!bool) {
+          return;
+        }
+      }
+      var newVal = convertDateRangeToString([from, to], lang);
+      if (!bool) {
+        if (rangeValue && isLegalDateRangeString(rangeValue, lang)) {
+          // 如果 rangeValue 是合法的，检查是否符合 maxDays 和 minDays 限制
+          var rangeValueStrs = rangeValue.split(' - ');
+          var inputFrom = new Date(rangeValueStrs[0]);
+          var inputTo = new Date(rangeValueStrs[1]);
+          inputFrom.setHours(0, 0, 0, 0);
+          inputTo.setHours(0, 0, 0, 0);
+
+          // 计算日期范围天数
+          var daysDiff = Math.ceil((inputTo.getTime() - inputFrom.getTime()) / (24 * 60 * 60 * 1000)) + 1;
+
+          // 检查是否满足 maxDays 和 minDays 限制
+          var meetsMaxDays = !maxDays || daysDiff <= maxDays;
+          var meetsMinDays = !minDays || daysDiff >= minDays;
+          if (meetsMaxDays && meetsMinDays) {
+            // 如果符合限制，重置到该值
+            var rangeReset = rangeValue.split(' - ');
+            setTimeout(function () {
+              setFrom(new Date(rangeReset[0]));
+              setTo(new Date(rangeReset[1]));
+            }, 250);
+          } else {
+            // 如果不符合限制，重置到上一个合法状态
+            setRangeValue(newVal);
+          }
+        } else if (rangeValue && rangeValue.trim() !== '' && !isLegalDateRangeString(rangeValue, lang)) {
+          // 如果 rangeValue 不合法且不为空，重置到上一个合法状态
+          setRangeValue(newVal);
+        } else if (rangeValue !== newVal) {
+          setRangeValue(newVal);
+        }
+      }
+      if (onVisibleChange) {
+        onVisibleChange(bool);
+      }
+      if (visibleProp === null) {
+        setVisible(bool);
+      }
+    }, 0);
+  };
+  var popup = /*#__PURE__*/React.createElement(DayPicker, {
+    "data-odn-date-picker": true,
+    "data-odn-date-picker-locale": lang,
+    numberOfMonths: 2,
+    captionLayout: captionLayout,
+    locale: lang === 'zhCN' ? zhCN : enUS,
+    weekStartsOn: lang === 'zhCN' ? 1 : 0,
+    month: month,
+    onMonthChange: handleCaptionChange,
+    startMonth: minDate,
+    disabled: [{
+      before: minDate,
+      after: maxDate
+    }].concat(_toConsumableArray(Array.isArray(disabledDays) ? disabledDays : disabledDays ? [disabledDays] : []), _toConsumableArray(from && !to && (maxDays || minDays) ? [function (day) {
+      var _getDayRangeLimits = getDayRangeLimits(from),
+        minLimitForward = _getDayRangeLimits.minLimitForward,
+        maxLimitForward = _getDayRangeLimits.maxLimitForward,
+        minLimitBackward = _getDayRangeLimits.minLimitBackward,
+        maxLimitBackward = _getDayRangeLimits.maxLimitBackward;
+
+      // 如果选择的是向后的日期（day >= startDay）
+      if (!isDayBefore(day, from)) {
+        // 不能超过 maxDays 限制
+        if (maxLimitForward && isDayAfter(day, maxLimitForward)) {
+          return true;
+        }
+        // 不能少于 minDays 限制
+        if (minLimitForward && isDayBefore(day, minLimitForward)) {
+          return true;
+        }
+      }
+      // 如果选择的是向前的日期（day < startDay）
+      else {
+        // 不能超过 maxDays 限制
+        if (maxLimitBackward && isDayBefore(day, maxLimitBackward)) {
+          return true;
+        }
+        // 不能少于 minDays 限制
+        if (minLimitBackward && isDayAfter(day, minLimitBackward)) {
+          return true;
+        }
+      }
+      return false;
+    }] : [])),
+    endMonth: maxDate,
+    selected: selectedDays,
+    onDayClick: handleDayClick,
+    onDayMouseEnter: handleDayMouseEnter,
+    onDayMouseLeave: handleDayMouseLeave
+    // @ts-ignore
+    ,
+    modifiers: modifiers,
+    classNames: _objectSpread(_objectSpread({}, classNames), {}, {
+      day: "rdp-day ".concat((classNames === null || classNames === void 0 ? void 0 : classNames.day) || '')
+    }),
+    components: _objectSpread({
+      YearsDropdown: function YearsDropdown(_ref8) {
+        var value = _ref8.value,
+          _ref8$options = _ref8.options,
+          options = _ref8$options === void 0 ? [] : _ref8$options;
+        var optionsFiltered = options.filter(function (o) {
+          return !o.disabled;
+        }).map(function (o) {
+          return _objectSpread(_objectSpread({}, o), {}, {
+            label: o.value
+          });
+        });
+        return /*#__PURE__*/React.createElement("div", {
+          "data-hover-fill-target": "year",
+          "data-odn-date-picker-caption-select": true,
+          "data-odn-date-picker-caption-select-year": true,
+          onMouseEnter: handleCaptionHoverEnter,
+          onMouseLeave: handleCaptionHoverLeave
+        }, /*#__PURE__*/React.createElement("select", {
+          "data-odn-date-picker-caption-select-input": true,
+          name: "year",
+          onChange: handleYearChange,
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            resetNavHoverFill();
+          },
+          "data-value": value,
+          value: value
+        }, optionsFiltered.map(function (o) {
+          return /*#__PURE__*/React.createElement("option", {
+            key: o.value,
+            value: o.value
+          }, o.label, lang === 'zhCN' ? '年' : '');
+        })), /*#__PURE__*/React.createElement("svg", {
+          "data-odn-date-picker-caption-icon": true,
+          width: "18",
+          height: "18",
+          viewBox: "0 0 18 18"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M12.3501 7.81235C12.6121 7.48497 12.379 7 11.9597 7H6.04034C5.62109 7 5.388 7.48497 5.6499 7.81235L8.60959 11.512C8.80975 11.7622 9.1903 11.7622 9.39046 11.512L12.3501 7.81235Z",
+          fillRule: "evenodd"
+        })));
+      },
+      MonthsDropdown: function MonthsDropdown(_ref9) {
+        var value = _ref9.value,
+          _ref9$options = _ref9.options,
+          options = _ref9$options === void 0 ? [] : _ref9$options;
+        var optionsFiltered = options.filter(function (o) {
+          return !o.disabled;
+        }).map(function (o) {
+          return _objectSpread(_objectSpread({}, o), {}, {
+            label: lang === 'zhCN' ? MONTHS[o.value].zhCN : MONTHS[o.value].enUS
+          });
+        });
+        return /*#__PURE__*/React.createElement("div", {
+          "data-hover-fill-target": "month",
+          "data-odn-date-picker-caption-select": true,
+          "data-odn-date-picker-caption-select-month": true,
+          onMouseEnter: handleCaptionHoverEnter,
+          onMouseLeave: handleCaptionHoverLeave
+        }, /*#__PURE__*/React.createElement("select", {
+          "data-odn-date-picker-caption-select-input": true,
+          name: "month",
+          onChange: handleMonthChange,
+          value: value,
+          "data-value": value,
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            resetNavHoverFill();
+          }
+        }, optionsFiltered.map(function (o) {
+          return /*#__PURE__*/React.createElement("option", {
+            key: o.value,
+            value: o.value
+          }, o.label);
+        })), /*#__PURE__*/React.createElement("svg", {
+          "data-odn-date-picker-caption-icon": true,
+          width: "18",
+          height: "18",
+          viewBox: "0 0 18 18"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M12.3501 7.81235C12.6121 7.48497 12.379 7 11.9597 7H6.04034C5.62109 7 5.388 7.48497 5.6499 7.81235L8.60959 11.512C8.80975 11.7622 9.1903 11.7622 9.39046 11.512L12.3501 7.81235Z",
+          fillRule: "evenodd"
+        })));
+      },
+      Nav: function Nav(_ref10) {
+        var onPreviousClick = _ref10.onPreviousClick,
+          onNextClick = _ref10.onNextClick,
+          previousMonth = _ref10.previousMonth,
+          nextMonth = _ref10.nextMonth;
+        return /*#__PURE__*/React.createElement("div", {
+          "data-odn-date-picker-caption-nav": true
+        }, /*#__PURE__*/React.createElement("button", {
+          "data-odn-date-picker-caption-nav-button": true,
+          "data-odn-date-picker-caption-nav-button-prev": true,
+          "data-odn-date-picker-caption-nav-button-disabled": !previousMonth,
+          "data-hover-fill-target": "prev",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            onPreviousClick === null || onPreviousClick === void 0 || onPreviousClick(e);
+            resetNavHoverFill();
+          },
+          disabled: !previousMonth,
+          onMouseEnter: handleCaptionHoverEnter,
+          onMouseLeave: handleCaptionHoverLeave
+        }, captionPrevIcon || /*#__PURE__*/React.createElement(Icon, {
+          name: "left",
+          "data-odn-date-picker-caption-nav-icon": true
+        })), /*#__PURE__*/React.createElement("button", {
+          "data-odn-date-picker-caption-nav-button": true,
+          "data-odn-date-picker-caption-nav-button-next": true,
+          "data-odn-date-picker-caption-nav-button-disabled": !nextMonth,
+          "data-hover-fill-target": "next",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            onNextClick === null || onNextClick === void 0 || onNextClick(e);
+            resetNavHoverFill();
+          },
+          disabled: !nextMonth,
+          onMouseEnter: handleCaptionHoverEnter,
+          onMouseLeave: handleCaptionHoverLeave
+        }, captionNextIcon || /*#__PURE__*/React.createElement(Icon, {
+          name: "right",
+          "data-odn-date-picker-caption-nav-icon": true
+        })));
+      },
+      DayButton: function DayButton(_ref11) {
+        var day = _ref11.day,
+          modifiers = _ref11.modifiers,
+          _onMouseEnter = _ref11.onMouseEnter,
+          _onMouseLeave = _ref11.onMouseLeave,
+          onClick = _ref11.onClick,
+          _onMouseDown = _ref11.onMouseDown,
+          props = _objectWithoutProperties(_ref11, _excluded3);
+        var focus = modifiers.focus,
+          today = modifiers.today,
+          disabled = modifiers.disabled,
+          outside = modifiers.outside,
+          selected = modifiers.selected,
+          rangeStart = modifiers.rangeStart,
+          rangeStartHover = modifiers.rangeStartHover,
+          rangeEnd = modifiers.rangeEnd,
+          rangeEndHover = modifiers.rangeEndHover,
+          selectedRange = modifiers.selectedRange;
+        if (_DayButton) {
+          return _DayButton(_objectSpread({
+            day: day,
+            modifiers: modifiers,
+            onMouseEnter: function onMouseEnter(e) {
+              _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
+              handleTdHoverEnter(e);
+            },
+            onMouseLeave: function onMouseLeave(e) {
+              _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
+              handleTdHoverLeave(e);
+            },
+            // RDP v9 仍然没有解决重复 render 的问题，每一个 day 即使 modifiers 完全相同也还是会重复 Render
+            // 这里尝试过加 memo，甚至直接 return false 也是会重新 render 的
+            // 这意味着如果 numberOfMonths 设置为 2 或以上性能将会受到挑战，当然我们应该不会有这样的需求
+            // 所造成的问题是 onClick 可能不会触发，而 mouseDown 和 mouseUp 是会触发的，推测的原因是因为在 down 和 up 之间重新 render 了，整个 dom 都被重新渲染了
+            // 因此这里使用 mouseDown 事件取代 onClick 事件
+            onMouseDown: function onMouseDown(e) {
+              _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
+              onClick === null || onClick === void 0 || onClick(e);
+            }
+          }, props));
+        }
+        return /*#__PURE__*/React.createElement("button", _extends({
+          "data-odn-date-picker-day": true,
+          "data-odn-date-picker-day-disabled": disabled,
+          "data-odn-date-picker-day-today": today,
+          "data-odn-date-picker-day-selected": selected,
+          "data-odn-date-picker-day-focus": focus,
+          "data-odn-date-picker-day-outside": outside,
+          "data-odn-date-picker-day-range-start": rangeStart,
+          "data-odn-date-picker-day-range-start-hover": rangeStartHover,
+          "data-odn-date-picker-day-range-end": rangeEnd,
+          "data-odn-date-picker-day-range-end-hover": rangeEndHover,
+          "data-odn-date-picker-day-selected-range": selectedRange,
+          onMouseEnter: function onMouseEnter(e) {
+            _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
+            handleTdHoverEnter(e);
+          },
+          onMouseLeave: function onMouseLeave(e) {
+            _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
+            handleTdHoverLeave(e);
+          },
+          onMouseDown: function onMouseDown(e) {
+            _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
+            onClick === null || onClick === void 0 || onClick(e);
+          }
+        }, props), day.date.getDate());
+      }
+    }, otherComponents)
+  });
+  var inputEl = /*#__PURE__*/React.createElement("input", {
+    readOnly: !!format,
+    type: "text",
+    "data-odn-date-picker-input": true,
+    "data-odn-date-picker-input-format": !!format,
+    "data-odn-date-picker-input-disabled": disabled,
+    disabled: disabled,
+    value: format && selectedDays !== null && selectedDays !== void 0 && selectedDays.from && selectedDays !== null && selectedDays !== void 0 && selectedDays.to ? format([selectedDays.from, selectedDays.to], {
+      dateString: rangeValue
+    }) || '' : rangeValue,
+    onChange: handleInputChange,
+    onClick: function onClick() {
+      nextClickInsideRef.current = true;
+    },
+    placeholder: placeholder,
+    style: {
+      paddingLeft: prefixWidth > 0 ? "".concat(prefixWidth, "px") : undefined
+    }
+  });
+  var popupEl = useMemo(function () {
+    return popupRender ? popupRender(popup) : popup;
+  }, [popupRender, popup]);
+  return /*#__PURE__*/React.createElement(Popover, {
+    arrowed: false,
+    visible: visible,
+    placement: "bottomLeft",
+    trigger: "click",
+    popupStyle: _objectSpread({
+      padding: 0,
+      maxWidth: 'initial'
+    }, popupStyle),
+    popup: /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-popup": true,
+      ref: popupRef
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-caption-nav-hover-fill": true,
+      ref: navHoverFillRef
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-caption-nav-hover-fill-inner": true,
+      ref: navHoverFillInnerRef
+    })), /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-td-hover-fill": true,
+      ref: tdHoverFillRef
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-td-hover-fill-inner": true,
+      ref: tdHoverFillInnerRef
+    })), shortcutsEnabled && /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-shortcuts": true
+    }, shortcuts.map(function (_ref12, index) {
+      var value = _ref12.value,
+        label = _ref12.label;
+      return /*#__PURE__*/React.createElement(HoverFill, {
+        key: index
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-odn-date-picker-shortcut": true,
+        "data-odn-date-picker-shortcut-active": isSameDay(value[0], fromFinal) && isSameDay(value[1], enteredToFinal),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          if (Array.isArray(value)) {
+            var fromShortcut = value[0];
+            var toShortcut = value[1];
+            setFrom(fromShortcut);
+            setMonth(fromShortcut);
+            setTo(toShortcut);
+            setRangeValue(convertDateRangeToString(value, lang));
+            if (onChange) {
+              onChange(value, {
+                dateString: convertDateRangeToString(value, lang)
+              });
+            }
+            if (closeOnSelect) {
+              setTimeout(function () {
+                if (onVisibleChange) {
+                  onVisibleChange(false);
+                }
+                if (visibleProp === null) {
+                  setVisible(false);
+                }
+              }, 150);
+            }
+          }
+        }
+      }, label));
+    })), /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-popup-content": true
+    }, popupEl))
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement ? /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    onClick: function onClick() {
+      handleVisibleChange(!visible);
+    }
+  }, triggerElement) : /*#__PURE__*/React.createElement("div", _extends({
+    "data-odn-date-picker-container": true,
+    "data-odn-date-picker-container-range": true,
+    "data-odn-date-picker-container-selected": !!selectedDays.from || !!selectedDays.to,
+    "data-odn-date-picker-container-light": light,
+    "data-odn-date-picker-container-disabled": disabled,
+    "data-odn-date-picker-container-allow-clear": allowClear,
+    onClick: function onClick(e) {
+      _onClick === null || _onClick === void 0 || _onClick(e);
+      handleVisibleChange(!visible);
+    },
+    ref: containerRef
+  }, otherProps), !!prefix && /*#__PURE__*/React.createElement("div", {
+    ref: prefixRef,
+    "data-odn-date-picker-prefix": true
+  }, prefix), light ? /*#__PURE__*/React.createElement(HoverFill, {
+    bgStyle: {
+      borderRadius: '4px'
+    }
+  }, inputEl) : inputEl, /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-icon-container": true,
+    onClick: handleInputIconClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "calendar",
+    "data-odn-date-picker-icon": true,
+    "data-odn-date-picker-icon-calendar": true
+  }), allowClear && /*#__PURE__*/React.createElement(Icon, {
+    name: "cancel-circle-filled",
+    "data-odn-date-picker-icon": true,
+    "data-odn-date-picker-icon-clear": true
+  })))));
+};
+export default DateRangePicker;