rsuite 5.16.3 → 5.16.4

package/dist/rsuite.css

@@ -10951,6 +10951,7 @@ textarea.rs-picker-search-input {
   color: var(--rs-text-primary);
   background-color: #fff;
   background-color: var(--rs-input-bg);
+  outline: none;
 }
 .rs-picker-toggle.rs-btn-lg .rs-picker-toggle-textbox {
   padding-left: 14px;
@@ -10963,7 +10964,6 @@ textarea.rs-picker-search-input {
 }
 .rs-picker-toggle-read-only {
   opacity: 0;
-  pointer-events: none;
 }
 .rs-picker-default .rs-btn,
 .rs-picker-default .rs-picker-toggle {

package/dist/rsuite.js

@@ -2430,7 +2430,7 @@ eval("\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar isElement
 /***/ (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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _mapValues = _interopRequireDefault(__webpack_require__(/*! lodash/mapValues */ \"./node_modules/lodash/mapValues.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\n\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\n\nvar _Calendar2 = __webpack_require__(/*! ../Calendar */ \"./src/Calendar/index.tsx\");\n\nvar _useCalendarDate2 = _interopRequireDefault(__webpack_require__(/*! ../Calendar/useCalendarDate */ \"./src/Calendar/useCalendarDate.ts\"));\n\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DatePicker/DatePicker.tsx\",\n    _this = void 0;\n\nvar DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      calendarDefaultDate = props.calendarDefaultDate,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      defaultValue = props.defaultValue,\n      disabled = props.disabled,\n      _props$format = props.format,\n      formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n      isoWeek = props.isoWeek,\n      _props$limitEndYear = props.limitEndYear,\n      limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n      overrideLocale = props.locale,\n      menuClassName = props.menuClassName,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      oneTap = props.oneTap,\n      _props$placeholder = props.placeholder,\n      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n      ranges = props.ranges,\n      valueProp = props.value,\n      showMeridian = props.showMeridian,\n      showWeekNumbers = props.showWeekNumbers,\n      style = props.style,\n      toggleAs = props.toggleAs,\n      caretAsProp = props.caretAs,\n      disabledDateProp = props.disabledDate,\n      renderValue = props.renderValue,\n      onChange = props.onChange,\n      onChangeCalendarDate = props.onChangeCalendarDate,\n      onClean = props.onClean,\n      onClose = props.onClose,\n      onEntered = props.onEntered,\n      onExited = props.onExited,\n      onNextMonth = props.onNextMonth,\n      onOk = props.onOk,\n      onOpen = props.onOpen,\n      onPrevMonth = props.onPrevMonth,\n      onSelect = props.onSelect,\n      onToggleMonthDropdown = props.onToggleMonthDropdown,\n      onToggleTimeDropdown = props.onToggleTimeDropdown,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"calendarDefaultDate\", \"cleanable\", \"defaultValue\", \"disabled\", \"format\", \"isoWeek\", \"limitEndYear\", \"locale\", \"menuClassName\", \"appearance\", \"placement\", \"oneTap\", \"placeholder\", \"ranges\", \"value\", \"showMeridian\", \"showWeekNumbers\", \"style\", \"toggleAs\", \"caretAs\", \"disabledDate\", \"renderValue\", \"onChange\", \"onChangeCalendarDate\", \"onClean\", \"onClose\", \"onEntered\", \"onExited\", \"onNextMonth\", \"onOk\", \"onOpen\", \"onPrevMonth\", \"onSelect\", \"onToggleMonthDropdown\", \"onToggleTimeDropdown\"]);\n\n  var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),\n      locale = _useCustom.locale,\n      formatDate = _useCustom.formatDate,\n      parseDate = _useCustom.parseDate;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n\n  var _useCalendarDate = (0, _useCalendarDate2.default)(valueProp, calendarDefaultDate),\n      calendarDate = _useCalendarDate.calendarDate,\n      setCalendarDate = _useCalendarDate.setCalendarDate;\n\n  var _useState = (0, _react.useState)(),\n      inputState = _useState[0],\n      setInputState = _useState[1];\n\n  var _useCalendarState = (0, _utils2.useCalendarState)(),\n      calendarState = _useCalendarState.calendarState,\n      reset = _useCalendarState.reset,\n      openMonth = _useCalendarState.openMonth,\n      openTime = _useCalendarState.openTime;\n\n  var _useState2 = (0, _react.useState)(false),\n      active = _useState2[0],\n      setActive = _useState2[1];\n\n  var triggerRef = (0, _react.useRef)(null);\n  var rootRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  (0, _Picker.usePublicMethods)(ref, {\n    rootRef: rootRef,\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n  /**\n   * Switch to the callback triggered after the next month.\n   */\n\n  var handleMoveForward = (0, _react.useCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  }, [onChangeCalendarDate, onNextMonth, setCalendarDate]);\n  /**\n   * Switch to the callback triggered after the previous month.\n   */\n\n  var handleMoveBackward = (0, _react.useCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  }, [onChangeCalendarDate, onPrevMonth, setCalendarDate]);\n  /**\n   * The callback triggered when the date changes.\n   */\n\n  var handleDateChange = (0, _react.useCallback)(function (nextValue, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);\n  }, [onChangeCalendarDate, onSelect]);\n  /**\n   *  A callback triggered when the time on the calendar changes.\n   */\n\n  var handleChangePageTime = (0, _react.useCallback)(function (nextPageTime) {\n    setCalendarDate(nextPageTime);\n    handleDateChange(nextPageTime);\n  }, [handleDateChange, setCalendarDate]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n\n  var handleToggleMeridian = (0, _react.useCallback)(function () {\n    var hours = _utils.DateUtils.getHours(calendarDate);\n\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n\n    var nextDate = _utils.DateUtils.setHours(calendarDate, nextHours);\n\n    setCalendarDate(nextDate);\n  }, [calendarDate, setCalendarDate]);\n  var updateValue = (0, _react.useCallback)(function (event, nextPageDate, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n\n    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;\n    setCalendarDate(nextValue || new Date());\n    setValue(nextValue);\n\n    if (nextValue !== value) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    } // `closeOverlay` default value is `true`\n\n\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  }, [handleClose, onChange, calendarDate, setCalendarDate, setValue, value]);\n  /**\n   * The callback triggered after the date in the shortcut area is clicked.\n   */\n\n  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {\n    updateValue(event, value, closeOverlay);\n    handleDateChange(value, event);\n  }, [handleDateChange, updateValue]);\n  /**\n   * The callback triggered after clicking the OK button.\n   */\n\n  var handleOK = (0, _react.useCallback)(function (event) {\n    updateValue(event);\n    onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);\n  }, [updateValue, onOk, calendarDate]);\n  /**\n   * Toggle month selection panel\n   */\n\n  var handleMonthDropdown = (0, _react.useCallback)(function () {\n    if (calendarState === _Calendar2.CalendarState.DROP_MONTH) {\n      reset();\n    } else {\n      openMonth();\n    }\n\n    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(calendarState !== _Calendar2.CalendarState.DROP_MONTH);\n  }, [calendarState, onToggleMonthDropdown, openMonth, reset]);\n  /**\n   * Switch time selection panel\n   */\n\n  var handleTimeDropdown = (0, _react.useCallback)(function () {\n    if (calendarState === _Calendar2.CalendarState.DROP_TIME) {\n      reset();\n    } else {\n      openTime();\n    }\n\n    onToggleTimeDropdown === null || onToggleTimeDropdown === void 0 ? void 0 : onToggleTimeDropdown(calendarState !== _Calendar2.CalendarState.DROP_TIME);\n  }, [calendarState, onToggleTimeDropdown, openTime, reset]);\n  /**\n   * Callback after clicking the clear button.\n   */\n\n  var handleClean = (0, _react.useCallback)(function (event) {\n    setCalendarDate(new Date());\n    updateValue(event, null);\n  }, [setCalendarDate, updateValue]);\n  /**\n   * Handle keyboard events.\n   */\n\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    active: active,\n    onExit: handleClean\n  }, rest));\n  /**\n   * Callback after the date is selected.\n   */\n\n  var handleSelect = (0, _react.useCallback)(function (nextValue, event, updatableValue) {\n    if (updatableValue === void 0) {\n      updatableValue = true;\n    }\n\n    setCalendarDate( // Determine whether the current value contains time, if not, use calendarDate.\n    _utils.DateUtils.shouldTime(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {\n      return _utils.DateUtils.setHours(d, _utils.DateUtils.getHours(calendarDate));\n    }, function (d) {\n      return _utils.DateUtils.setMinutes(d, _utils.DateUtils.getMinutes(calendarDate));\n    }, function (d) {\n      return _utils.DateUtils.setSeconds(d, _utils.DateUtils.getSeconds(calendarDate));\n    })(nextValue));\n    handleDateChange(nextValue);\n\n    if (oneTap && updatableValue) {\n      updateValue(event, nextValue);\n    }\n  }, [formatStr, handleDateChange, oneTap, calendarDate, setCalendarDate, updateValue]);\n  /**\n   *  A callback triggered when the date on the calendar changes.\n   */\n\n  var handleChangePageDate = (0, _react.useCallback)(function (nextPageDate, event) {\n    setCalendarDate(nextPageDate);\n    reset();\n    handleDateChange(nextPageDate); // Show only the calendar month panel. formatStr = 'yyyy-MM'\n\n    var onlyShowMonth = _utils.DateUtils.shouldMonth(formatStr) && !_utils.DateUtils.shouldDate(formatStr);\n\n    if (oneTap && onlyShowMonth) {\n      updateValue(event, nextPageDate);\n    }\n  }, [formatStr, handleDateChange, oneTap, reset, setCalendarDate, updateValue]);\n  var disabledDate = (0, _react.useCallback)(function (date) {\n    var _disabledDateProp;\n\n    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;\n  }, [disabledDateProp]);\n  /**\n   * Callback after the input box value is changed.\n   */\n\n  var handleInputChange = (0, _react.useCallback)(function (value, event) {\n    setInputState('Typing'); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n\n    if (!_utils.DateUtils.isMatch(value, formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n\n    var date = parseDate(value, formatStr); // If only the time is included in the characters, it will default to today.\n\n    if (_utils.DateUtils.shouldOnlyTime(formatStr)) {\n      date = new Date(_utils.DateUtils.format(new Date(), 'yyyy-MM-dd') + \" \" + value);\n    }\n\n    if (!_utils.DateUtils.isValid(date)) {\n      setInputState('Error');\n      return;\n    }\n\n    if (disabledDate(date)) {\n      setInputState('Error');\n      return;\n    }\n\n    handleSelect(date, event, false);\n  }, [formatStr, locale, parseDate, disabledDate, handleSelect]);\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      updateValue(event, calendarDate);\n    }\n\n    setInputState('Initial');\n  }, [inputState, calendarDate, updateValue]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    reset();\n    setActive(false);\n  }, [onClose, reset]); // Check whether the time is within the time range of the shortcut option in the toolbar.\n\n  var disabledToolbarHandle = (0, _react.useCallback)(function (date) {\n    var _disabledDateProp2;\n\n    var allowDate = (_disabledDateProp2 = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp2 !== void 0 ? _disabledDateProp2 : false;\n\n    var allowTime = _utils.DateUtils.disabledTime(props, date);\n\n    return allowDate || allowTime;\n  }, [disabledDateProp, props]);\n  var calendarProps = (0, _react.useMemo)(function () {\n    return (0, _mapValues.default)((0, _pick.default)(props, _utils.DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {\n      return function (next, date) {\n        var _disabledOrHiddenTime;\n\n        return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;\n      };\n    });\n  }, [props]);\n  var inSameMonth = (0, _react.useCallback)(function (date) {\n    return _utils.DateUtils.isSameMonth(date, calendarDate);\n  }, [calendarDate]);\n\n  var calendar = /*#__PURE__*/_react.default.createElement(_Calendar2.Calendar, (0, _extends2.default)({}, calendarProps, {\n    locale: locale,\n    showWeekNumbers: showWeekNumbers,\n    showMeridian: showMeridian,\n    disabledDate: disabledDate,\n    limitEndYear: limitEndYear,\n    format: formatStr,\n    isoWeek: isoWeek,\n    inSameMonth: inSameMonth,\n    calendarState: calendarState,\n    calendarDate: calendarDate,\n    onMoveForward: handleMoveForward,\n    onMoveBackward: handleMoveBackward,\n    onSelect: handleSelect,\n    onToggleMonthDropdown: handleMonthDropdown,\n    onToggleTimeDropdown: handleTimeDropdown,\n    onChangePageDate: handleChangePageDate,\n    onChangePageTime: handleChangePageTime,\n    onToggleMeridian: handleToggleMeridian,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 484,\n      columnNumber: 7\n    }\n  }));\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(menuClassName, className, prefix('date-menu'));\n    var styles = {\n      left: left,\n      top: top\n    };\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      role: \"dialog\",\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      style: styles,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 512,\n        columnNumber: 9\n      }\n    }, calendar, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      ranges: ranges,\n      calendarDate: calendarDate,\n      disabledOkBtn: disabledToolbarHandle,\n      disabledShortcut: disabledToolbarHandle,\n      onClickShortcut: handleShortcutPageDate,\n      onOk: handleOK,\n      hideOkBtn: oneTap,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 520,\n        columnNumber: 11\n      }\n    }));\n  };\n\n  var hasValue = !!value;\n\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n    classPrefix: classPrefix,\n    name: 'date',\n    appearance: appearance,\n    hasValue: hasValue,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  var renderDate = (0, _react.useCallback)(function () {\n    var _renderValue;\n\n    if (!value) {\n      return placeholder || formatStr;\n    }\n\n    return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);\n  }, [formatStr, formatDate, placeholder, renderValue, value]);\n  var caretAs = (0, _react.useMemo)(function () {\n    return caretAsProp || (_utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 559,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: merge(className, classes),\n    style: style,\n    ref: rootRef,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 568,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {\n    className: prefix({\n      error: inputState === 'Error'\n    }),\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    input: true,\n    inputValue: value ? formatDate(value, formatStr) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,\n    inputMask: _utils.DateUtils.getDateMask(formatStr),\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs,\n    \"aria-haspopup\": \"dialog\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 569,\n      columnNumber: 11\n    }\n  }), renderDate())));\n});\n\nDatePicker.displayName = 'DatePicker';\nDatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  calendarDefaultDate: _propTypes.default.instanceOf(Date),\n  defaultValue: _propTypes.default.instanceOf(Date),\n  disabledDate: _propTypes.default.func,\n  disabledHours: _propTypes.default.func,\n  disabledMinutes: _propTypes.default.func,\n  disabledSeconds: _propTypes.default.func,\n  format: _propTypes.default.string,\n  hideHours: _propTypes.default.func,\n  hideMinutes: _propTypes.default.func,\n  hideSeconds: _propTypes.default.func,\n  isoWeek: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onChangeCalendarDate: _propTypes.default.func,\n  onNextMonth: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  onPrevMonth: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onToggleMonthDropdown: _propTypes.default.func,\n  onToggleTimeDropdown: _propTypes.default.func,\n  oneTap: _propTypes.default.bool,\n  panelContainerRef: _propTypes.default.any,\n  ranges: _propTypes.default.array,\n  showMeridian: _propTypes.default.bool,\n  showWeekNumbers: _propTypes.default.bool,\n  value: _propTypes.default.instanceOf(Date)\n});\nvar _default = DatePicker;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/DatePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _mapValues = _interopRequireDefault(__webpack_require__(/*! lodash/mapValues */ \"./node_modules/lodash/mapValues.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\n\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\n\nvar _Calendar2 = __webpack_require__(/*! ../Calendar */ \"./src/Calendar/index.tsx\");\n\nvar _useCalendarDate2 = _interopRequireDefault(__webpack_require__(/*! ../Calendar/useCalendarDate */ \"./src/Calendar/useCalendarDate.ts\"));\n\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DatePicker/DatePicker.tsx\",\n    _this = void 0;\n\nvar DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      calendarDefaultDate = props.calendarDefaultDate,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      defaultValue = props.defaultValue,\n      disabled = props.disabled,\n      _props$format = props.format,\n      formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n      isoWeek = props.isoWeek,\n      _props$limitEndYear = props.limitEndYear,\n      limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n      overrideLocale = props.locale,\n      menuClassName = props.menuClassName,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      oneTap = props.oneTap,\n      _props$placeholder = props.placeholder,\n      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n      ranges = props.ranges,\n      valueProp = props.value,\n      showMeridian = props.showMeridian,\n      showWeekNumbers = props.showWeekNumbers,\n      style = props.style,\n      toggleAs = props.toggleAs,\n      caretAsProp = props.caretAs,\n      disabledDateProp = props.disabledDate,\n      renderValue = props.renderValue,\n      onChange = props.onChange,\n      onChangeCalendarDate = props.onChangeCalendarDate,\n      onClean = props.onClean,\n      onClose = props.onClose,\n      onEntered = props.onEntered,\n      onExited = props.onExited,\n      onNextMonth = props.onNextMonth,\n      onOk = props.onOk,\n      onOpen = props.onOpen,\n      onPrevMonth = props.onPrevMonth,\n      onSelect = props.onSelect,\n      onToggleMonthDropdown = props.onToggleMonthDropdown,\n      onToggleTimeDropdown = props.onToggleTimeDropdown,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"calendarDefaultDate\", \"cleanable\", \"defaultValue\", \"disabled\", \"format\", \"isoWeek\", \"limitEndYear\", \"locale\", \"menuClassName\", \"appearance\", \"placement\", \"oneTap\", \"placeholder\", \"ranges\", \"value\", \"showMeridian\", \"showWeekNumbers\", \"style\", \"toggleAs\", \"caretAs\", \"disabledDate\", \"renderValue\", \"onChange\", \"onChangeCalendarDate\", \"onClean\", \"onClose\", \"onEntered\", \"onExited\", \"onNextMonth\", \"onOk\", \"onOpen\", \"onPrevMonth\", \"onSelect\", \"onToggleMonthDropdown\", \"onToggleTimeDropdown\"]);\n\n  var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),\n      locale = _useCustom.locale,\n      formatDate = _useCustom.formatDate,\n      parseDate = _useCustom.parseDate;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n\n  var _useCalendarDate = (0, _useCalendarDate2.default)(valueProp, calendarDefaultDate),\n      calendarDate = _useCalendarDate.calendarDate,\n      setCalendarDate = _useCalendarDate.setCalendarDate;\n\n  var _useState = (0, _react.useState)(),\n      inputState = _useState[0],\n      setInputState = _useState[1];\n\n  var _useCalendarState = (0, _utils2.useCalendarState)(),\n      calendarState = _useCalendarState.calendarState,\n      reset = _useCalendarState.reset,\n      openMonth = _useCalendarState.openMonth,\n      openTime = _useCalendarState.openTime;\n\n  var _useState2 = (0, _react.useState)(false),\n      active = _useState2[0],\n      setActive = _useState2[1];\n\n  var triggerRef = (0, _react.useRef)(null);\n  var rootRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  (0, _Picker.usePublicMethods)(ref, {\n    rootRef: rootRef,\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n  /**\n   * Switch to the callback triggered after the next month.\n   */\n\n  var handleMoveForward = (0, _react.useCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  }, [onChangeCalendarDate, onNextMonth, setCalendarDate]);\n  /**\n   * Switch to the callback triggered after the previous month.\n   */\n\n  var handleMoveBackward = (0, _react.useCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  }, [onChangeCalendarDate, onPrevMonth, setCalendarDate]);\n  /**\n   * The callback triggered when the date changes.\n   */\n\n  var handleDateChange = (0, _react.useCallback)(function (nextValue, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);\n  }, [onChangeCalendarDate, onSelect]);\n  /**\n   *  A callback triggered when the time on the calendar changes.\n   */\n\n  var handleChangePageTime = (0, _react.useCallback)(function (nextPageTime) {\n    setCalendarDate(nextPageTime);\n    handleDateChange(nextPageTime);\n  }, [handleDateChange, setCalendarDate]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n\n  var handleToggleMeridian = (0, _react.useCallback)(function () {\n    var hours = _utils.DateUtils.getHours(calendarDate);\n\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n\n    var nextDate = _utils.DateUtils.setHours(calendarDate, nextHours);\n\n    setCalendarDate(nextDate);\n  }, [calendarDate, setCalendarDate]);\n  var updateValue = (0, _react.useCallback)(function (event, nextPageDate, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n\n    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;\n    setCalendarDate(nextValue || new Date());\n    setValue(nextValue);\n\n    if (nextValue !== value) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    } // `closeOverlay` default value is `true`\n\n\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  }, [handleClose, onChange, calendarDate, setCalendarDate, setValue, value]);\n  /**\n   * The callback triggered after the date in the shortcut area is clicked.\n   */\n\n  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {\n    updateValue(event, value, closeOverlay);\n    handleDateChange(value, event);\n  }, [handleDateChange, updateValue]);\n  /**\n   * The callback triggered after clicking the OK button.\n   */\n\n  var handleOK = (0, _react.useCallback)(function (event) {\n    updateValue(event);\n    onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);\n  }, [updateValue, onOk, calendarDate]);\n  /**\n   * Toggle month selection panel\n   */\n\n  var handleMonthDropdown = (0, _react.useCallback)(function () {\n    if (calendarState === _Calendar2.CalendarState.DROP_MONTH) {\n      reset();\n    } else {\n      openMonth();\n    }\n\n    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(calendarState !== _Calendar2.CalendarState.DROP_MONTH);\n  }, [calendarState, onToggleMonthDropdown, openMonth, reset]);\n  /**\n   * Switch time selection panel\n   */\n\n  var handleTimeDropdown = (0, _react.useCallback)(function () {\n    if (calendarState === _Calendar2.CalendarState.DROP_TIME) {\n      reset();\n    } else {\n      openTime();\n    }\n\n    onToggleTimeDropdown === null || onToggleTimeDropdown === void 0 ? void 0 : onToggleTimeDropdown(calendarState !== _Calendar2.CalendarState.DROP_TIME);\n  }, [calendarState, onToggleTimeDropdown, openTime, reset]);\n  /**\n   * Callback after clicking the clear button.\n   */\n\n  var handleClean = (0, _react.useCallback)(function (event) {\n    setCalendarDate(new Date());\n    updateValue(event, null);\n  }, [setCalendarDate, updateValue]);\n  /**\n   * Handle keyboard events.\n   */\n\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    active: active,\n    onExit: handleClean\n  }, rest));\n  /**\n   * Callback after the date is selected.\n   */\n\n  var handleSelect = (0, _react.useCallback)(function (nextValue, event, updatableValue) {\n    if (updatableValue === void 0) {\n      updatableValue = true;\n    }\n\n    setCalendarDate( // Determine whether the current value contains time, if not, use calendarDate.\n    _utils.DateUtils.shouldTime(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {\n      return _utils.DateUtils.setHours(d, _utils.DateUtils.getHours(calendarDate));\n    }, function (d) {\n      return _utils.DateUtils.setMinutes(d, _utils.DateUtils.getMinutes(calendarDate));\n    }, function (d) {\n      return _utils.DateUtils.setSeconds(d, _utils.DateUtils.getSeconds(calendarDate));\n    })(nextValue));\n    handleDateChange(nextValue);\n\n    if (oneTap && updatableValue) {\n      updateValue(event, nextValue);\n    }\n  }, [formatStr, handleDateChange, oneTap, calendarDate, setCalendarDate, updateValue]);\n  /**\n   *  A callback triggered when the date on the calendar changes.\n   */\n\n  var handleChangePageDate = (0, _react.useCallback)(function (nextPageDate, event) {\n    setCalendarDate(nextPageDate);\n    reset();\n    handleDateChange(nextPageDate); // Show only the calendar month panel. formatStr = 'yyyy-MM'\n\n    var onlyShowMonth = _utils.DateUtils.shouldMonth(formatStr) && !_utils.DateUtils.shouldDate(formatStr);\n\n    if (oneTap && onlyShowMonth) {\n      updateValue(event, nextPageDate);\n    }\n  }, [formatStr, handleDateChange, oneTap, reset, setCalendarDate, updateValue]);\n  var disabledDate = (0, _react.useCallback)(function (date) {\n    var _disabledDateProp;\n\n    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;\n  }, [disabledDateProp]);\n  /**\n   * Callback after the input box value is changed.\n   */\n\n  var handleInputChange = (0, _react.useCallback)(function (value, event) {\n    setInputState('Typing'); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n\n    if (!_utils.DateUtils.isMatch(value, formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n\n    var date = parseDate(value, formatStr); // If only the time is included in the characters, it will default to today.\n\n    if (_utils.DateUtils.shouldOnlyTime(formatStr)) {\n      date = new Date(_utils.DateUtils.format(new Date(), 'yyyy-MM-dd') + \" \" + value);\n    }\n\n    if (!_utils.DateUtils.isValid(date)) {\n      setInputState('Error');\n      return;\n    }\n\n    if (disabledDate(date)) {\n      setInputState('Error');\n      return;\n    }\n\n    handleSelect(date, event, false);\n  }, [formatStr, locale, parseDate, disabledDate, handleSelect]);\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      updateValue(event, calendarDate);\n    }\n\n    setInputState('Initial');\n  }, [inputState, calendarDate, updateValue]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    reset();\n    setActive(false);\n  }, [onClose, reset]); // Check whether the time is within the time range of the shortcut option in the toolbar.\n\n  var disabledToolbarHandle = (0, _react.useCallback)(function (date) {\n    var _disabledDateProp2;\n\n    var allowDate = (_disabledDateProp2 = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp2 !== void 0 ? _disabledDateProp2 : false;\n\n    var allowTime = _utils.DateUtils.disabledTime(props, date);\n\n    return allowDate || allowTime;\n  }, [disabledDateProp, props]);\n  var calendarProps = (0, _react.useMemo)(function () {\n    return (0, _mapValues.default)((0, _pick.default)(props, _utils.DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {\n      return function (next, date) {\n        var _disabledOrHiddenTime;\n\n        return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;\n      };\n    });\n  }, [props]);\n  var inSameMonth = (0, _react.useCallback)(function (date) {\n    return _utils.DateUtils.isSameMonth(date, calendarDate);\n  }, [calendarDate]);\n\n  var calendar = /*#__PURE__*/_react.default.createElement(_Calendar2.Calendar, (0, _extends2.default)({}, calendarProps, {\n    locale: locale,\n    showWeekNumbers: showWeekNumbers,\n    showMeridian: showMeridian,\n    disabledDate: disabledDate,\n    limitEndYear: limitEndYear,\n    format: formatStr,\n    isoWeek: isoWeek,\n    inSameMonth: inSameMonth,\n    calendarState: calendarState,\n    calendarDate: calendarDate,\n    onMoveForward: handleMoveForward,\n    onMoveBackward: handleMoveBackward,\n    onSelect: handleSelect,\n    onToggleMonthDropdown: handleMonthDropdown,\n    onToggleTimeDropdown: handleTimeDropdown,\n    onChangePageDate: handleChangePageDate,\n    onChangePageTime: handleChangePageTime,\n    onToggleMeridian: handleToggleMeridian,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 484,\n      columnNumber: 7\n    }\n  }));\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(menuClassName, className, prefix('date-menu'));\n    var styles = {\n      left: left,\n      top: top\n    };\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      role: \"dialog\",\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      style: styles,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 512,\n        columnNumber: 9\n      }\n    }, calendar, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      ranges: ranges,\n      calendarDate: calendarDate,\n      disabledOkBtn: disabledToolbarHandle,\n      disabledShortcut: disabledToolbarHandle,\n      onClickShortcut: handleShortcutPageDate,\n      onOk: handleOK,\n      hideOkBtn: oneTap,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 520,\n        columnNumber: 11\n      }\n    }));\n  };\n\n  var hasValue = !!value;\n\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n    classPrefix: classPrefix,\n    name: 'date',\n    appearance: appearance,\n    hasValue: hasValue,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  var renderDate = (0, _react.useCallback)(function () {\n    var _renderValue;\n\n    if (!value) {\n      return placeholder || formatStr;\n    }\n\n    return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);\n  }, [formatStr, formatDate, placeholder, renderValue, value]);\n  var caretAs = (0, _react.useMemo)(function () {\n    return caretAsProp || (_utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 559,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: merge(className, classes),\n    style: style,\n    ref: rootRef,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 568,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {\n    className: prefix({\n      error: inputState === 'Error'\n    }),\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    editable: true,\n    inputValue: value ? formatDate(value, formatStr) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,\n    inputMask: _utils.DateUtils.getDateMask(formatStr),\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs,\n    \"aria-haspopup\": \"dialog\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 569,\n      columnNumber: 11\n    }\n  }), renderDate())));\n});\n\nDatePicker.displayName = 'DatePicker';\nDatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  calendarDefaultDate: _propTypes.default.instanceOf(Date),\n  defaultValue: _propTypes.default.instanceOf(Date),\n  disabledDate: _propTypes.default.func,\n  disabledHours: _propTypes.default.func,\n  disabledMinutes: _propTypes.default.func,\n  disabledSeconds: _propTypes.default.func,\n  format: _propTypes.default.string,\n  hideHours: _propTypes.default.func,\n  hideMinutes: _propTypes.default.func,\n  hideSeconds: _propTypes.default.func,\n  isoWeek: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onChangeCalendarDate: _propTypes.default.func,\n  onNextMonth: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  onPrevMonth: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onToggleMonthDropdown: _propTypes.default.func,\n  onToggleTimeDropdown: _propTypes.default.func,\n  oneTap: _propTypes.default.bool,\n  panelContainerRef: _propTypes.default.any,\n  ranges: _propTypes.default.array,\n  showMeridian: _propTypes.default.bool,\n  showWeekNumbers: _propTypes.default.bool,\n  value: _propTypes.default.instanceOf(Date)\n});\nvar _default = DatePicker;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/DatePicker.tsx?");
 
 /***/ }),
 
@@ -2485,7 +2485,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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\n\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\n\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\n\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n    _this = void 0;\n\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n\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$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      disabled = props.disabled,\n      disabledDateProp = props.disabledDate,\n      _props$format = props.format,\n      formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n      hoverRange = props.hoverRange,\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      overrideLocale = props.locale,\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      renderValue = props.renderValue,\n      _props$showOneCalenda = props.showOneCalendar,\n      showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n      showWeekNumbers = props.showWeekNumbers,\n      showMeridian = props.showMeridian,\n      style = props.style,\n      toggleAs = props.toggleAs,\n      caretAs = props.caretAs,\n      valueProp = props.value,\n      onChange = props.onChange,\n      onClean = props.onClean,\n      onClose = props.onClose,\n      onEnter = props.onEnter,\n      onEntered = props.onEntered,\n      onExited = props.onExited,\n      onOk = props.onOk,\n      onOpen = props.onOpen,\n      onSelect = props.onSelect,\n      renderTitle = props.renderTitle,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"disabled\", \"disabledDate\", \"format\", \"hoverRange\", \"isoWeek\", \"limitEndYear\", \"locale\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"renderValue\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"style\", \"toggleAs\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onClose\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onOpen\", \"onSelect\", \"renderTitle\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n      locale = _useCustom.locale,\n      formatDate = _useCustom.formatDate,\n      parseDate = _useCustom.parseDate;\n\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\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\n\n  var hasDoneSelect = (0, _react.useRef)(true);\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\n  var _useState = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n      selectedDates = _useState[0],\n      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n\n\n  var _useState2 = (0, _react.useState)(null),\n      hoverDateRange = _useState2[0],\n      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.\n\n\n  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({\n    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n  })),\n      calendarDate = _useState3[0],\n      setCalendarDate = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(),\n      inputState = _useState4[0],\n      setInputState = _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\n\n  var selectRangeValueRef = (0, _react.useRef)(null);\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\n  var updateCalendarDateRange = (0, _react.useCallback)(function (value, calendarKey) {\n    setCalendarDate((0, _utils2.getCalendarDate)({\n      value: value,\n      calendarKey: calendarKey\n    }));\n  }, []); // if valueProp changed then update selectValue/hoverValue\n\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\n  var _useState5 = (0, _react.useState)(false),\n      isPickerToggleActive = _useState5[0],\n      setPickerToggleActive = _useState5[1];\n\n  var rootRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var handleCloseDropdown = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    rootRef: rootRef\n  });\n  var getDisplayString = (0, _react.useCallback)(function (nextValue, isPlaintext) {\n    var _nextValue$, _nextValue$2;\n\n    var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;\n    var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;\n\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n\n      if (isPlaintext) {\n        return formatDate(displayValue[0], formatStr) + character + formatDate(displayValue[1], formatStr);\n      }\n\n      return renderValue ? renderValue(displayValue, formatStr) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[0],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 278,\n          columnNumber: 13\n        }\n      }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[1],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 280,\n          columnNumber: 13\n        }\n      }));\n    }\n\n    return isPlaintext ? '' : placeholder || rangeFormatStr;\n  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);\n  /**\n   * preset hover range\n   */\n\n  var getHoverRangeValue = (0, _react.useCallback)(function (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\n      return hoverRange;\n    }\n\n    var hoverRangeFunc = getHoverRangeFunc();\n\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n\n    if (!isHoverRangeValid) {\n      return null;\n    }\n\n    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {\n      hoverValues.reverse();\n    }\n\n    return hoverValues;\n  }, [hoverRange, isoWeek]);\n  var handleValueUpdate = (0, _react.useCallback)(function (event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\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\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    } // `closeOverlay` default value is `true`\n\n\n    if (closeOverlay !== false) {\n      handleCloseDropdown();\n    }\n  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);\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\n  var handleMouseMove = (0, _react.useCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date); // 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\n    if (!hasDoneSelect.current) {\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\n        if (_utils.DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      } // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  }, [getHoverRangeValue]);\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n\n  var handleSelectDate = (0, _react.useCallback)(function (date, event) {\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode\n\n    if (hasDoneSelect.current && oneTap) {\n      handleValueUpdate(event, noHoverRangeValid ? [(0, _utils2.setTimingMargin)(date), (0, _utils2.setTimingMargin)(date, 'right')] : hoverRangeValue);\n      hasDoneSelect.current = false;\n      return;\n    } // no preset hover range can use\n\n\n    if (noHoverRangeValid) {\n      // start select\n      if (hasDoneSelect.current) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!hasDoneSelect.current) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    } // If user have completed the selection, then sort\n\n\n    if (nextSelectDates.length === 2 && _utils.DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {\n      nextSelectDates.reverse();\n    }\n\n    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);\n    setSelectedDates(nextSelectDates);\n    updateCalendarDateRange(nextSelectDates);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    hasDoneSelect.current = !hasDoneSelect.current;\n  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);\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\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 updateSingleCalendarDate = (0, _react.useCallback)(function (index, date) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    updateCalendarDateRange(nextCalendarDate, index === 0 ? 'start' : 'end');\n  }, [calendarDate, updateCalendarDateRange]);\n  var updateSingleCalendarTime = (0, _react.useCallback)(function (index, date) {\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n      var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day\n\n      if (next[index]) {\n        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());\n      }\n\n      next[index] = clonedDate;\n      return next;\n    });\n    updateSingleCalendarDate(index, date);\n  }, [updateSingleCalendarDate]);\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n\n  var handleToggleMeridian = (0, _react.useCallback)(function (index) {\n    var next = Array.from(calendarDate);\n    var clonedDate = new Date(next[index].valueOf());\n\n    var hours = _utils.DateUtils.getHours(clonedDate);\n\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    next[index] = _utils.DateUtils.setHours(clonedDate, nextHours);\n    setCalendarDate(next); // If the value already exists, update the value again.\n\n    if (selectedDates.length === 2) {\n      setSelectedDates(next);\n    }\n  }, [calendarDate, selectedDates]);\n  /**\n   * Toolbar operation callback function\n   */\n\n  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n\n    handleValueUpdate(event, value, closeOverlay); // End unfinished selections.\n\n    hasDoneSelect.current = true;\n  }, [handleValueUpdate]);\n  var handleOK = (0, _react.useCallback)(function (event) {\n    handleValueUpdate(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  }, [handleValueUpdate, onOk, selectedDates]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    updateCalendarDateRange(null);\n    handleValueUpdate(event, null);\n  }, [handleValueUpdate, updateCalendarDateRange]);\n  /**\n   * Callback after the input box value is changed.\n   */\n\n  var handleInputChange = (0, _react.useCallback)(function (value) {\n    setInputState('Typing');\n    var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n\n    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr, {\n      locale: locale.dateLocale\n    }) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n\n    var startDate = parseDate(rangeValue[0], formatStr);\n    var endDate = parseDate(rangeValue[1], formatStr);\n    var selectValue = [startDate, endDate];\n\n    if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {\n      setInputState('Error');\n      return;\n    }\n\n    if (isDateDisabled(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {\n      setInputState('Error');\n      return;\n    }\n\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    updateCalendarDateRange(selectValue);\n  }, // eslint-disable-next-line react-hooks/exhaustive-deps\n  [character, rangeFormatStr, updateCalendarDateRange]);\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);\n    }\n\n    setInputState('Initial');\n  }, [handleValueUpdate, selectedDates, inputState]);\n  var handleEnter = (0, _react.useCallback)(function () {\n    var nextCalendarDate;\n\n    if (value && value.length) {\n      var _startDate = value[0],\n          endData = value[1];\n      nextCalendarDate = [_startDate, (0, _dateUtils.isSameMonth)(_startDate, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      nextCalendarDate = (0, _utils2.getCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    updateCalendarDateRange(nextCalendarDate);\n  }, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setPickerToggleActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setPickerToggleActive(false);\n    hasDoneSelect.current = true;\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose]);\n  var isDateDisabled = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {\n    var _disabledDateProp;\n\n    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;\n  }, [disabledDateProp]);\n  var disabledByBetween = (0, _react.useCallback)(function (start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {\n      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {\n        return true;\n      }\n\n      start = _utils.DateUtils.addDays(start, 1);\n    }\n\n    return false;\n  }, [isDateDisabled, selectedDates]);\n  var disabledOkButton = (0, _react.useCallback)(function () {\n    var start = selectedDates[0],\n        end = selectedDates[1];\n\n    if (!start || !end || !hasDoneSelect.current) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  }, [disabledByBetween, selectedDates]);\n  var disabledShortcutButton = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n\n    var _value = value,\n        start = _value[0],\n        end = _value[1];\n\n    if (!start || !end) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  }, [disabledByBetween]);\n  var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {\n    return isDateDisabled(date, values, hasDoneSelect.current, type);\n  }, [isDateDisabled]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    active: isPickerToggleActive,\n    onExit: handleClean\n  }, rest));\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('daterange-menu'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var calendarProps = {\n      calendarDate: calendarDate,\n      disabledDate: handleDisabledDate,\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarDate: updateSingleCalendarDate,\n      onChangeCalendarTime: updateSingleCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian,\n      renderTitle: renderTitle\n    };\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      target: triggerRef,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 723,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 729,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 730,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 731,\n        columnNumber: 13\n      }\n    }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 732,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 733,\n        columnNumber: 15\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 734,\n        columnNumber: 36\n      }\n    })))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disabledOkBtn: disabledOkButton,\n      disabledShortcut: disabledShortcutButton,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onClickShortcut: handleShortcutPageDate,\n      ranges: ranges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 737,\n        columnNumber: 11\n      }\n    })));\n  };\n\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n\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\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 763,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: rootRef,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = inputState === 'Error', _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 772,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    input: true,\n    inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),\n    inputValue: value ? getDisplayString(value, true) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: isPickerToggleActive,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs || _Calendar.default,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 779,\n      columnNumber: 9\n    }\n  }), getDisplayString(value))));\n});\n\nDateRangePicker.after = disabledDateUtils.after;\nDateRangePicker.afterToday = disabledDateUtils.afterToday;\nDateRangePicker.allowedDays = disabledDateUtils.allowedDays;\nDateRangePicker.allowedMaxDays = disabledDateUtils.allowedMaxDays;\nDateRangePicker.allowedRange = disabledDateUtils.allowedRange;\nDateRangePicker.before = disabledDateUtils.before;\nDateRangePicker.beforeToday = disabledDateUtils.beforeToday;\nDateRangePicker.combine = disabledDateUtils.combine;\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([_propTypes.default.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  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: _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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\n\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\n\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\n\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n    _this = void 0;\n\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n\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$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      disabled = props.disabled,\n      disabledDateProp = props.disabledDate,\n      _props$format = props.format,\n      formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n      hoverRange = props.hoverRange,\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      overrideLocale = props.locale,\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      renderValue = props.renderValue,\n      _props$showOneCalenda = props.showOneCalendar,\n      showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n      showWeekNumbers = props.showWeekNumbers,\n      showMeridian = props.showMeridian,\n      style = props.style,\n      toggleAs = props.toggleAs,\n      caretAs = props.caretAs,\n      valueProp = props.value,\n      onChange = props.onChange,\n      onClean = props.onClean,\n      onClose = props.onClose,\n      onEnter = props.onEnter,\n      onEntered = props.onEntered,\n      onExited = props.onExited,\n      onOk = props.onOk,\n      onOpen = props.onOpen,\n      onSelect = props.onSelect,\n      renderTitle = props.renderTitle,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"disabled\", \"disabledDate\", \"format\", \"hoverRange\", \"isoWeek\", \"limitEndYear\", \"locale\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"renderValue\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"style\", \"toggleAs\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onClose\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onOpen\", \"onSelect\", \"renderTitle\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n      locale = _useCustom.locale,\n      formatDate = _useCustom.formatDate,\n      parseDate = _useCustom.parseDate;\n\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\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\n\n  var hasDoneSelect = (0, _react.useRef)(true);\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\n  var _useState = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n      selectedDates = _useState[0],\n      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n\n\n  var _useState2 = (0, _react.useState)(null),\n      hoverDateRange = _useState2[0],\n      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.\n\n\n  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({\n    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n  })),\n      calendarDate = _useState3[0],\n      setCalendarDate = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(),\n      inputState = _useState4[0],\n      setInputState = _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\n\n  var selectRangeValueRef = (0, _react.useRef)(null);\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\n  var updateCalendarDateRange = (0, _react.useCallback)(function (value, calendarKey) {\n    setCalendarDate((0, _utils2.getCalendarDate)({\n      value: value,\n      calendarKey: calendarKey\n    }));\n  }, []); // if valueProp changed then update selectValue/hoverValue\n\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\n  var _useState5 = (0, _react.useState)(false),\n      isPickerToggleActive = _useState5[0],\n      setPickerToggleActive = _useState5[1];\n\n  var rootRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var handleCloseDropdown = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    rootRef: rootRef\n  });\n  var getDisplayString = (0, _react.useCallback)(function (nextValue, isPlaintext) {\n    var _nextValue$, _nextValue$2;\n\n    var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;\n    var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;\n\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n\n      if (isPlaintext) {\n        return formatDate(displayValue[0], formatStr) + character + formatDate(displayValue[1], formatStr);\n      }\n\n      return renderValue ? renderValue(displayValue, formatStr) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[0],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 278,\n          columnNumber: 13\n        }\n      }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[1],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 280,\n          columnNumber: 13\n        }\n      }));\n    }\n\n    return isPlaintext ? '' : placeholder || rangeFormatStr;\n  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);\n  /**\n   * preset hover range\n   */\n\n  var getHoverRangeValue = (0, _react.useCallback)(function (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\n      return hoverRange;\n    }\n\n    var hoverRangeFunc = getHoverRangeFunc();\n\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n\n    if (!isHoverRangeValid) {\n      return null;\n    }\n\n    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {\n      hoverValues.reverse();\n    }\n\n    return hoverValues;\n  }, [hoverRange, isoWeek]);\n  var handleValueUpdate = (0, _react.useCallback)(function (event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\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\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    } // `closeOverlay` default value is `true`\n\n\n    if (closeOverlay !== false) {\n      handleCloseDropdown();\n    }\n  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);\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\n  var handleMouseMove = (0, _react.useCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date); // 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\n    if (!hasDoneSelect.current) {\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\n        if (_utils.DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      } // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  }, [getHoverRangeValue]);\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n\n  var handleSelectDate = (0, _react.useCallback)(function (date, event) {\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode\n\n    if (hasDoneSelect.current && oneTap) {\n      handleValueUpdate(event, noHoverRangeValid ? [(0, _utils2.setTimingMargin)(date), (0, _utils2.setTimingMargin)(date, 'right')] : hoverRangeValue);\n      hasDoneSelect.current = false;\n      return;\n    } // no preset hover range can use\n\n\n    if (noHoverRangeValid) {\n      // start select\n      if (hasDoneSelect.current) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!hasDoneSelect.current) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    } // If user have completed the selection, then sort\n\n\n    if (nextSelectDates.length === 2 && _utils.DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {\n      nextSelectDates.reverse();\n    }\n\n    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);\n    setSelectedDates(nextSelectDates);\n    updateCalendarDateRange(nextSelectDates);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    hasDoneSelect.current = !hasDoneSelect.current;\n  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);\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\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 updateSingleCalendarDate = (0, _react.useCallback)(function (index, date) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    updateCalendarDateRange(nextCalendarDate, index === 0 ? 'start' : 'end');\n  }, [calendarDate, updateCalendarDateRange]);\n  var updateSingleCalendarTime = (0, _react.useCallback)(function (index, date) {\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n      var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day\n\n      if (next[index]) {\n        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());\n      }\n\n      next[index] = clonedDate;\n      return next;\n    });\n    updateSingleCalendarDate(index, date);\n  }, [updateSingleCalendarDate]);\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n\n  var handleToggleMeridian = (0, _react.useCallback)(function (index) {\n    var next = Array.from(calendarDate);\n    var clonedDate = new Date(next[index].valueOf());\n\n    var hours = _utils.DateUtils.getHours(clonedDate);\n\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    next[index] = _utils.DateUtils.setHours(clonedDate, nextHours);\n    setCalendarDate(next); // If the value already exists, update the value again.\n\n    if (selectedDates.length === 2) {\n      setSelectedDates(next);\n    }\n  }, [calendarDate, selectedDates]);\n  /**\n   * Toolbar operation callback function\n   */\n\n  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n\n    handleValueUpdate(event, value, closeOverlay); // End unfinished selections.\n\n    hasDoneSelect.current = true;\n  }, [handleValueUpdate]);\n  var handleOK = (0, _react.useCallback)(function (event) {\n    handleValueUpdate(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  }, [handleValueUpdate, onOk, selectedDates]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    updateCalendarDateRange(null);\n    handleValueUpdate(event, null);\n  }, [handleValueUpdate, updateCalendarDateRange]);\n  /**\n   * Callback after the input box value is changed.\n   */\n\n  var handleInputChange = (0, _react.useCallback)(function (value) {\n    setInputState('Typing');\n    var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n\n    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr, {\n      locale: locale.dateLocale\n    }) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n\n    var startDate = parseDate(rangeValue[0], formatStr);\n    var endDate = parseDate(rangeValue[1], formatStr);\n    var selectValue = [startDate, endDate];\n\n    if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {\n      setInputState('Error');\n      return;\n    }\n\n    if (isDateDisabled(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {\n      setInputState('Error');\n      return;\n    }\n\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    updateCalendarDateRange(selectValue);\n  }, // eslint-disable-next-line react-hooks/exhaustive-deps\n  [character, rangeFormatStr, updateCalendarDateRange]);\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);\n    }\n\n    setInputState('Initial');\n  }, [handleValueUpdate, selectedDates, inputState]);\n  var handleEnter = (0, _react.useCallback)(function () {\n    var nextCalendarDate;\n\n    if (value && value.length) {\n      var _startDate = value[0],\n          endData = value[1];\n      nextCalendarDate = [_startDate, (0, _dateUtils.isSameMonth)(_startDate, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      nextCalendarDate = (0, _utils2.getCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    updateCalendarDateRange(nextCalendarDate);\n  }, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setPickerToggleActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setPickerToggleActive(false);\n    hasDoneSelect.current = true;\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose]);\n  var isDateDisabled = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {\n    var _disabledDateProp;\n\n    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;\n  }, [disabledDateProp]);\n  var disabledByBetween = (0, _react.useCallback)(function (start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {\n      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {\n        return true;\n      }\n\n      start = _utils.DateUtils.addDays(start, 1);\n    }\n\n    return false;\n  }, [isDateDisabled, selectedDates]);\n  var disabledOkButton = (0, _react.useCallback)(function () {\n    var start = selectedDates[0],\n        end = selectedDates[1];\n\n    if (!start || !end || !hasDoneSelect.current) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  }, [disabledByBetween, selectedDates]);\n  var disabledShortcutButton = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n\n    var _value = value,\n        start = _value[0],\n        end = _value[1];\n\n    if (!start || !end) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  }, [disabledByBetween]);\n  var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {\n    return isDateDisabled(date, values, hasDoneSelect.current, type);\n  }, [isDateDisabled]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    active: isPickerToggleActive,\n    onExit: handleClean\n  }, rest));\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('daterange-menu'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var calendarProps = {\n      calendarDate: calendarDate,\n      disabledDate: handleDisabledDate,\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarDate: updateSingleCalendarDate,\n      onChangeCalendarTime: updateSingleCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian,\n      renderTitle: renderTitle\n    };\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      target: triggerRef,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 723,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 729,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 730,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 731,\n        columnNumber: 13\n      }\n    }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 732,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 733,\n        columnNumber: 15\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 734,\n        columnNumber: 36\n      }\n    })))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disabledOkBtn: disabledOkButton,\n      disabledShortcut: disabledShortcutButton,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onClickShortcut: handleShortcutPageDate,\n      ranges: ranges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 737,\n        columnNumber: 11\n      }\n    })));\n  };\n\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n\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\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 763,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: rootRef,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = inputState === 'Error', _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 772,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    editable: true,\n    inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),\n    inputValue: value ? getDisplayString(value, true) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: isPickerToggleActive,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs || _Calendar.default,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 779,\n      columnNumber: 9\n    }\n  }), getDisplayString(value))));\n});\n\nDateRangePicker.after = disabledDateUtils.after;\nDateRangePicker.afterToday = disabledDateUtils.afterToday;\nDateRangePicker.allowedDays = disabledDateUtils.allowedDays;\nDateRangePicker.allowedMaxDays = disabledDateUtils.allowedMaxDays;\nDateRangePicker.allowedRange = disabledDateUtils.allowedRange;\nDateRangePicker.before = disabledDateUtils.before;\nDateRangePicker.beforeToday = disabledDateUtils.beforeToday;\nDateRangePicker.combine = disabledDateUtils.combine;\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([_propTypes.default.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  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: _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?");
 
 /***/ }),
 
