rsuite 5.59.3-alpha.1 → 5.60.1

package/dist/rsuite.js

@@ -7011,7 +7011,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _DateRangePickerContext = _interopRequireDefault(__webpack_require__(/*! ./DateRangePickerContext */ \"./src/DateRangePicker/DateRangePickerContext.ts\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _Header = _interopRequireDefault(__webpack_require__(/*! ./Header */ \"./src/DateRangePicker/Header.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    className = props.className,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    defaultCalendarValue = props.defaultCalendarValue,\n    defaultValue = props.defaultValue,\n    plaintext = props.plaintext,\n    disabled = props.disabled,\n    DEPRECATED_disabledDateProp = props.disabledDate,\n    shouldDisableDate = props.shouldDisableDate,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    hoverRange = props.hoverRange,\n    idProp = props.id,\n    _props$isoWeek = props.isoWeek,\n    isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    ranges = props.ranges,\n    readOnly = props.readOnly,\n    _props$showOneCalenda = props.showOneCalendar,\n    showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n    showWeekNumbers = props.showWeekNumbers,\n    showMeridian = props.showMeridian,\n    _props$showHeader = props.showHeader,\n    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    valueProp = props.value,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onOk = props.onOk,\n    onSelect = props.onSelect,\n    onShortcutClick = props.onShortcutClick,\n    renderTitle = props.renderTitle,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"plaintext\", \"disabled\", \"disabledDate\", \"shouldDisableDate\", \"format\", \"hoverRange\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"readOnly\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"showHeader\", \"style\", \"size\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onSelect\", \"onShortcutClick\", \"renderTitle\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  var _useState = (0, _react.useState)(true),\n    isSelectedIdle = _useState[0],\n    setSelectedIdle = _useState[1];\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n    selectedDates = _useState2[0],\n    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  var _useState3 = (0, _react.useState)(null),\n    hoverDateRange = _useState3[0],\n    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.\n  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({\n      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n    })),\n    calendarDate = _useState4[0],\n    setCalendarDate = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  var selectRangeValueRef = (0, _react.useRef)(null);\n  var _useState5 = (0, _react.useState)(),\n    activeCalendarKey = _useState5[0],\n    setActiveCalendarKey = _useState5[1];\n  /**\n   * Get the time on the calendar.\n   */\n  var getCalendarDatetime = function getCalendarDatetime(calendarKey) {\n    var index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  var setCalendarDateRange = function setCalendarDateRange(_ref3) {\n    var dateRange = _ref3.dateRange,\n      calendarKey = _ref3.calendarKey,\n      eventName = _ref3.eventName;\n    var nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {\n      var _startDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      var _endDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]\n      });\n      nextValue = [_startDate, _endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey,\n      allowAameMonth: onlyShowMonth\n    });\n    setCalendarDate(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n\n  // if valueProp changed then update selectValue/hoverValue\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  var getInputHtmlSize = function getInputHtmlSize() {\n    var padding = 4;\n    var strings = rangeFormatStr;\n    if (value) {\n      var _startDate2 = value[0],\n        _endDate2 = value[1];\n      strings = \"\" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);\n    }\n    return (0, _utils.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  var getHoverRangeValue = function getHoverRangeValue(date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    var hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  var onMouseMove = (0, _utils.useEventCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {\n        nextSelectDates = [(0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    setSelectedDates(nextSelectDates);\n    setCalendarDateRange({\n      dateRange: nextSelectDates,\n      calendarKey: calendarKey,\n      eventName: 'changeDate'\n    });\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var onChangeCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  var onChangeCalendarTime = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _dateUtils.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var onToggleMeridian = (0, _utils.useEventCallback)(function (index) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);\n    setCalendarDate(nextCalendarDate);\n\n    // If the value already exists, update the value again.\n    if (selectedDates.length === 2) {\n      var nextSelectedDates = Array.from(selectedDates);\n      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);\n      setSelectedDates(nextSelectedDates);\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    var nextCalendarDate;\n    if (value && value.length) {\n      var _startDate3 = value[0],\n        endData = value[1];\n      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    var value = range.value;\n    setCalendarDateRange({\n      dateRange: value,\n      eventName: 'shortcutSelection'\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    setDateRange(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!value) {\n      return;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    var selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue);\n  });\n  var isDateDisabled = function isDateDisabled(date, options) {\n    var selectDate = options.selectDate,\n      selectedDone = options.selectedDone,\n      target = options.target;\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date, selectDate, selectedDone, target);\n    }\n    if (typeof DEPRECATED_disabledDateProp === 'function') {\n      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);\n    }\n    return false;\n  };\n  var disableByBetween = function disableByBetween(start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {\n      if (isDateDisabled(start, {\n        selectDate: selectedDates,\n        selectedDone: isSelectedIdle,\n        target: type\n      })) {\n        return true;\n      }\n      start = (0, _dateUtils.addDays)(start, 1);\n    }\n    return false;\n  };\n  var disableOkButton = function disableOkButton() {\n    var start = selectedDates[0],\n      end = selectedDates[1];\n    if (!start || !end || !isSelectedIdle) {\n      return true;\n    }\n    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  };\n  var disableShortcut = function disableShortcut(value) {\n    if (value === void 0) {\n      value = [];\n    }\n    var _value = value,\n      start = _value[0],\n      end = _value[1];\n    if (!start || !end) {\n      return true;\n    }\n    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref4.open;\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('popup-daterange'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    var panelStyles = {\n      minWidth: showOneCalendar ? 'auto' : 528\n    };\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var disabledDate = function disabledDate(date, values, type) {\n      return isDateDisabled(date, {\n        selectDate: values,\n        selectedDone: isSelectedIdle,\n        target: type\n      });\n    };\n    var calendarProps = {\n      locale: locale,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      showMeridian: showMeridian,\n      calendarDate: calendarDate,\n      limitStartYear: limitStartYear,\n      showWeekNumbers: showWeekNumbers,\n      format: formatStr,\n      value: selectedDates,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      onSelect: handleSelectDate,\n      onChangeCalendarMonth: onChangeCalendarMonth,\n      onChangeCalendarTime: onChangeCalendarTime,\n      onToggleMeridian: onToggleMeridian,\n      onMouseMove: onMouseMove,\n      disabledDate: disabledDate,\n      renderTitle: renderTitle\n    };\n    var getCalendars = function getCalendars() {\n      if (showOneCalendar) {\n        return /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n          index: activeCalendarKey === 'end' ? 1 : 0\n        }, calendarProps, {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 773,\n            columnNumber: 16\n          }\n        }));\n      }\n      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 0\n      }, calendarProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 778,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 1\n      }, calendarProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 779,\n          columnNumber: 11\n        }\n      })));\n    };\n    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n    })) || [];\n    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 790,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 799,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 800,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disableShortcut: disableShortcut,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 802,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 815,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 816,\n        columnNumber: 15\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(_Header.default, {\n      value: isSelectedIdle ? selectedDates : hoverDateRange,\n      formatStr: formatStr,\n      character: character,\n      clickable: showOneCalendar,\n      activeKey: activeCalendarKey,\n      onSelect: setActiveCalendarKey,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 818,\n        columnNumber: 19\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 828,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {\n      value: {\n        isSelectedIdle: isSelectedIdle\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 831,\n        columnNumber: 19\n      }\n    }, getCalendars()))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disableOkBtn: disableOkButton,\n      disableShortcut: disableShortcut,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 836,\n        columnNumber: 15\n      }\n    })))));\n  };\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'daterange',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var isErrorValue = function isErrorValue(value) {\n    if (!value) {\n      return false;\n    }\n\n    // If the value is an empty array, it is not an error value.\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _dateUtils.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    var disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _utils.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    ref: trigger,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExited: onExited,\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 908,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 918,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 924,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 926,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 935,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    onChange: handleInputChange,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    onKeyDown: handleInputKeyDown,\n    htmlSize: getInputHtmlSize(),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 938,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 956,\n      columnNumber: 13\n    }\n  }))));\n});\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _DateRangePickerContext = _interopRequireDefault(__webpack_require__(/*! ./DateRangePickerContext */ \"./src/DateRangePicker/DateRangePickerContext.ts\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _Header = _interopRequireDefault(__webpack_require__(/*! ./Header */ \"./src/DateRangePicker/Header.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    className = props.className,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    defaultCalendarValue = props.defaultCalendarValue,\n    defaultValue = props.defaultValue,\n    plaintext = props.plaintext,\n    disabled = props.disabled,\n    DEPRECATED_disabledDateProp = props.disabledDate,\n    shouldDisableDate = props.shouldDisableDate,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    hoverRange = props.hoverRange,\n    idProp = props.id,\n    _props$isoWeek = props.isoWeek,\n    isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    ranges = props.ranges,\n    readOnly = props.readOnly,\n    _props$showOneCalenda = props.showOneCalendar,\n    showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n    showWeekNumbers = props.showWeekNumbers,\n    showMeridian = props.showMeridian,\n    _props$showHeader = props.showHeader,\n    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    valueProp = props.value,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onOk = props.onOk,\n    onSelect = props.onSelect,\n    onShortcutClick = props.onShortcutClick,\n    renderTitle = props.renderTitle,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"plaintext\", \"disabled\", \"disabledDate\", \"shouldDisableDate\", \"format\", \"hoverRange\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"readOnly\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"showHeader\", \"style\", \"size\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onSelect\", \"onShortcutClick\", \"renderTitle\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate; // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0\n  var calendarGap = showOneCalendar ? 0 : 1;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  var _useState = (0, _react.useState)(true),\n    isSelectedIdle = _useState[0],\n    setSelectedIdle = _useState[1];\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n    selectedDates = _useState2[0],\n    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  var _useState3 = (0, _react.useState)(value),\n    hoverDateRange = _useState3[0],\n    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.\n  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({\n      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n    })),\n    calendarDate = _useState4[0],\n    setCalendarDate = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  var selectRangeValueRef = (0, _react.useRef)(null);\n  var _useState5 = (0, _react.useState)(),\n    activeCalendarKey = _useState5[0],\n    setActiveCalendarKey = _useState5[1];\n  /**\n   * Get the time on the calendar.\n   */\n  var getCalendarDatetime = function getCalendarDatetime(calendarKey) {\n    var index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  var setCalendarDateRange = function setCalendarDateRange(_ref3) {\n    var dateRange = _ref3.dateRange,\n      calendarKey = _ref3.calendarKey,\n      eventName = _ref3.eventName;\n    var nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {\n      var _startDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      var _endDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, calendarGap) : dateRange[1]\n      });\n      nextValue = [_startDate, _endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey,\n      // When only the month is displayed and only one calendar is displayed,\n      // there is no need to add a month and two calendar panels are allowed to display the same month\n      allowSameMonth: onlyShowMonth || showOneCalendar\n    });\n    setCalendarDate(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n\n  // if valueProp changed then update selectValue/hoverValue\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  var getInputHtmlSize = function getInputHtmlSize() {\n    var padding = 4;\n    var strings = rangeFormatStr;\n    if (value) {\n      var _startDate2 = value[0],\n        _endDate2 = value[1];\n      strings = \"\" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);\n    }\n    return (0, _utils.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  var getHoverRangeValue = function getHoverRangeValue(date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    var hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  var onMouseMove = (0, _utils.useEventCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {\n        nextSelectDates = [(0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    if (isSelectedIdle) {\n      setActiveCalendarKey('end');\n    } else {\n      setActiveCalendarKey('start');\n    }\n    setSelectedDates(nextSelectDates);\n    setCalendarDateRange({\n      dateRange: nextSelectDates,\n      calendarKey: calendarKey,\n      eventName: 'changeDate'\n    });\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var onChangeCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  var onChangeCalendarTime = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _dateUtils.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var onToggleMeridian = (0, _utils.useEventCallback)(function (index) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);\n    setCalendarDate(nextCalendarDate);\n\n    // If the value already exists, update the value again.\n    if (selectedDates.length === 2) {\n      var nextSelectedDates = Array.from(selectedDates);\n      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);\n      setSelectedDates(nextSelectedDates);\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    var nextCalendarDate;\n    if (value && value.length) {\n      var _startDate3 = value[0],\n        endData = value[1];\n      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, calendarGap) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    var value = range.value;\n    setCalendarDateRange({\n      dateRange: value,\n      eventName: 'shortcutSelection'\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    setDateRange(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!value) {\n      return;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    var selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue);\n  });\n  var isDateDisabled = function isDateDisabled(date, options) {\n    var selectDate = options.selectDate,\n      selectedDone = options.selectedDone,\n      target = options.target;\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date, selectDate, selectedDone, target);\n    }\n    if (typeof DEPRECATED_disabledDateProp === 'function') {\n      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);\n    }\n    return false;\n  };\n  var disableByBetween = function disableByBetween(start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {\n      if (isDateDisabled(start, {\n        selectDate: selectedDates,\n        selectedDone: isSelectedIdle,\n        target: type\n      })) {\n        return true;\n      }\n      start = (0, _dateUtils.addDays)(start, 1);\n    }\n    return false;\n  };\n  var disableOkButton = function disableOkButton() {\n    var start = selectedDates[0],\n      end = selectedDates[1];\n    if (!start || !end || !isSelectedIdle) {\n      return true;\n    }\n    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  };\n  var disableShortcut = function disableShortcut(value) {\n    if (value === void 0) {\n      value = [];\n    }\n    var _value = value,\n      start = _value[0],\n      end = _value[1];\n    if (!start || !end) {\n      return true;\n    }\n    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref4.open;\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('popup-daterange'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    var panelStyles = {\n      minWidth: showOneCalendar ? 'auto' : 528\n    };\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var disabledDate = function disabledDate(date, values, type) {\n      return isDateDisabled(date, {\n        selectDate: values,\n        selectedDone: isSelectedIdle,\n        target: type\n      });\n    };\n    var calendarProps = {\n      locale: locale,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      showMeridian: showMeridian,\n      calendarDate: calendarDate,\n      limitStartYear: limitStartYear,\n      showWeekNumbers: showWeekNumbers,\n      format: formatStr,\n      value: selectedDates,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      onSelect: handleSelectDate,\n      onChangeCalendarMonth: onChangeCalendarMonth,\n      onChangeCalendarTime: onChangeCalendarTime,\n      onToggleMeridian: onToggleMeridian,\n      onMouseMove: onMouseMove,\n      disabledDate: disabledDate,\n      renderTitle: renderTitle\n    };\n    var getCalendars = function getCalendars() {\n      if (showOneCalendar) {\n        return /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n          index: activeCalendarKey === 'end' ? 1 : 0\n        }, calendarProps, {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 785,\n            columnNumber: 16\n          }\n        }));\n      }\n      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 0\n      }, calendarProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 790,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 1\n      }, calendarProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 791,\n          columnNumber: 11\n        }\n      })));\n    };\n    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n    })) || [];\n    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 802,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 811,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 812,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disableShortcut: disableShortcut,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 814,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 827,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 828,\n        columnNumber: 15\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(_Header.default, {\n      value: isSelectedIdle ? selectedDates : hoverDateRange,\n      formatStr: formatStr,\n      character: character,\n      clickable: showOneCalendar,\n      activeKey: activeCalendarKey,\n      onSelect: setActiveCalendarKey,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 830,\n        columnNumber: 19\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 840,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {\n      value: {\n        isSelectedIdle: isSelectedIdle\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 843,\n        columnNumber: 19\n      }\n    }, getCalendars()))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disableOkBtn: disableOkButton,\n      disableShortcut: disableShortcut,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 848,\n        columnNumber: 15\n      }\n    })))));\n  };\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'daterange',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var isErrorValue = function isErrorValue(value) {\n    if (!value) {\n      return false;\n    }\n\n    // If the value is an empty array, it is not an error value.\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _dateUtils.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    var disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _utils.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    ref: trigger,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExited: onExited,\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 920,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 930,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 936,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 938,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 947,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    htmlSize: getInputHtmlSize(),\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 950,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 968,\n      columnNumber: 13\n    }\n  }))));\n});\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
 
 /***/ }),
 
