rsuite 5.60.0 → 5.60.2

package/dist/rsuite.js

@@ -6813,7 +6813,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar isElem
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useDateField = exports.DateField = exports.patternMap = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _inheritsLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/inheritsLoose */ \"./node_modules/@babel/runtime/helpers/inheritsLoose.js\"));\nvar _wrapNativeSuper2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/wrapNativeSuper */ \"./node_modules/@babel/runtime/helpers/wrapNativeSuper.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _isValid = _interopRequireDefault(__webpack_require__(/*! date-fns/isValid */ \"./node_modules/date-fns/esm/isValid/index.js\"));\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/DateInput/utils.ts\");\nvar patternMap = {\n  y: 'year',\n  M: 'month',\n  d: 'day',\n  H: 'hour',\n  h: 'hour',\n  m: 'minute',\n  s: 'second',\n  a: 'meridian'\n};\nexports.patternMap = patternMap;\nvar DateField = /*#__PURE__*/function (_Object) {\n  (0, _inheritsLoose2.default)(DateField, _Object);\n  function DateField(format, value) {\n    var _this;\n    _this = _Object.call(this) || this;\n    _this.format = void 0;\n    _this.patternArray = [];\n    _this.year = null;\n    _this.month = null;\n    _this.day = null;\n    _this.hour = null;\n    _this.minute = null;\n    _this.second = null;\n    _this.format = format;\n    var formatArray = format.match(new RegExp('([y|d|M|H|h|m|s|a])+', 'ig')) || [];\n    _this.patternArray = formatArray.map(function (pattern) {\n      return {\n        pattern: pattern,\n        key: patternMap[pattern[0]]\n      };\n    });\n    if (value && (0, _isValid.default)(value)) {\n      _this.year = value.getFullYear();\n      _this.month = value.getMonth() + 1;\n      _this.day = value.getDate();\n      _this.hour = value.getHours();\n      _this.minute = value.getMinutes();\n      _this.second = value.getSeconds();\n    }\n    return _this;\n  }\n  return DateField;\n}( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Object));\n/**\n * Pad a number with zeros to the left.\n */\nexports.DateField = DateField;\nfunction padNumber(number, length) {\n  var numberString = String(number);\n  if (numberString.length >= length) {\n    return numberString;\n  }\n  var paddingCount = length - numberString.length;\n  for (var i = 0; i < paddingCount; i++) {\n    numberString = '0' + numberString;\n  }\n  return numberString;\n}\nvar useDateField = function useDateField(format, localize, date) {\n  var _useReducer = (0, _react.useReducer)(function (state, action) {\n      switch (action.type) {\n        case 'setYear':\n          return (0, _extends2.default)({}, state, {\n            year: action.value\n          });\n        case 'setMonth':\n          return (0, _extends2.default)({}, state, {\n            month: action.value\n          });\n        case 'setDay':\n          return (0, _extends2.default)({}, state, {\n            day: action.value\n          });\n        case 'setHour':\n          return (0, _extends2.default)({}, state, {\n            hour: action.value\n          });\n        case 'setMinute':\n          return (0, _extends2.default)({}, state, {\n            minute: action.value\n          });\n        case 'setSecond':\n          return (0, _extends2.default)({}, state, {\n            second: action.value\n          });\n        case 'setNewDate':\n          return new DateField(format, action.value);\n        default:\n          return state;\n      }\n    }, new DateField(format, date)),\n    dateField = _useReducer[0],\n    dispatch = _useReducer[1];\n  var toDateString = function toDateString() {\n    var str = format;\n    dateField.patternArray.forEach(function (item) {\n      var key = item.key,\n        pattern = item.pattern;\n      var hour = dateField.hour;\n      var value = dateField[key];\n      if (value !== null) {\n        if (pattern === 'MMM' && typeof value === 'number') {\n          value = localize === null || localize === void 0 ? void 0 : localize.month(value - 1, {\n            width: 'abbreviated'\n          });\n        } else if (pattern === 'MMMM' && typeof value === 'number') {\n          value = localize === null || localize === void 0 ? void 0 : localize.month(value - 1, {\n            width: 'wide'\n          });\n        } else if (pattern === 'aa') {\n          if (typeof hour === 'number') {\n            value = hour > 12 ? 'PM' : 'AM';\n          } else {\n            value = 'aa';\n          }\n        } else if (pattern === 'hh' && typeof value === 'number') {\n          value = value === 0 ? 12 : value > 12 ? value - 12 : value;\n        }\n        if (typeof value === 'number') {\n          value = padNumber(value, pattern.length);\n        }\n        str = str.replace(pattern, value);\n      }\n    });\n    return str;\n  };\n\n  // Check if the field value is valid.\n  var validFieldValue = function validFieldValue(type, value) {\n    var _format$match;\n    var isValid = true;\n    (_format$match = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match === void 0 ? void 0 : _format$match.forEach(function (pattern) {\n      var key = patternMap[pattern[0]];\n      var fieldValue = type === key ? value : dateField[key];\n      if (fieldValue === null) {\n        isValid = false;\n        return;\n      }\n    });\n    return isValid;\n  };\n  var isEmptyValue = function isEmptyValue(type, value) {\n    var _format$match2;\n    var checkValueArray = (_format$match2 = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match2 === void 0 ? void 0 : _format$match2.map(function (pattern) {\n      var key = patternMap[pattern[0]];\n      var fieldValue = type === key ? value : dateField[key];\n      return fieldValue !== null;\n    });\n    return checkValueArray === null || checkValueArray === void 0 ? void 0 : checkValueArray.every(function (item) {\n      return item === false;\n    });\n  };\n  var toDate = function toDate(type, value) {\n    var year = dateField.year,\n      month = dateField.month,\n      day = dateField.day,\n      hour = dateField.hour,\n      minute = dateField.minute,\n      second = dateField.second;\n    var date = new Date(year || 0, typeof month === 'number' ? month - 1 : 0,\n    // The default day is 1 when the value is null, otherwise it becomes the last day of the month.\n    day || 1, hour || 0, minute || 0, second || 0);\n    if (typeof type === 'undefined' || typeof value === 'undefined') {\n      return date;\n    }\n    if (value === null || !validFieldValue(type, value)) {\n      if (isEmptyValue(type, value)) {\n        return null;\n      }\n\n      // Invalid Date\n      return new Date('');\n    } else if (type === 'day' && value === 0) {\n      // Invalid Date. If the type is day and the value is 0, it is considered an invalid date.\n      return new Date('');\n    }\n    if (type === 'meridian' && typeof hour === 'number') {\n      var newHour = hour > 12 ? hour - 12 : hour + 12;\n      type = 'hour';\n      value = newHour;\n    }\n    return (0, _utils.modifyDate)(date, type, value);\n  };\n  return {\n    dateField: dateField,\n    dispatch: dispatch,\n    toDate: toDate,\n    toDateString: toDateString,\n    isEmptyValue: isEmptyValue\n  };\n};\nexports.useDateField = useDateField;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/DateField.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useDateField = exports.DateField = exports.patternMap = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _inheritsLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/inheritsLoose */ \"./node_modules/@babel/runtime/helpers/inheritsLoose.js\"));\nvar _wrapNativeSuper2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/wrapNativeSuper */ \"./node_modules/@babel/runtime/helpers/wrapNativeSuper.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _isValid = _interopRequireDefault(__webpack_require__(/*! date-fns/isValid */ \"./node_modules/date-fns/esm/isValid/index.js\"));\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/DateInput/utils.ts\");\nvar patternMap = {\n  y: 'year',\n  M: 'month',\n  d: 'day',\n  H: 'hour',\n  h: 'hour',\n  m: 'minute',\n  s: 'second',\n  a: 'meridian'\n};\nexports.patternMap = patternMap;\nvar DateField = /*#__PURE__*/function (_Object) {\n  (0, _inheritsLoose2.default)(DateField, _Object);\n  function DateField(format, value) {\n    var _this;\n    _this = _Object.call(this) || this;\n    _this.format = void 0;\n    _this.patternArray = [];\n    _this.year = null;\n    _this.month = null;\n    _this.day = null;\n    _this.hour = null;\n    _this.minute = null;\n    _this.second = null;\n    _this.format = format;\n    var formatArray = format.match(new RegExp('([y|d|M|H|h|m|s|a])+', 'ig')) || [];\n    _this.patternArray = formatArray.map(function (pattern) {\n      return {\n        pattern: pattern,\n        key: patternMap[pattern[0]]\n      };\n    });\n    if (value && (0, _isValid.default)(value)) {\n      _this.year = value.getFullYear();\n      _this.month = value.getMonth() + 1;\n      _this.day = value.getDate();\n      _this.hour = value.getHours();\n      _this.minute = value.getMinutes();\n      _this.second = value.getSeconds();\n    }\n    return _this;\n  }\n  return DateField;\n}( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Object));\n/**\n * Pad a number with zeros to the left.\n */\nexports.DateField = DateField;\nfunction padNumber(number, length) {\n  var numberString = String(number);\n  if (numberString.length >= length) {\n    return numberString;\n  }\n  var paddingCount = length - numberString.length;\n  for (var i = 0; i < paddingCount; i++) {\n    numberString = '0' + numberString;\n  }\n  return numberString;\n}\nvar useDateField = function useDateField(format, localize, date) {\n  var _useReducer = (0, _react.useReducer)(function (state, action) {\n      switch (action.type) {\n        case 'setYear':\n          return (0, _extends2.default)({}, state, {\n            year: action.value\n          });\n        case 'setMonth':\n          return (0, _extends2.default)({}, state, {\n            month: action.value\n          });\n        case 'setDay':\n          return (0, _extends2.default)({}, state, {\n            day: action.value\n          });\n        case 'setHour':\n          return (0, _extends2.default)({}, state, {\n            hour: action.value\n          });\n        case 'setMinute':\n          return (0, _extends2.default)({}, state, {\n            minute: action.value\n          });\n        case 'setSecond':\n          return (0, _extends2.default)({}, state, {\n            second: action.value\n          });\n        case 'setNewDate':\n          return new DateField(format, action.value);\n        default:\n          return state;\n      }\n    }, new DateField(format, date)),\n    dateField = _useReducer[0],\n    dispatch = _useReducer[1];\n  var toDateString = function toDateString() {\n    var str = format;\n    dateField.patternArray.forEach(function (item) {\n      var key = item.key,\n        pattern = item.pattern;\n      var hour = dateField.hour;\n      var value = dateField[key];\n      if (value !== null) {\n        if (pattern === 'MMM' && typeof value === 'number') {\n          value = localize === null || localize === void 0 ? void 0 : localize.month(value - 1, {\n            width: 'abbreviated'\n          });\n        } else if (pattern === 'MMMM' && typeof value === 'number') {\n          value = localize === null || localize === void 0 ? void 0 : localize.month(value - 1, {\n            width: 'wide'\n          });\n        } else if (pattern === 'aa') {\n          if (typeof hour === 'number') {\n            value = hour > 12 ? 'PM' : 'AM';\n          } else {\n            value = 'aa';\n          }\n        } else if (pattern === 'hh' && typeof value === 'number') {\n          value = value === 0 ? 12 : value > 12 ? value - 12 : value;\n        }\n        if (typeof value === 'number') {\n          value = padNumber(value, pattern.length);\n        }\n        if (typeof value !== 'undefined') {\n          str = str.replace(pattern, value);\n        }\n      }\n    });\n    return str;\n  };\n\n  // Check if the field value is valid.\n  var validFieldValue = function validFieldValue(type, value) {\n    var _format$match;\n    var isValid = true;\n    (_format$match = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match === void 0 ? void 0 : _format$match.forEach(function (pattern) {\n      var key = patternMap[pattern[0]];\n      var fieldValue = type === key ? value : dateField[key];\n      if (fieldValue === null) {\n        isValid = false;\n        return;\n      }\n    });\n    return isValid;\n  };\n  var isEmptyValue = function isEmptyValue(type, value) {\n    var _format$match2;\n    var checkValueArray = (_format$match2 = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match2 === void 0 ? void 0 : _format$match2.map(function (pattern) {\n      var key = patternMap[pattern[0]];\n      var fieldValue = type === key ? value : dateField[key];\n      return fieldValue !== null;\n    });\n    return checkValueArray === null || checkValueArray === void 0 ? void 0 : checkValueArray.every(function (item) {\n      return item === false;\n    });\n  };\n  var toDate = function toDate(type, value) {\n    var year = dateField.year,\n      month = dateField.month,\n      day = dateField.day,\n      hour = dateField.hour,\n      minute = dateField.minute,\n      second = dateField.second;\n    var date = new Date(year || 0, typeof month === 'number' ? month - 1 : 0,\n    // The default day is 1 when the value is null, otherwise it becomes the last day of the month.\n    day || 1, hour || 0, minute || 0, second || 0);\n    if (typeof type === 'undefined' || typeof value === 'undefined') {\n      return date;\n    }\n    if (value === null || !validFieldValue(type, value)) {\n      if (isEmptyValue(type, value)) {\n        return null;\n      }\n\n      // Invalid Date\n      return new Date('');\n    } else if (type === 'day' && value === 0) {\n      // Invalid Date. If the type is day and the value is 0, it is considered an invalid date.\n      return new Date('');\n    }\n    if (type === 'meridian' && typeof hour === 'number') {\n      var newHour = hour > 12 ? hour - 12 : hour + 12;\n      type = 'hour';\n      value = newHour;\n    }\n    return (0, _utils.modifyDate)(date, type, value);\n  };\n  return {\n    dateField: dateField,\n    dispatch: dispatch,\n    toDate: toDate,\n    toDateString: toDateString,\n    isEmptyValue: isEmptyValue\n  };\n};\nexports.useDateField = useDateField;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/DateField.ts?");
 
 /***/ }),
 
