one-design-next 0.0.4-alpha.57

package/dist/date-picker/index.js

@@ -0,0 +1,1138 @@
+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", "icon", "clearIcon", "picker", "minDate", "maxDate", "value", "onChange", "visible", "onVisibleChange", "disabled", "lang", "disabledDays", "disabledMonths", "disabledQuarters", "disabledYears", "placeholder", "popupRender", "shortcuts", "light", "format", "triggerElement", "closeOnSelect", "onClick", "prefix"],
+  _excluded2 = ["day", "modifiers", "onMouseEnter", "onMouseLeave"];
+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, useRef, useState } from 'react';
+import { DayPicker } from 'react-day-picker-for-od';
+import { enUS, zhCN } from 'react-day-picker-for-od/locale';
+import { DATE_INPUT_PLACEHOLDER, MONTHS, convertDateToString, convertMonthToString, convertQuarterToString, convertWeekToString, convertYearToString, getDefaultMaxDate, getDefaultMinDate, getEndOfQuarter, getEndOfWeek, getStartOfQuarter, getStartOfWeek, isDayAfter, isDayBefore, isDayInRange, isLegalDateString, isLegalMonthString, isLegalQuarterString, isLegalWeekString, isLegalYearString, isSameDay, isSameMonth, parseMonthStringToRange, parseQuarterStringToRange, parseWeekStringToRange, parseYearStringToRange, today } from "../_util/date";
+import HoverFill from "../hover-fill";
+import Icon from "../icon";
+import Popover from "../popover";
+import MonthPicker from "./MonthPicker";
+import QuarterPicker from "./QuarterPicker";
+import YearPicker from "./YearPicker";
+import "./style";
+var DEFAULT_HOVER_COLOR = 'rgba(33, 34, 38, 0.05)';
+var DatePicker = function DatePicker(props) {
+  var _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
+    icon = props.icon,
+    clearIcon = props.clearIcon,
+    _props$picker = props.picker,
+    picker = _props$picker === void 0 ? 'day' : _props$picker,
+    _props$minDate = props.minDate,
+    minDateProp = _props$minDate === void 0 ? getDefaultMinDate() : _props$minDate,
+    _props$maxDate = props.maxDate,
+    maxDateProp = _props$maxDate === void 0 ? getDefaultMaxDate() : _props$maxDate,
+    _props$value = props.value,
+    valueProp = _props$value === void 0 ? undefined : _props$value,
+    onChange = props.onChange,
+    _props$visible = props.visible,
+    visibleProp = _props$visible === void 0 ? null : _props$visible,
+    onVisibleChange = props.onVisibleChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$lang = props.lang,
+    lang = _props$lang === void 0 ? 'zhCN' : _props$lang,
+    disabledDays = props.disabledDays,
+    disabledMonths = props.disabledMonths,
+    disabledQuarters = props.disabledQuarters,
+    disabledYears = props.disabledYears,
+    placeholderProp = props.placeholder,
+    popupRender = props.popupRender,
+    shortcuts = props.shortcuts,
+    light = props.light,
+    format = props.format,
+    triggerElement = props.triggerElement,
+    _props$closeOnSelect = props.closeOnSelect,
+    closeOnSelect = _props$closeOnSelect === void 0 ? true : _props$closeOnSelect,
+    _onClick = props.onClick,
+    prefix = props.prefix,
+    rest = _objectWithoutProperties(props, _excluded);
+  // 在 picker 为 week 时，需要将 minDate 设置为这周的开始日期（中文周从周一开始，英文周从周日开始）
+  // 在 picker 为 quarter 时，需要将 minDate 设置为这个季度的开始日期
+  // 在 picker 为 month 时，需要将 minDate 设置为这个月份的开始日期
+  // 在 picker 为 year 时，需要将 minDate 设置为这个年份的开始日期
+  var minDate = function () {
+    if (picker === 'week') {
+      var thisWeekStart = getStartOfWeek(minDateProp, lang);
+      return thisWeekStart;
+    }
+    if (picker === 'quarter') {
+      var thisQuarterStart = getStartOfQuarter(minDateProp);
+      return thisQuarterStart;
+    }
+    if (picker === 'month') {
+      var thisMonthStart = new Date(minDateProp.getFullYear(), minDateProp.getMonth(), 1);
+      return thisMonthStart;
+    }
+    if (picker === 'year') {
+      var thisYearStart = new Date(minDateProp.getFullYear(), 0, 1);
+      return thisYearStart;
+    }
+    return minDateProp;
+  }();
+
+  // 在 picker 为 week 时，需要将 maxDate 设置为上一周的结束日期（中文周从周日结束，英文周从周六结束），除非 maxDate 正好是这周的结束日期
+  // 在 picker 为 quarter 时，需要将 maxDate 设置为上一个季度的结束日期，除非 maxDate 正好是这个季度的结束日期
+  // 在 picker 为 month 时，需要将 maxDate 设置为上一个月份的结束日期，除非 maxDate 正好是这个月份的结束日期
+  // 在 picker 为 year 时，需要将 maxDate 设置为今年，这和以上的都不同，因为年份选择器支持选择当前年份
+  var maxDate = function () {
+    if (picker === 'week') {
+      var thisWeekEnd = getEndOfWeek(maxDateProp, lang);
+      if (isSameDay(maxDateProp, thisWeekEnd)) {
+        return thisWeekEnd;
+      }
+      var prevWeekEnd = new Date(thisWeekEnd);
+      prevWeekEnd.setDate(thisWeekEnd.getDate() - 7);
+      return prevWeekEnd;
+    }
+    if (picker === 'quarter') {
+      var thisQuarterEnd = getEndOfQuarter(maxDateProp);
+      if (isSameDay(maxDateProp, thisQuarterEnd)) {
+        return thisQuarterEnd;
+      }
+      var prevQuarterEnd = new Date(thisQuarterEnd);
+      prevQuarterEnd.setMonth(thisQuarterEnd.getMonth() - 3);
+      return prevQuarterEnd;
+    }
+    if (picker === 'month') {
+      var thisMonthEnd = new Date(maxDateProp.getFullYear(), maxDateProp.getMonth() + 1, 0);
+      if (isSameDay(maxDateProp, thisMonthEnd)) {
+        return thisMonthEnd;
+      }
+      var prevMonthEnd = new Date(maxDateProp.getFullYear(), maxDateProp.getMonth(), 0);
+      return prevMonthEnd;
+    }
+    if (picker === 'year') {
+      // 年份选择器支持选择当前年份，所以直接使用 maxDateProp
+      return maxDateProp;
+    }
+    return maxDateProp;
+  }();
+  var placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : DATE_INPUT_PLACEHOLDER[lang][picker];
+  var nextClickInsideRef = useRef(false);
+  var containerRef = useRef(null);
+  var popupRef = useRef(null);
+  var prefixRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    prefixWidth = _useState2[0],
+    setPrefixWidth = _useState2[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 _useState3 = useState(function () {
+      if (visibleProp !== null && visibleProp !== undefined) {
+        return visibleProp;
+      }
+      return false;
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var _useState5 = useState(function () {
+      if (valueProp !== undefined) {
+        return picker === 'day' ? valueProp || today : (valueProp === null || valueProp === void 0 ? void 0 : valueProp[0]) || today;
+      }
+      return today;
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    month = _useState6[0],
+    setMonth = _useState6[1];
+  var _useState7 = useState(function () {
+      if (picker === 'day' && valueProp !== undefined) {
+        var _ref;
+        return (_ref = valueProp) !== null && _ref !== void 0 ? _ref : null;
+      }
+      return null;
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedDay = _useState8[0],
+    setSelectedDay = _useState8[1];
+  var _useState9 = useState(function () {
+      if (picker !== 'day' && valueProp !== undefined) {
+        var _ref2;
+        return (_ref2 = valueProp) !== null && _ref2 !== void 0 ? _ref2 : null;
+      }
+      return null;
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedRange = _useState10[0],
+    setSelectedRange = _useState10[1];
+  var _useState11 = useState(function () {
+      if (valueProp !== null && valueProp !== undefined) {
+        if (picker === 'day') {
+          return convertDateToString(valueProp, lang);
+        } else if (picker === 'week') {
+          return convertWeekToString(valueProp, lang);
+        } else if (picker === 'quarter') {
+          return convertQuarterToString(valueProp, lang);
+        } else if (picker === 'month') {
+          return convertMonthToString(valueProp, lang);
+        } else if (picker === 'year') {
+          return convertYearToString(valueProp, lang);
+        }
+        return '';
+      }
+      return '';
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    value = _useState12[0],
+    setValue = _useState12[1];
+  useEffect(function () {
+    if (picker === 'day') {
+      if (valueProp !== undefined && selectedDay !== valueProp) {
+        var _ref3, _ref4;
+        setMonth((_ref3 = valueProp) !== null && _ref3 !== void 0 ? _ref3 : null);
+        setSelectedDay((_ref4 = valueProp) !== null && _ref4 !== void 0 ? _ref4 : null);
+        if (!isLegalDateString(value, lang) || !isSameDay(valueProp, new Date(value))) {
+          setValue(convertDateToString(valueProp, lang));
+        }
+      }
+    } else {
+      if (valueProp !== undefined && selectedRange !== valueProp) {
+        var _ref5;
+        var range = (_ref5 = valueProp) !== null && _ref5 !== void 0 ? _ref5 : null;
+        var from = range === null || range === void 0 ? void 0 : range[0];
+        setMonth(from);
+        setSelectedRange(range);
+        var newStr = '';
+        if (picker === 'week') {
+          newStr = convertWeekToString(range, lang);
+        } else if (picker === 'quarter') {
+          newStr = convertQuarterToString(range, lang);
+        } else if (picker === 'month') {
+          newStr = convertMonthToString(range, lang);
+        } else if (picker === 'year') {
+          newStr = convertYearToString(range, lang);
+        }
+        if (value !== newStr) {
+          setValue(newStr);
+        }
+      }
+    }
+  }, [valueProp, lang, picker, visible]);
+  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, value, selectedDay, selectedRange]);
+
+  // 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 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(e) {
+    var val = e.target.value;
+    setValue(val);
+    if (picker === 'day') {
+      if (val.trim() === '') {
+        if (allowClear) {
+          if (valueProp === undefined) {
+            setSelectedDay(null);
+          }
+          onChange === null || onChange === void 0 || onChange(null, {
+            dateString: ''
+          });
+        }
+      } else if (isLegalDateString(val, lang)) {
+        var newDate = new Date(val);
+        newDate.setHours(0, 0, 0, 0);
+        if (!isDayDisabled(newDate) && !isSameDay(newDate, selectedDay)) {
+          if (valueProp === undefined) {
+            setSelectedDay(newDate);
+            setValue(convertDateToString(newDate, lang));
+            if (!isSameMonth(newDate, selectedDay)) {
+              setMonth(newDate);
+            }
+          }
+          onChange === null || onChange === void 0 || onChange(newDate, {
+            dateString: convertDateToString(newDate, lang)
+          });
+        }
+      }
+    } else {
+      // 非 day picker 的共用清空逻辑
+      if (val.trim() === '') {
+        if (allowClear) {
+          if (valueProp === undefined) {
+            setSelectedRange(null);
+          }
+          onChange === null || onChange === void 0 || onChange(null, {
+            dateString: ''
+          });
+        }
+      } else if (picker === 'week' && isLegalWeekString(val, lang)) {
+        // 2025-33周
+        // 在检查了周字符串后，接着检查这一周是否在范围内，拿到这一周的第一天在 minDate 之后，最后一天在 maxDate 之前
+        var weekRange = parseWeekStringToRange(val, lang);
+        if (weekRange) {
+          var _weekRange = _slicedToArray(weekRange, 2),
+            weekStart = _weekRange[0],
+            weekEnd = _weekRange[1];
+
+          // 检查周范围是否在允许的日期范围内
+          var isWeekInRange = (!minDate || !isDayBefore(weekStart, minDate)) && (!maxDate || !isDayAfter(weekEnd, maxDate));
+          if (isWeekInRange && (!selectedRange || !isSameDay(weekStart, selectedRange[0]) || !isSameDay(weekEnd, selectedRange[1]))) {
+            if (valueProp === undefined) {
+              setSelectedRange(weekRange);
+              setValue(convertWeekToString(weekRange, lang));
+              // 如果周的开始日期不在当前显示的月份中，则切换到该月份
+              if (!isSameMonth(weekStart, selectedDay)) {
+                setMonth(weekStart);
+              }
+            }
+            onChange === null || onChange === void 0 || onChange(weekRange, {
+              dateString: convertWeekToString(weekRange, lang)
+            });
+          }
+        }
+      } else if (picker === 'quarter' && isLegalQuarterString(val, lang)) {
+        // 2025-Q1
+        // 在检查了季度字符串后，接着检查这个季度是否在范围内
+        var quarterRange = parseQuarterStringToRange(val, lang);
+        if (quarterRange) {
+          var _quarterRange = _slicedToArray(quarterRange, 2),
+            quarterStart = _quarterRange[0],
+            quarterEnd = _quarterRange[1];
+
+          // 检查季度范围是否在允许的日期范围内
+          var isQuarterInRange = (!minDate || !isDayBefore(quarterStart, minDate)) && (!maxDate || !isDayAfter(quarterEnd, maxDate));
+
+          // 检查季度是否在 disabledQuarters 中
+          var isQuarterDisabled = disabledQuarters && disabledQuarters.length > 0 && disabledQuarters.some(function (disabledDate) {
+            var disabledYear = disabledDate.getFullYear();
+            var disabledMonth = disabledDate.getMonth();
+            var disabledQuarter = Math.floor(disabledMonth / 3) + 1;
+            var quarterYear = quarterStart.getFullYear();
+            var quarterStartMonth = quarterStart.getMonth();
+            var quarterIndex = Math.floor(quarterStartMonth / 3) + 1;
+            return disabledYear === quarterYear && disabledQuarter === quarterIndex;
+          });
+          if (isQuarterInRange && !isQuarterDisabled && (!selectedRange || !isSameDay(quarterStart, selectedRange[0]) || !isSameDay(quarterEnd, selectedRange[1]))) {
+            if (valueProp === undefined) {
+              setSelectedRange(quarterRange);
+              setValue(convertQuarterToString(quarterRange, lang));
+              // 如果季度的开始日期不在当前显示的月份中，则切换到该月份
+              if (!isSameMonth(quarterStart, selectedDay)) {
+                setMonth(quarterStart);
+              }
+            }
+            onChange === null || onChange === void 0 || onChange(quarterRange, {
+              dateString: convertQuarterToString(quarterRange, lang)
+            });
+          }
+        }
+      } else if (picker === 'month' && isLegalMonthString(val, lang)) {
+        // 2025-02
+        // 在检查了月份字符串后，接着检查这个月份是否在范围内
+        var monthRange = parseMonthStringToRange(val, lang);
+        if (monthRange) {
+          var _monthRange = _slicedToArray(monthRange, 2),
+            monthStart = _monthRange[0],
+            monthEnd = _monthRange[1];
+
+          // 检查月份范围是否在允许的日期范围内
+          var isMonthInRange = (!minDate || !isDayBefore(monthStart, minDate)) && (!maxDate || !isDayAfter(monthEnd, maxDate));
+
+          // 检查月份是否在 disabledMonths 中
+          var isMonthDisabled = disabledMonths && disabledMonths.length > 0 && disabledMonths.some(function (disabledDate) {
+            var disabledYear = disabledDate.getFullYear();
+            var disabledMonth = disabledDate.getMonth();
+            var monthYear = monthStart.getFullYear();
+            var monthIndex = monthStart.getMonth();
+            return disabledYear === monthYear && disabledMonth === monthIndex;
+          });
+          if (isMonthInRange && !isMonthDisabled && (!selectedRange || !isSameDay(monthStart, selectedRange[0]) || !isSameDay(monthEnd, selectedRange[1]))) {
+            if (valueProp === undefined) {
+              setSelectedRange(monthRange);
+              setValue(convertMonthToString(monthRange, lang));
+              // 如果月份的开始日期不在当前显示的月份中，则切换到该月份
+              if (!isSameMonth(monthStart, selectedDay)) {
+                setMonth(monthStart);
+              }
+            }
+            onChange === null || onChange === void 0 || onChange(monthRange, {
+              dateString: convertMonthToString(monthRange, lang)
+            });
+          }
+        }
+      } else if (picker === 'year' && isLegalYearString(val, lang)) {
+        // 2025
+        // 在检查了年份字符串后，接着检查这个年份是否在范围内
+        var yearRange = parseYearStringToRange(val, lang);
+        if (yearRange) {
+          var _yearRange = _slicedToArray(yearRange, 2),
+            yearStart = _yearRange[0],
+            yearEnd = _yearRange[1];
+
+          // 检查年份范围是否在允许的日期范围内
+          var isYearInRange = (!minDate || !isDayBefore(yearStart, minDate)) && (!maxDate || !isDayAfter(yearEnd, maxDate));
+
+          // 检查年份是否在 disabledYears 中
+          var isYearDisabled = disabledYears && disabledYears.length > 0 && disabledYears.some(function (disabledDate) {
+            var disabledYear = disabledDate.getFullYear();
+            var yearStartYear = yearStart.getFullYear();
+            return disabledYear === yearStartYear;
+          });
+          if (isYearInRange && !isYearDisabled && (!selectedRange || !isSameDay(yearStart, selectedRange[0]) || !isSameDay(yearEnd, selectedRange[1]))) {
+            if (valueProp === undefined) {
+              setSelectedRange(yearRange);
+              setValue(convertYearToString(yearRange, lang));
+              // 如果年份的开始日期不在当前显示的月份中，则切换到该月份
+              if (!isSameMonth(yearStart, selectedDay)) {
+                setMonth(yearStart);
+              }
+            }
+            onChange === null || onChange === void 0 || onChange(yearRange, {
+              dateString: convertYearToString(yearRange, lang)
+            });
+          }
+        }
+      }
+    }
+  };
+  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, _target$parentElement;
+    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;
+
+    // week 和 day 的 hover 不同，week 需要 hover 一整行，因此向上再找到一整行的 tr，在其之下增加背景
+    var targetTr = (_target$parentElement = target.parentElement) === null || _target$parentElement === void 0 ? void 0 : _target$parentElement.parentElement;
+    var targetTrFirstTd = targetTr.firstElementChild;
+    var targetTrFirstTdLeft = targetTrFirstTd.getBoundingClientRect().left || 0;
+    var finalTop = targetTop - popupTop;
+    var finalTdLeft = targetLeft - popupLeft;
+    var finalTrLeft = targetTrFirstTdLeft - popupLeft + targetTrFirstTd.offsetWidth;
+    setTimeout(function () {
+      if (!tdHoverFillRef.current || !tdHoverFillInnerRef.current) {
+        return;
+      }
+      tdHoverFillRef.current.style.left = "".concat(picker === 'day' ? finalTdLeft : finalTrLeft, "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 handleDaySelect = function handleDaySelect(day) {
+    if (day === undefined) {
+      return;
+    }
+    var newDate = new Date(day);
+    if (isDayDisabled(newDate)) {
+      return;
+    }
+    newDate.setHours(0, 0, 0, 0);
+    if (valueProp === undefined) {
+      setSelectedDay(newDate);
+      setValue(convertDateToString(newDate, lang));
+    }
+    if (onChange) {
+      onChange === null || onChange === void 0 || onChange(newDate, {
+        dateString: convertDateToString(newDate, lang)
+      });
+    }
+    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) {
+      if (selectedDay || selectedRange) {
+        setSelectedDay(null);
+        setSelectedRange(null);
+        setValue('');
+        if (onChange) {
+          onChange(null, {
+            dateString: ''
+          });
+        }
+      }
+      if (onVisibleChange) {
+        onVisibleChange(false);
+      }
+      if (visibleProp === null) {
+        setVisible(false);
+      }
+    }
+  };
+  var dayProps = {
+    mode: 'single',
+    selected: selectedDay || undefined,
+    onSelect: handleDaySelect
+  };
+  var weekProps = {
+    showWeekNumber: true,
+    showOutsideDays: true,
+    modifiers: {
+      selected: selectedRange || undefined,
+      range_start: (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange[0]) || undefined,
+      range_end: (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange[1]) || undefined,
+      range_middle: function range_middle(date) {
+        return selectedRange ? isDayInRange(date, selectedRange, true) : false;
+      }
+    },
+    onDayClick: function onDayClick(day, modifiers) {
+      if (day === undefined) {
+        return;
+      }
+      var newDate = new Date(day);
+      if (isDayDisabled(newDate)) {
+        return;
+      }
+      newDate.setHours(0, 0, 0, 0);
+      var weekStart = getStartOfWeek(newDate, lang);
+      var weekEnd = getEndOfWeek(newDate, lang);
+      if (valueProp === undefined) {
+        setSelectedRange([weekStart, weekEnd]);
+        setValue(convertWeekToString([weekStart, weekEnd], lang));
+      }
+      if (onChange) {
+        onChange === null || onChange === void 0 || onChange([weekStart, weekEnd], {
+          dateString: convertWeekToString([weekStart, weekEnd], lang)
+        });
+      }
+      if (closeOnSelect) {
+        setTimeout(function () {
+          if (onVisibleChange) {
+            onVisibleChange(false);
+          }
+          if (visibleProp === null) {
+            setVisible(false);
+          }
+        }, 150);
+      }
+    }
+  };
+  var popup = /*#__PURE__*/React.createElement(DayPicker, _extends({
+    "data-odn-date-picker": true,
+    "data-odn-date-picker-locale": lang,
+    captionLayout: "dropdown",
+    locale: lang === 'zhCN' ? zhCN : enUS,
+    weekStartsOn: lang === 'zhCN' ? 1 : 0,
+    month: month || undefined,
+    onMonthChange: handleCaptionChange,
+    startMonth: minDate,
+    disabled: [{
+      before: minDate,
+      after: maxDate
+    }].concat(_toConsumableArray(Array.isArray(disabledDays) ? disabledDays : disabledDays ? [disabledDays] : [])),
+    endMonth: maxDate,
+    components: {
+      YearsDropdown: function YearsDropdown(_ref6) {
+        var value = _ref6.value,
+          _ref6$options = _ref6.options,
+          options = _ref6$options === void 0 ? [] : _ref6$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: 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(_ref7) {
+        var value = _ref7.value,
+          _ref7$options = _ref7.options,
+          options = _ref7$options === void 0 ? [] : _ref7$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: 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(_ref8) {
+        var onPreviousClick = _ref8.onPreviousClick,
+          onNextClick = _ref8.onNextClick,
+          previousMonth = _ref8.previousMonth,
+          nextMonth = _ref8.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
+        }, /*#__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
+        }, /*#__PURE__*/React.createElement(Icon, {
+          name: "right",
+          "data-odn-date-picker-caption-nav-icon": true
+        })));
+      },
+      DayButton: function DayButton(_ref9) {
+        var day = _ref9.day,
+          modifiers = _ref9.modifiers,
+          _onMouseEnter = _ref9.onMouseEnter,
+          _onMouseLeave = _ref9.onMouseLeave,
+          props = _objectWithoutProperties(_ref9, _excluded2);
+        var focus = modifiers.focus,
+          today = modifiers.today,
+          disabled = modifiers.disabled,
+          outside = modifiers.outside,
+          selected = modifiers.selected;
+        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,
+          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);
+          }
+        }, props), day.date.getDate());
+      }
+    }
+  }, picker === 'day' ? dayProps : weekProps));
+  var handleVisibleChange = function handleVisibleChange(bool) {
+    if (disabled) {
+      return;
+    }
+    if (bool) {
+      if (picker === 'day') {
+        setMonth(selectedDay !== null && selectedDay !== void 0 ? selectedDay : null);
+      } else {
+        var _selectedRange$;
+        setMonth((_selectedRange$ = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange[0]) !== null && _selectedRange$ !== void 0 ? _selectedRange$ : null);
+      }
+    }
+    setTimeout(function () {
+      if (nextClickInsideRef.current === true) {
+        nextClickInsideRef.current = false;
+        // 展开时，如果在内部元素点击，则不做默认的收起操作
+        if (!bool) {
+          return;
+        }
+      }
+      var newVal = '';
+      if (picker === 'day') {
+        newVal = convertDateToString(selectedDay, lang);
+      } else if (picker === 'week') {
+        newVal = convertWeekToString(selectedRange, lang);
+      } else if (picker === 'quarter') {
+        newVal = convertQuarterToString(selectedRange, lang);
+      } else if (picker === 'month') {
+        newVal = convertMonthToString(selectedRange, lang);
+      } else if (picker === 'year') {
+        newVal = convertYearToString(selectedRange, lang);
+      }
+      if (!bool && value !== newVal) {
+        setValue(newVal);
+      }
+      if (onVisibleChange) {
+        onVisibleChange(bool);
+      }
+      if (visibleProp === null) {
+        setVisible(bool);
+      }
+    }, 0);
+  };
+  var handleQuarterSelect = function handleQuarterSelect(quarterRange) {
+    if (valueProp === undefined) {
+      setSelectedRange(quarterRange);
+      setValue(convertQuarterToString(quarterRange, lang));
+    }
+    if (onChange) {
+      onChange === null || onChange === void 0 || onChange(quarterRange, {
+        dateString: convertQuarterToString(quarterRange, lang)
+      });
+    }
+    if (closeOnSelect) {
+      setTimeout(function () {
+        if (onVisibleChange) {
+          onVisibleChange(false);
+        }
+        if (visibleProp === null) {
+          setVisible(false);
+        }
+      }, 150);
+    }
+  };
+  var quarterPopup = /*#__PURE__*/React.createElement(QuarterPicker, {
+    selectedRange: selectedRange,
+    lang: lang,
+    month: month,
+    minDate: minDate,
+    maxDate: maxDate,
+    disabledQuarters: disabledQuarters,
+    onQuarterSelect: handleQuarterSelect,
+    onMonthChange: handleCaptionChange,
+    onCaptionHoverEnter: handleCaptionHoverEnter,
+    onCaptionHoverLeave: handleCaptionHoverLeave
+  });
+  var handleMonthSelect = function handleMonthSelect(monthRange) {
+    if (valueProp === undefined) {
+      setSelectedRange(monthRange);
+      setValue(convertMonthToString(monthRange, lang));
+    }
+    if (onChange) {
+      onChange === null || onChange === void 0 || onChange(monthRange, {
+        dateString: convertMonthToString(monthRange, lang)
+      });
+    }
+    if (closeOnSelect) {
+      setTimeout(function () {
+        if (onVisibleChange) {
+          onVisibleChange(false);
+        }
+        if (visibleProp === null) {
+          setVisible(false);
+        }
+      }, 150);
+    }
+  };
+  var handleYearSelect = function handleYearSelect(yearRange) {
+    if (valueProp === undefined) {
+      setSelectedRange(yearRange);
+      setValue(convertYearToString(yearRange, lang));
+    }
+    if (onChange) {
+      onChange === null || onChange === void 0 || onChange(yearRange, {
+        dateString: convertYearToString(yearRange, lang)
+      });
+    }
+    if (closeOnSelect) {
+      setTimeout(function () {
+        if (onVisibleChange) {
+          onVisibleChange(false);
+        }
+        if (visibleProp === null) {
+          setVisible(false);
+        }
+      }, 150);
+    }
+  };
+  var monthPopup = /*#__PURE__*/React.createElement(MonthPicker, {
+    selectedRange: selectedRange,
+    lang: lang,
+    month: month,
+    minDate: minDate,
+    maxDate: maxDate,
+    disabledMonths: disabledMonths,
+    onMonthSelect: handleMonthSelect,
+    onMonthChange: handleCaptionChange,
+    onCaptionHoverEnter: handleCaptionHoverEnter,
+    onCaptionHoverLeave: handleCaptionHoverLeave
+  });
+  var yearPopup = /*#__PURE__*/React.createElement(YearPicker, {
+    selectedRange: selectedRange,
+    lang: lang,
+    month: month,
+    minDate: minDate,
+    maxDate: maxDate,
+    disabledYears: disabledYears,
+    onYearSelect: handleYearSelect
+  });
+  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 && (selectedDay || selectedRange) ? picker === 'day' ? format(selectedDay, {
+      dateString: value
+    }) || '' : format(selectedRange, {
+      dateString: value
+    }) || '' : value,
+    onChange: handleInputChange,
+    onClick: function onClick() {
+      nextClickInsideRef.current = true;
+    },
+    placeholder: placeholder,
+    style: {
+      paddingLeft: prefixWidth > 0 ? "".concat(prefixWidth, "px") : undefined
+    }
+  });
+  return /*#__PURE__*/React.createElement(Popover, {
+    matchWidth: !['day', 'week'].includes(picker),
+    arrowed: false,
+    visible: visible,
+    placement: "bottomLeft",
+    trigger: "click",
+    popupStyle: {
+      padding: 0,
+      maxWidth: 'initial'
+    },
+    popup: /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-popup": true,
+      "data-odn-date-picker-popup-picker": picker,
+      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 (_ref10, index) {
+      var value = _ref10.value,
+        label = _ref10.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, selectedDay),
+        onClick: function onClick() {
+          handleDaySelect(value);
+        }
+      }, label));
+    })), /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-popup-content": true
+    }, function () {
+      var content;
+      if (picker === 'day' || picker === 'week') {
+        content = popup;
+      } else if (picker === 'quarter') {
+        content = quarterPopup;
+      } else if (picker === 'month') {
+        content = monthPopup;
+      } else if (picker === 'year') {
+        content = yearPopup;
+      } else {
+        content = yearPopup;
+      }
+      return popupRender ? popupRender(content) : content;
+    }()))
+  }, /*#__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-selected": !!selectedDay || !!selectedRange,
+    "data-odn-date-picker-container-light": light,
+    "data-odn-date-picker-container-disabled": disabled,
+    "data-odn-date-picker-container-allow-clear": allowClear,
+    "data-odn-date-picker-container-picker": picker,
+    onClick: function onClick(e) {
+      _onClick === null || _onClick === void 0 || _onClick(e);
+      handleVisibleChange(!visible);
+    },
+    ref: containerRef
+  }, rest), !!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
+  }, icon === null ? null : icon || /*#__PURE__*/React.createElement(Icon, {
+    name: "calendar",
+    "data-odn-date-picker-icon": true,
+    "data-odn-date-picker-icon-calendar": true
+  }), allowClear && (clearIcon === null ? null : clearIcon || /*#__PURE__*/React.createElement(Icon, {
+    name: "cancel-circle-filled",
+    "data-odn-date-picker-icon": true,
+    "data-odn-date-picker-icon-clear": true
+  }))))));
+};
+export default DatePicker;