@@ -7066,7 +7066,7 @@ eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/h
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.getSafeCalendarDate = getSafeCalendarDate;\nexports.getWeekHoverRange = exports.getMonthHoverRange = exports.isSameRange = void 0;\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nfunction getSafeCalendarDate(_ref) {\n  var _value;\n  var value = _ref.value,\n    _ref$calendarKey = _ref.calendarKey,\n    calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,\n    allowAameMonth = _ref.allowAameMonth;\n  // Update calendarDate if the value is not null\n  value = (_value = value) !== null && _value !== void 0 ? _value : [];\n  var gap = allowAameMonth ? 0 : 1;\n  if (value[0] && value[1]) {\n    var diffMonth = (0, _dateUtils.differenceInCalendarMonths)(value[1], value[0]);\n    if (calendarKey === 'start') {\n      return [value[0], diffMonth <= 0 ? (0, _dateUtils.copyTime)({\n        from: value[1],\n        to: (0, _dateUtils.addMonths)(value[0], gap)\n      }) : value[1]];\n    } else if (calendarKey === 'end') {\n      return [diffMonth <= 0 ? (0, _dateUtils.copyTime)({\n        from: value[0],\n        to: (0, _dateUtils.addMonths)(value[1], -gap)\n      }) : value[0], value[1]];\n    }\n\n    // If only the start date\n  } else if (value[0]) {\n    return [value[0], (0, _dateUtils.addMonths)(value[0], gap)];\n  }\n  var todayDate = new Date();\n  return [todayDate, (0, _dateUtils.addMonths)(todayDate, gap)];\n}\nvar isSameRange = function isSameRange(source, dest, format) {\n  // If both are null, reguard as same\n  if (null === source && null === dest) return true;\n  // If only one is null, regard as different\n  if (null === source || null === dest) return false;\n  var result = (0, _dateUtils.isSameDay)(source[0], dest[0]) && (0, _dateUtils.isSameDay)(source[1], dest[1]);\n  if ((0, _dateUtils.shouldRenderTime)(format)) {\n    result && (result = (0, _dateUtils.isSameSecond)(source[0], dest[0]) && (0, _dateUtils.isSameSecond)(source[1], dest[1]));\n  }\n  return result;\n};\nexports.isSameRange = isSameRange;\nvar getMonthHoverRange = function getMonthHoverRange(date) {\n  return [(0, _dateUtils.startOfMonth)(date), (0, _dateUtils.endOfMonth)(date)];\n};\nexports.getMonthHoverRange = getMonthHoverRange;\nvar getWeekHoverRange = function getWeekHoverRange(isoWeek, date) {\n  if (isoWeek) {\n    // set to the first day of this week according to ISO 8601, 12:00 am\n    return [(0, _dateUtils.startOfISOWeek)(date), (0, _dateUtils.endOfISOWeek)(date)];\n  }\n  return [(0, _dateUtils.startOfWeek)(date), (0, _dateUtils.endOfWeek)(date)];\n};\nexports.getWeekHoverRange = getWeekHoverRange;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/utils.ts?");
+eval("\n\nexports.__esModule = true;\nexports.getSafeCalendarDate = getSafeCalendarDate;\nexports.getWeekHoverRange = exports.getMonthHoverRange = exports.isSameRange = void 0;\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nfunction getSafeCalendarDate(_ref) {\n  var _value;\n  var value = _ref.value,\n    _ref$calendarKey = _ref.calendarKey,\n    calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,\n    allowSameMonth = _ref.allowSameMonth;\n  // Update calendarDate if the value is not null\n  value = (_value = value) !== null && _value !== void 0 ? _value : [];\n  var gap = allowSameMonth ? 0 : 1;\n  if (value[0] && value[1]) {\n    var diffMonth = (0, _dateUtils.differenceInCalendarMonths)(value[1], value[0]);\n    if (calendarKey === 'start') {\n      return [value[0], diffMonth <= 0 ? (0, _dateUtils.copyTime)({\n        from: value[1],\n        to: (0, _dateUtils.addMonths)(value[0], gap)\n      }) : value[1]];\n    } else if (calendarKey === 'end') {\n      return [diffMonth <= 0 ? (0, _dateUtils.copyTime)({\n        from: value[0],\n        to: (0, _dateUtils.addMonths)(value[1], -gap)\n      }) : value[0], value[1]];\n    }\n\n    // If only the start date\n  } else if (value[0]) {\n    return [value[0], (0, _dateUtils.addMonths)(value[0], gap)];\n  }\n  var todayDate = new Date();\n  return [todayDate, (0, _dateUtils.addMonths)(todayDate, gap)];\n}\nvar isSameRange = function isSameRange(source, dest, format) {\n  // If both are null, reguard as same\n  if (null === source && null === dest) return true;\n  // If only one is null, regard as different\n  if (null === source || null === dest) return false;\n  var result = (0, _dateUtils.isSameDay)(source[0], dest[0]) && (0, _dateUtils.isSameDay)(source[1], dest[1]);\n  if ((0, _dateUtils.shouldRenderTime)(format)) {\n    result && (result = (0, _dateUtils.isSameSecond)(source[0], dest[0]) && (0, _dateUtils.isSameSecond)(source[1], dest[1]));\n  }\n  return result;\n};\nexports.isSameRange = isSameRange;\nvar getMonthHoverRange = function getMonthHoverRange(date) {\n  return [(0, _dateUtils.startOfMonth)(date), (0, _dateUtils.endOfMonth)(date)];\n};\nexports.getMonthHoverRange = getMonthHoverRange;\nvar getWeekHoverRange = function getWeekHoverRange(isoWeek, date) {\n  if (isoWeek) {\n    // set to the first day of this week according to ISO 8601, 12:00 am\n    return [(0, _dateUtils.startOfISOWeek)(date), (0, _dateUtils.endOfISOWeek)(date)];\n  }\n  return [(0, _dateUtils.startOfWeek)(date), (0, _dateUtils.endOfWeek)(date)];\n};\nexports.getWeekHoverRange = getWeekHoverRange;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/utils.ts?");
 
 /***/ }),
 
