rsuite 5.10.0 → 5.11.0

package/dist/rsuite.css

@@ -2782,7 +2782,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   line-height: 0;
 }
 .rs-btn-toolbar > :not(:first-child):not(.rs-btn-block) {
-  margin-left: 5px;
+  margin-left: 10px;
 }
 .rs-picker-subtle .picker-subtle-toggle {
   position: relative;

package/dist/rsuite.js

@@ -2353,7 +2353,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      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\"]);\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 updateCalendarDate = (0, _react.useCallback)(function (value) {\n    setCalendarDate((0, _utils2.getCalendarDate)({\n      value: value\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: 271,\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: 273,\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    updateCalendarDate(nextSelectDates);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    hasDoneSelect.current = !hasDoneSelect.current;\n  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDate]);\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 handleChangeCalendarDate = (0, _react.useCallback)(function (index, date) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    updateCalendarDate(nextCalendarDate);\n  }, [calendarDate, updateCalendarDate]);\n  var handleChangeCalendarTime = (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    handleChangeCalendarDate(index, date);\n  }, [handleChangeCalendarDate]);\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);\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    updateCalendarDate(null);\n    handleValueUpdate(event, null);\n  }, [handleValueUpdate, updateCalendarDate]);\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    updateCalendarDate(selectValue);\n  }, // eslint-disable-next-line react-hooks/exhaustive-deps\n  [character, rangeFormatStr, updateCalendarDate]);\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    updateCalendarDate(nextCalendarDate);\n  }, [defaultCalendarValue, updateCalendarDate, 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 panelProps = {\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      showOneCalendar: showOneCalendar,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarDate: handleChangeCalendarDate,\n      onChangeCalendarTime: handleChangeCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian\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: 712,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 718,\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: 719,\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: 720,\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: 721,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, panelProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 722,\n        columnNumber: 15\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, panelProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 723,\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: 726,\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: 752,\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: 761,\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: 768,\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 updateCalendarDate = (0, _react.useCallback)(function (value) {\n    setCalendarDate((0, _utils2.getCalendarDate)({\n      value: value\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: 275,\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: 277,\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    updateCalendarDate(nextSelectDates);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    hasDoneSelect.current = !hasDoneSelect.current;\n  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDate]);\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 handleChangeCalendarDate = (0, _react.useCallback)(function (index, date) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    updateCalendarDate(nextCalendarDate);\n  }, [calendarDate, updateCalendarDate]);\n  var handleChangeCalendarTime = (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    handleChangeCalendarDate(index, date);\n  }, [handleChangeCalendarDate]);\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);\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    updateCalendarDate(null);\n    handleValueUpdate(event, null);\n  }, [handleValueUpdate, updateCalendarDate]);\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    updateCalendarDate(selectValue);\n  }, // eslint-disable-next-line react-hooks/exhaustive-deps\n  [character, rangeFormatStr, updateCalendarDate]);\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    updateCalendarDate(nextCalendarDate);\n  }, [defaultCalendarValue, updateCalendarDate, 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 panelProps = {\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      showOneCalendar: showOneCalendar,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarDate: handleChangeCalendarDate,\n      onChangeCalendarTime: handleChangeCalendarTime,\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: 717,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 723,\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: 724,\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: 725,\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: 726,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, panelProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 727,\n        columnNumber: 15\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, panelProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 728,\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: 731,\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: 757,\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: 766,\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: 773,\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?");
 
 /***/ }),
 