@@ -6824,51 +6824,73 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateInput/utils.ts\");\nvar _useDateInputState2 = _interopRequireDefault(__webpack_require__(/*! ./useDateInputState */ \"./src/DateInput/useDateInputState.ts\"));\nvar _useKeyboardInputEvent = _interopRequireDefault(__webpack_require__(/*! ./useKeyboardInputEvent */ \"./src/DateInput/useKeyboardInputEvent.ts\"));\nvar _useIsFocused2 = _interopRequireDefault(__webpack_require__(/*! ./useIsFocused */ \"./src/DateInput/useIsFocused.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateInput/DateInput.tsx\",\n  _this = void 0;\n/**\n * The DateInput component lets users select a date with the keyboard.\n * @version 5.58.0\n * @see https://rsuitejs.com/components/date-input/\n */\nvar DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    valueProp = props.value,\n    defaultValue = props.defaultValue,\n    placeholder = props.placeholder,\n    onChange = props.onChange,\n    onKeyDown = props.onKeyDown,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"format\", \"value\", \"defaultValue\", \"placeholder\", \"onChange\", \"onKeyDown\", \"onBlur\", \"onFocus\"]);\n  var inputRef = (0, _react.useRef)();\n  var _useState = (0, _react.useState)({\n      selectedPattern: 'y',\n      selectionStart: 0,\n      selectionEnd: 0\n    }),\n    selectedState = _useState[0],\n    setSelectedState = _useState[1];\n  var _useCustom = (0, _utils.useCustom)('Calendar'),\n    locale = _useCustom.locale;\n  var dateLocale = locale.dateLocale;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useDateInputState = (0, _useDateInputState2.default)({\n      formatStr: formatStr,\n      locale: dateLocale,\n      date: value,\n      isControlledDate: isControlled\n    }),\n    dateField = _useDateInputState.dateField,\n    setDateOffset = _useDateInputState.setDateOffset,\n    setDateField = _useDateInputState.setDateField,\n    getDateField = _useDateInputState.getDateField,\n    toDateString = _useDateInputState.toDateString,\n    isEmptyValue = _useDateInputState.isEmptyValue;\n  var dateString = toDateString();\n  var keyPressOptions = (0, _react.useMemo)(function () {\n    return {\n      formatStr: formatStr,\n      localize: dateLocale.localize,\n      selectedMonth: dateField.month,\n      dateString: dateString\n    };\n  }, [dateField, dateString, formatStr, dateLocale]);\n  var handleChange = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n    setValue(value);\n  });\n  var setSelectionRange = (0, _utils2.useInputSelection)(inputRef);\n  var onSegmentChange = (0, _utils.useEventCallback)(function (event, nextDirection) {\n    var input = event.target;\n    var key = event.key;\n    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      direction: direction\n    }));\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n    setSelectedState(state);\n  });\n  var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var key = event.key;\n    var offset = key === 'ArrowUp' ? 1 : -1;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      valueOffset: offset\n    }));\n    setSelectedState(state);\n    setDateOffset(state.selectedPattern, offset, function (date) {\n      return handleChange(date, event);\n    });\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  });\n  var onSegmentValueChangeWithNumericKeys = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var key = event.key;\n    var pattern = selectedState.selectedPattern;\n    if (!pattern) {\n      return;\n    }\n    var field = getDateField(pattern);\n    var value = parseInt(key, 10);\n    var padValue = parseInt(\"\" + (field.value || '') + key, 10);\n    var newValue = value;\n\n    // Check if the value entered by the user is a valid date\n    if ((0, _utils2.validateDateTime)(field.name, padValue)) {\n      newValue = padValue;\n    }\n    if (pattern === 'M') {\n      // Month cannot be less than 1.\n      newValue = Math.max(1, newValue);\n    }\n    setDateField(pattern, newValue, function (date) {\n      return handleChange(date, event);\n    });\n\n    // The currently selected month will be retained as a parameter of getInputSelectedState,\n    // but if the user enters a month, the month value will be replaced with the value entered by the user.\n    var selectedMonth = pattern === 'M' ? newValue : dateField.month;\n    var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      selectedMonth: selectedMonth\n    }));\n    setSelectedState(nextState);\n    setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n\n    // If the field is full value, move the cursor to the next field\n    if ((0, _utils2.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {\n      onSegmentChange(event, 'right');\n    }\n  });\n  var onSegmentValueRemove = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    if (selectedState.selectedPattern) {\n      var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n        input: input,\n        valueOffset: null\n      }));\n      setSelectedState(nextState);\n      setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n      setDateField(selectedState.selectedPattern, null, function (date) {\n        return handleChange(date, event);\n      });\n    }\n  });\n  var handleClick = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input\n    }));\n    setSelectedState(state);\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  });\n  var onKeyboardInput = (0, _useKeyboardInputEvent.default)({\n    onSegmentChange: onSegmentChange,\n    onSegmentValueChange: onSegmentValueChange,\n    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,\n    onSegmentValueRemove: onSegmentValueRemove,\n    onKeyDown: onKeyDown\n  });\n  var _useIsFocused = (0, _useIsFocused2.default)({\n      onBlur: onBlur,\n      onFocus: onFocus\n    }),\n    focused = _useIsFocused[0],\n    focusEventProps = _useIsFocused[1];\n  var renderedValue = (0, _react.useMemo)(function () {\n    if (!isEmptyValue()) {\n      return dateString;\n    }\n    return !focused ? '' : dateString;\n  }, [dateString, focused, isEmptyValue]);\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    inputMode: focused ? 'numeric' : 'text',\n    autoComplete: \"off\",\n    autoCorrect: \"off\",\n    spellCheck: false,\n    ref: (0, _utils.mergeRefs)(inputRef, ref),\n    onKeyDown: onKeyboardInput,\n    onClick: handleClick,\n    value: renderedValue,\n    placeholder: placeholder || formatStr\n  }, focusEventProps, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 206,\n      columnNumber: 5\n    }\n  }));\n});\nDateInput.displayName = 'DateInput';\nDateInput.propTypes = {\n  defaultValue: _propTypes.default.instanceOf(Date),\n  format: _propTypes.default.string,\n  value: _propTypes.default.instanceOf(Date),\n  placeholder: _propTypes.default.string,\n  onChange: _propTypes.default.func,\n  onKeyDown: _propTypes.default.func,\n  onBlur: _propTypes.default.func,\n  onFocus: _propTypes.default.func\n};\nvar _default = DateInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/DateInput.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateInput/utils.ts\");\nvar _useDateInputState2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useDateInputState */ \"./src/DateInput/hooks/useDateInputState.ts\"));\nvar _useKeyboardInputEvent = _interopRequireDefault(__webpack_require__(/*! ./hooks/useKeyboardInputEvent */ \"./src/DateInput/hooks/useKeyboardInputEvent.ts\"));\nvar _useIsFocused2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useIsFocused */ \"./src/DateInput/hooks/useIsFocused.ts\"));\nvar _useFieldCursor2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFieldCursor */ \"./src/DateInput/hooks/useFieldCursor.ts\"));\nvar _useSelectedState2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useSelectedState */ \"./src/DateInput/hooks/useSelectedState.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateInput/DateInput.tsx\",\n  _this = void 0;\n/**\n * The DateInput component lets users select a date with the keyboard.\n * @version 5.58.0\n * @see https://rsuitejs.com/components/date-input/\n */\nvar DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    valueProp = props.value,\n    defaultValue = props.defaultValue,\n    placeholder = props.placeholder,\n    onChange = props.onChange,\n    onKeyDown = props.onKeyDown,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"format\", \"value\", \"defaultValue\", \"placeholder\", \"onChange\", \"onKeyDown\", \"onBlur\", \"onFocus\"]);\n  var inputRef = (0, _react.useRef)();\n  var _useSelectedState = (0, _useSelectedState2.default)(),\n    selectedState = _useSelectedState.selectedState,\n    setSelectedState = _useSelectedState.setSelectedState;\n  var _useCustom = (0, _utils.useCustom)('Calendar'),\n    locale = _useCustom.locale;\n  var dateLocale = locale.dateLocale;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useDateInputState = (0, _useDateInputState2.default)({\n      formatStr: formatStr,\n      locale: dateLocale,\n      date: value,\n      isControlledDate: isControlled\n    }),\n    dateField = _useDateInputState.dateField,\n    setDateOffset = _useDateInputState.setDateOffset,\n    setDateField = _useDateInputState.setDateField,\n    getDateField = _useDateInputState.getDateField,\n    toDateString = _useDateInputState.toDateString,\n    isEmptyValue = _useDateInputState.isEmptyValue;\n  var _useFieldCursor = (0, _useFieldCursor2.default)(formatStr, valueProp),\n    isMoveCursor = _useFieldCursor.isMoveCursor,\n    increment = _useFieldCursor.increment,\n    reset = _useFieldCursor.reset;\n  var dateString = toDateString();\n  var keyPressOptions = (0, _react.useMemo)(function () {\n    return {\n      formatStr: formatStr,\n      localize: dateLocale.localize,\n      selectedMonth: dateField.month,\n      dateString: dateString\n    };\n  }, [dateField, dateString, formatStr, dateLocale]);\n  var handleChange = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n    setValue(value);\n  });\n  var setSelectionRange = (0, _utils2.useInputSelection)(inputRef);\n  var onSegmentChange = (0, _utils.useEventCallback)(function (event, nextDirection) {\n    var input = event.target;\n    var key = event.key;\n    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      direction: direction\n    }));\n    setSelectedState(state);\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n    reset();\n  });\n  var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var key = event.key;\n    var offset = key === 'ArrowUp' ? 1 : -1;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      valueOffset: offset\n    }));\n    setSelectedState(state);\n    setDateOffset(state.selectedPattern, offset, function (date) {\n      return handleChange(date, event);\n    });\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  });\n  var onSegmentValueChangeWithNumericKeys = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var key = event.key;\n    var pattern = selectedState.selectedPattern;\n    if (!pattern) {\n      return;\n    }\n    increment();\n    var field = getDateField(pattern);\n    var value = parseInt(key, 10);\n    var padValue = parseInt(\"\" + (field.value || '') + key, 10);\n    var newValue = value;\n\n    // Check if the value entered by the user is a valid date\n    if ((0, _utils2.validateDateTime)(field.name, padValue)) {\n      newValue = padValue;\n    }\n    setDateField(pattern, newValue, function (date) {\n      return handleChange(date, event);\n    });\n\n    // The currently selected month will be retained as a parameter of getInputSelectedState,\n    // but if the user enters a month, the month value will be replaced with the value entered by the user.\n    var selectedMonth = pattern === 'M' ? newValue : dateField.month;\n    var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      selectedMonth: selectedMonth\n    }));\n    setSelectedState(nextState);\n    setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n\n    // If the field is full value, move the cursor to the next field\n    if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {\n      onSegmentChange(event, 'right');\n    }\n  });\n  var onSegmentValueRemove = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    if (selectedState.selectedPattern) {\n      var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n        input: input,\n        valueOffset: null\n      }));\n      setSelectedState(nextState);\n      setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n      setDateField(selectedState.selectedPattern, null, function (date) {\n        return handleChange(date, event);\n      });\n      reset();\n    }\n  });\n  var handleClick = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input\n    }));\n    setSelectedState(state);\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  });\n  var onKeyboardInput = (0, _useKeyboardInputEvent.default)({\n    onSegmentChange: onSegmentChange,\n    onSegmentValueChange: onSegmentValueChange,\n    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,\n    onSegmentValueRemove: onSegmentValueRemove,\n    onKeyDown: onKeyDown\n  });\n  var _useIsFocused = (0, _useIsFocused2.default)({\n      onBlur: onBlur,\n      onFocus: onFocus\n    }),\n    focused = _useIsFocused[0],\n    focusEventProps = _useIsFocused[1];\n  var renderedValue = (0, _react.useMemo)(function () {\n    if (!isEmptyValue()) {\n      return dateString;\n    }\n    return !focused ? '' : dateString;\n  }, [dateString, focused, isEmptyValue]);\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    inputMode: focused ? 'numeric' : 'text',\n    autoComplete: \"off\",\n    autoCorrect: \"off\",\n    spellCheck: false,\n    ref: (0, _utils.mergeRefs)(inputRef, ref),\n    onKeyDown: onKeyboardInput,\n    onClick: handleClick,\n    value: renderedValue,\n    placeholder: placeholder || formatStr\n  }, focusEventProps, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 194,\n      columnNumber: 5\n    }\n  }));\n});\nDateInput.displayName = 'DateInput';\nDateInput.propTypes = {\n  defaultValue: _propTypes.default.instanceOf(Date),\n  format: _propTypes.default.string,\n  value: _propTypes.default.instanceOf(Date),\n  placeholder: _propTypes.default.string,\n  onChange: _propTypes.default.func,\n  onKeyDown: _propTypes.default.func,\n  onBlur: _propTypes.default.func,\n  onFocus: _propTypes.default.func\n};\nvar _default = DateInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/DateInput.tsx?");
 
 /***/ }),
 