@@ -7286,7 +7286,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\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _FormContext = __webpack_require__(/*! ./FormContext */ \"./src/Form/FormContext.tsx\");\nvar _FormControl = _interopRequireDefault(__webpack_require__(/*! ../FormControl */ \"./src/FormControl/index.tsx\"));\nvar _FormControlLabel = _interopRequireDefault(__webpack_require__(/*! ../FormControlLabel */ \"./src/FormControlLabel/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _FormGroup = _interopRequireDefault(__webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\"));\nvar _FormHelpText = _interopRequireDefault(__webpack_require__(/*! ../FormHelpText */ \"./src/FormHelpText/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _useSchemaModel2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useSchemaModel */ \"./src/Form/hooks/useSchemaModel.ts\"));\nvar _useFormValidate2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValidate */ \"./src/Form/hooks/useFormValidate.ts\"));\nvar _useFormValue2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValue */ \"./src/Form/hooks/useFormValue.ts\"));\nvar _useFormClassNames = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormClassNames */ \"./src/Form/hooks/useFormClassNames.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Form/Form.tsx\",\n  _this = void 0;\nvar defaultSchema = (0, _schemaTyped.SchemaModel)({});\n\n/**\n * The `Form` component is a form interface for collecting and validating user input.\n * @see https://rsuitejs.com/components/form\n */\nvar Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$checkTrigger = props.checkTrigger,\n    checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'form' : _props$classPrefix,\n    _props$errorFromConte = props.errorFromContext,\n    errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,\n    _props$formDefaultVal = props.formDefaultValue,\n    formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,\n    controlledFormValue = props.formValue,\n    controlledFormError = props.formError,\n    fluid = props.fluid,\n    _props$nestedField = props.nestedField,\n    nestedField = _props$nestedField === void 0 ? false : _props$nestedField,\n    _props$layout = props.layout,\n    layout = _props$layout === void 0 ? 'vertical' : _props$layout,\n    _props$model = props.model,\n    formModel = _props$model === void 0 ? defaultSchema : _props$model,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    className = props.className,\n    children = props.children,\n    disabled = props.disabled,\n    onSubmit = props.onSubmit,\n    onCheck = props.onCheck,\n    onError = props.onError,\n    onChange = props.onChange,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"checkTrigger\", \"classPrefix\", \"errorFromContext\", \"formDefaultValue\", \"formValue\", \"formError\", \"fluid\", \"nestedField\", \"layout\", \"model\", \"readOnly\", \"plaintext\", \"className\", \"children\", \"disabled\", \"onSubmit\", \"onCheck\", \"onError\", \"onChange\"]);\n  var _useSchemaModel = (0, _useSchemaModel2.default)(formModel),\n    getCombinedModel = _useSchemaModel.getCombinedModel,\n    pushFieldRule = _useSchemaModel.pushFieldRule,\n    removeFieldRule = _useSchemaModel.removeFieldRule;\n  var _useFormValue = (0, _useFormValue2.default)(controlledFormValue, {\n      formDefaultValue: formDefaultValue,\n      nestedField: nestedField\n    }),\n    formValue = _useFormValue.formValue,\n    onRemoveValue = _useFormValue.onRemoveValue,\n    setFieldValue = _useFormValue.setFieldValue;\n  var formValidateProps = {\n    ref: ref,\n    formValue: formValue,\n    getCombinedModel: getCombinedModel,\n    onCheck: onCheck,\n    onError: onError,\n    nestedField: nestedField\n  };\n  var _useFormValidate = (0, _useFormValidate2.default)(controlledFormError, formValidateProps),\n    formError = _useFormValidate.formError,\n    setFieldError = _useFormValidate.setFieldError,\n    onRemoveError = _useFormValidate.onRemoveError,\n    check = _useFormValidate.check,\n    formRef = _useFormValidate.formRef;\n  var classes = (0, _useFormClassNames.default)({\n    classPrefix: classPrefix,\n    className: className,\n    fluid: fluid,\n    layout: layout,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled\n  });\n  var removeFieldValue = (0, _utils.useEventCallback)(function (name) {\n    var formValue = onRemoveValue(name);\n    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);\n  });\n  var removeFieldError = (0, _utils.useEventCallback)(function (name) {\n    onRemoveError(name);\n  });\n  var handleSubmit = (0, _utils.useEventCallback)(function (event) {\n    var _event$preventDefault, _event$stopPropagatio;\n    event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);\n    event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    var checkResult = check();\n    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(checkResult, event);\n  });\n  var onFieldError = (0, _utils.useEventCallback)(function (name, checkResult) {\n    setFieldError(name, checkResult);\n  });\n  var onFieldSuccess = (0, _utils.useEventCallback)(function (name) {\n    removeFieldError(name);\n  });\n  var onFieldChange = (0, _utils.useEventCallback)(function (name, value, event) {\n    var nextFormValue = setFieldValue(name, value);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);\n  });\n  var formContextValue = {\n    errorFromContext: errorFromContext,\n    checkTrigger: checkTrigger,\n    plaintext: plaintext,\n    readOnly: readOnly,\n    disabled: disabled,\n    formError: formError,\n    nestedField: nestedField,\n    pushFieldRule: pushFieldRule,\n    getCombinedModel: getCombinedModel,\n    removeFieldValue: removeFieldValue,\n    removeFieldError: removeFieldError,\n    removeFieldRule: removeFieldRule,\n    onFieldSuccess: onFieldSuccess,\n    onFieldChange: onFieldChange,\n    onFieldError: onFieldError\n  };\n  return /*#__PURE__*/_react.default.createElement(\"form\", (0, _extends2.default)({}, rest, {\n    ref: formRef,\n    onSubmit: handleSubmit,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 239,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_FormContext.FormProvider, {\n    value: formContextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 240,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueProvider, {\n    value: formValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 241,\n      columnNumber: 9\n    }\n  }, children)));\n});\nForm.Control = _FormControl.default;\nForm.ControlLabel = _FormControlLabel.default;\nForm.ErrorMessage = _FormErrorMessage.default;\nForm.Group = _FormGroup.default;\nForm.HelpText = _FormHelpText.default;\nForm.Control = _FormControl.default;\nForm.displayName = 'Form';\nForm.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  errorFromContext: _propTypes.default.bool,\n  layout: (0, _propTypes2.oneOf)(['horizontal', 'vertical', 'inline']),\n  fluid: _propTypes.default.bool,\n  formValue: _propTypes.default.object,\n  formDefaultValue: _propTypes.default.object,\n  formError: _propTypes.default.object,\n  checkTrigger: (0, _propTypes2.oneOf)(['change', 'blur', 'none']),\n  onChange: _propTypes.default.func,\n  onError: _propTypes.default.func,\n  onCheck: _propTypes.default.func,\n  onSubmit: _propTypes.default.func,\n  model: _propTypes.default.any,\n  readOnly: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  disabled: _propTypes.default.bool\n};\nvar _default = Form;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Form/Form.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _FormContext = __webpack_require__(/*! ./FormContext */ \"./src/Form/FormContext.tsx\");\nvar _FormControl = _interopRequireDefault(__webpack_require__(/*! ../FormControl */ \"./src/FormControl/index.tsx\"));\nvar _FormControlLabel = _interopRequireDefault(__webpack_require__(/*! ../FormControlLabel */ \"./src/FormControlLabel/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _FormGroup = _interopRequireDefault(__webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\"));\nvar _FormHelpText = _interopRequireDefault(__webpack_require__(/*! ../FormHelpText */ \"./src/FormHelpText/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _useSchemaModel2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useSchemaModel */ \"./src/Form/hooks/useSchemaModel.ts\"));\nvar _useFormValidate2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValidate */ \"./src/Form/hooks/useFormValidate.ts\"));\nvar _useFormValue2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValue */ \"./src/Form/hooks/useFormValue.ts\"));\nvar _useFormClassNames = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormClassNames */ \"./src/Form/hooks/useFormClassNames.ts\"));\nvar _useFormRef = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormRef */ \"./src/Form/hooks/useFormRef.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Form/Form.tsx\",\n  _this = void 0;\nvar defaultSchema = (0, _schemaTyped.SchemaModel)({});\n\n/**\n * The `Form` component is a form interface for collecting and validating user input.\n * @see https://rsuitejs.com/components/form\n */\nvar Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$checkTrigger = props.checkTrigger,\n    checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'form' : _props$classPrefix,\n    _props$errorFromConte = props.errorFromContext,\n    errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,\n    _props$formDefaultVal = props.formDefaultValue,\n    formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,\n    controlledFormValue = props.formValue,\n    controlledFormError = props.formError,\n    fluid = props.fluid,\n    _props$nestedField = props.nestedField,\n    nestedField = _props$nestedField === void 0 ? false : _props$nestedField,\n    _props$layout = props.layout,\n    layout = _props$layout === void 0 ? 'vertical' : _props$layout,\n    _props$model = props.model,\n    formModel = _props$model === void 0 ? defaultSchema : _props$model,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    className = props.className,\n    children = props.children,\n    disabled = props.disabled,\n    onSubmit = props.onSubmit,\n    onReset = props.onReset,\n    onCheck = props.onCheck,\n    onError = props.onError,\n    onChange = props.onChange,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"checkTrigger\", \"classPrefix\", \"errorFromContext\", \"formDefaultValue\", \"formValue\", \"formError\", \"fluid\", \"nestedField\", \"layout\", \"model\", \"readOnly\", \"plaintext\", \"className\", \"children\", \"disabled\", \"onSubmit\", \"onReset\", \"onCheck\", \"onError\", \"onChange\"]);\n  var _useSchemaModel = (0, _useSchemaModel2.default)(formModel),\n    getCombinedModel = _useSchemaModel.getCombinedModel,\n    pushFieldRule = _useSchemaModel.pushFieldRule,\n    removeFieldRule = _useSchemaModel.removeFieldRule;\n  var _useFormValue = (0, _useFormValue2.default)(controlledFormValue, {\n      formDefaultValue: formDefaultValue,\n      nestedField: nestedField\n    }),\n    formValue = _useFormValue.formValue,\n    onRemoveValue = _useFormValue.onRemoveValue,\n    setFieldValue = _useFormValue.setFieldValue,\n    resetFormValue = _useFormValue.resetFormValue;\n  var formValidateProps = {\n    formValue: formValue,\n    getCombinedModel: getCombinedModel,\n    onCheck: onCheck,\n    onError: onError,\n    nestedField: nestedField\n  };\n  var _useFormValidate = (0, _useFormValidate2.default)(controlledFormError, formValidateProps),\n    formError = _useFormValidate.formError,\n    setFieldError = _useFormValidate.setFieldError,\n    onRemoveError = _useFormValidate.onRemoveError,\n    check = _useFormValidate.check,\n    checkAsync = _useFormValidate.checkAsync,\n    checkForField = _useFormValidate.checkForField,\n    checkForFieldAsync = _useFormValidate.checkForFieldAsync,\n    cleanErrors = _useFormValidate.cleanErrors,\n    resetErrors = _useFormValidate.resetErrors,\n    cleanErrorForField = _useFormValidate.cleanErrorForField;\n  var classes = (0, _useFormClassNames.default)({\n    classPrefix: classPrefix,\n    className: className,\n    fluid: fluid,\n    layout: layout,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled\n  });\n  var submit = (0, _utils.useEventCallback)(function (event) {\n    // Check the form before submitting\n    if (check()) {\n      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formValue, event);\n    }\n  });\n  var reset = (0, _utils.useEventCallback)(function (event) {\n    resetErrors();\n    onReset === null || onReset === void 0 ? void 0 : onReset(resetFormValue(), event);\n  });\n  var handleSubmit = (0, _utils.useEventCallback)(function (event) {\n    var _event$preventDefault, _event$stopPropagatio;\n    event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);\n    event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);\n\n    // Prevent submission when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    submit();\n  });\n  var handleReset = (0, _utils.useEventCallback)(function (event) {\n    var _event$preventDefault2, _event$stopPropagatio2;\n    event === null || event === void 0 ? void 0 : (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 ? void 0 : _event$preventDefault2.call(event);\n    event === null || event === void 0 ? void 0 : (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 ? void 0 : _event$stopPropagatio2.call(event);\n\n    // Prevent reset when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    reset(event);\n  });\n  var imperativeMethods = {\n    check: check,\n    checkForField: checkForField,\n    checkAsync: checkAsync,\n    checkForFieldAsync: checkForFieldAsync,\n    cleanErrors: cleanErrors,\n    cleanErrorForField: cleanErrorForField,\n    reset: reset,\n    resetErrors: resetErrors,\n    submit: submit\n  };\n  var formRef = (0, _useFormRef.default)(ref, {\n    imperativeMethods: imperativeMethods\n  });\n  var removeFieldValue = (0, _utils.useEventCallback)(function (name) {\n    var formValue = onRemoveValue(name);\n    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);\n  });\n  var removeFieldError = (0, _utils.useEventCallback)(function (name) {\n    onRemoveError(name);\n  });\n  var onFieldError = (0, _utils.useEventCallback)(function (name, checkResult) {\n    setFieldError(name, checkResult);\n  });\n  var onFieldSuccess = (0, _utils.useEventCallback)(function (name) {\n    removeFieldError(name);\n  });\n  var onFieldChange = (0, _utils.useEventCallback)(function (name, value, event) {\n    var nextFormValue = setFieldValue(name, value);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);\n  });\n  var formContextValue = {\n    errorFromContext: errorFromContext,\n    checkTrigger: checkTrigger,\n    plaintext: plaintext,\n    readOnly: readOnly,\n    disabled: disabled,\n    formError: formError,\n    nestedField: nestedField,\n    pushFieldRule: pushFieldRule,\n    getCombinedModel: getCombinedModel,\n    removeFieldValue: removeFieldValue,\n    removeFieldError: removeFieldError,\n    removeFieldRule: removeFieldRule,\n    onFieldSuccess: onFieldSuccess,\n    onFieldChange: onFieldChange,\n    onFieldError: onFieldError\n  };\n  return /*#__PURE__*/_react.default.createElement(\"form\", (0, _extends2.default)({}, rest, {\n    ref: formRef,\n    onSubmit: handleSubmit,\n    onReset: handleReset,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 294,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_FormContext.FormProvider, {\n    value: formContextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 295,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueProvider, {\n    value: formValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 296,\n      columnNumber: 9\n    }\n  }, children)));\n});\nForm.Control = _FormControl.default;\nForm.ControlLabel = _FormControlLabel.default;\nForm.ErrorMessage = _FormErrorMessage.default;\nForm.Group = _FormGroup.default;\nForm.HelpText = _FormHelpText.default;\nForm.Control = _FormControl.default;\nForm.displayName = 'Form';\nForm.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  errorFromContext: _propTypes.default.bool,\n  layout: (0, _propTypes2.oneOf)(['horizontal', 'vertical', 'inline']),\n  fluid: _propTypes.default.bool,\n  formValue: _propTypes.default.object,\n  formDefaultValue: _propTypes.default.object,\n  formError: _propTypes.default.object,\n  checkTrigger: (0, _propTypes2.oneOf)(['change', 'blur', 'none']),\n  onChange: _propTypes.default.func,\n  onError: _propTypes.default.func,\n  onCheck: _propTypes.default.func,\n  onSubmit: _propTypes.default.func,\n  model: _propTypes.default.any,\n  readOnly: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  disabled: _propTypes.default.bool\n};\nvar _default = Form;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Form/Form.tsx?");
 
 /***/ }),
 