@@ -3222,7 +3222,7 @@ eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/h
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = Menubar;\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _MenuContext = _interopRequireWildcard(__webpack_require__(/*! ./MenuContext */ \"./src/Menu/MenuContext.ts\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _events = __webpack_require__(/*! ../utils/events */ \"./src/utils/events.ts\");\n\nvar _useMenu = _interopRequireDefault(__webpack_require__(/*! ./useMenu */ \"./src/Menu/useMenu.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Menu/Menubar.tsx\";\n\nfunction Menubar(_ref) {\n  var _ref$vertical = _ref.vertical,\n      vertical = _ref$vertical === void 0 ? false : _ref$vertical,\n      children = _ref.children,\n      onActivateItem = _ref.onActivateItem;\n  var menubar = (0, _useMenu.default)({\n    role: 'menubar'\n  });\n  var _menubar$ = menubar[0],\n      items = _menubar$.items,\n      activeItemIndex = _menubar$.activeItemIndex,\n      dispatch = menubar[1];\n  var menubarElementRef = (0, _react.useRef)(null);\n  var onFocus = (0, _react.useCallback)(function (event) {\n    // Focus moves inside Menubar\n    if ((0, _events.isFocusEntering)(event)) {\n      if (activeItemIndex === null) {\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n      }\n    }\n  }, [activeItemIndex, dispatch]);\n  var onBlur = (0, _react.useCallback)(function (event) {\n    // Focus moves outside of Menubar\n    if ((0, _events.isFocusLeaving)(event)) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.None\n      });\n    }\n  }, [dispatch]);\n\n  var _useCustom = (0, _utils.useCustom)('Menubar'),\n      rtl = _useCustom.rtl;\n\n  var onKeyDown = (0, _react.useCallback)(function (event) {\n    var activeItemElement = (0, _isNil.default)(activeItemIndex) ? null : items[activeItemIndex].element;\n\n    switch (true) {\n      case !vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case !vertical && rtl && event.key === _utils.KEY_VALUES.LEFT:\n      case vertical && event.key === _utils.KEY_VALUES.DOWN:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Next\n        });\n        break;\n\n      case !vertical && !rtl && event.key === _utils.KEY_VALUES.LEFT:\n      case !vertical && rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case vertical && event.key === _utils.KEY_VALUES.UP:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Prev\n        });\n        break;\n\n      case event.key === _utils.KEY_VALUES.HOME:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n        break;\n\n      case event.key === _utils.KEY_VALUES.END:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Last\n        });\n        break;\n\n      case !vertical && event.key === _utils.KEY_VALUES.DOWN:\n      case vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case vertical && rtl && event.key === _utils.KEY_VALUES.LEFT:\n        if ((activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.getAttribute('aria-haspopup')) === 'menu') {\n          event.preventDefault();\n          event.stopPropagation();\n          activeItemElement.click();\n        }\n\n        break;\n\n      case event.key === _utils.KEY_VALUES.ENTER:\n      case event.key === _utils.KEY_VALUES.SPACE:\n        event.preventDefault();\n        event.stopPropagation();\n        activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.click();\n        break;\n    }\n  }, [rtl, items, activeItemIndex, dispatch, vertical]); // Only used for handling click events bubbling from children\n  // Which indicates that a child menuitem is being activated\n\n  var onClick = (0, _react.useCallback)(function (event) {\n    if (items.some(function (item) {\n      return item.element === event.target;\n    })) {\n      onActivateItem === null || onActivateItem === void 0 ? void 0 : onActivateItem(event);\n    }\n  }, [items, onActivateItem]);\n  return /*#__PURE__*/_react.default.createElement(_MenuContext.default.Provider, {\n    value: menubar,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 127,\n      columnNumber: 5\n    }\n  }, children({\n    role: 'menubar',\n    tabIndex: 0,\n    onFocus: onFocus,\n    onBlur: onBlur,\n    onKeyDown: onKeyDown,\n    onClick: onClick,\n    'aria-activedescendant': (0, _isNil.default)(activeItemIndex) ? undefined : items[activeItemIndex].element.id,\n    'aria-orientation': vertical ? 'vertical' : undefined // implicitly set 'horizontal'\n\n  }, menubarElementRef));\n}\n\n//# sourceURL=webpack://rsuite/./src/Menu/Menubar.tsx?");
+eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = Menubar;\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _MenuContext = _interopRequireWildcard(__webpack_require__(/*! ./MenuContext */ \"./src/Menu/MenuContext.ts\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _events = __webpack_require__(/*! ../utils/events */ \"./src/utils/events.ts\");\n\nvar _useMenu = _interopRequireDefault(__webpack_require__(/*! ./useMenu */ \"./src/Menu/useMenu.ts\"));\n\nvar _dom = __webpack_require__(/*! ../utils/dom */ \"./src/utils/dom.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Menu/Menubar.tsx\";\n\nfunction Menubar(_ref) {\n  var _items$activeItemInde3;\n\n  var _ref$vertical = _ref.vertical,\n      vertical = _ref$vertical === void 0 ? false : _ref$vertical,\n      children = _ref.children,\n      onActivateItem = _ref.onActivateItem;\n  var menubar = (0, _useMenu.default)({\n    role: 'menubar'\n  });\n  var _menubar$ = menubar[0],\n      items = _menubar$.items,\n      activeItemIndex = _menubar$.activeItemIndex,\n      dispatch = menubar[1];\n  var menubarElementRef = (0, _react.useRef)(null);\n  var onFocus = (0, _react.useCallback)(function (event) {\n    // Focus moves inside Menubar\n    if ((0, _events.isFocusEntering)(event) && // Skip if focus is moving to a focusable element within this menu\n    !(event.target !== event.currentTarget && (0, _dom.isFocusableElement)(event.target))) {\n      if (activeItemIndex === null) {\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n      }\n    }\n  }, [activeItemIndex, dispatch]);\n  var onBlur = (0, _react.useCallback)(function (event) {\n    // Focus moves outside of Menubar\n    if ((0, _events.isFocusLeaving)(event)) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.None\n      });\n    }\n  }, [dispatch]);\n\n  var _useCustom = (0, _utils.useCustom)('Menubar'),\n      rtl = _useCustom.rtl;\n\n  var onKeyDown = (0, _react.useCallback)(function (event) {\n    var _items$activeItemInde, _items$activeItemInde2;\n\n    var activeItemElement = (0, _isNil.default)(activeItemIndex) ? null : (_items$activeItemInde = (_items$activeItemInde2 = items[activeItemIndex]) === null || _items$activeItemInde2 === void 0 ? void 0 : _items$activeItemInde2.element) !== null && _items$activeItemInde !== void 0 ? _items$activeItemInde : null;\n\n    switch (true) {\n      case !vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case !vertical && rtl && event.key === _utils.KEY_VALUES.LEFT:\n      case vertical && event.key === _utils.KEY_VALUES.DOWN:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Next\n        });\n        break;\n\n      case !vertical && !rtl && event.key === _utils.KEY_VALUES.LEFT:\n      case !vertical && rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case vertical && event.key === _utils.KEY_VALUES.UP:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Prev\n        });\n        break;\n\n      case event.key === _utils.KEY_VALUES.HOME:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n        break;\n\n      case event.key === _utils.KEY_VALUES.END:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Last\n        });\n        break;\n\n      case !vertical && event.key === _utils.KEY_VALUES.DOWN:\n      case vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case vertical && rtl && event.key === _utils.KEY_VALUES.LEFT:\n        if ((activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.getAttribute('aria-haspopup')) === 'menu') {\n          event.preventDefault();\n          event.stopPropagation();\n          activeItemElement.click();\n        }\n\n        break;\n\n      case event.key === _utils.KEY_VALUES.ENTER:\n      case event.key === _utils.KEY_VALUES.SPACE:\n        event.preventDefault();\n        event.stopPropagation();\n        activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.click();\n        break;\n    }\n  }, [rtl, items, activeItemIndex, dispatch, vertical]); // Only used for handling click events bubbling from children\n  // Which indicates that a child menuitem is being activated\n\n  var onClick = (0, _react.useCallback)(function (event) {\n    if (items.some(function (item) {\n      return item.element === event.target;\n    })) {\n      onActivateItem === null || onActivateItem === void 0 ? void 0 : onActivateItem(event);\n    }\n  }, [items, onActivateItem]);\n  return /*#__PURE__*/_react.default.createElement(_MenuContext.default.Provider, {\n    value: menubar,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 132,\n      columnNumber: 5\n    }\n  }, children({\n    role: 'menubar',\n    tabIndex: 0,\n    onFocus: onFocus,\n    onBlur: onBlur,\n    onKeyDown: onKeyDown,\n    onClick: onClick,\n    'aria-activedescendant': (0, _isNil.default)(activeItemIndex) ? undefined : (_items$activeItemInde3 = items[activeItemIndex]) === null || _items$activeItemInde3 === void 0 ? void 0 : _items$activeItemInde3.element.id,\n    'aria-orientation': vertical ? 'vertical' : undefined // implicitly set 'horizontal'\n\n  }, menubarElementRef));\n}\n\n//# sourceURL=webpack://rsuite/./src/Menu/Menubar.tsx?");
 
 /***/ }),