-/***/ "./src/DateInput/index.tsx":
-/*!*********************************!*\
-  !*** ./src/DateInput/index.tsx ***!
-  \*********************************/
+/***/ "./src/DateInput/hooks/useDateInputState.ts":
+/*!**************************************************!*\
+  !*** ./src/DateInput/hooks/useDateInputState.ts ***!
+  \**************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nvar _exportNames = {\n  useDateInputState: true,\n  useKeyboardInputEvent: true,\n  useIsFocused: true\n};\nexports[\"default\"] = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;\nvar _DateInput = _interopRequireDefault(__webpack_require__(/*! ./DateInput */ \"./src/DateInput/DateInput.tsx\"));\nvar _useDateInputState = __webpack_require__(/*! ./useDateInputState */ \"./src/DateInput/useDateInputState.ts\");\nexports.useDateInputState = _useDateInputState.useDateInputState;\nvar _useKeyboardInputEvent = __webpack_require__(/*! ./useKeyboardInputEvent */ \"./src/DateInput/useKeyboardInputEvent.ts\");\nexports.useKeyboardInputEvent = _useKeyboardInputEvent.useKeyboardInputEvent;\nvar _useIsFocused = __webpack_require__(/*! ./useIsFocused */ \"./src/DateInput/useIsFocused.ts\");\nexports.useIsFocused = _useIsFocused.useIsFocused;\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/DateInput/utils.ts\");\nObject.keys(_utils).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _utils[key]) return;\n  exports[key] = _utils[key];\n});\nvar _default = _DateInput.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/index.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useDateInputState = useDateInputState;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _startCase = _interopRequireDefault(__webpack_require__(/*! lodash/startCase */ \"./node_modules/lodash/startCase.js\"));\nvar _dateUtils = __webpack_require__(/*! ../../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _DateField = __webpack_require__(/*! ../DateField */ \"./src/DateInput/DateField.ts\");\nfunction useDateInputState(_ref) {\n  var formatStr = _ref.formatStr,\n    locale = _ref.locale,\n    date = _ref.date,\n    isControlledDate = _ref.isControlledDate;\n  var _useDateField = (0, _DateField.useDateField)(formatStr, locale.localize, date),\n    dateField = _useDateField.dateField,\n    dispatch = _useDateField.dispatch,\n    toDateString = _useDateField.toDateString,\n    toDate = _useDateField.toDate,\n    isEmptyValue = _useDateField.isEmptyValue;\n  var setDateOffset = function setDateOffset(pattern, offset, callback) {\n    var currentDate = new Date();\n    var year = dateField.year || currentDate.getFullYear();\n    var month = dateField.month ? dateField.month - 1 : currentDate.getMonth();\n    var day = dateField.day || 0;\n    var hour = dateField.hour || 0;\n    var minute = dateField.minute || 0;\n    var second = dateField.second || 0;\n    var actionName;\n    var value;\n    switch (pattern) {\n      case 'y':\n        actionName = 'setYear';\n        value = (0, _dateUtils.addYears)(new Date(year, 0), offset).getFullYear();\n        break;\n      case 'M':\n        actionName = 'setMonth';\n        value = (0, _dateUtils.addMonths)(new Date(year, month), offset).getMonth() + 1;\n        break;\n      case 'd':\n        actionName = 'setDay';\n        var prevDate = new Date(year, month, day);\n        value = (0, _dateUtils.addDays)(prevDate, offset).getDate();\n        if (offset > 0) {\n          value = (0, _dateUtils.isLastDayOfMonth)(prevDate) ? 1 : value;\n        } else {\n          value = prevDate.getDate() === 1 ? (0, _dateUtils.lastDayOfMonth)(prevDate).getDate() : value;\n        }\n        break;\n      case 'H':\n      case 'h':\n        actionName = 'setHour';\n        value = (0, _dateUtils.addHours)(new Date(year, month, day, hour), offset).getHours();\n        break;\n      case 'm':\n        actionName = 'setMinute';\n        value = (0, _dateUtils.addMinutes)(new Date(year, month, day, hour, minute), offset).getMinutes();\n        break;\n      case 's':\n        actionName = 'setSecond';\n        value = (0, _dateUtils.addSeconds)(new Date(year, month, day, hour, minute, second), offset).getSeconds();\n        break;\n      case 'a':\n        actionName = 'setHour';\n        value = hour >= 12 ? hour - 12 : hour + 12;\n        break;\n    }\n    if (actionName && value) {\n      dispatch({\n        type: actionName,\n        value: value\n      });\n      var field = _DateField.patternMap[pattern];\n      callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));\n    }\n  };\n  var setDateField = function setDateField(pattern, value, callback) {\n    var field = _DateField.patternMap[pattern];\n    var actionName = \"set\" + (0, _startCase.default)(field);\n    dispatch({\n      type: actionName,\n      value: value\n    });\n    callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));\n  };\n  var getDateField = function getDateField(pattern) {\n    var fieldName = _DateField.patternMap[pattern];\n    return {\n      name: fieldName,\n      value: dateField[fieldName]\n    };\n  };\n  var toControlledDateString = function toControlledDateString() {\n    if (date && (0, _dateUtils.isValid)(date)) {\n      return (0, _dateUtils.format)(date, formatStr, {\n        locale: locale\n      });\n    }\n    // if date is not valid, return uncontrolled date string\n    return toDateString();\n  };\n  (0, _react.useEffect)(function () {\n    if (isControlledDate) {\n      if (date && (0, _dateUtils.isValid)(date)) {\n        dispatch({\n          type: 'setNewDate',\n          value: date\n        });\n      } else if (date === null) {\n        dispatch({\n          type: 'setNewDate',\n          value: null\n        });\n      }\n    }\n  }, [date, dispatch, isControlledDate]);\n  return {\n    dateField: dateField,\n    setDateOffset: setDateOffset,\n    setDateField: setDateField,\n    getDateField: getDateField,\n    toDateString: isControlledDate ? toControlledDateString : toDateString,\n    isEmptyValue: isEmptyValue\n  };\n}\nvar _default = useDateInputState;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/hooks/useDateInputState.ts?");
 
 /***/ }),
 
-/***/ "./src/DateInput/useDateInputState.ts":
-/*!********************************************!*\
-  !*** ./src/DateInput/useDateInputState.ts ***!
-  \********************************************/
+/***/ "./src/DateInput/hooks/useFieldCursor.ts":
+/*!***********************************************!*\
+  !*** ./src/DateInput/hooks/useFieldCursor.ts ***!
+  \***********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useDateInputState = useDateInputState;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _startCase = _interopRequireDefault(__webpack_require__(/*! lodash/startCase */ \"./node_modules/lodash/startCase.js\"));\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _DateField = __webpack_require__(/*! ./DateField */ \"./src/DateInput/DateField.ts\");\nfunction useDateInputState(_ref) {\n  var formatStr = _ref.formatStr,\n    locale = _ref.locale,\n    date = _ref.date,\n    isControlledDate = _ref.isControlledDate;\n  var _useDateField = (0, _DateField.useDateField)(formatStr, locale.localize, date),\n    dateField = _useDateField.dateField,\n    dispatch = _useDateField.dispatch,\n    toDateString = _useDateField.toDateString,\n    toDate = _useDateField.toDate,\n    isEmptyValue = _useDateField.isEmptyValue;\n  var setDateOffset = function setDateOffset(pattern, offset, callback) {\n    var currentDate = new Date();\n    var year = dateField.year || currentDate.getFullYear();\n    var month = dateField.month ? dateField.month - 1 : currentDate.getMonth();\n    var day = dateField.day || 0;\n    var hour = dateField.hour || 0;\n    var minute = dateField.minute || 0;\n    var second = dateField.second || 0;\n    var actionName;\n    var value;\n    switch (pattern) {\n      case 'y':\n        actionName = 'setYear';\n        value = (0, _dateUtils.addYears)(new Date(year, 0), offset).getFullYear();\n        break;\n      case 'M':\n        actionName = 'setMonth';\n        value = (0, _dateUtils.addMonths)(new Date(year, month), offset).getMonth() + 1;\n        break;\n      case 'd':\n        actionName = 'setDay';\n        var prevDate = new Date(year, month, day);\n        value = (0, _dateUtils.addDays)(prevDate, offset).getDate();\n        if (offset > 0) {\n          value = (0, _dateUtils.isLastDayOfMonth)(prevDate) ? 1 : value;\n        } else {\n          value = prevDate.getDate() === 1 ? (0, _dateUtils.lastDayOfMonth)(prevDate).getDate() : value;\n        }\n        break;\n      case 'H':\n      case 'h':\n        actionName = 'setHour';\n        value = (0, _dateUtils.addHours)(new Date(year, month, day, hour), offset).getHours();\n        break;\n      case 'm':\n        actionName = 'setMinute';\n        value = (0, _dateUtils.addMinutes)(new Date(year, month, day, hour, minute), offset).getMinutes();\n        break;\n      case 's':\n        actionName = 'setSecond';\n        value = (0, _dateUtils.addSeconds)(new Date(year, month, day, hour, minute, second), offset).getSeconds();\n        break;\n      case 'a':\n        actionName = 'setHour';\n        value = hour >= 12 ? hour - 12 : hour + 12;\n        break;\n    }\n    if (actionName && value) {\n      dispatch({\n        type: actionName,\n        value: value\n      });\n      var field = _DateField.patternMap[pattern];\n      callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));\n    }\n  };\n  var setDateField = function setDateField(pattern, value, callback) {\n    var field = _DateField.patternMap[pattern];\n    var actionName = \"set\" + (0, _startCase.default)(field);\n    dispatch({\n      type: actionName,\n      value: value\n    });\n    callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));\n  };\n  var getDateField = function getDateField(pattern) {\n    var fieldName = _DateField.patternMap[pattern];\n    return {\n      name: fieldName,\n      value: dateField[fieldName]\n    };\n  };\n  var toControlledDateString = function toControlledDateString() {\n    if (date && (0, _dateUtils.isValid)(date)) {\n      return (0, _dateUtils.format)(date, formatStr, {\n        locale: locale\n      });\n    }\n    // if date is not valid, return uncontrolled date string\n    return toDateString();\n  };\n  (0, _react.useEffect)(function () {\n    if (isControlledDate) {\n      if (date && (0, _dateUtils.isValid)(date)) {\n        dispatch({\n          type: 'setNewDate',\n          value: date\n        });\n      } else if (date === null) {\n        dispatch({\n          type: 'setNewDate',\n          value: null\n        });\n      }\n    }\n  }, [date, dispatch, isControlledDate]);\n  return {\n    dateField: dateField,\n    setDateOffset: setDateOffset,\n    setDateField: setDateField,\n    getDateField: getDateField,\n    toDateString: isControlledDate ? toControlledDateString : toDateString,\n    isEmptyValue: isEmptyValue\n  };\n}\nvar _default = useDateInputState;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/useDateInputState.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useFieldCursor = useFieldCursor;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/DateInput/utils.ts\");\nvar _useUpdateEffect = _interopRequireDefault(__webpack_require__(/*! ../../utils/useUpdateEffect */ \"./src/utils/useUpdateEffect.ts\"));\nfunction useFieldCursor(format, value) {\n  var typeCount = (0, _react.useRef)(0);\n  var increment = function increment() {\n    typeCount.current += 1;\n  };\n  var reset = function reset() {\n    typeCount.current = 0;\n  };\n  var isMoveCursor = (0, _react.useCallback)(function (value, pattern) {\n    var patternGroup = (0, _utils.getPatternGroups)(format, pattern);\n    if (value.toString().length === patternGroup.length) {\n      return true;\n    } else if (pattern === 'y' && typeCount.current === 4) {\n      return true;\n    } else if (pattern !== 'y' && typeCount.current === 2) {\n      return true;\n    }\n    switch (pattern) {\n      case 'M':\n        return parseInt(value + \"0\") > 12;\n      case 'd':\n        return parseInt(value + \"0\") > 31;\n      case 'H':\n        return parseInt(value + \"0\") > 23;\n      case 'h':\n        return parseInt(value + \"0\") > 12;\n      case 'm':\n      case 's':\n        return parseInt(value + \"0\") > 59;\n      default:\n        return false;\n    }\n  }, [format]);\n  (0, _useUpdateEffect.default)(function () {\n    if (!value) {\n      reset();\n    }\n  }, [value]);\n  return {\n    increment: increment,\n    reset: reset,\n    isMoveCursor: isMoveCursor\n  };\n}\nvar _default = useFieldCursor;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/hooks/useFieldCursor.ts?");
 
 /***/ }),
 