@@ -7319,7 +7319,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = useFormClassNames;\
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = useFormRef;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _useEventCallback = _interopRequireDefault(__webpack_require__(/*! ../../utils/useEventCallback */ \"./src/utils/useEventCallback.ts\"));\nvar _utils = __webpack_require__(/*! ../../FormControl/utils */ \"./src/FormControl/utils.ts\");\nfunction useFormRef(ref, props) {\n  var rootRef = (0, _react.useRef)(null);\n  var formError = props.formError,\n    setFormError = props.setFormError,\n    nestedField = props.nestedField,\n    check = props.check,\n    checkForField = props.checkForField,\n    checkAsync = props.checkAsync,\n    checkForFieldAsync = props.checkForFieldAsync;\n  var cleanErrors = (0, _useEventCallback.default)(function () {\n    setFormError({});\n  });\n  var resetErrors = (0, _useEventCallback.default)(function (formError) {\n    if (formError === void 0) {\n      formError = {};\n    }\n    setFormError(formError);\n  });\n  var cleanErrorForField = (0, _useEventCallback.default)(function (fieldName) {\n    setFormError((0, _omit.default)(formError, [nestedField ? (0, _utils.nameToPath)(fieldName) : fieldName]));\n  });\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      root: rootRef.current,\n      check: check,\n      checkForField: checkForField,\n      checkAsync: checkAsync,\n      checkForFieldAsync: checkForFieldAsync,\n      cleanErrors: cleanErrors,\n      cleanErrorForField: cleanErrorForField,\n      resetErrors: resetErrors\n    };\n  });\n  return rootRef;\n}\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useFormRef.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = useFormRef;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nfunction useFormRef(ref, props) {\n  var rootRef = (0, _react.useRef)(null);\n  var imperativeMethods = props.imperativeMethods;\n  (0, _react.useImperativeHandle)(ref, function () {\n    return (0, _extends2.default)({\n      root: rootRef.current\n    }, imperativeMethods);\n  });\n  return rootRef;\n}\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useFormRef.ts?");
 
 /***/ }),
 
@@ -7330,7 +7330,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\");\nexports.__esModule = true;\nexports[\"default\"] = useFormValidate;\nvar _extends5 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _set = _interopRequireDefault(__webpack_require__(/*! lodash/set */ \"./node_modules/lodash/set.js\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../../FormControl/utils */ \"./src/FormControl/utils.ts\");\nvar _useEventCallback = _interopRequireDefault(__webpack_require__(/*! ../../utils/useEventCallback */ \"./src/utils/useEventCallback.ts\"));\nvar _useFormRef = _interopRequireDefault(__webpack_require__(/*! ./useFormRef */ \"./src/Form/hooks/useFormRef.ts\"));\nfunction useFormValidate(formError, props) {\n  var ref = props.ref,\n    formValue = props.formValue,\n    getCombinedModel = props.getCombinedModel,\n    onCheck = props.onCheck,\n    onError = props.onError,\n    nestedField = props.nestedField;\n  var _useControlled = (0, _utils.useControlled)(formError, {}),\n    realFormError = _useControlled[0],\n    setFormError = _useControlled[1];\n  var realFormErrorRef = (0, _react.useRef)(realFormError);\n  realFormErrorRef.current = realFormError;\n\n  /**\n   * Validate the form data and return a boolean.\n   * The error message after verification is returned in the callback.\n   * @param callback\n   */\n  var check = (0, _useEventCallback.default)(function (callback) {\n    var formError = {};\n    var errorCount = 0;\n    var model = getCombinedModel();\n    Object.keys(model.getSchemaSpec()).forEach(function (key) {\n      var checkResult = model.checkForField(key, formValue || {});\n      if (checkResult.hasError === true) {\n        errorCount += 1;\n        formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;\n      }\n    });\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    callback === null || callback === void 0 ? void 0 : callback(formError);\n    if (errorCount > 0) {\n      onError === null || onError === void 0 ? void 0 : onError(formError);\n      return false;\n    }\n    return true;\n  });\n\n  /**\n   * Check the data field\n   * @param fieldName\n   * @param callback\n   */\n  var checkForField = (0, _useEventCallback.default)(function (fieldName, callback) {\n    var _extends2;\n    var model = getCombinedModel();\n    var checkResult = model.checkForField(fieldName, formValue || {});\n    var nextFormError = (0, _extends5.default)({}, formError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));\n    setFormError(nextFormError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n    callback === null || callback === void 0 ? void 0 : callback(checkResult);\n    if (checkResult.hasError) {\n      onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n    }\n    return !checkResult.hasError;\n  });\n\n  /**\n   * Check form data asynchronously and return a Promise\n   */\n  var checkAsync = (0, _useEventCallback.default)(function () {\n    var promises = [];\n    var keys = [];\n    var model = getCombinedModel();\n    Object.keys(model.getSchemaSpec()).forEach(function (key) {\n      keys.push(key);\n      promises.push(model.checkForFieldAsync(key, formValue || {}));\n    });\n    return Promise.all(promises).then(function (values) {\n      var formError = {};\n      var errorCount = 0;\n      for (var i = 0; i < values.length; i++) {\n        if (values[i].hasError) {\n          errorCount += 1;\n          formError[keys[i]] = values[i].errorMessage;\n        }\n      }\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n      setFormError(formError);\n      if (errorCount > 0) {\n        onError === null || onError === void 0 ? void 0 : onError(formError);\n      }\n      return {\n        hasError: errorCount > 0,\n        formError: formError\n      };\n    });\n  });\n\n  /**\n   * Asynchronously check form fields and return Promise\n   * @param fieldName\n   */\n  var checkForFieldAsync = (0, _useEventCallback.default)(function (fieldName) {\n    var model = getCombinedModel();\n    return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {\n      var _extends3;\n      var nextFormError = (0, _extends5.default)({}, formError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n      setFormError(nextFormError);\n      if (checkResult.hasError) {\n        onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n      }\n      return checkResult;\n    });\n  });\n  var onRemoveError = (0, _react.useCallback)(function (name) {\n    /**\n     * when this function is called when the children component is unmount,\n     * it's an old render frame so use Ref to get future error\n     */\n    var formError = (0, _omit.default)(realFormErrorRef.current, [nestedField ? (0, _utils2.nameToPath)(name) : name]);\n    realFormErrorRef.current = formError;\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    return formError;\n  }, [nestedField, onCheck, setFormError]);\n  var setFieldError = (0, _react.useCallback)(function (fieldName, checkResult) {\n    var _extends4;\n    var nextFormError = nestedField ? (0, _set.default)((0, _extends5.default)({}, formError), (0, _utils2.nameToPath)(fieldName), checkResult) : (0, _extends5.default)({}, formError, (_extends4 = {}, _extends4[fieldName] = checkResult, _extends4));\n    setFormError(nextFormError);\n    onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n    return nextFormError;\n  }, [formError, nestedField, onCheck, onError, setFormError]);\n  var formRef = (0, _useFormRef.default)(ref, {\n    check: check,\n    checkForField: checkForField,\n    checkAsync: checkAsync,\n    checkForFieldAsync: checkForFieldAsync,\n    formError: formError,\n    setFormError: setFormError,\n    nestedField: nestedField\n  });\n  return {\n    formRef: formRef,\n    formError: realFormError,\n    check: check,\n    setFieldError: setFieldError,\n    onRemoveError: onRemoveError\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useFormValidate.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = useFormValidate;\nvar _extends5 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _set = _interopRequireDefault(__webpack_require__(/*! lodash/set */ \"./node_modules/lodash/set.js\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../../FormControl/utils */ \"./src/FormControl/utils.ts\");\nvar _useEventCallback = _interopRequireDefault(__webpack_require__(/*! ../../utils/useEventCallback */ \"./src/utils/useEventCallback.ts\"));\nfunction useFormValidate(formError, props) {\n  var formValue = props.formValue,\n    getCombinedModel = props.getCombinedModel,\n    onCheck = props.onCheck,\n    onError = props.onError,\n    nestedField = props.nestedField;\n  var _useControlled = (0, _utils.useControlled)(formError, {}),\n    realFormError = _useControlled[0],\n    setFormError = _useControlled[1];\n  var realFormErrorRef = (0, _react.useRef)(realFormError);\n  realFormErrorRef.current = realFormError;\n\n  /**\n   * Validate the form data and return a boolean.\n   * The error message after verification is returned in the callback.\n   * @param callback\n   */\n  var check = (0, _useEventCallback.default)(function (callback) {\n    var formError = {};\n    var errorCount = 0;\n    var model = getCombinedModel();\n    Object.keys(model.getSchemaSpec()).forEach(function (key) {\n      var checkResult = model.checkForField(key, formValue || {});\n      if (checkResult.hasError === true) {\n        errorCount += 1;\n        formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;\n      }\n    });\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    callback === null || callback === void 0 ? void 0 : callback(formError);\n    if (errorCount > 0) {\n      onError === null || onError === void 0 ? void 0 : onError(formError);\n      return false;\n    }\n    return true;\n  });\n\n  /**\n   * Check the data field\n   * @param fieldName\n   * @param callback\n   */\n  var checkForField = (0, _useEventCallback.default)(function (fieldName, callback) {\n    var _extends2;\n    var model = getCombinedModel();\n    var checkResult = model.checkForField(fieldName, formValue || {});\n    var nextFormError = (0, _extends5.default)({}, formError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));\n    setFormError(nextFormError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n    callback === null || callback === void 0 ? void 0 : callback(checkResult);\n    if (checkResult.hasError) {\n      onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n    }\n    return !checkResult.hasError;\n  });\n\n  /**\n   * Check form data asynchronously and return a Promise\n   */\n  var checkAsync = (0, _useEventCallback.default)(function () {\n    var promises = [];\n    var keys = [];\n    var model = getCombinedModel();\n    Object.keys(model.getSchemaSpec()).forEach(function (key) {\n      keys.push(key);\n      promises.push(model.checkForFieldAsync(key, formValue || {}));\n    });\n    return Promise.all(promises).then(function (values) {\n      var formError = {};\n      var errorCount = 0;\n      for (var i = 0; i < values.length; i++) {\n        if (values[i].hasError) {\n          errorCount += 1;\n          formError[keys[i]] = values[i].errorMessage;\n        }\n      }\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n      setFormError(formError);\n      if (errorCount > 0) {\n        onError === null || onError === void 0 ? void 0 : onError(formError);\n      }\n      return {\n        hasError: errorCount > 0,\n        formError: formError\n      };\n    });\n  });\n\n  /**\n   * Asynchronously check form fields and return Promise\n   * @param fieldName\n   */\n  var checkForFieldAsync = (0, _useEventCallback.default)(function (fieldName) {\n    var model = getCombinedModel();\n    return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {\n      var _extends3;\n      var nextFormError = (0, _extends5.default)({}, formError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n      setFormError(nextFormError);\n      if (checkResult.hasError) {\n        onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n      }\n      return checkResult;\n    });\n  });\n  var onRemoveError = (0, _react.useCallback)(function (name) {\n    /**\n     * when this function is called when the children component is unmount,\n     * it's an old render frame so use Ref to get future error\n     */\n    var formError = (0, _omit.default)(realFormErrorRef.current, [nestedField ? (0, _utils2.nameToPath)(name) : name]);\n    realFormErrorRef.current = formError;\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    return formError;\n  }, [nestedField, onCheck, setFormError]);\n  var setFieldError = (0, _react.useCallback)(function (fieldName, checkResult) {\n    var _extends4;\n    var nextFormError = nestedField ? (0, _set.default)((0, _extends5.default)({}, formError), (0, _utils2.nameToPath)(fieldName), checkResult) : (0, _extends5.default)({}, formError, (_extends4 = {}, _extends4[fieldName] = checkResult, _extends4));\n    setFormError(nextFormError);\n    onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n    return nextFormError;\n  }, [formError, nestedField, onCheck, onError, setFormError]);\n  var cleanErrors = (0, _useEventCallback.default)(function () {\n    setFormError({});\n  });\n  var resetErrors = (0, _useEventCallback.default)(function (formError) {\n    if (formError === void 0) {\n      formError = {};\n    }\n    setFormError(formError);\n  });\n  var cleanErrorForField = (0, _useEventCallback.default)(function (fieldName) {\n    setFormError((0, _omit.default)(formError, [nestedField ? (0, _utils2.nameToPath)(fieldName) : fieldName]));\n  });\n  return {\n    formError: realFormError,\n    check: check,\n    checkForField: checkForField,\n    checkAsync: checkAsync,\n    checkForFieldAsync: checkForFieldAsync,\n    cleanErrors: cleanErrors,\n    resetErrors: resetErrors,\n    cleanErrorForField: cleanErrorForField,\n    setFieldError: setFieldError,\n    onRemoveError: onRemoveError\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useFormValidate.ts?");
 
 /***/ }),
 