@@ -3838,7 +3838,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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\n\nvar _Overlay = _interopRequireDefault(__webpack_require__(/*! ./Overlay */ \"./src/Overlay/Overlay.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _isOneOf = _interopRequireDefault(__webpack_require__(/*! ../utils/isOneOf */ \"./src/utils/isOneOf.ts\"));\n\nvar _OverlayContext = _interopRequireDefault(__webpack_require__(/*! ./OverlayContext */ \"./src/Overlay/OverlayContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Overlay/OverlayTrigger.tsx\",\n    _this = void 0;\n\nfunction mergeEvents(events, props) {\n  if (events === void 0) {\n    events = {};\n  }\n\n  if (props === void 0) {\n    props = {};\n  }\n\n  var nextEvents = {};\n  Object.keys(events).forEach(function (eventName) {\n    if (events[eventName]) {\n      var _props;\n\n      nextEvents[eventName] = (0, _utils.createChainedFunction)(events[eventName], (_props = props) === null || _props === void 0 ? void 0 : _props[eventName]);\n    }\n  });\n  return nextEvents;\n}\n\n/**\n * Useful for mouseover and mouseout.\n * In order to resolve the node entering the mouseover element, a mouseout event and a mouseover event will be triggered.\n * https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave\n * @param handler\n * @param event\n */\nfunction onMouseEventHandler(handler, event, delay) {\n  var target = event.currentTarget;\n  var related = event.relatedTarget || (0, _get.default)(event, ['nativeEvent', 'toElement']);\n\n  if ((!related || related !== target) && !(0, _contains.default)(target, related)) {\n    handler(event, delay);\n  }\n}\n\nvar defaultTrigger = ['hover', 'focus'];\n\nvar OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_OverlayContext.default),\n      overlayContainer = _useContext.overlayContainer;\n\n  var children = props.children,\n      _props$container = props.container,\n      container = _props$container === void 0 ? overlayContainer : _props$container,\n      controlId = props.controlId,\n      defaultOpen = props.defaultOpen,\n      _props$trigger = props.trigger,\n      trigger = _props$trigger === void 0 ? defaultTrigger : _props$trigger,\n      disabled = props.disabled,\n      followCursor = props.followCursor,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      openProp = props.open,\n      delay = props.delay,\n      delayOpenProp = props.delayOpen,\n      delayCloseProp = props.delayClose,\n      enterable = props.enterable,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      speaker = props.speaker,\n      _props$rootClose = props.rootClose,\n      rootClose = _props$rootClose === void 0 ? true : _props$rootClose,\n      onClick = props.onClick,\n      onMouseOver = props.onMouseOver,\n      onMouseMove = props.onMouseMove,\n      onMouseOut = props.onMouseOut,\n      onContextMenu = props.onContextMenu,\n      onFocus = props.onFocus,\n      onBlur = props.onBlur,\n      onClose = props.onClose,\n      onExited = props.onExited,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"children\", \"container\", \"controlId\", \"defaultOpen\", \"trigger\", \"disabled\", \"followCursor\", \"readOnly\", \"plaintext\", \"open\", \"delay\", \"delayOpen\", \"delayClose\", \"enterable\", \"placement\", \"speaker\", \"rootClose\", \"onClick\", \"onMouseOver\", \"onMouseMove\", \"onMouseOut\", \"onContextMenu\", \"onFocus\", \"onBlur\", \"onClose\", \"onExited\"]);\n\n  var _usePortal = (0, _utils.usePortal)({\n    container: container\n  }),\n      Portal = _usePortal.Portal;\n\n  var triggerRef = (0, _react.useRef)();\n  var overlayRef = (0, _react.useRef)();\n\n  var _useControlled = (0, _utils.useControlled)(openProp, defaultOpen),\n      open = _useControlled[0],\n      setOpen = _useControlled[1];\n\n  var _useState = (0, _react.useState)(null),\n      cursorPosition = _useState[0],\n      setCursorPosition = _useState[1]; // Delay the timer to close/open the overlay\n  // When the cursor moves from the trigger to the overlay, the overlay will be closed.\n  // In order to keep the overlay open, a timer is used to delay the closing.\n\n\n  var delayOpenTimer = (0, _react.useRef)(null);\n  var delayCloseTimer = (0, _react.useRef)(null);\n  var delayOpen = (0, _isNil.default)(delayOpenProp) ? delay : delayOpenProp;\n  var delayClose = (0, _isNil.default)(delayCloseProp) ? delay : delayCloseProp; // Whether the cursor is on the overlay\n\n  var isOnOverlay = (0, _react.useRef)(false); // Whether the cursor is on the trigger\n\n  var isOnTrigger = (0, _react.useRef)(false);\n  (0, _react.useEffect)(function () {\n    return function () {\n      if (!(0, _isNil.default)(delayOpenTimer.current)) {\n        clearTimeout(delayOpenTimer.current);\n      }\n\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n      }\n    };\n  }, []);\n  var handleOpen = (0, _react.useCallback)(function (delay) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayOpen : delay;\n\n    if (ms && typeof ms === 'number') {\n      return delayOpenTimer.current = setTimeout(function () {\n        delayOpenTimer.current = null;\n        setOpen(true);\n      }, ms);\n    }\n\n    setOpen(true);\n  }, [delayOpen, setOpen]);\n  var handleClose = (0, _react.useCallback)(function (delay) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayClose : delay;\n\n    if (ms && typeof ms === 'number') {\n      return delayCloseTimer.current = setTimeout(function () {\n        delayCloseTimer.current = null;\n        setOpen(false);\n      }, ms);\n    }\n\n    setOpen(false);\n  }, [delayClose, setOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setCursorPosition(null);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      get root() {\n        return triggerRef.current;\n      },\n\n      get overlay() {\n        var _overlayRef$current;\n\n        return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;\n      },\n\n      open: handleOpen,\n      close: handleClose,\n      updatePosition: function updatePosition() {\n        var _overlayRef$current2, _overlayRef$current2$;\n\n        (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 ? void 0 : (_overlayRef$current2$ = _overlayRef$current2.updatePosition) === null || _overlayRef$current2$ === void 0 ? void 0 : _overlayRef$current2$.call(_overlayRef$current2);\n      }\n    };\n  });\n  /**\n   * Close after the cursor leaves.\n   */\n\n  var handleCloseWhenLeave = (0, _react.useCallback)(function () {\n    // When the cursor is not on the overlay and not on the trigger, it is closed.\n    if (!isOnOverlay.current && !isOnTrigger.current) {\n      handleClose();\n    }\n  }, [handleClose]);\n  /**\n   * Toggle open and closed state.\n   */\n\n  var handleOpenState = (0, _react.useCallback)(function () {\n    if (open) {\n      handleCloseWhenLeave();\n    } else {\n      handleOpen();\n    }\n  }, [open, handleCloseWhenLeave, handleOpen]);\n  var handleDelayedOpen = (0, _react.useCallback)(function () {\n    if (!enterable) {\n      return handleOpen();\n    }\n\n    isOnTrigger.current = true;\n\n    if (!(0, _isNil.default)(delayCloseTimer.current)) {\n      clearTimeout(delayCloseTimer.current);\n      delayCloseTimer.current = null;\n      return handleOpen();\n    }\n\n    if (open) {\n      return;\n    }\n\n    handleOpen();\n  }, [enterable, open, handleOpen]);\n  var handleDelayedClose = (0, _react.useCallback)(function () {\n    if (!enterable) {\n      handleClose();\n    }\n\n    isOnTrigger.current = false;\n\n    if (!(0, _isNil.default)(delayOpenTimer.current)) {\n      clearTimeout(delayOpenTimer.current);\n      delayOpenTimer.current = null;\n      return;\n    }\n\n    if (!open || !(0, _isNil.default)(delayCloseTimer.current)) {\n      return;\n    }\n\n    delayCloseTimer.current = setTimeout(function () {\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n        delayCloseTimer.current = null;\n      }\n\n      handleCloseWhenLeave();\n    }, 200);\n  }, [enterable, open, handleClose, handleCloseWhenLeave]);\n  var handleSpeakerMouseEnter = (0, _react.useCallback)(function () {\n    isOnOverlay.current = true;\n  }, []);\n  var handleSpeakerMouseLeave = (0, _react.useCallback)(function () {\n    isOnOverlay.current = false;\n\n    if (!(0, _isOneOf.default)('click', trigger) && !(0, _isOneOf.default)('contextMenu', trigger) && !(0, _isOneOf.default)('active', trigger)) {\n      handleCloseWhenLeave();\n    }\n  }, [handleCloseWhenLeave, trigger]);\n  var handledMoveOverlay = (0, _react.useCallback)(function (event) {\n    setCursorPosition(function () {\n      return {\n        top: event.pageY,\n        left: event.pageX,\n        clientTop: event.clientX,\n        clientLeft: event.clientY\n      };\n    });\n  }, []);\n  var preventDefault = (0, _react.useCallback)(function (event) {\n    event.preventDefault();\n  }, []);\n  var triggerEvents = {\n    onClick: onClick,\n    onContextMenu: onContextMenu,\n    onMouseOver: onMouseOver,\n    onMouseOut: onMouseOut,\n    onFocus: onFocus,\n    onBlur: onBlur,\n    onMouseMove: onMouseMove\n  };\n\n  if (!disabled && !readOnly && !plaintext) {\n    if ((0, _isOneOf.default)('click', trigger)) {\n      triggerEvents.onClick = (0, _utils.createChainedFunction)(handleOpenState, triggerEvents.onClick);\n    }\n\n    if ((0, _isOneOf.default)('contextMenu', trigger)) {\n      triggerEvents.onContextMenu = (0, _utils.createChainedFunction)(preventDefault, handleOpenState, triggerEvents.onContextMenu);\n    }\n\n    if ((0, _isOneOf.default)('active', trigger)) {\n      triggerEvents.onClick = (0, _utils.createChainedFunction)(handleDelayedOpen, triggerEvents.onClick);\n    }\n\n    if ((0, _isOneOf.default)('hover', trigger)) {\n      var onMouseOverListener = null;\n      var onMouseOutListener = null;\n\n      if (trigger !== 'none') {\n        onMouseOverListener = function onMouseOverListener(e) {\n          return onMouseEventHandler(handleDelayedOpen, e);\n        };\n\n        onMouseOutListener = function onMouseOutListener(e) {\n          return onMouseEventHandler(handleDelayedClose, e);\n        };\n      }\n\n      triggerEvents.onMouseOver = (0, _utils.createChainedFunction)(onMouseOverListener, onMouseOver);\n      triggerEvents.onMouseOut = (0, _utils.createChainedFunction)(onMouseOutListener, onMouseOut);\n    }\n\n    if ((0, _isOneOf.default)('focus', trigger)) {\n      triggerEvents.onFocus = (0, _utils.createChainedFunction)(handleDelayedOpen, onFocus);\n      triggerEvents.onBlur = (0, _utils.createChainedFunction)(handleDelayedClose, onBlur);\n    }\n\n    if (trigger !== 'none' && followCursor) {\n      triggerEvents.onMouseMove = (0, _utils.createChainedFunction)(handledMoveOverlay, onMouseMove);\n    }\n  }\n\n  var renderOverlay = function renderOverlay() {\n    var overlayProps = (0, _extends2.default)({}, rest, {\n      rootClose: rootClose,\n      triggerTarget: triggerRef,\n      onClose: trigger !== 'none' ? (0, _utils.createChainedFunction)(handleClose, onClose) : undefined,\n      onExited: (0, _utils.createChainedFunction)(followCursor ? handleExited : undefined, onExited),\n      placement: placement,\n      container: container,\n      open: open\n    });\n    var speakerProps = {\n      id: controlId\n    }; // The purpose of adding mouse entry and exit events to the Overlay is to record whether the current cursor is on the Overlay.\n    // When `trigger` is equal to `hover`, if the cursor leaves the `triggerTarget` and stays on the Overlay,\n    // the Overlay will continue to remain open.\n\n    if (trigger !== 'none' && enterable) {\n      speakerProps.onMouseEnter = handleSpeakerMouseEnter;\n      speakerProps.onMouseLeave = handleSpeakerMouseLeave;\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, overlayProps, {\n      ref: overlayRef,\n      childrenProps: speakerProps,\n      followCursor: followCursor,\n      cursorPosition: cursorPosition,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 444,\n        columnNumber: 9\n      }\n    }), typeof speaker === 'function' ? function (props, ref) {\n      return speaker((0, _extends2.default)({}, props, {\n        onClose: handleClose\n      }), ref);\n    } : speaker);\n  };\n\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({\n    ref: triggerRef,\n    'aria-describedby': controlId\n  }, mergeEvents(triggerEvents, children.props))), /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 468,\n      columnNumber: 9\n    }\n  }, renderOverlay()));\n});\n\nOverlayTrigger.displayName = 'OverlayTrigger';\nvar _default = OverlayTrigger;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Overlay/OverlayTrigger.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\n\nvar _Overlay = _interopRequireDefault(__webpack_require__(/*! ./Overlay */ \"./src/Overlay/Overlay.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _isOneOf = _interopRequireDefault(__webpack_require__(/*! ../utils/isOneOf */ \"./src/utils/isOneOf.ts\"));\n\nvar _OverlayContext = _interopRequireDefault(__webpack_require__(/*! ./OverlayContext */ \"./src/Overlay/OverlayContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Overlay/OverlayTrigger.tsx\",\n    _this = void 0;\n\nfunction mergeEvents(events, props) {\n  if (events === void 0) {\n    events = {};\n  }\n\n  if (props === void 0) {\n    props = {};\n  }\n\n  var nextEvents = {};\n  Object.keys(events).forEach(function (eventName) {\n    if (events[eventName]) {\n      var _props;\n\n      nextEvents[eventName] = (0, _utils.createChainedFunction)(events[eventName], (_props = props) === null || _props === void 0 ? void 0 : _props[eventName]);\n    }\n  });\n  return nextEvents;\n}\n\n/**\n * Useful for mouseover and mouseout.\n * In order to resolve the node entering the mouseover element, a mouseout event and a mouseover event will be triggered.\n * https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave\n * @param handler\n * @param event\n */\nfunction onMouseEventHandler(handler, event, delay) {\n  var target = event.currentTarget;\n  var related = event.relatedTarget || (0, _get.default)(event, ['nativeEvent', 'toElement']);\n\n  if ((!related || related !== target) && !(0, _contains.default)(target, related)) {\n    handler(event, delay);\n  }\n}\n\nvar defaultTrigger = ['hover', 'focus'];\n\nvar OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_OverlayContext.default),\n      overlayContainer = _useContext.overlayContainer;\n\n  var children = props.children,\n      _props$container = props.container,\n      container = _props$container === void 0 ? overlayContainer : _props$container,\n      controlId = props.controlId,\n      defaultOpen = props.defaultOpen,\n      _props$trigger = props.trigger,\n      trigger = _props$trigger === void 0 ? defaultTrigger : _props$trigger,\n      disabled = props.disabled,\n      followCursor = props.followCursor,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      openProp = props.open,\n      delay = props.delay,\n      delayOpenProp = props.delayOpen,\n      delayCloseProp = props.delayClose,\n      enterable = props.enterable,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      speaker = props.speaker,\n      _props$rootClose = props.rootClose,\n      rootClose = _props$rootClose === void 0 ? true : _props$rootClose,\n      onClick = props.onClick,\n      onMouseOver = props.onMouseOver,\n      onMouseMove = props.onMouseMove,\n      onMouseOut = props.onMouseOut,\n      onContextMenu = props.onContextMenu,\n      onFocus = props.onFocus,\n      onBlur = props.onBlur,\n      onClose = props.onClose,\n      onExited = props.onExited,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"children\", \"container\", \"controlId\", \"defaultOpen\", \"trigger\", \"disabled\", \"followCursor\", \"readOnly\", \"plaintext\", \"open\", \"delay\", \"delayOpen\", \"delayClose\", \"enterable\", \"placement\", \"speaker\", \"rootClose\", \"onClick\", \"onMouseOver\", \"onMouseMove\", \"onMouseOut\", \"onContextMenu\", \"onFocus\", \"onBlur\", \"onClose\", \"onExited\"]);\n\n  var _usePortal = (0, _utils.usePortal)({\n    container: container\n  }),\n      Portal = _usePortal.Portal;\n\n  var triggerRef = (0, _react.useRef)();\n  var overlayRef = (0, _react.useRef)();\n\n  var _useControlled = (0, _utils.useControlled)(openProp, defaultOpen),\n      open = _useControlled[0],\n      setOpen = _useControlled[1];\n\n  var _useState = (0, _react.useState)(null),\n      cursorPosition = _useState[0],\n      setCursorPosition = _useState[1]; // Delay the timer to close/open the overlay\n  // When the cursor moves from the trigger to the overlay, the overlay will be closed.\n  // In order to keep the overlay open, a timer is used to delay the closing.\n\n\n  var delayOpenTimer = (0, _react.useRef)(null);\n  var delayCloseTimer = (0, _react.useRef)(null);\n  var delayOpen = (0, _isNil.default)(delayOpenProp) ? delay : delayOpenProp;\n  var delayClose = (0, _isNil.default)(delayCloseProp) ? delay : delayCloseProp; // Whether the cursor is on the overlay\n\n  var isOnOverlay = (0, _react.useRef)(false); // Whether the cursor is on the trigger\n\n  var isOnTrigger = (0, _react.useRef)(false);\n  (0, _react.useEffect)(function () {\n    return function () {\n      if (!(0, _isNil.default)(delayOpenTimer.current)) {\n        clearTimeout(delayOpenTimer.current);\n      }\n\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n      }\n    };\n  }, []);\n  var handleOpen = (0, _react.useCallback)(function (delay) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayOpen : delay;\n\n    if (ms && typeof ms === 'number') {\n      return delayOpenTimer.current = setTimeout(function () {\n        delayOpenTimer.current = null;\n        setOpen(true);\n      }, ms);\n    }\n\n    setOpen(true);\n  }, [delayOpen, setOpen]);\n  var handleClose = (0, _react.useCallback)(function (delay) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayClose : delay;\n\n    if (ms && typeof ms === 'number') {\n      return delayCloseTimer.current = setTimeout(function () {\n        delayCloseTimer.current = null;\n        setOpen(false);\n      }, ms);\n    }\n\n    setOpen(false);\n  }, [delayClose, setOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setCursorPosition(null);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      get root() {\n        return triggerRef.current;\n      },\n\n      get overlay() {\n        var _overlayRef$current;\n\n        return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;\n      },\n\n      open: handleOpen,\n      close: handleClose,\n      updatePosition: function updatePosition() {\n        var _overlayRef$current2, _overlayRef$current2$;\n\n        (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 ? void 0 : (_overlayRef$current2$ = _overlayRef$current2.updatePosition) === null || _overlayRef$current2$ === void 0 ? void 0 : _overlayRef$current2$.call(_overlayRef$current2);\n      }\n    };\n  });\n  /**\n   * Close after the cursor leaves.\n   */\n\n  var handleCloseWhenLeave = (0, _react.useCallback)(function () {\n    // When the cursor is not on the overlay and not on the trigger, it is closed.\n    if (!isOnOverlay.current && !isOnTrigger.current) {\n      handleClose();\n    }\n  }, [handleClose]);\n  /**\n   * Toggle open and closed state.\n   */\n\n  var handleOpenState = (0, _react.useCallback)(function () {\n    if (open) {\n      handleCloseWhenLeave();\n    } else {\n      handleOpen();\n    }\n  }, [open, handleCloseWhenLeave, handleOpen]);\n  var handleDelayedOpen = (0, _react.useCallback)(function () {\n    if (!enterable) {\n      return handleOpen();\n    }\n\n    isOnTrigger.current = true;\n\n    if (!(0, _isNil.default)(delayCloseTimer.current)) {\n      clearTimeout(delayCloseTimer.current);\n      delayCloseTimer.current = null;\n      return handleOpen();\n    }\n\n    if (open) {\n      return;\n    }\n\n    handleOpen();\n  }, [enterable, open, handleOpen]);\n  var handleDelayedClose = (0, _react.useCallback)(function () {\n    if (!enterable) {\n      handleClose();\n    }\n\n    isOnTrigger.current = false;\n\n    if (!(0, _isNil.default)(delayOpenTimer.current)) {\n      clearTimeout(delayOpenTimer.current);\n      delayOpenTimer.current = null;\n      return;\n    }\n\n    if (!open || !(0, _isNil.default)(delayCloseTimer.current)) {\n      return;\n    }\n\n    delayCloseTimer.current = setTimeout(function () {\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n        delayCloseTimer.current = null;\n      }\n\n      handleCloseWhenLeave();\n    }, 200);\n  }, [enterable, open, handleClose, handleCloseWhenLeave]);\n  var handleSpeakerMouseEnter = (0, _react.useCallback)(function () {\n    isOnOverlay.current = true;\n  }, []);\n  var handleSpeakerMouseLeave = (0, _react.useCallback)(function () {\n    isOnOverlay.current = false;\n\n    if (!(0, _isOneOf.default)('click', trigger) && !(0, _isOneOf.default)('contextMenu', trigger) && !(0, _isOneOf.default)('active', trigger)) {\n      handleCloseWhenLeave();\n    }\n  }, [handleCloseWhenLeave, trigger]);\n  var handledMoveOverlay = (0, _react.useCallback)(function (event) {\n    setCursorPosition(function () {\n      return {\n        top: event.pageY,\n        left: event.pageX,\n        clientTop: event.clientX,\n        clientLeft: event.clientY\n      };\n    });\n  }, []);\n  var preventDefault = (0, _react.useCallback)(function (event) {\n    event.preventDefault();\n  }, []);\n  var triggerEvents = (0, _react.useMemo)(function () {\n    // Pass events by props\n    var events = {\n      onClick: onClick,\n      onContextMenu: onContextMenu,\n      onMouseOver: onMouseOver,\n      onMouseOut: onMouseOut,\n      onFocus: onFocus,\n      onBlur: onBlur,\n      onMouseMove: onMouseMove\n    }; // When trigger is disabled, no predefined event listeners are added.\n\n    if (disabled || readOnly || plaintext || trigger === 'none') {\n      return events;\n    } // Get the cursor position through onMouseMove.\n    // https://rsuitejs.com/components/tooltip/#follow-cursor\n\n\n    if (followCursor) {\n      events.onMouseMove = (0, _utils.createChainedFunction)(handledMoveOverlay, onMouseMove);\n    } // The `click` event is usually used in `toggle` scenarios.\n    // The first click will open and the second click will close.\n\n\n    if ((0, _isOneOf.default)('click', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleOpenState, events.onClick);\n      return events;\n    } // The difference between it and the click event is that it does not trigger the close.\n\n\n    if ((0, _isOneOf.default)('active', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onClick);\n      return events;\n    }\n\n    if ((0, _isOneOf.default)('hover', trigger)) {\n      var onMouseOverListener = function onMouseOverListener(e) {\n        return onMouseEventHandler(handleDelayedOpen, e);\n      };\n\n      var onMouseOutListener = function onMouseOutListener(e) {\n        return onMouseEventHandler(handleDelayedClose, e);\n      };\n\n      events.onMouseOver = (0, _utils.createChainedFunction)(onMouseOverListener, events.onMouseOver);\n      events.onMouseOut = (0, _utils.createChainedFunction)(onMouseOutListener, events.onMouseOut);\n    }\n\n    if ((0, _isOneOf.default)('focus', trigger)) {\n      events.onFocus = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onFocus);\n      events.onBlur = (0, _utils.createChainedFunction)(handleDelayedClose, events.onBlur);\n    }\n\n    if ((0, _isOneOf.default)('contextMenu', trigger)) {\n      events.onContextMenu = (0, _utils.createChainedFunction)(preventDefault, handleOpenState, events.onContextMenu);\n    }\n\n    return events;\n  }, [disabled, followCursor, handleDelayedClose, handleDelayedOpen, handleOpenState, handledMoveOverlay, onBlur, onClick, onContextMenu, onFocus, onMouseMove, onMouseOut, onMouseOver, plaintext, preventDefault, readOnly, trigger]);\n\n  var renderOverlay = function renderOverlay() {\n    var overlayProps = (0, _extends2.default)({}, rest, {\n      rootClose: rootClose,\n      triggerTarget: triggerRef,\n      onClose: trigger !== 'none' ? (0, _utils.createChainedFunction)(handleClose, onClose) : undefined,\n      onExited: (0, _utils.createChainedFunction)(followCursor ? handleExited : undefined, onExited),\n      placement: placement,\n      container: container,\n      open: open\n    });\n    var speakerProps = {\n      id: controlId\n    }; // The purpose of adding mouse entry and exit events to the Overlay is to record whether the current cursor is on the Overlay.\n    // When `trigger` is equal to `hover`, if the cursor leaves the `triggerTarget` and stays on the Overlay,\n    // the Overlay will continue to remain open.\n\n    if (trigger !== 'none' && enterable) {\n      speakerProps.onMouseEnter = handleSpeakerMouseEnter;\n      speakerProps.onMouseLeave = handleSpeakerMouseLeave;\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, overlayProps, {\n      ref: overlayRef,\n      childrenProps: speakerProps,\n      followCursor: followCursor,\n      cursorPosition: cursorPosition,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 474,\n        columnNumber: 9\n      }\n    }), typeof speaker === 'function' ? function (props, ref) {\n      return speaker((0, _extends2.default)({}, props, {\n        onClose: handleClose\n      }), ref);\n    } : speaker);\n  };\n\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({\n    ref: triggerRef,\n    'aria-describedby': controlId\n  }, mergeEvents(triggerEvents, children.props))), /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 498,\n      columnNumber: 9\n    }\n  }, renderOverlay()));\n});\n\nOverlayTrigger.displayName = 'OverlayTrigger';\nvar _default = OverlayTrigger;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Overlay/OverlayTrigger.tsx?");
 
 /***/ }),
 