-/***/ "./src/DateInput/useIsFocused.ts":
-/*!***************************************!*\
-  !*** ./src/DateInput/useIsFocused.ts ***!
-  \***************************************/
+/***/ "./src/DateInput/hooks/useIsFocused.ts":
+/*!*********************************************!*\
+  !*** ./src/DateInput/hooks/useIsFocused.ts ***!
+  \*********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.useIsFocused = useIsFocused;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nfunction useIsFocused(_ref) {\n  var onFocusProp = _ref.onFocus,\n    onBlurProp = _ref.onBlur;\n  var _useState = (0, _react.useState)(false),\n    isFocused = _useState[0],\n    setIsFocused = _useState[1];\n  var onFocus = (0, _react.useCallback)(function (event) {\n    setIsFocused(true);\n    onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);\n  }, [onFocusProp]);\n  var onBlur = (0, _react.useCallback)(function (event) {\n    setIsFocused(false);\n    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);\n  }, [onBlurProp]);\n  return [isFocused, {\n    onFocus: onFocus,\n    onBlur: onBlur\n  }];\n}\nvar _default = useIsFocused;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/useIsFocused.ts?");
+eval("\n\nexports.__esModule = true;\nexports.useIsFocused = useIsFocused;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nfunction useIsFocused(_ref) {\n  var onFocusProp = _ref.onFocus,\n    onBlurProp = _ref.onBlur;\n  var _useState = (0, _react.useState)(false),\n    isFocused = _useState[0],\n    setIsFocused = _useState[1];\n  var onFocus = (0, _react.useCallback)(function (event) {\n    setIsFocused(true);\n    onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);\n  }, [onFocusProp]);\n  var onBlur = (0, _react.useCallback)(function (event) {\n    setIsFocused(false);\n    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);\n  }, [onBlurProp]);\n  return [isFocused, {\n    onFocus: onFocus,\n    onBlur: onBlur\n  }];\n}\nvar _default = useIsFocused;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/hooks/useIsFocused.ts?");
 
 /***/ }),
 
-/***/ "./src/DateInput/useKeyboardInputEvent.ts":
-/*!************************************************!*\
-  !*** ./src/DateInput/useKeyboardInputEvent.ts ***!
-  \************************************************/
+/***/ "./src/DateInput/hooks/useKeyboardInputEvent.ts":
+/*!******************************************************!*\
+  !*** ./src/DateInput/hooks/useKeyboardInputEvent.ts ***!
+  \******************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.useKeyboardInputEvent = useKeyboardInputEvent;\nexports[\"default\"] = void 0;\nfunction useKeyboardInputEvent(_ref) {\n  var onSegmentChange = _ref.onSegmentChange,\n    onSegmentValueChange = _ref.onSegmentValueChange,\n    onSegmentValueChangeWithNumericKeys = _ref.onSegmentValueChangeWithNumericKeys,\n    onSegmentValueRemove = _ref.onSegmentValueRemove,\n    onKeyDown = _ref.onKeyDown;\n  return function (event) {\n    var _key$match, _key$match2;\n    var key = event.key;\n    switch (key) {\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        onSegmentChange === null || onSegmentChange === void 0 ? void 0 : onSegmentChange(event);\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        onSegmentValueChange === null || onSegmentValueChange === void 0 ? void 0 : onSegmentValueChange(event);\n        event.preventDefault();\n        break;\n      case 'Backspace':\n        onSegmentValueRemove === null || onSegmentValueRemove === void 0 ? void 0 : onSegmentValueRemove(event);\n        event.preventDefault();\n        break;\n      case (_key$match = key.match(/\\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:\n        // Allow numeric keys to be entered\n        onSegmentValueChangeWithNumericKeys === null || onSegmentValueChangeWithNumericKeys === void 0 ? void 0 : onSegmentValueChangeWithNumericKeys(event);\n        event.preventDefault();\n      case (_key$match2 = key.match(/[a-z]/)) === null || _key$match2 === void 0 ? void 0 : _key$match2[0]:\n        // Prevent letters from being entered\n        event.preventDefault();\n        break;\n    }\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  };\n}\nvar _default = useKeyboardInputEvent;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/useKeyboardInputEvent.ts?");
+eval("\n\nexports.__esModule = true;\nexports.useKeyboardInputEvent = useKeyboardInputEvent;\nexports[\"default\"] = void 0;\nfunction useKeyboardInputEvent(_ref) {\n  var onSegmentChange = _ref.onSegmentChange,\n    onSegmentValueChange = _ref.onSegmentValueChange,\n    onSegmentValueChangeWithNumericKeys = _ref.onSegmentValueChangeWithNumericKeys,\n    onSegmentValueRemove = _ref.onSegmentValueRemove,\n    onKeyDown = _ref.onKeyDown;\n  return function (event) {\n    var _key$match, _key$match2;\n    var key = event.key;\n    switch (key) {\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        onSegmentChange === null || onSegmentChange === void 0 ? void 0 : onSegmentChange(event);\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        onSegmentValueChange === null || onSegmentValueChange === void 0 ? void 0 : onSegmentValueChange(event);\n        event.preventDefault();\n        break;\n      case 'Backspace':\n        onSegmentValueRemove === null || onSegmentValueRemove === void 0 ? void 0 : onSegmentValueRemove(event);\n        event.preventDefault();\n        break;\n      case (_key$match = key.match(/\\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:\n        // Allow numeric keys to be entered\n        onSegmentValueChangeWithNumericKeys === null || onSegmentValueChangeWithNumericKeys === void 0 ? void 0 : onSegmentValueChangeWithNumericKeys(event);\n        event.preventDefault();\n      case (_key$match2 = key.match(/[a-z]/)) === null || _key$match2 === void 0 ? void 0 : _key$match2[0]:\n        // Prevent letters from being entered\n        event.preventDefault();\n        break;\n    }\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  };\n}\nvar _default = useKeyboardInputEvent;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/hooks/useKeyboardInputEvent.ts?");
+
+/***/ }),
+
+/***/ "./src/DateInput/hooks/useSelectedState.ts":
+/*!*************************************************!*\
+  !*** ./src/DateInput/hooks/useSelectedState.ts ***!
+  \*************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.useSelectedState = useSelectedState;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar defaultSelectedState = {\n  selectedPattern: 'y',\n  selectionStart: 0,\n  selectionEnd: 0\n};\nfunction useSelectedState() {\n  var _useState = (0, _react.useState)(defaultSelectedState),\n    selectedState = _useState[0],\n    setSelectedState = _useState[1];\n  return {\n    selectedState: selectedState,\n    setSelectedState: setSelectedState\n  };\n}\nvar _default = useSelectedState;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/hooks/useSelectedState.ts?");
+
+/***/ }),
+
+/***/ "./src/DateInput/index.tsx":
+/*!*********************************!*\
+  !*** ./src/DateInput/index.tsx ***!
+  \*********************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nvar _exportNames = {\n  useDateInputState: true,\n  useKeyboardInputEvent: true,\n  useIsFocused: true,\n  useSelectedState: true,\n  useFieldCursor: true\n};\nexports[\"default\"] = exports.useFieldCursor = exports.useSelectedState = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;\nvar _DateInput = _interopRequireDefault(__webpack_require__(/*! ./DateInput */ \"./src/DateInput/DateInput.tsx\"));\nvar _useDateInputState = __webpack_require__(/*! ./hooks/useDateInputState */ \"./src/DateInput/hooks/useDateInputState.ts\");\nexports.useDateInputState = _useDateInputState.useDateInputState;\nvar _useKeyboardInputEvent = __webpack_require__(/*! ./hooks/useKeyboardInputEvent */ \"./src/DateInput/hooks/useKeyboardInputEvent.ts\");\nexports.useKeyboardInputEvent = _useKeyboardInputEvent.useKeyboardInputEvent;\nvar _useIsFocused = __webpack_require__(/*! ./hooks/useIsFocused */ \"./src/DateInput/hooks/useIsFocused.ts\");\nexports.useIsFocused = _useIsFocused.useIsFocused;\nvar _useSelectedState = __webpack_require__(/*! ./hooks/useSelectedState */ \"./src/DateInput/hooks/useSelectedState.ts\");\nexports.useSelectedState = _useSelectedState.useSelectedState;\nvar _useFieldCursor = __webpack_require__(/*! ./hooks/useFieldCursor */ \"./src/DateInput/hooks/useFieldCursor.ts\");\nexports.useFieldCursor = _useFieldCursor.useFieldCursor;\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/DateInput/utils.ts\");\nObject.keys(_utils).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _utils[key]) return;\n  exports[key] = _utils[key];\n});\nvar _default = _DateInput.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/index.tsx?");
 
 /***/ }),
 