@@ -7341,7 +7341,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\");\nexports.__esModule = true;\nexports[\"default\"] = useFormValue;\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _set = _interopRequireDefault(__webpack_require__(/*! lodash/set */ \"./node_modules/lodash/set.js\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nfunction useFormValue(controlledValue, props) {\n  var formDefaultValue = props.formDefaultValue,\n    nestedField = props.nestedField;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, formDefaultValue),\n    formValue = _useControlled[0],\n    setFormValue = _useControlled[1];\n  var realFormValueRef = (0, _react.useRef)(formValue);\n  realFormValueRef.current = formValue;\n  var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {\n    var _extends2;\n    var nextFormError = nestedField ? (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue) : (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));\n    setFormValue(nextFormError);\n    return nextFormError;\n  }, [formValue, nestedField, setFormValue]);\n  var onRemoveValue = (0, _react.useCallback)(function (name) {\n    /**\n     * when this function is called when the children component is unmount,\n     * it's an old render frame so use Ref to get future value\n     */\n    var formValue = (0, _omit.default)(realFormValueRef.current, [name]);\n    realFormValueRef.current = formValue;\n    setFormValue(formValue);\n    return formValue;\n  }, [setFormValue]);\n  return {\n    formValue: formValue,\n    setFormValue: setFormValue,\n    setFieldValue: setFieldValue,\n    onRemoveValue: onRemoveValue\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useFormValue.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = useFormValue;\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _set = _interopRequireDefault(__webpack_require__(/*! lodash/set */ \"./node_modules/lodash/set.js\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nfunction useFormValue(controlledValue, props) {\n  var formDefaultValue = props.formDefaultValue,\n    nestedField = props.nestedField;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, formDefaultValue),\n    formValue = _useControlled[0],\n    setFormValue = _useControlled[1];\n  var realFormValueRef = (0, _react.useRef)(formValue);\n  realFormValueRef.current = formValue;\n  var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {\n    var _extends2;\n    var nextFormError = nestedField ? (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue) : (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));\n    setFormValue(nextFormError);\n    return nextFormError;\n  }, [formValue, nestedField, setFormValue]);\n  var onRemoveValue = (0, _react.useCallback)(function (name) {\n    /**\n     * when this function is called when the children component is unmount,\n     * it's an old render frame so use Ref to get future value\n     */\n    var formValue = (0, _omit.default)(realFormValueRef.current, [name]);\n    realFormValueRef.current = formValue;\n    setFormValue(formValue);\n    return formValue;\n  }, [setFormValue]);\n  var resetFormValue = (0, _react.useCallback)(function (nextValue) {\n    var value = nextValue || formDefaultValue;\n    setFormValue(value);\n    return value;\n  }, [formDefaultValue, setFormValue]);\n  return {\n    formValue: formValue,\n    setFormValue: setFormValue,\n    setFieldValue: setFieldValue,\n    onRemoveValue: onRemoveValue,\n    resetFormValue: resetFormValue\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useFormValue.ts?");
 
 /***/ }),
 
@@ -7781,7 +7781,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputAutosize.tsx\",\n  _this = void 0;\nvar sizerStyle = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  visibility: 'hidden',\n  height: 0,\n  overflow: 'scroll',\n  whiteSpace: 'pre'\n};\nvar copyStyles = function copyStyles(styles, node) {\n  node.style.fontSize = styles.fontSize;\n  node.style.fontFamily = styles.fontFamily;\n  node.style.fontWeight = styles.fontWeight;\n  node.style.fontStyle = styles.fontStyle;\n  node.style.letterSpacing = styles.letterSpacing;\n  node.style.textTransform = styles.textTransform;\n};\n/**\n * Use a dynamic input width.\n * The width is automatically adjusted according to the length of the input text characters.\n * @param props\n * @param sizerRef\n * @param placeholderRef\n */\nvar useInputWidth = function useInputWidth(props, sizerRef, placeholderRef) {\n  var _props$minWidth = props.minWidth,\n    minWidth = _props$minWidth === void 0 ? 1 : _props$minWidth,\n    placeholder = props.placeholder,\n    value = props.value,\n    onAutosize = props.onAutosize;\n  var _useState = (0, _react.useState)(minWidth),\n    inputWidth = _useState[0],\n    setInputWidth = _useState[1];\n  (0, _react.useEffect)(function () {\n    if (!sizerRef.current || typeof sizerRef.current.scrollWidth === 'undefined') {\n      return;\n    }\n    var width;\n    if (placeholder && !value && placeholderRef.current) {\n      width = Math.max(sizerRef.current.scrollWidth, placeholderRef.current.scrollWidth) + 2;\n    } else {\n      width = sizerRef.current.scrollWidth + 2;\n    }\n    if (width < minWidth) {\n      width = minWidth;\n    }\n    if (width !== inputWidth) {\n      setInputWidth(width);\n      onAutosize === null || onAutosize === void 0 ? void 0 : onAutosize(width);\n    }\n  }, [minWidth, placeholder, inputWidth, value, placeholderRef, sizerRef, onAutosize]);\n  return inputWidth;\n};\nvar InputAutosize = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var uniqueId = (0, _react.useMemo)(function () {\n    return (0, _utils.guid)();\n  }, []);\n  var defaultValue = props.defaultValue,\n    value = props.value,\n    style = props.style,\n    className = props.className,\n    placeholder = props.placeholder,\n    inputClassName = props.inputClassName,\n    inputStyle = props.inputStyle,\n    _props$inputId = props.inputId,\n    inputId = _props$inputId === void 0 ? uniqueId : _props$inputId,\n    tabIndex = props.tabIndex;\n  var rootRef = (0, _react.useRef)(null);\n  var inputRef = (0, _react.useRef)(null);\n  var sizerRef = (0, _react.useRef)(null);\n  var placeholderRef = (0, _react.useRef)(null);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      root: rootRef.current,\n      input: inputRef.current\n    };\n  });\n  var sizerValue = [defaultValue, value, ''].reduce(function (previousValue, currentValue) {\n    if (previousValue !== null && previousValue !== undefined) {\n      return previousValue;\n    }\n    return currentValue;\n  });\n  var inputWidth = useInputWidth(props, sizerRef, placeholderRef);\n  var wrapperStyle = (0, _extends2.default)({\n    display: 'inline-block'\n  }, style);\n  var nextInputStyle = (0, _extends2.default)({\n    boxSizing: 'content-box',\n    width: inputWidth + \"px\"\n  }, inputStyle);\n  (0, _react.useEffect)(function () {\n    if (!window.getComputedStyle) {\n      return;\n    }\n    var input = inputRef.current;\n    var inputStyles = input && window.getComputedStyle(input);\n    if (!inputStyles) {\n      return;\n    }\n    if (sizerRef.current) {\n      copyStyles(inputStyles, sizerRef.current);\n    }\n    if (placeholderRef.current) {\n      copyStyles(inputStyles, placeholderRef.current);\n    }\n  }, []);\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(props),\n    htmlInputProps = _partitionHTMLProps[0];\n  htmlInputProps.className = inputClassName;\n  htmlInputProps.style = nextInputStyle;\n  htmlInputProps.tabIndex = tabIndex;\n  if ((0, _utils.isIE)()) {\n    // On Internet Explorer, an `x` symbol will appear in the input box.\n    // By setting an id, matching the style, hiding the `x` symbol by the style.\n    htmlInputProps.id = inputId;\n  }\n  return /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: rootRef,\n    className: className,\n    style: wrapperStyle,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 157,\n      columnNumber: 7\n    }\n  }, (0, _utils.isIE)() ? /*#__PURE__*/_react.default.createElement(\"style\", {\n    dangerouslySetInnerHTML: {\n      __html: \"input#\" + inputId + \"::-ms-clear {display: none;}\"\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 159,\n      columnNumber: 11\n    }\n  }) : null, /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({}, htmlInputProps, {\n    ref: inputRef,\n    type: \"text\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 163,\n      columnNumber: 9\n    }\n  })), /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: sizerRef,\n    style: sizerStyle,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 164,\n      columnNumber: 9\n    }\n  }, sizerValue), placeholder ? /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: placeholderRef,\n    style: sizerStyle,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 168,\n      columnNumber: 11\n    }\n  }, placeholder) : null);\n});\nInputAutosize.displayName = 'InputAutosize';\nInputAutosize.propTypes = {\n  className: _propTypes.default.string,\n  defaultValue: _propTypes.default.any,\n  inputId: _propTypes.default.string,\n  inputClassName: _propTypes.default.string,\n  inputStyle: _propTypes.default.object,\n  minWidth: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  placeholder: _propTypes.default.string,\n  style: _propTypes.default.object,\n  value: _propTypes.default.any,\n  onAutosize: _propTypes.default.func\n};\nvar _default = InputAutosize;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputAutosize.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputAutosize.tsx\",\n  _this = void 0;\nvar sizerStyle = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  visibility: 'hidden',\n  height: 0,\n  overflow: 'scroll',\n  whiteSpace: 'pre'\n};\nvar copyStyles = function copyStyles(styles, node) {\n  node.style.fontSize = styles.fontSize;\n  node.style.fontFamily = styles.fontFamily;\n  node.style.fontWeight = styles.fontWeight;\n  node.style.fontStyle = styles.fontStyle;\n  node.style.letterSpacing = styles.letterSpacing;\n  node.style.textTransform = styles.textTransform;\n};\n/**\n * Use a dynamic input width.\n * The width is automatically adjusted according to the length of the input text characters.\n * @param props\n * @param sizerRef\n * @param placeholderRef\n */\nvar useInputWidth = function useInputWidth(props, sizerRef, placeholderRef) {\n  var _props$minWidth = props.minWidth,\n    minWidth = _props$minWidth === void 0 ? 1 : _props$minWidth,\n    placeholder = props.placeholder,\n    value = props.value,\n    onAutosize = props.onAutosize;\n  var _useState = (0, _react.useState)(minWidth),\n    inputWidth = _useState[0],\n    setInputWidth = _useState[1];\n  (0, _react.useEffect)(function () {\n    if (!sizerRef.current || typeof sizerRef.current.scrollWidth === 'undefined') {\n      return;\n    }\n    var width;\n    if (placeholder && !value && placeholderRef.current) {\n      width = Math.max(sizerRef.current.scrollWidth, placeholderRef.current.scrollWidth) + 10;\n    } else {\n      width = sizerRef.current.scrollWidth + 10;\n    }\n    if (width < minWidth) {\n      width = minWidth;\n    }\n    if (width !== inputWidth) {\n      setInputWidth(width);\n      onAutosize === null || onAutosize === void 0 ? void 0 : onAutosize(width);\n    }\n  }, [minWidth, placeholder, inputWidth, value, placeholderRef, sizerRef, onAutosize]);\n  return inputWidth;\n};\nvar InputAutosize = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var uniqueId = (0, _react.useMemo)(function () {\n    return (0, _utils.guid)();\n  }, []);\n  var defaultValue = props.defaultValue,\n    value = props.value,\n    style = props.style,\n    className = props.className,\n    placeholder = props.placeholder,\n    inputClassName = props.inputClassName,\n    inputStyle = props.inputStyle,\n    _props$inputId = props.inputId,\n    inputId = _props$inputId === void 0 ? uniqueId : _props$inputId,\n    tabIndex = props.tabIndex;\n  var rootRef = (0, _react.useRef)(null);\n  var inputRef = (0, _react.useRef)(null);\n  var sizerRef = (0, _react.useRef)(null);\n  var placeholderRef = (0, _react.useRef)(null);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      root: rootRef.current,\n      input: inputRef.current\n    };\n  });\n  var sizerValue = [defaultValue, value, ''].reduce(function (previousValue, currentValue) {\n    if (previousValue !== null && previousValue !== undefined) {\n      return previousValue;\n    }\n    return currentValue;\n  });\n  var inputWidth = useInputWidth(props, sizerRef, placeholderRef);\n  var wrapperStyle = (0, _extends2.default)({\n    display: 'inline-block'\n  }, style);\n  var nextInputStyle = (0, _extends2.default)({\n    boxSizing: 'content-box',\n    width: inputWidth + \"px\"\n  }, inputStyle);\n  (0, _react.useEffect)(function () {\n    if (!window.getComputedStyle) {\n      return;\n    }\n    var input = inputRef.current;\n    var inputStyles = input && window.getComputedStyle(input);\n    if (!inputStyles) {\n      return;\n    }\n    if (sizerRef.current) {\n      copyStyles(inputStyles, sizerRef.current);\n    }\n    if (placeholderRef.current) {\n      copyStyles(inputStyles, placeholderRef.current);\n    }\n  }, []);\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(props),\n    htmlInputProps = _partitionHTMLProps[0];\n  htmlInputProps.className = inputClassName;\n  htmlInputProps.style = nextInputStyle;\n  htmlInputProps.tabIndex = tabIndex;\n  if ((0, _utils.isIE)()) {\n    // On Internet Explorer, an `x` symbol will appear in the input box.\n    // By setting an id, matching the style, hiding the `x` symbol by the style.\n    htmlInputProps.id = inputId;\n  }\n  return /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: rootRef,\n    className: className,\n    style: wrapperStyle,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 157,\n      columnNumber: 7\n    }\n  }, (0, _utils.isIE)() ? /*#__PURE__*/_react.default.createElement(\"style\", {\n    dangerouslySetInnerHTML: {\n      __html: \"input#\" + inputId + \"::-ms-clear {display: none;}\"\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 159,\n      columnNumber: 11\n    }\n  }) : null, /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({}, htmlInputProps, {\n    ref: inputRef,\n    type: \"text\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 163,\n      columnNumber: 9\n    }\n  })), /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: sizerRef,\n    style: sizerStyle,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 164,\n      columnNumber: 9\n    }\n  }, sizerValue), placeholder ? /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: placeholderRef,\n    style: sizerStyle,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 168,\n      columnNumber: 11\n    }\n  }, placeholder) : null);\n});\nInputAutosize.displayName = 'InputAutosize';\nInputAutosize.propTypes = {\n  className: _propTypes.default.string,\n  defaultValue: _propTypes.default.any,\n  inputId: _propTypes.default.string,\n  inputClassName: _propTypes.default.string,\n  inputStyle: _propTypes.default.object,\n  minWidth: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  placeholder: _propTypes.default.string,\n  style: _propTypes.default.object,\n  value: _propTypes.default.any,\n  onAutosize: _propTypes.default.func\n};\nvar _default = InputAutosize;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputAutosize.tsx?");
 
 /***/ }),
 