@@ -4014,7 +4014,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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _debounce = _interopRequireDefault(__webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\"));\n\nvar _ToggleButton = _interopRequireDefault(__webpack_require__(/*! ./ToggleButton */ \"./src/Picker/ToggleButton.tsx\"));\n\nvar _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../CloseButton */ \"./src/CloseButton/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _useToggleCaret = _interopRequireDefault(__webpack_require__(/*! ../utils/useToggleCaret */ \"./src/utils/useToggleCaret.tsx\"));\n\nvar _TextMask = _interopRequireDefault(__webpack_require__(/*! ../MaskedInput/TextMask */ \"./src/MaskedInput/TextMask.tsx\"));\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/PickerToggle.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2;\n\nvar defaultInputMask = [];\n\nvar PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var activeProp = props.active,\n      _props$as = props.as,\n      Component = _props$as === void 0 ? _ToggleButton.default : _props$as,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker-toggle' : _props$classPrefix,\n      children = props.children,\n      _props$caret = props.caret,\n      caret = _props$caret === void 0 ? true : _props$caret,\n      className = props.className,\n      disabled = props.disabled,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      hasValue = props.hasValue,\n      cleanableProp = props.cleanable,\n      _props$tabIndex = props.tabIndex,\n      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n      id = props.id,\n      value = props.value,\n      input = props.input,\n      inputPlaceholder = props.inputPlaceholder,\n      inputValueProp = props.inputValue,\n      _props$inputMask = props.inputMask,\n      inputMask = _props$inputMask === void 0 ? defaultInputMask : _props$inputMask,\n      onInputChange = props.onInputChange,\n      onInputPressEnter = props.onInputPressEnter,\n      onInputBlur = props.onInputBlur,\n      onInputFocus = props.onInputFocus,\n      onClean = props.onClean,\n      onFocus = props.onFocus,\n      onBlur = props.onBlur,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      caretComponent = props.caretComponent,\n      _props$caretAs = props.caretAs,\n      caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,\n      label = props.label,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"classPrefix\", \"children\", \"caret\", \"className\", \"disabled\", \"readOnly\", \"plaintext\", \"hasValue\", \"cleanable\", \"tabIndex\", \"id\", \"value\", \"input\", \"inputPlaceholder\", \"inputValue\", \"inputMask\", \"onInputChange\", \"onInputPressEnter\", \"onInputBlur\", \"onInputFocus\", \"onClean\", \"onFocus\", \"onBlur\", \"placement\", \"caretComponent\", \"caretAs\", \"label\"]);\n  var inputRef = (0, _react.useRef)(null);\n\n  var _useState = (0, _react.useState)(false),\n      activeState = _useState[0],\n      setActive = _useState[1];\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var getInputValue = (0, _react.useCallback)(function () {\n    return typeof inputValueProp === 'undefined' ? Array.isArray(value) ? value.join(',') : value : inputValueProp;\n  }, [inputValueProp, value]);\n\n  var _useState2 = (0, _react.useState)(getInputValue),\n      inputValue = _useState2[0],\n      setInputValue = _useState2[1];\n\n  (0, _react.useEffect)(function () {\n    var value = getInputValue();\n    setInputValue(value);\n  }, [getInputValue]);\n  var classes = merge(className, withClassPrefix({\n    active: activeProp || activeState\n  }));\n  var handleFocus = (0, _react.useCallback)(function (event) {\n    setActive(true);\n    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n\n    if (input) {\n      var _inputRef$current;\n\n      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();\n    }\n  }, [input, onFocus]);\n  var handleBlur = (0, _react.useCallback)(function (event) {\n    if (inputRef.current && document.activeElement !== inputRef.current) {\n      setActive(false);\n      inputRef.current.blur();\n    }\n\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  }, [onBlur]);\n\n  var handleInputBlur = function handleInputBlur(event) {\n    setInputValue(getInputValue());\n    onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(event);\n  };\n\n  var handleClean = (0, _react.useCallback)(function (event) {\n    event.stopPropagation();\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    setActive(false);\n  }, [onClean]);\n  var handleInputChange = (0, _react.useCallback)(function (event) {\n    var _event$target;\n\n    var value = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;\n    setInputValue(value);\n    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);\n  }, [onInputChange]);\n  var handleInputKeyDown = (0, _react.useCallback)(function (event) {\n    if (input && event.key === _utils.KEY_VALUES.ENTER) {\n      onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);\n    }\n  }, [onInputPressEnter, input]);\n  var ToggleCaret = (0, _useToggleCaret.default)(placement);\n  var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;\n\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"notSelected\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 165,\n        columnNumber: 9\n      }\n    }, hasValue ? children : null);\n  }\n\n  var showCleanButton = cleanableProp && hasValue && !readOnly; // When the component is read-only or disabled, the input is not interactive.\n\n  var inputFocused = readOnly || disabled ? false : input && activeState;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"combobox\",\n    \"aria-haspopup\": \"listbox\",\n    \"aria-expanded\": activeProp,\n    \"aria-disabled\": disabled,\n    \"aria-owns\": id ? id + \"-listbox\" : undefined\n  }, rest, {\n    ref: ref,\n    disabled: disabled,\n    tabIndex: disabled ? undefined : tabIndex,\n    className: classes,\n    onFocus: !disabled ? handleFocus : null // The debounce is set to 200 to solve the flicker caused by the switch between input and div.\n    ,\n    onBlur: !disabled ? (0, _debounce.default)(handleBlur, 200) : null,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 177,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_TextMask.default, {\n    mask: inputMask,\n    value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,\n    onBlur: handleInputBlur,\n    onFocus: onInputFocus,\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    id: id,\n    \"aria-hidden\": !inputFocused,\n    readOnly: !inputFocused,\n    disabled: disabled,\n    \"aria-controls\": id ? id + \"-listbox\" : undefined,\n    tabIndex: -1,\n    className: prefix('textbox', {\n      'read-only': !inputFocused\n    }),\n    placeholder: inputPlaceholder,\n    render: function render(ref, props) {\n      return /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({\n        ref: (0, _utils.mergeRefs)(inputRef, ref)\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 207,\n          columnNumber: 35\n        }\n      }));\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 192,\n      columnNumber: 9\n    }\n  }), children ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(hasValue ? 'value' : 'placeholder'),\n    \"aria-placeholder\": typeof children === 'string' ? children : undefined,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 210,\n      columnNumber: 11\n    }\n  }, label && /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('label'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 214,\n      columnNumber: 23\n    }\n  }, label, \": \"), children) : null, showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"clean\"]))),\n    tabIndex: -1,\n    locale: {\n      closeLabel: 'Clear'\n    },\n    onClick: handleClean,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 220,\n      columnNumber: 11\n    }\n  }), caret && /*#__PURE__*/_react.default.createElement(Caret, {\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"caret\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 227,\n      columnNumber: 19\n    }\n  }));\n});\n\nPickerToggle.displayName = 'PickerToggle';\nPickerToggle.propTypes = {\n  classPrefix: _propTypes.default.string,\n  hasValue: _propTypes.default.bool,\n  cleanable: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  caret: _propTypes.default.bool,\n  as: _propTypes.default.elementType,\n  onClean: _propTypes.default.func,\n  active: _propTypes.default.bool,\n  readOnly: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  caretComponent: (0, _deprecatePropType.default)(_propTypes.default.elementType, 'Use `caretAs` instead.'),\n  caretAs: _propTypes.default.elementType\n};\nvar _default = PickerToggle;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/PickerToggle.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _debounce = _interopRequireDefault(__webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\"));\n\nvar _ToggleButton = _interopRequireDefault(__webpack_require__(/*! ./ToggleButton */ \"./src/Picker/ToggleButton.tsx\"));\n\nvar _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../CloseButton */ \"./src/CloseButton/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _useToggleCaret = _interopRequireDefault(__webpack_require__(/*! ../utils/useToggleCaret */ \"./src/utils/useToggleCaret.tsx\"));\n\nvar _TextMask = _interopRequireDefault(__webpack_require__(/*! ../MaskedInput/TextMask */ \"./src/MaskedInput/TextMask.tsx\"));\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/PickerToggle.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2;\n\nvar defaultInputMask = [];\n\nvar PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var activeProp = props.active,\n      _props$as = props.as,\n      Component = _props$as === void 0 ? _ToggleButton.default : _props$as,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker-toggle' : _props$classPrefix,\n      children = props.children,\n      _props$caret = props.caret,\n      caret = _props$caret === void 0 ? true : _props$caret,\n      className = props.className,\n      disabled = props.disabled,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      hasValue = props.hasValue,\n      editable = props.editable,\n      cleanableProp = props.cleanable,\n      _props$tabIndex = props.tabIndex,\n      tabIndexProp = _props$tabIndex === void 0 ? editable ? -1 : 0 : _props$tabIndex,\n      id = props.id,\n      value = props.value,\n      inputPlaceholder = props.inputPlaceholder,\n      inputValueProp = props.inputValue,\n      _props$inputMask = props.inputMask,\n      inputMask = _props$inputMask === void 0 ? defaultInputMask : _props$inputMask,\n      onInputChange = props.onInputChange,\n      onInputPressEnter = props.onInputPressEnter,\n      onInputBlur = props.onInputBlur,\n      onInputFocus = props.onInputFocus,\n      onClean = props.onClean,\n      onFocus = props.onFocus,\n      onBlur = props.onBlur,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      caretComponent = props.caretComponent,\n      _props$caretAs = props.caretAs,\n      caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,\n      label = props.label,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"classPrefix\", \"children\", \"caret\", \"className\", \"disabled\", \"readOnly\", \"plaintext\", \"hasValue\", \"editable\", \"cleanable\", \"tabIndex\", \"id\", \"value\", \"inputPlaceholder\", \"inputValue\", \"inputMask\", \"onInputChange\", \"onInputPressEnter\", \"onInputBlur\", \"onInputFocus\", \"onClean\", \"onFocus\", \"onBlur\", \"placement\", \"caretComponent\", \"caretAs\", \"label\"]);\n  var inputRef = (0, _react.useRef)(null);\n  var comboboxRef = (0, _react.useRef)(null);\n\n  var _useState = (0, _react.useState)(false),\n      activeState = _useState[0],\n      setActive = _useState[1];\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var getInputValue = (0, _react.useCallback)(function () {\n    return typeof inputValueProp === 'undefined' ? Array.isArray(value) ? value.join(',') : value : inputValueProp;\n  }, [inputValueProp, value]);\n\n  var _useState2 = (0, _react.useState)(getInputValue),\n      inputValue = _useState2[0],\n      setInputValue = _useState2[1];\n\n  (0, _react.useEffect)(function () {\n    if (comboboxRef.current) {\n      var _value = getInputValue();\n\n      setInputValue(_value);\n    }\n  }, [getInputValue]);\n  var classes = merge(className, withClassPrefix({\n    active: activeProp || activeState\n  }));\n  var handleFocus = (0, _react.useCallback)(function (event) {\n    setActive(true);\n\n    if (editable) {\n      // Avoid firing the onFocus event twice when DatePicker and DateRangePicker allow keyboard input.\n      if (event.target === inputRef.current) {\n        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n      } // Force the input to be focused and editable.\n\n\n      if (document.activeElement === comboboxRef.current) {\n        var _inputRef$current;\n\n        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();\n      }\n    } else {\n      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n    }\n  }, [editable, onFocus]);\n  var handleBlur = (0, _react.useCallback)(function (event) {\n    if (inputRef.current && !editable) {\n      setActive(false);\n    } // When activeElement is an input, it remains active.\n\n\n    if (editable && inputRef.current && document.activeElement !== inputRef.current) {\n      setActive(false);\n    }\n\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  }, [editable, onBlur]);\n\n  var handleInputBlur = function handleInputBlur(event) {\n    setInputValue(getInputValue());\n    onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(event);\n  };\n\n  var handleClean = (0, _react.useCallback)(function (event) {\n    var _inputRef$current2, _comboboxRef$current;\n\n    event.stopPropagation();\n    onClean === null || onClean === void 0 ? void 0 : onClean(event); // When the value is cleared, the current component is still in focus.\n\n    editable ? (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus() : (_comboboxRef$current = comboboxRef.current) === null || _comboboxRef$current === void 0 ? void 0 : _comboboxRef$current.focus();\n  }, [editable, onClean]);\n  var handleInputChange = (0, _react.useCallback)(function (event) {\n    var _event$target;\n\n    var value = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;\n    setInputValue(value);\n    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);\n  }, [onInputChange]);\n  var handleInputKeyDown = (0, _react.useCallback)(function (event) {\n    if (editable && event.key === _utils.KEY_VALUES.ENTER) {\n      onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);\n    }\n  }, [onInputPressEnter, editable]);\n  var renderInput = (0, _react.useCallback)(function (ref, props) {\n    return /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(inputRef, ref),\n      style: {\n        pointerEvents: editable ? undefined : 'none'\n      }\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 184,\n        columnNumber: 9\n      }\n    }));\n  }, [editable]);\n  var ToggleCaret = (0, _useToggleCaret.default)(placement);\n  var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;\n\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"notSelected\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 198,\n        columnNumber: 9\n      }\n    }, hasValue ? children : null);\n  }\n\n  var showCleanButton = cleanableProp && hasValue && !readOnly; // When the component is read-only or disabled, the input is not interactive.\n\n  var inputFocused = readOnly || disabled ? false : editable && activeState;\n  var tabIndex = disabled ? undefined : tabIndexProp;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"combobox\",\n    \"aria-haspopup\": \"listbox\",\n    \"aria-expanded\": activeProp,\n    \"aria-disabled\": disabled,\n    \"aria-owns\": id ? id + \"-listbox\" : undefined\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(comboboxRef, ref),\n    disabled: disabled,\n    tabIndex: tabIndex,\n    className: classes,\n    onFocus: !disabled ? handleFocus : null // The debounce is set to 200 to solve the flicker caused by the switch between input and div.\n    ,\n    onBlur: !disabled ? (0, _debounce.default)(handleBlur, 200) : null,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 212,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_TextMask.default, {\n    mask: inputMask,\n    value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,\n    onBlur: handleInputBlur,\n    onFocus: onInputFocus,\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    id: id,\n    \"aria-hidden\": !inputFocused,\n    readOnly: !inputFocused,\n    disabled: disabled,\n    \"aria-controls\": id ? id + \"-listbox\" : undefined,\n    tabIndex: editable ? 0 : -1,\n    className: prefix('textbox', {\n      'read-only': !inputFocused\n    }),\n    placeholder: inputPlaceholder,\n    render: renderInput,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 227,\n      columnNumber: 9\n    }\n  }), children ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(hasValue ? 'value' : 'placeholder'),\n    \"aria-placeholder\": typeof children === 'string' ? children : undefined,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 245,\n      columnNumber: 11\n    }\n  }, label && /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('label'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 249,\n      columnNumber: 23\n    }\n  }, label, \": \"), children) : null, showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"clean\"]))),\n    tabIndex: -1,\n    locale: {\n      closeLabel: 'Clear'\n    },\n    onClick: handleClean,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 255,\n      columnNumber: 11\n    }\n  }), caret && /*#__PURE__*/_react.default.createElement(Caret, {\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"caret\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 262,\n      columnNumber: 19\n    }\n  }));\n});\n\nPickerToggle.displayName = 'PickerToggle';\nPickerToggle.propTypes = {\n  classPrefix: _propTypes.default.string,\n  hasValue: _propTypes.default.bool,\n  cleanable: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  caret: _propTypes.default.bool,\n  as: _propTypes.default.elementType,\n  onClean: _propTypes.default.func,\n  active: _propTypes.default.bool,\n  readOnly: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  caretComponent: (0, _deprecatePropType.default)(_propTypes.default.elementType, 'Use `caretAs` instead.'),\n  caretAs: _propTypes.default.elementType\n};\nvar _default = PickerToggle;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/PickerToggle.tsx?");
 
 /***/ }),