@@ -6879,7 +6901,7 @@ eval("\n\nexports.__esModule = true;\nexports.useKeyboardInputEvent = useKeyboar
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.getPatternGroups = getPatternGroups;\nexports.getSelectIndexGap = getSelectIndexGap;\nexports.getDatePattern = getDatePattern;\nexports.isCursorAfterMonth = isCursorAfterMonth;\nexports.getInputSelectedState = getInputSelectedState;\nexports.validateDateTime = validateDateTime;\nexports.modifyDate = modifyDate;\nexports.isFieldFullValue = isFieldFullValue;\nexports.useInputSelection = useInputSelection;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nfunction getPatternGroups(format, pattern) {\n  var _format$match;\n  return ((_format$match = format.match(new RegExp(\"(\" + pattern + \")+\"))) === null || _format$match === void 0 ? void 0 : _format$match[0]) || '';\n}\nfunction getSelectIndexGap(options) {\n  var pattern = options.pattern,\n    formatStr = options.formatStr,\n    valueOffset = options.valueOffset,\n    selectedMonth = options.selectedMonth,\n    localize = options.localize;\n  var gap = 0;\n  var monthIsAbbreviated = formatStr.includes('MMM');\n  var monthIsFull = formatStr.includes('MMMM');\n\n  // If the month is abbreviated or full, the gap needs to be adjusted.\n  if (monthIsAbbreviated || monthIsFull) {\n    var isSelectedMonth = pattern === 'M';\n\n    // If the selected is the month, and the valueOffset is null,\n    // it means that the delete key is pressed, and the default pattern is displayed, and the gap is 0 at this time.\n    if (isSelectedMonth && valueOffset === null) {\n      return 0;\n    }\n\n    // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.\n    if (selectedMonth === null && valueOffset === 0) {\n      return 0;\n    }\n    var month = selectedMonth ? selectedMonth + (isSelectedMonth ? valueOffset || 0 : 0) : 1;\n    if (month > 12) {\n      month = 1;\n    } else if (month === 0) {\n      month = 12;\n    }\n    var monthStr = localize === null || localize === void 0 ? void 0 : localize.month(month - 1, {\n      width: monthIsFull ? 'wide' : 'abbreviated'\n    });\n    gap = monthStr.length - (monthIsFull ? 4 : 3);\n  }\n  return gap;\n}\nfunction getDatePattern(options) {\n  var selectionIndex = options.selectionIndex,\n    _options$positionOffs = options.positionOffset,\n    positionOffset = _options$positionOffs === void 0 ? -1 : _options$positionOffs,\n    formatStr = options.formatStr,\n    dateString = options.dateString,\n    valueOffset = options.valueOffset,\n    selectedMonth = options.selectedMonth,\n    localize = options.localize;\n  var pattern = formatStr.charAt(selectionIndex || 0);\n  if (selectionIndex < 0 || selectionIndex > dateString.length - 1) {\n    pattern = formatStr.trim().charAt(0);\n    return pattern;\n  }\n  var gap = 0;\n  if (isCursorAfterMonth(selectionIndex, formatStr)) {\n    gap = getSelectIndexGap({\n      pattern: pattern,\n      formatStr: formatStr,\n      valueOffset: valueOffset,\n      selectedMonth: selectedMonth,\n      localize: localize\n    });\n  }\n  pattern = formatStr.charAt(selectionIndex - gap);\n\n  // If the pattern is not a letter, then get the pattern from the previous or next letter.\n  if (!pattern.match(/[y|d|M|H|h|m|s|a]/)) {\n    var nextIndex = selectionIndex + positionOffset;\n    pattern = getDatePattern((0, _extends2.default)({}, options, {\n      selectionIndex: nextIndex\n    }));\n  }\n  return pattern;\n}\n\n// Determine whether the cursor is after the month.\n// If the currently operated field is after the month, the selected field needs to be moved backward.\nfunction isCursorAfterMonth(cursorIndex, formatStr) {\n  return cursorIndex > formatStr.indexOf('M');\n}\nfunction getInputSelectedState(options) {\n  var input = options.input,\n    direction = options.direction,\n    formatStr = options.formatStr,\n    localize = options.localize,\n    selectedMonth = options.selectedMonth,\n    dateString = options.dateString,\n    _options$valueOffset = options.valueOffset,\n    valueOffset = _options$valueOffset === void 0 ? 0 : _options$valueOffset;\n  var getPatternSelectedIndexes = function getPatternSelectedIndexes(pattern) {\n    var selectionStart = formatStr.indexOf(pattern);\n    var selectionEnd = formatStr.lastIndexOf(pattern) + 1;\n    var gap = getSelectIndexGap({\n      pattern: pattern,\n      formatStr: formatStr,\n      valueOffset: valueOffset,\n      selectedMonth: selectedMonth,\n      localize: localize\n    });\n    var isSelectedMonth = pattern === 'M';\n    var isNullMonth = selectedMonth === null && !(isSelectedMonth && valueOffset !== 0);\n\n    // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.\n    if (isNullMonth) {\n      return {\n        selectionStart: selectionStart,\n        selectionEnd: selectionEnd\n      };\n    }\n    if (isSelectedMonth) {\n      return {\n        selectionStart: selectionStart,\n        selectionEnd: selectionEnd + gap\n      };\n    }\n    if (isCursorAfterMonth(selectionStart, formatStr)) {\n      return {\n        selectionStart: selectionStart + gap,\n        selectionEnd: selectionEnd + gap\n      };\n    }\n    return {\n      selectionStart: selectionStart,\n      selectionEnd: selectionEnd\n    };\n  };\n  if (typeof input.selectionEnd === 'number' && typeof input.selectionStart === 'number') {\n    var selectionIndex = input.selectionStart;\n    var positionOffset = -1;\n    if (direction === 'left') {\n      selectionIndex = input.selectionStart - 1;\n    } else if (direction === 'right') {\n      selectionIndex = input.selectionEnd + 1;\n      positionOffset = 1;\n    }\n    var datePattern = getDatePattern({\n      selectionIndex: selectionIndex,\n      positionOffset: positionOffset,\n      formatStr: formatStr,\n      dateString: dateString,\n      valueOffset: valueOffset,\n      selectedMonth: selectedMonth,\n      localize: localize\n    });\n    var indexes = getPatternSelectedIndexes(datePattern);\n    return (0, _extends2.default)({\n      selectedPattern: datePattern\n    }, indexes);\n  }\n  return {\n    selectedPattern: 'y',\n    selectionStart: 0,\n    selectionEnd: 0\n  };\n}\nfunction validateDateTime(type, value) {\n  switch (type) {\n    case 'year':\n      if (value < 1 || value > 9999) {\n        return false;\n      }\n      break;\n    case 'month':\n      if (value < 1 || value > 12) {\n        return false;\n      }\n      break;\n    case 'day':\n      if (value < 1 || value > 31) {\n        return false;\n      }\n      break;\n    case 'hour':\n      if (value < 0 || value > 23) {\n        return false;\n      }\n      break;\n    case 'minute':\n      if (value < 0 || value > 59) {\n        return false;\n      }\n      break;\n    case 'second':\n      if (value < 0 || value > 59) {\n        return false;\n      }\n      break;\n    default:\n      return false;\n    // Invalid type\n  }\n\n  return true;\n}\nfunction modifyDate(date, type, value) {\n  switch (type) {\n    case 'year':\n      return (0, _dateUtils.setYear)(date, value);\n    case 'month':\n      return (0, _dateUtils.setMonth)(date, value - 1);\n    case 'day':\n      return (0, _dateUtils.setDate)(date, value);\n    case 'hour':\n      return (0, _dateUtils.setHours)(date, value);\n    case 'minute':\n      return (0, _dateUtils.setMinutes)(date, value);\n    case 'second':\n      return (0, _dateUtils.setSeconds)(date, value);\n  }\n  return date;\n}\nfunction isFieldFullValue(formatStr, value, pattern) {\n  var patternGroup = getPatternGroups(formatStr, pattern);\n  if (value.toString().length === patternGroup.length) {\n    return true;\n  }\n  switch (pattern) {\n    case 'M':\n      return parseInt(value + \"0\") > 12;\n    case 'd':\n      return parseInt(value + \"0\") > 31;\n    case 'H':\n      return parseInt(value + \"0\") > 23;\n    case 'h':\n      return parseInt(value + \"0\") > 12;\n    case 'm':\n    case 's':\n      return parseInt(value + \"0\") > 59;\n    default:\n      return false;\n  }\n}\nvar isTestEnvironment = typeof process !== 'undefined' && undefined === 'test';\nfunction useInputSelection(input) {\n  return function setSelectionRange(selectionStart, selectionEnd) {\n    if (isTestEnvironment) {\n      (0, _utils.safeSetSelection)(input.current, selectionStart, selectionEnd);\n      return;\n    }\n    requestAnimationFrame(function () {\n      (0, _utils.safeSetSelection)(input.current, selectionStart, selectionEnd);\n    });\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/DateInput/utils.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.getPatternGroups = getPatternGroups;\nexports.getSelectIndexGap = getSelectIndexGap;\nexports.getDatePattern = getDatePattern;\nexports.isCursorAfterMonth = isCursorAfterMonth;\nexports.getInputSelectedState = getInputSelectedState;\nexports.validateDateTime = validateDateTime;\nexports.modifyDate = modifyDate;\nexports.useInputSelection = useInputSelection;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nfunction getPatternGroups(format, pattern) {\n  var _format$match;\n  return ((_format$match = format.match(new RegExp(\"(\" + pattern + \")+\"))) === null || _format$match === void 0 ? void 0 : _format$match[0]) || '';\n}\nfunction getSelectIndexGap(options) {\n  var pattern = options.pattern,\n    formatStr = options.formatStr,\n    valueOffset = options.valueOffset,\n    selectedMonth = options.selectedMonth,\n    localize = options.localize;\n  var gap = 0;\n  var monthIsAbbreviated = formatStr.includes('MMM');\n  var monthIsFull = formatStr.includes('MMMM');\n\n  // If the month is abbreviated or full, the gap needs to be adjusted.\n  if (monthIsAbbreviated || monthIsFull) {\n    var isSelectedMonth = pattern === 'M';\n\n    // If the selected is the month, and the valueOffset is null,\n    // it means that the delete key is pressed, and the default pattern is displayed, and the gap is 0 at this time.\n    if (isSelectedMonth && valueOffset === null) {\n      return 0;\n    }\n\n    // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.\n    if (selectedMonth === null && valueOffset === 0) {\n      return 0;\n    }\n    var month = selectedMonth ? selectedMonth + (isSelectedMonth ? valueOffset || 0 : 0) : 1;\n    if (month > 12) {\n      month = 1;\n    } else if (month === 0) {\n      month = 12;\n    }\n    var monthStr = localize === null || localize === void 0 ? void 0 : localize.month(month - 1, {\n      width: monthIsFull ? 'wide' : 'abbreviated'\n    });\n    gap = monthStr.length - (monthIsFull ? 4 : 3);\n  }\n  return gap;\n}\nfunction getDatePattern(options) {\n  var selectionIndex = options.selectionIndex,\n    _options$positionOffs = options.positionOffset,\n    positionOffset = _options$positionOffs === void 0 ? -1 : _options$positionOffs,\n    formatStr = options.formatStr,\n    dateString = options.dateString,\n    valueOffset = options.valueOffset,\n    selectedMonth = options.selectedMonth,\n    localize = options.localize;\n  var pattern = formatStr.charAt(selectionIndex || 0);\n  if (selectionIndex < 0 || selectionIndex > dateString.length - 1) {\n    pattern = formatStr.trim().charAt(0);\n    return pattern;\n  }\n  var gap = 0;\n  if (isCursorAfterMonth(selectionIndex, formatStr)) {\n    gap = getSelectIndexGap({\n      pattern: pattern,\n      formatStr: formatStr,\n      valueOffset: valueOffset,\n      selectedMonth: selectedMonth,\n      localize: localize\n    });\n  }\n  pattern = formatStr.charAt(selectionIndex - gap);\n\n  // If the pattern is not a letter, then get the pattern from the previous or next letter.\n  if (!pattern.match(/[y|d|M|H|h|m|s|a]/)) {\n    var nextIndex = selectionIndex + positionOffset;\n    pattern = getDatePattern((0, _extends2.default)({}, options, {\n      selectionIndex: nextIndex\n    }));\n  }\n  return pattern;\n}\n\n// Determine whether the cursor is after the month.\n// If the currently operated field is after the month, the selected field needs to be moved backward.\nfunction isCursorAfterMonth(cursorIndex, formatStr) {\n  return cursorIndex > formatStr.indexOf('M');\n}\nfunction getInputSelectedState(options) {\n  var input = options.input,\n    direction = options.direction,\n    formatStr = options.formatStr,\n    localize = options.localize,\n    selectedMonth = options.selectedMonth,\n    dateString = options.dateString,\n    _options$valueOffset = options.valueOffset,\n    valueOffset = _options$valueOffset === void 0 ? 0 : _options$valueOffset;\n  var getPatternSelectedIndexes = function getPatternSelectedIndexes(pattern) {\n    var selectionStart = formatStr.indexOf(pattern);\n    var selectionEnd = formatStr.lastIndexOf(pattern) + 1;\n    var gap = getSelectIndexGap({\n      pattern: pattern,\n      formatStr: formatStr,\n      valueOffset: valueOffset,\n      selectedMonth: selectedMonth,\n      localize: localize\n    });\n    var isSelectedMonth = pattern === 'M';\n    var isNullMonth = selectedMonth === null && !(isSelectedMonth && valueOffset !== 0);\n\n    // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.\n    if (isNullMonth) {\n      return {\n        selectionStart: selectionStart,\n        selectionEnd: selectionEnd\n      };\n    }\n    if (isSelectedMonth) {\n      return {\n        selectionStart: selectionStart,\n        selectionEnd: selectionEnd + gap\n      };\n    }\n    if (isCursorAfterMonth(selectionStart, formatStr)) {\n      return {\n        selectionStart: selectionStart + gap,\n        selectionEnd: selectionEnd + gap\n      };\n    }\n    return {\n      selectionStart: selectionStart,\n      selectionEnd: selectionEnd\n    };\n  };\n  if (typeof input.selectionEnd === 'number' && typeof input.selectionStart === 'number') {\n    var selectionIndex = input.selectionStart;\n    var positionOffset = -1;\n    if (direction === 'left') {\n      selectionIndex = input.selectionStart - 1;\n    } else if (direction === 'right') {\n      selectionIndex = input.selectionEnd + 1;\n      positionOffset = 1;\n    }\n    var datePattern = getDatePattern({\n      selectionIndex: selectionIndex,\n      positionOffset: positionOffset,\n      formatStr: formatStr,\n      dateString: dateString,\n      valueOffset: valueOffset,\n      selectedMonth: selectedMonth,\n      localize: localize\n    });\n    var indexes = getPatternSelectedIndexes(datePattern);\n    return (0, _extends2.default)({\n      selectedPattern: datePattern\n    }, indexes);\n  }\n  return {\n    selectedPattern: 'y',\n    selectionStart: 0,\n    selectionEnd: 0\n  };\n}\nfunction validateDateTime(type, value) {\n  switch (type) {\n    case 'year':\n      if (value < 1 || value > 9999) {\n        return false;\n      }\n      break;\n    case 'month':\n      if (value < 1 || value > 12) {\n        return false;\n      }\n      break;\n    case 'day':\n      if (value < 1 || value > 31) {\n        return false;\n      }\n      break;\n    case 'hour':\n      if (value < 0 || value > 23) {\n        return false;\n      }\n      break;\n    case 'minute':\n      if (value < 0 || value > 59) {\n        return false;\n      }\n      break;\n    case 'second':\n      if (value < 0 || value > 59) {\n        return false;\n      }\n      break;\n    default:\n      return false;\n    // Invalid type\n  }\n\n  return true;\n}\nfunction modifyDate(date, type, value) {\n  switch (type) {\n    case 'year':\n      return (0, _dateUtils.setYear)(date, value);\n    case 'month':\n      return (0, _dateUtils.setMonth)(date, value - 1);\n    case 'day':\n      return (0, _dateUtils.setDate)(date, value);\n    case 'hour':\n      return (0, _dateUtils.setHours)(date, value);\n    case 'minute':\n      return (0, _dateUtils.setMinutes)(date, value);\n    case 'second':\n      return (0, _dateUtils.setSeconds)(date, value);\n  }\n  return date;\n}\nfunction useInputSelection(input) {\n  return function setSelectionRange(selectionStart, selectionEnd) {\n    var isTest = input.current.dataset.test === 'true';\n    if (isTest) {\n      (0, _utils.safeSetSelection)(input.current, selectionStart, selectionEnd);\n      return;\n    }\n    requestAnimationFrame(function () {\n      (0, _utils.safeSetSelection)(input.current, selectionStart, selectionEnd);\n    });\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/DateInput/utils.ts?");
 
 /***/ }),
 
@@ -6967,7 +6989,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _DateInput = __webpack_require__(/*! ../DateInput */ \"./src/DateInput/index.tsx\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangeInput/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangeInput/DateRangeInput.tsx\",\n  _this = void 0;\n/**\n * The DateRangeInput component lets users select a date with the keyboard.\n * @version 5.59.0\n * @see https://rsuitejs.com/components/date-range-input/\n */\nvar DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'date-range-input' : _props$classPrefix,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    valueProp = props.value,\n    _props$defaultValue = props.defaultValue,\n    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,\n    placeholder = props.placeholder,\n    onChange = props.onChange,\n    onKeyDown = props.onKeyDown,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"className\", \"classPrefix\", \"character\", \"format\", \"value\", \"defaultValue\", \"placeholder\", \"onChange\", \"onKeyDown\", \"onBlur\", \"onFocus\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix());\n  var inputRef = (0, _react.useRef)();\n  var _useState = (0, _react.useState)({\n      selectedPattern: 'y',\n      selectionStart: 0,\n      selectionEnd: 0\n    }),\n    selectedState = _useState[0],\n    setSelectedState = _useState[1];\n  var _useCustom = (0, _utils.useCustom)('Calendar'),\n    locale = _useCustom.locale;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var dateLocale = locale.dateLocale;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useState2 = (0, _react.useState)(_utils2.DateType.Start),\n    dateType = _useState2[0],\n    setDateType = _useState2[1];\n  var dateInputOptions = {\n    formatStr: formatStr,\n    locale: dateLocale,\n    isControlledDate: isControlled\n  };\n  var startDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {\n    date: (value === null || value === void 0 ? void 0 : value[0]) || null\n  }));\n  var endDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {\n    date: (value === null || value === void 0 ? void 0 : value[1]) || null\n  }));\n  var getActiveState = function getActiveState(type) {\n    if (type === void 0) {\n      type = dateType;\n    }\n    return type === _utils2.DateType.Start ? startDateState : endDateState;\n  };\n  var _useIsFocused = (0, _DateInput.useIsFocused)({\n      onBlur: onBlur,\n      onFocus: onFocus\n    }),\n    focused = _useIsFocused[0],\n    focusEventProps = _useIsFocused[1];\n  var renderedValue = (0, _react.useMemo)(function () {\n    var dateString = startDateState.toDateString() + character + endDateState.toDateString();\n    if (!startDateState.isEmptyValue() || !endDateState.isEmptyValue()) {\n      return dateString;\n    }\n    return !focused ? '' : dateString;\n  }, [character, endDateState, focused, startDateState]);\n  var keyPressOptions = {\n    formatStr: formatStr,\n    rangeFormatStr: rangeFormatStr,\n    localize: dateLocale.localize,\n    selectedMonth: getActiveState().dateField.month,\n    dateString: renderedValue,\n    dateType: dateType,\n    character: character\n  };\n  var setSelectionRange = (0, _DateInput.useInputSelection)(inputRef);\n  var handleChange = (0, _utils.useEventCallback)(function (date, event) {\n    var nextValue = dateType === _utils2.DateType.Start ? [date, value === null || value === void 0 ? void 0 : value[1]] : [value === null || value === void 0 ? void 0 : value[0], date];\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    setValue(nextValue);\n  });\n  var onSegmentChange = (0, _utils.useEventCallback)(function (event, nextDirection) {\n    var input = event.target;\n    var key = event.key;\n    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');\n    if (input.selectionEnd === null || input.selectionStart === null) {\n      return;\n    }\n    var cursorIndex = direction === 'right' ? input.selectionEnd : input.selectionStart;\n    var nextDateType = dateType;\n    if ((0, _utils2.isSwitchDateType)(renderedValue, character, cursorIndex, direction)) {\n      nextDateType = dateType === _utils2.DateType.Start ? _utils2.DateType.End : _utils2.DateType.Start;\n      setDateType(nextDateType);\n    }\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      dateType: nextDateType,\n      selectedMonth: getActiveState(nextDateType).dateField.month,\n      input: input,\n      direction: direction\n    }));\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n    setSelectedState(state);\n  });\n  var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var key = event.key;\n    var offset = key === 'ArrowUp' ? 1 : -1;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      valueOffset: offset\n    }));\n    setSelectedState(state);\n    getActiveState().setDateOffset(state.selectedPattern, offset, function (date) {\n      return handleChange(date, event);\n    });\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  });\n  var onSegmentValueChangeWithNumericKeys = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var key = event.key;\n    var pattern = selectedState.selectedPattern;\n    if (!pattern) {\n      return;\n    }\n    var field = getActiveState().getDateField(pattern);\n    var value = parseInt(key, 10);\n    var padValue = parseInt(\"\" + (field.value || '') + key, 10);\n    var newValue = value;\n\n    // Check if the value entered by the user is a valid date\n    if ((0, _DateInput.validateDateTime)(field.name, padValue)) {\n      newValue = padValue;\n    }\n    if (pattern === 'M') {\n      // Month cannot be less than 1.\n      newValue = Math.max(1, newValue);\n    }\n    getActiveState().setDateField(pattern, newValue, function (date) {\n      return handleChange(date, event);\n    });\n\n    // The currently selected month will be retained as a parameter of getInputSelectedState,\n    // but if the user enters a month, the month value will be replaced with the value entered by the user.\n    var selectedMonth = pattern === 'M' ? newValue : getActiveState().dateField.month;\n    var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      selectedMonth: selectedMonth\n    }));\n    setSelectedState(nextState);\n    setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n\n    // If the field is full value, move the cursor to the next field\n    if ((0, _DateInput.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {\n      onSegmentChange(event, 'right');\n    }\n  });\n  var onSegmentValueRemove = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    if (selectedState.selectedPattern) {\n      var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n        input: input,\n        valueOffset: null\n      }));\n      setSelectedState(nextState);\n      setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n      getActiveState().setDateField(selectedState.selectedPattern, null, function (date) {\n        return handleChange(date, event);\n      });\n    }\n  });\n  var handleClick = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    if (input.selectionStart === null) {\n      return;\n    }\n    var cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;\n    var dateType = (0, _utils2.getDateType)(renderedValue, character, cursorIndex);\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      dateType: dateType,\n      selectedMonth: getActiveState(dateType).dateField.month,\n      input: input\n    }));\n    setDateType(dateType);\n    setSelectedState(state);\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  });\n  var onKeyboardInput = (0, _DateInput.useKeyboardInputEvent)({\n    onSegmentChange: onSegmentChange,\n    onSegmentValueChange: onSegmentValueChange,\n    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,\n    onSegmentValueRemove: onSegmentValueRemove,\n    onKeyDown: onKeyDown\n  });\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    inputMode: focused ? 'numeric' : 'text',\n    autoComplete: \"off\",\n    autoCorrect: \"off\",\n    spellCheck: false,\n    className: classes,\n    ref: (0, _utils.mergeRefs)(inputRef, ref),\n    onKeyDown: onKeyboardInput,\n    onClick: handleClick,\n    value: renderedValue,\n    placeholder: placeholder || rangeFormatStr\n  }, focusEventProps, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 264,\n      columnNumber: 5\n    }\n  }));\n});\nDateRangeInput.displayName = 'DateRangeInput';\nDateRangeInput.propTypes = {\n  character: _propTypes.default.string,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  format: _propTypes.default.string,\n  placeholder: _propTypes.default.string,\n  onChange: _propTypes.default.func,\n  onKeyDown: _propTypes.default.func,\n  onFocus: _propTypes.default.func,\n  onBlur: _propTypes.default.func\n};\nvar _default = DateRangeInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangeInput/DateRangeInput.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _DateInput = __webpack_require__(/*! ../DateInput */ \"./src/DateInput/index.tsx\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangeInput/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangeInput/DateRangeInput.tsx\",\n  _this = void 0;\n/**\n * The DateRangeInput component lets users select a date with the keyboard.\n * @version 5.59.0\n * @see https://rsuitejs.com/components/date-range-input/\n */\nvar DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'date-range-input' : _props$classPrefix,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    valueProp = props.value,\n    _props$defaultValue = props.defaultValue,\n    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,\n    placeholder = props.placeholder,\n    onChange = props.onChange,\n    onKeyDown = props.onKeyDown,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"className\", \"classPrefix\", \"character\", \"format\", \"value\", \"defaultValue\", \"placeholder\", \"onChange\", \"onKeyDown\", \"onBlur\", \"onFocus\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix());\n  var inputRef = (0, _react.useRef)();\n  var _useSelectedState = (0, _DateInput.useSelectedState)(),\n    selectedState = _useSelectedState.selectedState,\n    setSelectedState = _useSelectedState.setSelectedState;\n  var _useCustom = (0, _utils.useCustom)('Calendar'),\n    locale = _useCustom.locale;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var dateLocale = locale.dateLocale;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useState = (0, _react.useState)(_utils2.DateType.Start),\n    dateType = _useState[0],\n    setDateType = _useState[1];\n  var dateInputOptions = {\n    formatStr: formatStr,\n    locale: dateLocale,\n    isControlledDate: isControlled\n  };\n  var startDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {\n    date: (value === null || value === void 0 ? void 0 : value[0]) || null\n  }));\n  var endDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {\n    date: (value === null || value === void 0 ? void 0 : value[1]) || null\n  }));\n  var _useFieldCursor = (0, _DateInput.useFieldCursor)(formatStr, valueProp),\n    isMoveCursor = _useFieldCursor.isMoveCursor,\n    increment = _useFieldCursor.increment,\n    reset = _useFieldCursor.reset;\n  var getActiveState = function getActiveState(type) {\n    if (type === void 0) {\n      type = dateType;\n    }\n    return type === _utils2.DateType.Start ? startDateState : endDateState;\n  };\n  var _useIsFocused = (0, _DateInput.useIsFocused)({\n      onBlur: onBlur,\n      onFocus: onFocus\n    }),\n    focused = _useIsFocused[0],\n    focusEventProps = _useIsFocused[1];\n  var renderedValue = (0, _react.useMemo)(function () {\n    var dateString = startDateState.toDateString() + character + endDateState.toDateString();\n    if (!startDateState.isEmptyValue() || !endDateState.isEmptyValue()) {\n      return dateString;\n    }\n    return !focused ? '' : dateString;\n  }, [character, endDateState, focused, startDateState]);\n  var keyPressOptions = {\n    formatStr: formatStr,\n    rangeFormatStr: rangeFormatStr,\n    localize: dateLocale.localize,\n    selectedMonth: getActiveState().dateField.month,\n    dateString: renderedValue,\n    dateType: dateType,\n    character: character\n  };\n  var setSelectionRange = (0, _DateInput.useInputSelection)(inputRef);\n  var handleChange = (0, _utils.useEventCallback)(function (date, event) {\n    var nextValue = dateType === _utils2.DateType.Start ? [date, value === null || value === void 0 ? void 0 : value[1]] : [value === null || value === void 0 ? void 0 : value[0], date];\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    setValue(nextValue);\n  });\n  var onSegmentChange = (0, _utils.useEventCallback)(function (event, nextDirection) {\n    var input = event.target;\n    var key = event.key;\n    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');\n    if (input.selectionEnd === null || input.selectionStart === null) {\n      return;\n    }\n    var cursorIndex = direction === 'right' ? input.selectionEnd : input.selectionStart;\n    var nextDateType = dateType;\n    if ((0, _utils2.isSwitchDateType)(renderedValue, character, cursorIndex, direction)) {\n      nextDateType = dateType === _utils2.DateType.Start ? _utils2.DateType.End : _utils2.DateType.Start;\n      setDateType(nextDateType);\n    }\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      dateType: nextDateType,\n      selectedMonth: getActiveState(nextDateType).dateField.month,\n      input: input,\n      direction: direction\n    }));\n    setSelectedState(state);\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n    reset();\n  });\n  var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var key = event.key;\n    var offset = key === 'ArrowUp' ? 1 : -1;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      valueOffset: offset\n    }));\n    setSelectedState(state);\n    getActiveState().setDateOffset(state.selectedPattern, offset, function (date) {\n      return handleChange(date, event);\n    });\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  });\n  var onSegmentValueChangeWithNumericKeys = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    var key = event.key;\n    var pattern = selectedState.selectedPattern;\n    if (!pattern) {\n      return;\n    }\n    increment();\n    var field = getActiveState().getDateField(pattern);\n    var value = parseInt(key, 10);\n    var padValue = parseInt(\"\" + (field.value || '') + key, 10);\n    var newValue = value;\n\n    // Check if the value entered by the user is a valid date\n    if ((0, _DateInput.validateDateTime)(field.name, padValue)) {\n      newValue = padValue;\n    }\n    getActiveState().setDateField(pattern, newValue, function (date) {\n      return handleChange(date, event);\n    });\n\n    // The currently selected month will be retained as a parameter of getInputSelectedState,\n    // but if the user enters a month, the month value will be replaced with the value entered by the user.\n    var selectedMonth = pattern === 'M' ? newValue : getActiveState().dateField.month;\n    var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      selectedMonth: selectedMonth\n    }));\n    setSelectedState(nextState);\n    setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n\n    // If the field is full value, move the cursor to the next field\n    if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {\n      onSegmentChange(event, 'right');\n    }\n  });\n  var onSegmentValueRemove = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    if (selectedState.selectedPattern) {\n      var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n        input: input,\n        valueOffset: null\n      }));\n      setSelectedState(nextState);\n      setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n      getActiveState().setDateField(selectedState.selectedPattern, null, function (date) {\n        return handleChange(date, event);\n      });\n      reset();\n    }\n  });\n  var handleClick = (0, _utils.useEventCallback)(function (event) {\n    var input = event.target;\n    if (input.selectionStart === null) {\n      return;\n    }\n    var cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;\n    var dateType = (0, _utils2.getDateType)(renderedValue || rangeFormatStr, character, cursorIndex);\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      dateType: dateType,\n      selectedMonth: getActiveState(dateType).dateField.month,\n      input: input\n    }));\n    setDateType(dateType);\n    setSelectedState(state);\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  });\n  var onKeyboardInput = (0, _DateInput.useKeyboardInputEvent)({\n    onSegmentChange: onSegmentChange,\n    onSegmentValueChange: onSegmentValueChange,\n    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,\n    onSegmentValueRemove: onSegmentValueRemove,\n    onKeyDown: onKeyDown\n  });\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    inputMode: focused ? 'numeric' : 'text',\n    autoComplete: \"off\",\n    autoCorrect: \"off\",\n    spellCheck: false,\n    className: classes,\n    ref: (0, _utils.mergeRefs)(inputRef, ref),\n    onKeyDown: onKeyboardInput,\n    onClick: handleClick,\n    value: renderedValue,\n    placeholder: placeholder || rangeFormatStr\n  }, focusEventProps, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 257,\n      columnNumber: 5\n    }\n  }));\n});\nDateRangeInput.displayName = 'DateRangeInput';\nDateRangeInput.propTypes = {\n  character: _propTypes.default.string,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  format: _propTypes.default.string,\n  placeholder: _propTypes.default.string,\n  onChange: _propTypes.default.func,\n  onKeyDown: _propTypes.default.func,\n  onFocus: _propTypes.default.func,\n  onBlur: _propTypes.default.func\n};\nvar _default = DateRangeInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangeInput/DateRangeInput.tsx?");
 
 /***/ }),
 
@@ -7011,7 +7033,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _DateRangePickerContext = _interopRequireDefault(__webpack_require__(/*! ./DateRangePickerContext */ \"./src/DateRangePicker/DateRangePickerContext.ts\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _Header = _interopRequireDefault(__webpack_require__(/*! ./Header */ \"./src/DateRangePicker/Header.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    className = props.className,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    defaultCalendarValue = props.defaultCalendarValue,\n    defaultValue = props.defaultValue,\n    plaintext = props.plaintext,\n    disabled = props.disabled,\n    DEPRECATED_disabledDateProp = props.disabledDate,\n    shouldDisableDate = props.shouldDisableDate,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    hoverRange = props.hoverRange,\n    idProp = props.id,\n    _props$isoWeek = props.isoWeek,\n    isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    ranges = props.ranges,\n    readOnly = props.readOnly,\n    _props$showOneCalenda = props.showOneCalendar,\n    showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n    showWeekNumbers = props.showWeekNumbers,\n    showMeridian = props.showMeridian,\n    _props$showHeader = props.showHeader,\n    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    valueProp = props.value,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onOk = props.onOk,\n    onSelect = props.onSelect,\n    onShortcutClick = props.onShortcutClick,\n    renderTitle = props.renderTitle,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"plaintext\", \"disabled\", \"disabledDate\", \"shouldDisableDate\", \"format\", \"hoverRange\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"readOnly\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"showHeader\", \"style\", \"size\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onSelect\", \"onShortcutClick\", \"renderTitle\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  var _useState = (0, _react.useState)(true),\n    isSelectedIdle = _useState[0],\n    setSelectedIdle = _useState[1];\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n    selectedDates = _useState2[0],\n    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  var _useState3 = (0, _react.useState)(null),\n    hoverDateRange = _useState3[0],\n    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.\n  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({\n      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n    })),\n    calendarDate = _useState4[0],\n    setCalendarDate = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  var selectRangeValueRef = (0, _react.useRef)(null);\n  var _useState5 = (0, _react.useState)(),\n    activeCalendarKey = _useState5[0],\n    setActiveCalendarKey = _useState5[1];\n  /**\n   * Get the time on the calendar.\n   */\n  var getCalendarDatetime = function getCalendarDatetime(calendarKey) {\n    var index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  var setCalendarDateRange = function setCalendarDateRange(_ref3) {\n    var dateRange = _ref3.dateRange,\n      calendarKey = _ref3.calendarKey,\n      eventName = _ref3.eventName;\n    var nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {\n      var _startDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      var _endDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]\n      });\n      nextValue = [_startDate, _endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey,\n      allowAameMonth: onlyShowMonth\n    });\n    setCalendarDate(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n\n  // if valueProp changed then update selectValue/hoverValue\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  var getInputHtmlSize = function getInputHtmlSize() {\n    var padding = 4;\n    var strings = rangeFormatStr;\n    if (value) {\n      var _startDate2 = value[0],\n        _endDate2 = value[1];\n      strings = \"\" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);\n    }\n    return (0, _utils.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  var getHoverRangeValue = function getHoverRangeValue(date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    var hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  var onMouseMove = (0, _utils.useEventCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {\n        nextSelectDates = [(0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    setSelectedDates(nextSelectDates);\n    setCalendarDateRange({\n      dateRange: nextSelectDates,\n      calendarKey: calendarKey,\n      eventName: 'changeDate'\n    });\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var onChangeCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  var onChangeCalendarTime = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _dateUtils.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var onToggleMeridian = (0, _utils.useEventCallback)(function (index) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);\n    setCalendarDate(nextCalendarDate);\n\n    // If the value already exists, update the value again.\n    if (selectedDates.length === 2) {\n      var nextSelectedDates = Array.from(selectedDates);\n      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);\n      setSelectedDates(nextSelectedDates);\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    var nextCalendarDate;\n    if (value && value.length) {\n      var _startDate3 = value[0],\n        endData = value[1];\n      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    var value = range.value;\n    setCalendarDateRange({\n      dateRange: value,\n      eventName: 'shortcutSelection'\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    setDateRange(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!value) {\n      return;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    var selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue);\n  });\n  var isDateDisabled = function isDateDisabled(date, options) {\n    var selectDate = options.selectDate,\n      selectedDone = options.selectedDone,\n      target = options.target;\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date, selectDate, selectedDone, target);\n    }\n    if (typeof DEPRECATED_disabledDateProp === 'function') {\n      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);\n    }\n    return false;\n  };\n  var disableByBetween = function disableByBetween(start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {\n      if (isDateDisabled(start, {\n        selectDate: selectedDates,\n        selectedDone: isSelectedIdle,\n        target: type\n      })) {\n        return true;\n      }\n      start = (0, _dateUtils.addDays)(start, 1);\n    }\n    return false;\n  };\n  var disableOkButton = function disableOkButton() {\n    var start = selectedDates[0],\n      end = selectedDates[1];\n    if (!start || !end || !isSelectedIdle) {\n      return true;\n    }\n    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  };\n  var disableShortcut = function disableShortcut(value) {\n    if (value === void 0) {\n      value = [];\n    }\n    var _value = value,\n      start = _value[0],\n      end = _value[1];\n    if (!start || !end) {\n      return true;\n    }\n    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref4.open;\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('popup-daterange'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    var panelStyles = {\n      minWidth: showOneCalendar ? 'auto' : 528\n    };\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var disabledDate = function disabledDate(date, values, type) {\n      return isDateDisabled(date, {\n        selectDate: values,\n        selectedDone: isSelectedIdle,\n        target: type\n      });\n    };\n    var calendarProps = {\n      locale: locale,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      showMeridian: showMeridian,\n      calendarDate: calendarDate,\n      limitStartYear: limitStartYear,\n      showWeekNumbers: showWeekNumbers,\n      format: formatStr,\n      value: selectedDates,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      onSelect: handleSelectDate,\n      onChangeCalendarMonth: onChangeCalendarMonth,\n      onChangeCalendarTime: onChangeCalendarTime,\n      onToggleMeridian: onToggleMeridian,\n      onMouseMove: onMouseMove,\n      disabledDate: disabledDate,\n      renderTitle: renderTitle\n    };\n    var getCalendars = function getCalendars() {\n      if (showOneCalendar) {\n        return /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n          index: activeCalendarKey === 'end' ? 1 : 0\n        }, calendarProps, {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 773,\n            columnNumber: 16\n          }\n        }));\n      }\n      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 0\n      }, calendarProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 778,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 1\n      }, calendarProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 779,\n          columnNumber: 11\n        }\n      })));\n    };\n    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n    })) || [];\n    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 790,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 799,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 800,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disableShortcut: disableShortcut,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 802,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 815,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 816,\n        columnNumber: 15\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(_Header.default, {\n      value: isSelectedIdle ? selectedDates : hoverDateRange,\n      formatStr: formatStr,\n      character: character,\n      clickable: showOneCalendar,\n      activeKey: activeCalendarKey,\n      onSelect: setActiveCalendarKey,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 818,\n        columnNumber: 19\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 828,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {\n      value: {\n        isSelectedIdle: isSelectedIdle\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 831,\n        columnNumber: 19\n      }\n    }, getCalendars()))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disableOkBtn: disableOkButton,\n      disableShortcut: disableShortcut,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 836,\n        columnNumber: 15\n      }\n    })))));\n  };\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'daterange',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var isErrorValue = function isErrorValue(value) {\n    if (!value) {\n      return false;\n    }\n\n    // If the value is an empty array, it is not an error value.\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _dateUtils.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    var disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _utils.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    ref: trigger,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExited: onExited,\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 908,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 918,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 924,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 926,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 935,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    onChange: handleInputChange,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    onKeyDown: handleInputKeyDown,\n    htmlSize: getInputHtmlSize(),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 938,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 956,\n      columnNumber: 13\n    }\n  }))));\n});\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _DateRangePickerContext = _interopRequireDefault(__webpack_require__(/*! ./DateRangePickerContext */ \"./src/DateRangePicker/DateRangePickerContext.ts\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _Header = _interopRequireDefault(__webpack_require__(/*! ./Header */ \"./src/DateRangePicker/Header.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    className = props.className,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    defaultCalendarValue = props.defaultCalendarValue,\n    defaultValue = props.defaultValue,\n    plaintext = props.plaintext,\n    disabled = props.disabled,\n    DEPRECATED_disabledDateProp = props.disabledDate,\n    shouldDisableDate = props.shouldDisableDate,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    hoverRange = props.hoverRange,\n    idProp = props.id,\n    _props$isoWeek = props.isoWeek,\n    isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    ranges = props.ranges,\n    readOnly = props.readOnly,\n    _props$showOneCalenda = props.showOneCalendar,\n    showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n    showWeekNumbers = props.showWeekNumbers,\n    showMeridian = props.showMeridian,\n    _props$showHeader = props.showHeader,\n    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    valueProp = props.value,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onOk = props.onOk,\n    onSelect = props.onSelect,\n    onShortcutClick = props.onShortcutClick,\n    renderTitle = props.renderTitle,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"plaintext\", \"disabled\", \"disabledDate\", \"shouldDisableDate\", \"format\", \"hoverRange\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"readOnly\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"showHeader\", \"style\", \"size\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onSelect\", \"onShortcutClick\", \"renderTitle\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate; // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0\n  var calendarGap = showOneCalendar ? 0 : 1;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  var _useState = (0, _react.useState)(true),\n    isSelectedIdle = _useState[0],\n    setSelectedIdle = _useState[1];\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n    selectedDates = _useState2[0],\n    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  var _useState3 = (0, _react.useState)(value),\n    hoverDateRange = _useState3[0],\n    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.\n  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({\n      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n    })),\n    calendarDate = _useState4[0],\n    setCalendarDate = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  var selectRangeValueRef = (0, _react.useRef)(null);\n  var _useState5 = (0, _react.useState)(),\n    activeCalendarKey = _useState5[0],\n    setActiveCalendarKey = _useState5[1];\n  /**\n   * Get the time on the calendar.\n   */\n  var getCalendarDatetime = function getCalendarDatetime(calendarKey) {\n    var index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  var setCalendarDateRange = function setCalendarDateRange(_ref3) {\n    var dateRange = _ref3.dateRange,\n      calendarKey = _ref3.calendarKey,\n      eventName = _ref3.eventName;\n    var nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {\n      var _startDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      var _endDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, calendarGap) : dateRange[1]\n      });\n      nextValue = [_startDate, _endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey,\n      // When only the month is displayed and only one calendar is displayed,\n      // there is no need to add a month and two calendar panels are allowed to display the same month\n      allowSameMonth: onlyShowMonth || showOneCalendar\n    });\n    setCalendarDate(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n\n  // if valueProp changed then update selectValue/hoverValue\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  var getInputHtmlSize = function getInputHtmlSize() {\n    var padding = 4;\n    var strings = rangeFormatStr;\n    if (value) {\n      var _startDate2 = value[0],\n        _endDate2 = value[1];\n      strings = \"\" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);\n    }\n    return (0, _utils.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  var getHoverRangeValue = function getHoverRangeValue(date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    var hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  var onMouseMove = (0, _utils.useEventCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {\n        nextSelectDates = [(0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    if (isSelectedIdle) {\n      setActiveCalendarKey('end');\n    } else {\n      setActiveCalendarKey('start');\n    }\n    setSelectedDates(nextSelectDates);\n    setCalendarDateRange({\n      dateRange: nextSelectDates,\n      calendarKey: calendarKey,\n      eventName: 'changeDate'\n    });\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var onChangeCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  var onChangeCalendarTime = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _dateUtils.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var onToggleMeridian = (0, _utils.useEventCallback)(function (index) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);\n    setCalendarDate(nextCalendarDate);\n\n    // If the value already exists, update the value again.\n    if (selectedDates.length === 2) {\n      var nextSelectedDates = Array.from(selectedDates);\n      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);\n      setSelectedDates(nextSelectedDates);\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    var nextCalendarDate;\n    if (value && value.length) {\n      var _startDate3 = value[0],\n        endData = value[1];\n      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, calendarGap) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    var value = range.value;\n    setCalendarDateRange({\n      dateRange: value,\n      eventName: 'shortcutSelection'\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    setDateRange(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!value) {\n      return;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    var selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue);\n  });\n  var isDateDisabled = function isDateDisabled(date, options) {\n    var selectDate = options.selectDate,\n      selectedDone = options.selectedDone,\n      target = options.target;\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date, selectDate, selectedDone, target);\n    }\n    if (typeof DEPRECATED_disabledDateProp === 'function') {\n      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);\n    }\n    return false;\n  };\n  var disableByBetween = function disableByBetween(start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {\n      if (isDateDisabled(start, {\n        selectDate: selectedDates,\n        selectedDone: isSelectedIdle,\n        target: type\n      })) {\n        return true;\n      }\n      start = (0, _dateUtils.addDays)(start, 1);\n    }\n    return false;\n  };\n  var disableOkButton = function disableOkButton() {\n    var start = selectedDates[0],\n      end = selectedDates[1];\n    if (!start || !end || !isSelectedIdle) {\n      return true;\n    }\n    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  };\n  var disableShortcut = function disableShortcut(value) {\n    if (value === void 0) {\n      value = [];\n    }\n    var _value = value,\n      start = _value[0],\n      end = _value[1];\n    if (!start || !end) {\n      return true;\n    }\n    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref4.open;\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('popup-daterange'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    var panelStyles = {\n      minWidth: showOneCalendar ? 'auto' : 528\n    };\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var disabledDate = function disabledDate(date, values, type) {\n      return isDateDisabled(date, {\n        selectDate: values,\n        selectedDone: isSelectedIdle,\n        target: type\n      });\n    };\n    var calendarProps = {\n      locale: locale,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      showMeridian: showMeridian,\n      calendarDate: calendarDate,\n      limitStartYear: limitStartYear,\n      showWeekNumbers: showWeekNumbers,\n      format: formatStr,\n      value: selectedDates,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      onSelect: handleSelectDate,\n      onChangeCalendarMonth: onChangeCalendarMonth,\n      onChangeCalendarTime: onChangeCalendarTime,\n      onToggleMeridian: onToggleMeridian,\n      onMouseMove: onMouseMove,\n      disabledDate: disabledDate,\n      renderTitle: renderTitle\n    };\n    var getCalendars = function getCalendars() {\n      if (showOneCalendar) {\n        return /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n          index: activeCalendarKey === 'end' ? 1 : 0\n        }, calendarProps, {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 785,\n            columnNumber: 16\n          }\n        }));\n      }\n      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 0\n      }, calendarProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 790,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 1\n      }, calendarProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 791,\n          columnNumber: 11\n        }\n      })));\n    };\n    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n    })) || [];\n    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 802,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 811,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 812,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disableShortcut: disableShortcut,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 814,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 827,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 828,\n        columnNumber: 15\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(_Header.default, {\n      value: isSelectedIdle ? selectedDates : hoverDateRange,\n      formatStr: formatStr,\n      character: character,\n      clickable: showOneCalendar,\n      activeKey: activeCalendarKey,\n      onSelect: setActiveCalendarKey,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 830,\n        columnNumber: 19\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 840,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {\n      value: {\n        isSelectedIdle: isSelectedIdle\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 843,\n        columnNumber: 19\n      }\n    }, getCalendars()))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disableOkBtn: disableOkButton,\n      disableShortcut: disableShortcut,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 848,\n        columnNumber: 15\n      }\n    })))));\n  };\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'daterange',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var isErrorValue = function isErrorValue(value) {\n    if (!value) {\n      return false;\n    }\n\n    // If the value is an empty array, it is not an error value.\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _dateUtils.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    var disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _utils.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    ref: trigger,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExited: onExited,\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 920,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 930,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 936,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 938,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 947,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    htmlSize: getInputHtmlSize(),\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 950,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 968,\n      columnNumber: 13\n    }\n  }))));\n});\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
 
 /***/ }),
 
@@ -7066,7 +7088,7 @@ eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/h
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.getSafeCalendarDate = getSafeCalendarDate;\nexports.getWeekHoverRange = exports.getMonthHoverRange = exports.isSameRange = void 0;\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nfunction getSafeCalendarDate(_ref) {\n  var _value;\n  var value = _ref.value,\n    _ref$calendarKey = _ref.calendarKey,\n    calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,\n    allowAameMonth = _ref.allowAameMonth;\n  // Update calendarDate if the value is not null\n  value = (_value = value) !== null && _value !== void 0 ? _value : [];\n  var gap = allowAameMonth ? 0 : 1;\n  if (value[0] && value[1]) {\n    var diffMonth = (0, _dateUtils.differenceInCalendarMonths)(value[1], value[0]);\n    if (calendarKey === 'start') {\n      return [value[0], diffMonth <= 0 ? (0, _dateUtils.copyTime)({\n        from: value[1],\n        to: (0, _dateUtils.addMonths)(value[0], gap)\n      }) : value[1]];\n    } else if (calendarKey === 'end') {\n      return [diffMonth <= 0 ? (0, _dateUtils.copyTime)({\n        from: value[0],\n        to: (0, _dateUtils.addMonths)(value[1], -gap)\n      }) : value[0], value[1]];\n    }\n\n    // If only the start date\n  } else if (value[0]) {\n    return [value[0], (0, _dateUtils.addMonths)(value[0], gap)];\n  }\n  var todayDate = new Date();\n  return [todayDate, (0, _dateUtils.addMonths)(todayDate, gap)];\n}\nvar isSameRange = function isSameRange(source, dest, format) {\n  // If both are null, reguard as same\n  if (null === source && null === dest) return true;\n  // If only one is null, regard as different\n  if (null === source || null === dest) return false;\n  var result = (0, _dateUtils.isSameDay)(source[0], dest[0]) && (0, _dateUtils.isSameDay)(source[1], dest[1]);\n  if ((0, _dateUtils.shouldRenderTime)(format)) {\n    result && (result = (0, _dateUtils.isSameSecond)(source[0], dest[0]) && (0, _dateUtils.isSameSecond)(source[1], dest[1]));\n  }\n  return result;\n};\nexports.isSameRange = isSameRange;\nvar getMonthHoverRange = function getMonthHoverRange(date) {\n  return [(0, _dateUtils.startOfMonth)(date), (0, _dateUtils.endOfMonth)(date)];\n};\nexports.getMonthHoverRange = getMonthHoverRange;\nvar getWeekHoverRange = function getWeekHoverRange(isoWeek, date) {\n  if (isoWeek) {\n    // set to the first day of this week according to ISO 8601, 12:00 am\n    return [(0, _dateUtils.startOfISOWeek)(date), (0, _dateUtils.endOfISOWeek)(date)];\n  }\n  return [(0, _dateUtils.startOfWeek)(date), (0, _dateUtils.endOfWeek)(date)];\n};\nexports.getWeekHoverRange = getWeekHoverRange;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/utils.ts?");
+eval("\n\nexports.__esModule = true;\nexports.getSafeCalendarDate = getSafeCalendarDate;\nexports.getWeekHoverRange = exports.getMonthHoverRange = exports.isSameRange = void 0;\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nfunction getSafeCalendarDate(_ref) {\n  var _value;\n  var value = _ref.value,\n    _ref$calendarKey = _ref.calendarKey,\n    calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,\n    allowSameMonth = _ref.allowSameMonth;\n  // Update calendarDate if the value is not null\n  value = (_value = value) !== null && _value !== void 0 ? _value : [];\n  var gap = allowSameMonth ? 0 : 1;\n  if (value[0] && value[1]) {\n    var diffMonth = (0, _dateUtils.differenceInCalendarMonths)(value[1], value[0]);\n    if (calendarKey === 'start') {\n      return [value[0], diffMonth <= 0 ? (0, _dateUtils.copyTime)({\n        from: value[1],\n        to: (0, _dateUtils.addMonths)(value[0], gap)\n      }) : value[1]];\n    } else if (calendarKey === 'end') {\n      return [diffMonth <= 0 ? (0, _dateUtils.copyTime)({\n        from: value[0],\n        to: (0, _dateUtils.addMonths)(value[1], -gap)\n      }) : value[0], value[1]];\n    }\n\n    // If only the start date\n  } else if (value[0]) {\n    return [value[0], (0, _dateUtils.addMonths)(value[0], gap)];\n  }\n  var todayDate = new Date();\n  return [todayDate, (0, _dateUtils.addMonths)(todayDate, gap)];\n}\nvar isSameRange = function isSameRange(source, dest, format) {\n  // If both are null, reguard as same\n  if (null === source && null === dest) return true;\n  // If only one is null, regard as different\n  if (null === source || null === dest) return false;\n  var result = (0, _dateUtils.isSameDay)(source[0], dest[0]) && (0, _dateUtils.isSameDay)(source[1], dest[1]);\n  if ((0, _dateUtils.shouldRenderTime)(format)) {\n    result && (result = (0, _dateUtils.isSameSecond)(source[0], dest[0]) && (0, _dateUtils.isSameSecond)(source[1], dest[1]));\n  }\n  return result;\n};\nexports.isSameRange = isSameRange;\nvar getMonthHoverRange = function getMonthHoverRange(date) {\n  return [(0, _dateUtils.startOfMonth)(date), (0, _dateUtils.endOfMonth)(date)];\n};\nexports.getMonthHoverRange = getMonthHoverRange;\nvar getWeekHoverRange = function getWeekHoverRange(isoWeek, date) {\n  if (isoWeek) {\n    // set to the first day of this week according to ISO 8601, 12:00 am\n    return [(0, _dateUtils.startOfISOWeek)(date), (0, _dateUtils.endOfISOWeek)(date)];\n  }\n  return [(0, _dateUtils.startOfWeek)(date), (0, _dateUtils.endOfWeek)(date)];\n};\nexports.getWeekHoverRange = getWeekHoverRange;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/utils.ts?");
 
 /***/ }),