@@ -7792,7 +7792,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ./InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\nvar _TextBox = _interopRequireDefault(__webpack_require__(/*! ./TextBox */ \"./src/InputPicker/TextBox.tsx\"));\nvar _InputPickerContext = _interopRequireDefault(__webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3,\n  _templateObject4;\nvar convertSize = function convertSize(size) {\n  switch (size) {\n    case 'lg':\n      return 'lg';\n    case 'sm':\n    case 'xs':\n      return 'sm';\n    default:\n      return 'md';\n  }\n};\n/**\n * Single item selector with text box input.\n *\n * @see https://rsuitejs.com/components/input-picker\n */\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\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$cacheData = props.cacheData,\n    cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$data = props.data,\n    controlledData = _props$data === void 0 ? [] : _props$data,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    defaultValue = props.defaultValue,\n    _props$defaultOpen = props.defaultOpen,\n    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    controlledOpen = props.open,\n    placeholder = props.placeholder,\n    groupBy = props.groupBy,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    creatable = props.creatable,\n    shouldDisplayCreateOption = props.shouldDisplayCreateOption,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    virtualized = props.virtualized,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    listProps = props.listProps,\n    id = props.id,\n    tabIndex = props.tabIndex,\n    sort = props.sort,\n    renderMenu = props.renderMenu,\n    renderExtraFooter = props.renderExtraFooter,\n    renderValue = props.renderValue,\n    renderMenuItem = props.renderMenuItem,\n    renderMenuGroup = props.renderMenuGroup,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onCreate = props.onCreate,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    searchBy = props.searchBy,\n    size = props.size,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"cleanable\", \"cacheData\", \"classPrefix\", \"data\", \"disabled\", \"readOnly\", \"plaintext\", \"defaultValue\", \"defaultOpen\", \"disabledItemValues\", \"locale\", \"toggleAs\", \"style\", \"searchable\", \"open\", \"placeholder\", \"groupBy\", \"menuClassName\", \"menuStyle\", \"menuAutoWidth\", \"menuMaxHeight\", \"creatable\", \"shouldDisplayCreateOption\", \"value\", \"valueKey\", \"virtualized\", \"labelKey\", \"listProps\", \"id\", \"tabIndex\", \"sort\", \"renderMenu\", \"renderExtraFooter\", \"renderValue\", \"renderMenuItem\", \"renderMenuGroup\", \"onEnter\", \"onEntered\", \"onExit\", \"onExited\", \"onChange\", \"onClean\", \"onCreate\", \"onSearch\", \"onSelect\", \"onBlur\", \"onFocus\", \"searchBy\", \"size\", \"placement\"]);\n  var _useContext = (0, _react.useContext)(_InputPickerContext.default),\n    multi = _useContext.multi,\n    tagProps = _useContext.tagProps,\n    trigger = _useContext.trigger,\n    disabledOptions = _useContext.disabledOptions,\n    onTagRemove = _useContext.onTagRemove,\n    renderCheckbox = _useContext.renderCheckbox;\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  var inputRef = (0, _react.useRef)();\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    triggerRef = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list;\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n    locale = _useCustom.locale;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useState = (0, _react.useState)(controlledData),\n    uncontrolledData = _useState[0],\n    setData = _useState[1];\n  var _useState2 = (0, _react.useState)(100),\n    maxWidth = _useState2[0],\n    setMaxWidth = _useState2[1];\n  var _useState3 = (0, _react.useState)([]),\n    newData = _useState3[0],\n    setNewData = _useState3[1];\n  var _useState4 = (0, _react.useState)(defaultOpen),\n    uncontrolledOpen = _useState4[0],\n    setOpen = _useState4[1];\n  var open = (0, _isUndefined.default)(controlledOpen) ? uncontrolledOpen : controlledOpen;\n  var getAllData = (0, _react.useCallback)(function () {\n    return [].concat(uncontrolledData, newData);\n  }, [uncontrolledData, newData]);\n  var getAllDataAndCache = (0, _react.useCallback)(function () {\n    return [].concat(getAllData(), cacheData);\n  }, [getAllData, cacheData]);\n  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var cloneValue = function cloneValue() {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _triggerRef$current, _target$current, _target$current$focus;\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 ? void 0 : _target$current$focus.call(_target$current);\n  });\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {\n      data: getAllDataAndCache(),\n      valueKey: valueKey,\n      target: function target() {\n        return overlay.current;\n      }\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onKeyDown = _useFocusItemValue.onKeyDown;\n  var handleSearchCallback = (0, _utils.useEventCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n    // The first option after filtering is the focus.\n    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  });\n\n  // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(getAllData(), {\n      labelKey: labelKey,\n      searchBy: searchBy,\n      callback: handleSearchCallback\n    }),\n    searchKeyword = _useSearch.searchKeyword,\n    resetSearch = _useSearch.resetSearch,\n    checkShouldDisplay = _useSearch.checkShouldDisplay,\n    handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      var _controlledData$;\n      setData(controlledData);\n      setNewData([]);\n      setFocusItemValue(controlledData === null || controlledData === void 0 ? void 0 : (_controlledData$ = controlledData[0]) === null || _controlledData$ === void 0 ? void 0 : _controlledData$[valueKey]);\n    }\n  }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current2;\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {\n      setMaxWidth((0, _getWidth.default)(triggerRef.current.root));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current3, _triggerRef$current3$;\n    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchKeyword, value]);\n  var getDataItem = function getDataItem(value) {\n    // Find active `MenuItem` by `value`\n    var allData = getAllDataAndCache();\n    var activeItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n  var getInput = function getInput() {\n    var _inputRef$current;\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  };\n  var focusInput = function focusInput() {\n    var _getInput;\n    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  };\n  var blurInput = function blurInput() {\n    var _getInput2;\n    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  };\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  var createOption = function createOption(value) {\n    var _ref2;\n    if (groupBy) {\n      var _ref;\n      return _ref = {\n        create: true\n      }, _ref[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _ref[valueKey] = value, _ref[labelKey] = value, _ref;\n    }\n    return _ref2 = {\n      create: true\n    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;\n  };\n  var handleChange = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  });\n  var handleRemoveItemByTag = (0, _utils.useEventCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);\n  });\n  var handleSelect = (0, _utils.useEventCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  });\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  var handleSelectItem = (0, _utils.useEventCallback)(function (value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  });\n\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  var handleCheckTag = (0, _utils.useEventCallback)(function (nextItemValue, item, event, checked) {\n    var val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, nextItemValue);\n      });\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focusInput();\n  });\n  var handleTagKeyPress = (0, _utils.useEventCallback)(function (event) {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    var val = cloneValue();\n    var data = getAllData();\n    if (!focusItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n    if (!val.some(function (v) {\n      return (0, _shallowEqual.default)(v, focusItemValue);\n    })) {\n      val.push(focusItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, focusItemValue);\n      });\n    }\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n    if (!focusItem) {\n      focusItem = createOption(focusItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  });\n  var handleMenuItemKeyPress = (0, _utils.useEventCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    var allData = getAllData();\n    var focusItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    });\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  var removeLastItem = (0, _utils.useEventCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focusInput();\n      return;\n    }\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  });\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _utils.useEventCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    trigger: triggerRef,\n    target: target,\n    overlay: overlay\n  }, events, rest));\n  var handleExited = (0, _utils.useEventCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n  });\n  var handleFocus = (0, _utils.useEventCallback)(function () {\n    if (!readOnly) {\n      var _triggerRef$current4;\n      setOpen(true);\n      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    focusInput();\n    setOpen(true);\n  });\n  var handleExit = (0, _utils.useEventCallback)(function () {\n    blurInput();\n    setOpen(false);\n  });\n  var renderListItem = function renderListItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 548,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    var dataItem = getDataItem(value);\n    var itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n    var _tagProps$closable = tagProps.closable,\n      closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n      onClose = tagProps.onClose,\n      tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDataItem = getDataItem(tag),\n        isValid = _getDataItem.isValid,\n        itemNode = _getDataItem.itemNode,\n        activeItem = _getDataItem.activeItem;\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({\n        role: \"option\"\n      }, tagRest, {\n        key: tag,\n        size: convertSize(size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 593,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  var renderPopup = function renderPopup(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    }))) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n        ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 640,\n          columnNumber: 16\n        }\n      });\n    }\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      listItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,\n      listItemProps: {\n        renderCheckbox: renderCheckbox\n      },\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items\n      // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any\n      ,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderListItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 644,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 668,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 672,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _checkValue = checkValue(),\n    isValid = _checkValue.isValid,\n    itemNode = _checkValue.itemNode;\n  var tagElements = renderMultiValue();\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValue,\n      name: 'input',\n      cleanable: cleanable\n    })),\n    pickerClasses = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"tag\"])))] = multi, _merge[prefix((multi ? 'tag' : 'input') + \"-\" + size)] = size, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"focused\"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)([\"disabled-options\"])))] = disabledOptions, _merge));\n  var searching = !!searchKeyword && open;\n  var editable = searchable && !disabled && !rest.loading;\n  var inputProps = multi ? {\n    inputStyle: {\n      maxWidth: maxWidth - 63\n    },\n    as: _InputAutosize.default\n  } : {\n    as: 'input'\n  };\n  if (plaintext) {\n    var plaintextProps = {};\n\n    // When multiple selection, the tag is displayed in a stack layout.\n    if (multi && hasValue) {\n      plaintextProps.as = _Stack.default;\n      plaintextProps.spacing = 6;\n      plaintextProps.wrap = true;\n      plaintextProps.childrenRenderMode = 'clone';\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: target\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 733,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    multiple: multi,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 742,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focusInput,\n    onKeyDown: onPickerKeyDown,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 755,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    caret: !disabledOptions,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 762,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: hasValue && multi,\n    tags: tagElements,\n    editable: editable,\n    readOnly: readOnly,\n    disabled: disabled,\n    multiple: multi,\n    onBlur: onBlur,\n    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),\n    inputRef: inputRef,\n    onChange: handleSearch,\n    inputValue: open ? searchKeyword : '',\n    inputProps: inputProps,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 783,\n      columnNumber: 11\n    }\n  })));\n});\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _TextBox = _interopRequireDefault(__webpack_require__(/*! ./TextBox */ \"./src/InputPicker/TextBox.tsx\"));\nvar _InputPickerContext = __webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\");\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _useInput2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useInput */ \"./src/InputPicker/hooks/useInput.ts\"));\nvar _useData2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useData */ \"./src/InputPicker/hooks/useData.ts\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/InputPicker/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3,\n  _templateObject4;\n/**\n * Single item selector with text box input.\n *\n * @see https://rsuitejs.com/components/input-picker\n */\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\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$cacheData = props.cacheData,\n    cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$data = props.data,\n    controlledData = _props$data === void 0 ? [] : _props$data,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    defaultValue = props.defaultValue,\n    _props$defaultOpen = props.defaultOpen,\n    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    size = props.size,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    controlledOpen = props.open,\n    placeholder = props.placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    groupBy = props.groupBy,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    creatable = props.creatable,\n    shouldDisplayCreateOption = props.shouldDisplayCreateOption,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    virtualized = props.virtualized,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    listProps = props.listProps,\n    id = props.id,\n    tabIndex = props.tabIndex,\n    sort = props.sort,\n    renderMenu = props.renderMenu,\n    renderExtraFooter = props.renderExtraFooter,\n    renderValue = props.renderValue,\n    renderMenuItem = props.renderMenuItem,\n    renderMenuGroup = props.renderMenuGroup,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onCreate = props.onCreate,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    searchBy = props.searchBy,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"cleanable\", \"cacheData\", \"classPrefix\", \"data\", \"disabled\", \"readOnly\", \"plaintext\", \"defaultValue\", \"defaultOpen\", \"disabledItemValues\", \"locale\", \"toggleAs\", \"style\", \"size\", \"searchable\", \"open\", \"placeholder\", \"placement\", \"groupBy\", \"menuClassName\", \"menuStyle\", \"menuAutoWidth\", \"menuMaxHeight\", \"creatable\", \"shouldDisplayCreateOption\", \"value\", \"valueKey\", \"virtualized\", \"labelKey\", \"listProps\", \"id\", \"tabIndex\", \"sort\", \"renderMenu\", \"renderExtraFooter\", \"renderValue\", \"renderMenuItem\", \"renderMenuGroup\", \"onEnter\", \"onEntered\", \"onExit\", \"onExited\", \"onChange\", \"onClean\", \"onCreate\", \"onSearch\", \"onSelect\", \"onBlur\", \"onFocus\", \"searchBy\"]);\n  var _useTagContext = (0, _InputPickerContext.useTagContext)(),\n    multi = _useTagContext.multi,\n    tagProps = _useTagContext.tagProps,\n    trigger = _useTagContext.trigger,\n    disabledOptions = _useTagContext.disabledOptions,\n    onTagRemove = _useTagContext.onTagRemove,\n    renderCheckbox = _useTagContext.renderCheckbox;\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    triggerRef = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list;\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n    locale = _useCustom.locale;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useControlled = (0, _utils.useControlled)(controlledOpen, defaultOpen),\n    open = _useControlled[0],\n    setOpen = _useControlled[1];\n  var _useInput = (0, _useInput2.default)({\n      multi: multi,\n      triggerRef: triggerRef\n    }),\n    inputRef = _useInput.inputRef,\n    inputProps = _useInput.inputProps,\n    focus = _useInput.focus,\n    blur = _useInput.blur;\n  var handleDataChange = function handleDataChange(data) {\n    var _data$;\n    setFocusItemValue(data === null || data === void 0 ? void 0 : (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$[valueKey]);\n  };\n  var _useData = (0, _useData2.default)({\n      controlledData: controlledData,\n      cacheData: cacheData,\n      onChange: handleDataChange\n    }),\n    data = _useData.data,\n    dataWithCache = _useData.dataWithCache,\n    newData = _useData.newData,\n    setNewData = _useData.setNewData;\n  var _useControlled2 = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n    value = _useControlled2[0],\n    setValue = _useControlled2[1],\n    isControlled = _useControlled2[2];\n  var cloneValue = function cloneValue() {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _triggerRef$current, _target$current, _target$current$focus;\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 ? void 0 : _target$current$focus.call(_target$current);\n  });\n  var focusItemValueOptions = {\n    data: dataWithCache,\n    valueKey: valueKey,\n    target: function target() {\n      return overlay.current;\n    }\n  };\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, focusItemValueOptions),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onKeyDown = _useFocusItemValue.onKeyDown;\n  var onSearchCallback = (0, _utils.useEventCallback)(function (searchKeyword, filteredData, event) {\n    if (!disabledOptions) {\n      var _filteredData$;\n      // The first option after filtering is the focus.\n      var firstItemValue = filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey];\n\n      // If there is no value in the option and new options are supported, the search keyword is the first option\n      if (!firstItemValue && creatable) {\n        firstItemValue = searchKeyword;\n      }\n      setFocusItemValue(firstItemValue);\n    }\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  });\n  var searchOptions = {\n    labelKey: labelKey,\n    searchBy: searchBy,\n    callback: onSearchCallback\n  };\n\n  // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(data, searchOptions),\n    searchKeyword = _useSearch.searchKeyword,\n    resetSearch = _useSearch.resetSearch,\n    checkShouldDisplay = _useSearch.checkShouldDisplay,\n    handleSearch = _useSearch.handleSearch; // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current2, _triggerRef$current2$;\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.updatePosition) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchKeyword, value]);\n  var getDataItem = function getDataItem(value) {\n    // Find active `MenuItem` by `value`\n    var activeItem = dataWithCache.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  var createOption = function createOption(value) {\n    var _option;\n    var option = (_option = {\n      create: true\n    }, _option[valueKey] = value, _option[labelKey] = value, _option);\n    if (groupBy) {\n      var _extends2;\n      return (0, _extends3.default)((_extends2 = {}, _extends2[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _extends2), option);\n    }\n    return option;\n  };\n  var handleChange = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  });\n  var handleRemoveItemByTag = (0, _utils.useEventCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);\n  });\n  var handleSelect = (0, _utils.useEventCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  });\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  var handleSelectItem = (0, _utils.useEventCallback)(function (value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  });\n\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  var handleCheckTag = (0, _utils.useEventCallback)(function (nextItemValue, item, event, checked) {\n    var val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, nextItemValue);\n      });\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focus();\n  });\n  var handleTagKeyPress = (0, _utils.useEventCallback)(function (event) {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    var val = cloneValue();\n    var newItemValue = focusItemValue || '';\n\n    // In TagInput\n    if (multi && disabledOptions) {\n      newItemValue = searchKeyword;\n    }\n    if (!newItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === newItemValue;\n    })) {\n      return;\n    }\n    if (!val.some(function (v) {\n      return (0, _shallowEqual.default)(v, newItemValue);\n    })) {\n      val.push(newItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, newItemValue);\n      });\n    }\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], newItemValue);\n    });\n    if (!focusItem) {\n      focusItem = createOption(newItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  });\n  var handleMenuItemKeyPress = (0, _utils.useEventCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    });\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  var removeLastItem = (0, _utils.useEventCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focus();\n      return;\n    }\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  });\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _utils.useEventCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({\n    trigger: triggerRef,\n    target: target,\n    overlay: overlay\n  }, events, rest));\n  var handleExited = (0, _utils.useEventCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n  });\n  var handleFocus = (0, _utils.useEventCallback)(function (event) {\n    if (!readOnly) {\n      var _triggerRef$current3;\n      setOpen(true);\n      (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();\n    }\n    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    focus();\n    setOpen(true);\n  });\n  var handleExit = (0, _utils.useEventCallback)(function () {\n    blur();\n    setOpen(false);\n  });\n  var renderListItem = function renderListItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 513,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    var dataItem = getDataItem(value);\n    var itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n    var _tagProps$closable = tagProps.closable,\n      closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n      onClose = tagProps.onClose,\n      tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDataItem = getDataItem(tag),\n        isValid = _getDataItem.isValid,\n        itemNode = _getDataItem.itemNode,\n        activeItem = _getDataItem.activeItem;\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends3.default)({\n        role: \"option\"\n      }, tagRest, {\n        key: tag,\n        size: (0, _utils2.convertSize)(size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 558,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  var renderPopup = function renderPopup(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    var styles = (0, _extends3.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(data, checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    }))) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n        ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 605,\n          columnNumber: 16\n        }\n      });\n    }\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      listItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,\n      listItemProps: {\n        renderCheckbox: renderCheckbox\n      },\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items\n      // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderListItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 609,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 633,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 637,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _checkValue = checkValue(),\n    isValid = _checkValue.isValid,\n    itemNode = _checkValue.itemNode;\n  var tagElements = renderMultiValue();\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValue,\n      name: 'input',\n      cleanable: cleanable\n    })),\n    pickerClasses = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"tag\"])))] = multi, _merge[prefix((multi ? 'tag' : 'input') + \"-\" + size)] = size, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"focused\"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)([\"disabled-options\"])))] = disabledOptions, _merge));\n  var searching = !!searchKeyword && open;\n  var editable = searchable && !disabled && !rest.loading;\n  if (plaintext) {\n    var plaintextProps = {};\n\n    // When multiple selection, the tag is displayed in a stack layout.\n    if (multi && hasValue) {\n      plaintextProps.as = _Stack.default;\n      plaintextProps.spacing = 6;\n      plaintextProps.wrap = true;\n      plaintextProps.childrenRenderMode = 'clone';\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends3.default)({\n      localeKey: \"notSelected\",\n      ref: target\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 694,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    multiple: multi,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 703,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focus,\n    onKeyDown: onPickerKeyDown,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 716,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    caret: !disabledOptions,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 723,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: hasValue && multi,\n    inputRef: inputRef,\n    inputValue: open ? searchKeyword : '',\n    inputProps: inputProps,\n    tags: tagElements,\n    editable: editable,\n    readOnly: readOnly,\n    disabled: disabled,\n    multiple: multi,\n    onBlur: onBlur,\n    onFocus: handleFocus,\n    onChange: handleSearch,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 744,\n      columnNumber: 11\n    }\n  })));\n});\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
 
 /***/ }),
 
@@ -7803,7 +7803,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\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar InputPickerContext = /*#__PURE__*/_react.default.createContext({\n  tagProps: {},\n  trigger: 'Enter'\n});\nvar _default = InputPickerContext;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPickerContext.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useTagContext = useTagContext;\nexports[\"default\"] = exports.TagProvider = void 0;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar InputPickerContext = /*#__PURE__*/_react.default.createContext({\n  tagProps: {},\n  trigger: 'Enter'\n});\nfunction useTagContext() {\n  return _react.default.useContext(InputPickerContext);\n}\nvar TagProvider = InputPickerContext.Provider;\nexports.TagProvider = TagProvider;\nvar _default = InputPickerContext;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPickerContext.tsx?");
 
 /***/ }),
 
@@ -7840,6 +7840,39 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/InputPicker/hooks/useData.ts":
+/*!******************************************!*\
+  !*** ./src/InputPicker/hooks/useData.ts ***!
+  \******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nfunction useData(props) {\n  var _props$controlledData = props.controlledData,\n    controlledData = _props$controlledData === void 0 ? [] : _props$controlledData,\n    _props$cacheData = props.cacheData,\n    cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,\n    onChange = props.onChange;\n  var _useState = (0, _react.useState)(controlledData),\n    uncontrolledData = _useState[0],\n    setData = _useState[1];\n  var _useState2 = (0, _react.useState)([]),\n    newData = _useState2[0],\n    setNewData = _useState2[1];\n  var data = (0, _react.useMemo)(function () {\n    return [].concat(uncontrolledData, newData);\n  }, [newData, uncontrolledData]);\n  var dataWithCache = (0, _react.useMemo)(function () {\n    return [].concat(data, cacheData);\n  }, [data, cacheData]);\n\n  // Update the state when the data in props changes\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      setData(controlledData);\n      setNewData([]);\n      onChange === null || onChange === void 0 ? void 0 : onChange(controlledData);\n    }\n  }, [controlledData, uncontrolledData, onChange]);\n  return {\n    data: data,\n    dataWithCache: dataWithCache,\n    newData: newData,\n    setNewData: setNewData\n  };\n}\nvar _default = useData;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/hooks/useData.ts?");
+
+/***/ }),
+
+/***/ "./src/InputPicker/hooks/useInput.ts":
+/*!*******************************************!*\
+  !*** ./src/InputPicker/hooks/useInput.ts ***!
+  \*******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _useMaxWidth = _interopRequireDefault(__webpack_require__(/*! ./useMaxWidth */ \"./src/InputPicker/hooks/useMaxWidth.ts\"));\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ../InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\nvar INPUT_MARGIN_RIGHT = 60;\nfunction useInput(props) {\n  var multi = props.multi,\n    triggerRef = props.triggerRef;\n  var inputRef = (0, _react.useRef)();\n  var maxWidth = (0, _useMaxWidth.default)(triggerRef);\n  var getInput = (0, _react.useCallback)(function () {\n    var _inputRef$current;\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  }, [multi]);\n  var focus = (0, _react.useCallback)(function () {\n    var _getInput;\n    (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  }, [getInput]);\n  var blur = (0, _react.useCallback)(function () {\n    var _getInput2;\n    (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  }, [getInput]);\n  var inputProps = (0, _react.useMemo)(function () {\n    return multi ? {\n      inputStyle: {\n        maxWidth: maxWidth - INPUT_MARGIN_RIGHT\n      },\n      as: _InputAutosize.default\n    } : {\n      as: 'input'\n    };\n  }, [maxWidth, multi]);\n  return {\n    inputProps: inputProps,\n    inputRef: inputRef,\n    focus: focus,\n    blur: blur\n  };\n}\nvar _default = useInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/hooks/useInput.ts?");
+
+/***/ }),
+
+/***/ "./src/InputPicker/hooks/useMaxWidth.ts":
+/*!**********************************************!*\
+  !*** ./src/InputPicker/hooks/useMaxWidth.ts ***!
+  \**********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nfunction useMaxWidth(triggerRef) {\n  var _useState = (0, _react.useState)(100),\n    maxWidth = _useState[0],\n    setMaxWidth = _useState[1];\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current;\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.root) {\n      var _triggerRef$current2;\n      setMaxWidth((0, _getWidth.default)((_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.root));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return maxWidth;\n}\nvar _default = useMaxWidth;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/hooks/useMaxWidth.ts?");
+
+/***/ }),
+
 /***/ "./src/InputPicker/index.tsx":
 /*!***********************************!*\
   !*** ./src/InputPicker/index.tsx ***!
@@ -7851,6 +7884,17 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/InputPicker/utils.ts":
+/*!**********************************!*\
+  !*** ./src/InputPicker/utils.ts ***!
+  \**********************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.convertSize = void 0;\nvar convertSize = function convertSize(size) {\n  switch (size) {\n    case 'lg':\n      return 'lg';\n    case 'sm':\n    case 'xs':\n      return 'sm';\n    default:\n      return 'md';\n  }\n};\nexports.convertSize = convertSize;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/utils.ts?");
+
+/***/ }),
+
 /***/ "./src/List/List.tsx":
 /*!***************************!*\
   !*** ./src/List/List.tsx ***!
@@ -9464,7 +9508,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _InputPicker = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPicker */ \"./src/InputPicker/InputPicker.tsx\"));\nvar _InputPickerContext = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TagInput/index.tsx\",\n  _this = void 0;\n/**\n * The `TagInput` component is an enhancement of Input and supports input tags and management tags.\n *\n * @see https://rsuitejs.com/components/tag-input\n */\nvar TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$tagProps = props.tagProps,\n    tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,\n    value = props.value,\n    defaultValue = props.defaultValue,\n    onTagRemove = props.onTagRemove,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"tagProps\", \"trigger\", \"value\", \"defaultValue\", \"onTagRemove\"]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      multi: true,\n      disabledOptions: true,\n      trigger: trigger,\n      tagProps: tagProps,\n      onTagRemove: onTagRemove\n    };\n  }, [onTagRemove, tagProps, trigger]);\n  var data = (0, _react.useMemo)(function () {\n    return (value || defaultValue || []).map(function (v) {\n      return {\n        value: v,\n        label: v\n      };\n    });\n  }, [defaultValue, value]);\n  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 27,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {\n    \"aria-haspopup\": false,\n    \"aria-expanded\": undefined,\n    \"aria-controls\": undefined,\n    \"aria-keyshortcuts\": trigger,\n    value: value,\n    defaultValue: defaultValue,\n    data: data,\n    placement: undefined,\n    creatable: true,\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 28,\n      columnNumber: 7\n    }\n  })));\n});\nTagInput.displayName = 'TagInput';\nvar _default = TagInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TagInput/index.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _InputPicker = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPicker */ \"./src/InputPicker/InputPicker.tsx\"));\nvar _InputPickerContext = __webpack_require__(/*! ../InputPicker/InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TagInput/index.tsx\",\n  _this = void 0;\n/**\n * The `TagInput` component is an enhancement of Input and supports input tags and management tags.\n *\n * @see https://rsuitejs.com/components/tag-input\n */\nvar TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$tagProps = props.tagProps,\n    tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,\n    value = props.value,\n    defaultValue = props.defaultValue,\n    onTagRemove = props.onTagRemove,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"tagProps\", \"trigger\", \"value\", \"defaultValue\", \"onTagRemove\"]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      multi: true,\n      disabledOptions: true,\n      trigger: trigger,\n      tagProps: tagProps,\n      onTagRemove: onTagRemove\n    };\n  }, [onTagRemove, tagProps, trigger]);\n  var data = (0, _react.useMemo)(function () {\n    return (value || defaultValue || []).map(function (v) {\n      return {\n        value: v,\n        label: v\n      };\n    });\n  }, [defaultValue, value]);\n  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.TagProvider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 27,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {\n    \"aria-haspopup\": false,\n    \"aria-expanded\": undefined,\n    \"aria-controls\": undefined,\n    \"aria-keyshortcuts\": trigger,\n    value: value,\n    defaultValue: defaultValue,\n    data: data,\n    placement: undefined,\n    creatable: true,\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 28,\n      columnNumber: 7\n    }\n  })));\n});\nTagInput.displayName = 'TagInput';\nvar _default = TagInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TagInput/index.tsx?");
 
 /***/ }),
 
@@ -9475,7 +9519,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _InputPicker = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPicker */ \"./src/InputPicker/InputPicker.tsx\"));\nvar _InputPickerContext = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TagPicker/index.tsx\",\n  _this = void 0;\n/**\n * `TagPicker` component enables multi-selection by tags and supports new options.\n *\n * @see https://rsuitejs.com/components/tag-picker/\n */\nvar TagPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$tagProps = props.tagProps,\n    tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,\n    onTagRemove = props.onTagRemove,\n    renderMenuItemCheckbox = props.renderMenuItemCheckbox,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"tagProps\", \"trigger\", \"onTagRemove\", \"renderMenuItemCheckbox\"]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      multi: true,\n      trigger: trigger,\n      tagProps: tagProps,\n      onTagRemove: onTagRemove,\n      renderCheckbox: renderMenuItemCheckbox\n    };\n  }, [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);\n  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 43,\n      columnNumber: 9\n    }\n  })));\n});\nTagPicker.displayName = 'TagPicker';\nvar _default = TagPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TagPicker/index.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _InputPicker = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPicker */ \"./src/InputPicker/InputPicker.tsx\"));\nvar _InputPickerContext = __webpack_require__(/*! ../InputPicker/InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TagPicker/index.tsx\",\n  _this = void 0;\n/**\n * `TagPicker` component enables multi-selection by tags and supports new options.\n *\n * @see https://rsuitejs.com/components/tag-picker/\n */\nvar TagPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$tagProps = props.tagProps,\n    tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,\n    onTagRemove = props.onTagRemove,\n    renderMenuItemCheckbox = props.renderMenuItemCheckbox,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"tagProps\", \"trigger\", \"onTagRemove\", \"renderMenuItemCheckbox\"]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      multi: true,\n      trigger: trigger,\n      tagProps: tagProps,\n      onTagRemove: onTagRemove,\n      renderCheckbox: renderMenuItemCheckbox\n    };\n  }, [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);\n  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.TagProvider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 43,\n      columnNumber: 9\n    }\n  })));\n});\nTagPicker.displayName = 'TagPicker';\nvar _default = TagPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TagPicker/index.tsx?");
 
 /***/ }),