rsuite 5.48.0 → 5.48.1

package/dist/rsuite.js

@@ -2259,7 +2259,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 _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateInput/utils.ts\");\nvar _useDateInputState2 = _interopRequireDefault(__webpack_require__(/*! ./useDateInputState */ \"./src/DateInput/useDateInputState.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateInput/DateInput.tsx\",\n  _this = void 0;\nvar isTestEnvironment = process.env.RUN_ENV === 'test';\n/**\n * The DateInput component lets users select a date with the keyboard.\n * @version 5.58.0\n * @see https://rsuitejs.com/components/date-input/\n */\nvar DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    valueProp = props.value,\n    defaultValue = props.defaultValue,\n    onChange = props.onChange,\n    onKeyDown = props.onKeyDown,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"format\", \"value\", \"defaultValue\", \"onChange\", \"onKeyDown\"]);\n  var inputRef = (0, _react.useRef)();\n  var _useState = (0, _react.useState)({\n      selectedPattern: 'y',\n      selectionStart: 0,\n      selectionEnd: 0\n    }),\n    selectedState = _useState[0],\n    setSelectedState = _useState[1];\n  var _useCustom = (0, _utils.useCustom)('Calendar'),\n    locale = _useCustom.locale;\n  var localize = locale.dateLocale.localize;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useDateInputState = (0, _useDateInputState2.default)({\n      formatStr: formatStr,\n      localize: localize,\n      date: value,\n      isControlledDate: isControlled\n    }),\n    dateField = _useDateInputState.dateField,\n    setDateOffset = _useDateInputState.setDateOffset,\n    setDateField = _useDateInputState.setDateField,\n    getDateField = _useDateInputState.getDateField,\n    toDateString = _useDateInputState.toDateString;\n  var dateString = toDateString();\n  var keyPressOptions = (0, _react.useMemo)(function () {\n    return {\n      formatStr: formatStr,\n      localize: localize,\n      selectedMonth: dateField.month,\n      dateString: dateString\n    };\n  }, [dateField, dateString, formatStr, localize]);\n  var setSelectionRange = (0, _react.useCallback)(function (selectionStart, selectionEnd) {\n    if (selectionStart === void 0) {\n      selectionStart = selectedState.selectionStart;\n    }\n    if (selectionEnd === void 0) {\n      selectionEnd = selectedState.selectionEnd;\n    }\n    var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;\n    if (isTestEnvironment) {\n      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);\n      return;\n    }\n    requestAnimationFrame(function () {\n      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);\n    });\n  }, [selectedState]);\n  var handleChange = (0, _react.useCallback)(function (value, event) {\n    setValue(value);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange, setValue]);\n  var handleChangeField = (0, _react.useCallback)(function (event, nextDirection) {\n    var input = event.target;\n    var direction = nextDirection || (event.key === 'ArrowRight' ? 'right' : 'left');\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      direction: direction\n    }));\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n    setSelectedState(state);\n  }, [keyPressOptions, setSelectionRange]);\n  var handleChangeFieldValue = (0, _react.useCallback)(function (event) {\n    var key = event.key;\n    var input = event.target;\n    var offset = key === 'ArrowUp' ? 1 : -1;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      valueOffset: offset\n    }));\n    setSelectedState(state);\n    setDateOffset(state.selectedPattern, offset, function (date) {\n      return handleChange(date, event);\n    });\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  }, [handleChange, keyPressOptions, setDateOffset, setSelectionRange]);\n  var isFieldFullValue = (0, _react.useCallback)(function (value, pattern) {\n    var patternGroup = (0, _utils2.getPatternGroups)(formatStr, pattern);\n    if (value.toString().length === patternGroup.length) {\n      return true;\n    }\n    switch (pattern) {\n      case 'M':\n        return parseInt(value + \"0\") > 12;\n      case 'd':\n        return parseInt(value + \"0\") > 31;\n      case 'H':\n        return parseInt(value + \"0\") > 23;\n      case 'h':\n        return parseInt(value + \"0\") > 12;\n      case 'm':\n      case 's':\n        return parseInt(value + \"0\") > 59;\n      default:\n        return false;\n    }\n  }, [formatStr]);\n  var handleChangeFieldValueWithNumericKeys = (0, _react.useCallback)(function (event) {\n    var key = event.key;\n    var input = event.target;\n    var pattern = selectedState.selectedPattern;\n    if (!pattern) {\n      return;\n    }\n    var field = getDateField(pattern);\n    var value = parseInt(key, 10);\n    var padValue = parseInt(\"\" + (field.value || '') + key, 10);\n    var newValue = value;\n\n    // Check if the value entered by the user is a valid date\n    if ((0, _utils2.validateDateTime)(field.name, padValue)) {\n      newValue = padValue;\n    }\n    if (pattern === 'M') {\n      // Month cannot be less than 1.\n      newValue = Math.max(1, newValue);\n    }\n    setDateField(pattern, newValue, function (date) {\n      return handleChange(date, event);\n    });\n\n    // The currently selected month will be retained as a parameter of getInputSelectedState,\n    // but if the user enters a month, the month value will be replaced with the value entered by the user.\n    var selectedMonth = pattern === 'M' ? newValue : dateField.month;\n    var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      selectedMonth: selectedMonth\n    }));\n    setSelectedState(nextState);\n    setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n\n    // If the field is full value, move the cursor to the next field\n    if (isFieldFullValue(newValue, pattern) && input.selectionEnd !== input.value.length) {\n      handleChangeField(event, 'right');\n    }\n  }, [dateField, getDateField, handleChange, handleChangeField, isFieldFullValue, keyPressOptions, selectedState.selectedPattern, setDateField, setSelectionRange]);\n  var handleRemoveFieldValue = (0, _react.useCallback)(function (event) {\n    if (selectedState.selectedPattern) {\n      setDateField(selectedState.selectedPattern, null, function (date) {\n        return handleChange(date, event);\n      });\n      setSelectionRange();\n    }\n  }, [handleChange, selectedState, setDateField, setSelectionRange]);\n  var handleKeyDown = function handleKeyDown(event) {\n    var _key$match;\n    var key = event.key;\n    switch (key) {\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        handleChangeField(event);\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        handleChangeFieldValue(event);\n        event.preventDefault();\n        break;\n      case 'Backspace':\n        handleRemoveFieldValue(event);\n        event.preventDefault();\n        break;\n      case (_key$match = key.match(/\\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:\n        handleChangeFieldValueWithNumericKeys(event);\n        event.preventDefault();\n        break;\n    }\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  };\n  var handleClick = (0, _react.useCallback)(function (event) {\n    var input = event.target;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input\n    }));\n    setSelectedState(state);\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  }, [keyPressOptions, setSelectionRange]);\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    inputMode: \"text\",\n    autoComplete: \"off\",\n    autoCorrect: \"off\",\n    spellCheck: false,\n    ref: (0, _utils.mergeRefs)(inputRef, ref),\n    onKeyDown: handleKeyDown,\n    onClick: handleClick,\n    value: dateString\n  }, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 247,\n      columnNumber: 5\n    }\n  }));\n});\nDateInput.displayName = 'DateInput';\nvar _default = DateInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/DateInput.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateInput/utils.ts\");\nvar _useDateInputState2 = _interopRequireDefault(__webpack_require__(/*! ./useDateInputState */ \"./src/DateInput/useDateInputState.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateInput/DateInput.tsx\",\n  _this = void 0;\nvar isTestEnvironment = undefined === 'test';\n/**\n * The DateInput component lets users select a date with the keyboard.\n * @version 5.58.0\n * @see https://rsuitejs.com/components/date-input/\n */\nvar DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    valueProp = props.value,\n    defaultValue = props.defaultValue,\n    onChange = props.onChange,\n    onKeyDown = props.onKeyDown,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"format\", \"value\", \"defaultValue\", \"onChange\", \"onKeyDown\"]);\n  var inputRef = (0, _react.useRef)();\n  var _useState = (0, _react.useState)({\n      selectedPattern: 'y',\n      selectionStart: 0,\n      selectionEnd: 0\n    }),\n    selectedState = _useState[0],\n    setSelectedState = _useState[1];\n  var _useCustom = (0, _utils.useCustom)('Calendar'),\n    locale = _useCustom.locale;\n  var localize = locale.dateLocale.localize;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useDateInputState = (0, _useDateInputState2.default)({\n      formatStr: formatStr,\n      localize: localize,\n      date: value,\n      isControlledDate: isControlled\n    }),\n    dateField = _useDateInputState.dateField,\n    setDateOffset = _useDateInputState.setDateOffset,\n    setDateField = _useDateInputState.setDateField,\n    getDateField = _useDateInputState.getDateField,\n    toDateString = _useDateInputState.toDateString;\n  var dateString = toDateString();\n  var keyPressOptions = (0, _react.useMemo)(function () {\n    return {\n      formatStr: formatStr,\n      localize: localize,\n      selectedMonth: dateField.month,\n      dateString: dateString\n    };\n  }, [dateField, dateString, formatStr, localize]);\n  var setSelectionRange = (0, _react.useCallback)(function (selectionStart, selectionEnd) {\n    if (selectionStart === void 0) {\n      selectionStart = selectedState.selectionStart;\n    }\n    if (selectionEnd === void 0) {\n      selectionEnd = selectedState.selectionEnd;\n    }\n    var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;\n    if (isTestEnvironment) {\n      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);\n      return;\n    }\n    requestAnimationFrame(function () {\n      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);\n    });\n  }, [selectedState]);\n  var handleChange = (0, _react.useCallback)(function (value, event) {\n    setValue(value);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange, setValue]);\n  var handleChangeField = (0, _react.useCallback)(function (event, nextDirection) {\n    var input = event.target;\n    var direction = nextDirection || (event.key === 'ArrowRight' ? 'right' : 'left');\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      direction: direction\n    }));\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n    setSelectedState(state);\n  }, [keyPressOptions, setSelectionRange]);\n  var handleChangeFieldValue = (0, _react.useCallback)(function (event) {\n    var key = event.key;\n    var input = event.target;\n    var offset = key === 'ArrowUp' ? 1 : -1;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      valueOffset: offset\n    }));\n    setSelectedState(state);\n    setDateOffset(state.selectedPattern, offset, function (date) {\n      return handleChange(date, event);\n    });\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  }, [handleChange, keyPressOptions, setDateOffset, setSelectionRange]);\n  var isFieldFullValue = (0, _react.useCallback)(function (value, pattern) {\n    var patternGroup = (0, _utils2.getPatternGroups)(formatStr, pattern);\n    if (value.toString().length === patternGroup.length) {\n      return true;\n    }\n    switch (pattern) {\n      case 'M':\n        return parseInt(value + \"0\") > 12;\n      case 'd':\n        return parseInt(value + \"0\") > 31;\n      case 'H':\n        return parseInt(value + \"0\") > 23;\n      case 'h':\n        return parseInt(value + \"0\") > 12;\n      case 'm':\n      case 's':\n        return parseInt(value + \"0\") > 59;\n      default:\n        return false;\n    }\n  }, [formatStr]);\n  var handleChangeFieldValueWithNumericKeys = (0, _react.useCallback)(function (event) {\n    var key = event.key;\n    var input = event.target;\n    var pattern = selectedState.selectedPattern;\n    if (!pattern) {\n      return;\n    }\n    var field = getDateField(pattern);\n    var value = parseInt(key, 10);\n    var padValue = parseInt(\"\" + (field.value || '') + key, 10);\n    var newValue = value;\n\n    // Check if the value entered by the user is a valid date\n    if ((0, _utils2.validateDateTime)(field.name, padValue)) {\n      newValue = padValue;\n    }\n    if (pattern === 'M') {\n      // Month cannot be less than 1.\n      newValue = Math.max(1, newValue);\n    }\n    setDateField(pattern, newValue, function (date) {\n      return handleChange(date, event);\n    });\n\n    // The currently selected month will be retained as a parameter of getInputSelectedState,\n    // but if the user enters a month, the month value will be replaced with the value entered by the user.\n    var selectedMonth = pattern === 'M' ? newValue : dateField.month;\n    var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input,\n      selectedMonth: selectedMonth\n    }));\n    setSelectedState(nextState);\n    setSelectionRange(nextState.selectionStart, nextState.selectionEnd);\n\n    // If the field is full value, move the cursor to the next field\n    if (isFieldFullValue(newValue, pattern) && input.selectionEnd !== input.value.length) {\n      handleChangeField(event, 'right');\n    }\n  }, [dateField, getDateField, handleChange, handleChangeField, isFieldFullValue, keyPressOptions, selectedState.selectedPattern, setDateField, setSelectionRange]);\n  var handleRemoveFieldValue = (0, _react.useCallback)(function (event) {\n    if (selectedState.selectedPattern) {\n      setDateField(selectedState.selectedPattern, null, function (date) {\n        return handleChange(date, event);\n      });\n      setSelectionRange();\n    }\n  }, [handleChange, selectedState, setDateField, setSelectionRange]);\n  var handleKeyDown = function handleKeyDown(event) {\n    var _key$match;\n    var key = event.key;\n    switch (key) {\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        handleChangeField(event);\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        handleChangeFieldValue(event);\n        event.preventDefault();\n        break;\n      case 'Backspace':\n        handleRemoveFieldValue(event);\n        event.preventDefault();\n        break;\n      case (_key$match = key.match(/\\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:\n        handleChangeFieldValueWithNumericKeys(event);\n        event.preventDefault();\n        break;\n    }\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  };\n  var handleClick = (0, _react.useCallback)(function (event) {\n    var input = event.target;\n    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {\n      input: input\n    }));\n    setSelectedState(state);\n    setSelectionRange(state.selectionStart, state.selectionEnd);\n  }, [keyPressOptions, setSelectionRange]);\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    inputMode: \"text\",\n    autoComplete: \"off\",\n    autoCorrect: \"off\",\n    spellCheck: false,\n    ref: (0, _utils.mergeRefs)(inputRef, ref),\n    onKeyDown: handleKeyDown,\n    onClick: handleClick,\n    value: dateString\n  }, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 247,\n      columnNumber: 5\n    }\n  }));\n});\nDateInput.displayName = 'DateInput';\nvar _default = DateInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/DateInput.tsx?");
 
 /***/ }),
 
@@ -2303,7 +2303,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _mapValues = _interopRequireDefault(__webpack_require__(/*! lodash/mapValues */ \"./node_modules/lodash/mapValues.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _delay = _interopRequireDefault(__webpack_require__(/*! lodash/delay */ \"./node_modules/lodash/delay.js\"));\nvar _debounce = _interopRequireDefault(__webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.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 _CalendarContainer = _interopRequireDefault(__webpack_require__(/*! ../Calendar/CalendarContainer */ \"./src/Calendar/CalendarContainer.tsx\"));\nvar _useCalendarDate2 = _interopRequireDefault(__webpack_require__(/*! ../Calendar/useCalendarDate */ \"./src/Calendar/useCalendarDate.ts\"));\nvar _MonthDropdown = __webpack_require__(/*! ../Calendar/MonthDropdown */ \"./src/Calendar/MonthDropdown.tsx\");\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ./PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\nvar _OverlayTrigger = __webpack_require__(/*! ../Overlay/OverlayTrigger */ \"./src/Overlay/OverlayTrigger.tsx\");\nvar _deprecatePropType = __webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\");\nvar _utils2 = __webpack_require__(/*! ../Calendar/utils */ \"./src/Calendar/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DatePicker/DatePicker.tsx\",\n  _this = void 0;\n/**\n * A date picker allows users to select a date from a calendar.\n *\n * @see https://rsuitejs.com/components/date-picker\n */\nvar DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    calendarDefaultDate = props.calendarDefaultDate,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    defaultValue = props.defaultValue,\n    disabled = props.disabled,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    isoWeek = props.isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    menuClassName = props.menuClassName,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    ranges = props.ranges,\n    valueProp = props.value,\n    showMeridian = props.showMeridian,\n    showWeekNumbers = props.showWeekNumbers,\n    style = props.style,\n    toggleAs = props.toggleAs,\n    caretAsProp = props.caretAs,\n    DEPRECATED_disabledDate = props.disabledDate,\n    DEPRECATED_disabledHours = props.disabledHours,\n    DEPRECATED_disabledMinutes = props.disabledMinutes,\n    DEPRECATED_disabledSeconds = props.disabledSeconds,\n    shouldDisableDate = props.shouldDisableDate,\n    shouldDisableHour = props.shouldDisableHour,\n    shouldDisableMinute = props.shouldDisableMinute,\n    shouldDisableSecond = props.shouldDisableSecond,\n    renderValue = props.renderValue,\n    onChange = props.onChange,\n    onChangeCalendarDate = props.onChangeCalendarDate,\n    onClean = props.onClean,\n    onClose = props.onClose,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onNextMonth = props.onNextMonth,\n    onOk = props.onOk,\n    onOpen = props.onOpen,\n    onPrevMonth = props.onPrevMonth,\n    onSelect = props.onSelect,\n    onToggleMonthDropdown = props.onToggleMonthDropdown,\n    onToggleTimeDropdown = props.onToggleTimeDropdown,\n    onShortcutClick = props.onShortcutClick,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"calendarDefaultDate\", \"cleanable\", \"editable\", \"defaultValue\", \"disabled\", \"format\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"menuClassName\", \"appearance\", \"placement\", \"oneTap\", \"placeholder\", \"ranges\", \"value\", \"showMeridian\", \"showWeekNumbers\", \"style\", \"toggleAs\", \"caretAs\", \"disabledDate\", \"disabledHours\", \"disabledMinutes\", \"disabledSeconds\", \"shouldDisableDate\", \"shouldDisableHour\", \"shouldDisableMinute\", \"shouldDisableSecond\", \"renderValue\", \"onChange\", \"onChangeCalendarDate\", \"onClean\", \"onClose\", \"onEntered\", \"onExited\", \"onNextMonth\", \"onOk\", \"onOpen\", \"onPrevMonth\", \"onSelect\", \"onToggleMonthDropdown\", \"onToggleTimeDropdown\", \"onShortcutClick\"]);\n  var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate,\n    parseDate = _useCustom.parseDate;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1];\n  var _useCalendarDate = (0, _useCalendarDate2.default)(value, calendarDefaultDate),\n    calendarDate = _useCalendarDate.calendarDate,\n    setCalendarDate = _useCalendarDate.setCalendarDate,\n    resetCalendarDate = _useCalendarDate.resetCalendarDate;\n  var _useState = (0, _react.useState)(false),\n    showMonthDropdown = _useState[0],\n    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n  var showMonth = onlyShowMonth || showMonthDropdown;\n  var _useState2 = (0, _react.useState)(),\n    inputState = _useState2[0],\n    setInputState = _useState2[1];\n  var _useState3 = (0, _react.useState)(false),\n    active = _useState3[0],\n    setActive = _useState3[1];\n  var triggerRef = (0, _react.useRef)(null);\n  var rootRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  (0, _Picker.usePublicMethods)(ref, {\n    rootRef: rootRef,\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n\n  /**\n   * Switch to the callback triggered after the next month.\n   */\n  var handleMoveForward = (0, _react.useCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  }, [onChangeCalendarDate, onNextMonth, setCalendarDate]);\n\n  /**\n   * Switch to the callback triggered after the previous month.\n   */\n  var handleMoveBackward = (0, _react.useCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  }, [onChangeCalendarDate, onPrevMonth, setCalendarDate]);\n\n  /**\n   * The callback triggered when the date changes.\n   */\n  var handleDateChange = (0, _react.useCallback)(function (nextValue, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);\n  }, [onChangeCalendarDate, onSelect]);\n\n  /**\n   *  A callback triggered when the time on the calendar changes.\n   */\n  var handleChangeTime = (0, _react.useCallback)(function (nextPageTime) {\n    setCalendarDate(nextPageTime);\n    handleDateChange(nextPageTime);\n  }, [handleDateChange, setCalendarDate]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var handleToggleMeridian = (0, _react.useCallback)(function () {\n    var hours = (0, _dateUtils.getHours)(calendarDate);\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    var nextDate = (0, _dateUtils.setHours)(calendarDate, nextHours);\n    handleChangeTime(nextDate);\n  }, [calendarDate, handleChangeTime]);\n  var updateValue = (0, _react.useCallback)(function (event, nextPageDate, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;\n    setCalendarDate(nextValue || new Date());\n    setValue(nextValue);\n    if (nextValue !== value) {\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  }, [handleClose, onChange, calendarDate, setCalendarDate, setValue, value]);\n\n  /**\n   * The callback triggered after the date in the shortcut area is clicked.\n   */\n  var handleShortcutPageDate = (0, _react.useCallback)(function (range, closeOverlay, event) {\n    var value = range.value;\n    updateValue(event, value, closeOverlay);\n    handleDateChange(value, event);\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n  }, [handleDateChange, onShortcutClick, updateValue]);\n\n  /**\n   * Get the corresponding container based on date selection and month selection\n   */\n  var getOverlayContainer = (0, _react.useCallback)(function () {\n    var _overlayRef$current;\n    return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector(showMonth ? '[role=\"menu\"]' : '[role=\"grid\"]');\n  }, [showMonth]);\n\n  /**\n   * Check whether the date is focusable\n   */\n  var checkFocusable = (0, _react.useCallback)(function (date) {\n    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;\n    var ariaLabel = (0, _utils2.getAriaLabel)(date, formatStr, formatDate);\n    var container = getOverlayContainer();\n    var dateElement = container.querySelector(\"[aria-label=\\\"\" + ariaLabel + \"\\\"]\");\n    if (dateElement !== null && dateElement !== void 0 && dateElement.hasAttribute('aria-disabled')) {\n      return false;\n    }\n    return true;\n  }, [formatDate, getOverlayContainer, locale, showMonth]);\n\n  /**\n   * Focus on the currently selected date element\n   */\n  var focusSelectedDate = (0, _react.useCallback)(function () {\n    (0, _delay.default)(function () {\n      var container = getOverlayContainer();\n      var selectedElement = container === null || container === void 0 ? void 0 : container.querySelector('[aria-selected=\"true\"]');\n      selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.focus();\n    }, 1);\n  }, [getOverlayContainer]);\n\n  /**\n   * Focus on the input element\n   */\n  var focusTargetButton = (0, _react.useCallback)(function () {\n    (0, _delay.default)(function () {\n      var _targetRef$current, _targetRef$current$qu;\n      (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$qu = _targetRef$current.querySelector('input')) === null || _targetRef$current$qu === void 0 ? void 0 : _targetRef$current$qu.focus();\n    }, 100);\n  }, []);\n\n  /**\n   * The callback triggered after clicking the OK button.\n   */\n  var handleOK = (0, _react.useCallback)(function (event) {\n    updateValue(event);\n    onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);\n    focusTargetButton();\n  }, [updateValue, onOk, calendarDate, focusTargetButton]);\n\n  /**\n   * Callback after clicking the clear button.\n   */\n  var handleClean = (0, _react.useCallback)(function (event) {\n    updateValue(event, null);\n    resetCalendarDate(null);\n  }, [resetCalendarDate, updateValue]);\n  var handlePickerToggleKeyDown = (0, _react.useCallback)(function (event) {\n    var _event$target;\n    var tagName = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName;\n    if (tagName === 'INPUT') {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        focusSelectedDate();\n      } else if (event.key === 'Enter') {\n        var _triggerRef$current2, _triggerRef$current2$;\n        (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n      }\n    }\n  }, [focusSelectedDate]);\n  var handlePickerOverlayKeyDown = (0, _react.useCallback)(function (event) {\n    var delta = 0;\n    var step = showMonth ? 6 : 7;\n    var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        delta = step;\n      },\n      up: function up() {\n        delta = -step;\n      },\n      right: function right() {\n        delta = 1;\n      },\n      left: function left() {\n        delta = -1;\n      },\n      enter: function enter() {\n        handleOK(event);\n      }\n    });\n    var nextDate = changeDateFunc(calendarDate, delta);\n    if (checkFocusable(nextDate)) {\n      setCalendarDate(nextDate);\n      focusSelectedDate();\n    }\n  }, [showMonth, calendarDate, checkFocusable, handleOK, setCalendarDate, focusSelectedDate]);\n\n  /**\n   * The callback triggered after the month selection box is opened or closed.\n   */\n  var handleToggleMonthDropdown = (0, _react.useCallback)(function (toggle) {\n    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);\n    setShowMonthDropdown(toggle);\n  }, [onToggleMonthDropdown]);\n\n  /**\n   * Handle keyboard events.\n   */\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    active: active,\n    onExit: handleClean,\n    onKeyDown: handlePickerToggleKeyDown\n  }, rest));\n\n  /**\n   * Callback after the date is selected.\n   */\n  var handleSelect = (0, _react.useCallback)(function (nextValue, event, updatableValue) {\n    if (updatableValue === void 0) {\n      updatableValue = true;\n    }\n    setCalendarDate(\n    // Determine whether the current value contains time, if not, use calendarDate.\n    (0, _dateUtils.shouldRenderTime)(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {\n      return (0, _dateUtils.setHours)(d, (0, _dateUtils.getHours)(calendarDate));\n    }, function (d) {\n      return (0, _dateUtils.setMinutes)(d, (0, _dateUtils.getMinutes)(calendarDate));\n    }, function (d) {\n      return (0, _dateUtils.setSeconds)(d, (0, _dateUtils.getSeconds)(calendarDate));\n    })(nextValue));\n    handleDateChange(nextValue);\n    if (oneTap && updatableValue) {\n      updateValue(event, nextValue);\n    }\n  }, [setCalendarDate, formatStr, handleDateChange, oneTap, calendarDate, updateValue]);\n\n  /**\n   *  A callback triggered when the date on the calendar changes.\n   */\n  var handleChangeMonth = (0, _react.useCallback)(function (nextPageDate, event) {\n    setCalendarDate(nextPageDate);\n    handleDateChange(nextPageDate);\n    focusSelectedDate();\n    if (oneTap && onlyShowMonth) {\n      updateValue(event, nextPageDate);\n    }\n  }, [focusSelectedDate, handleDateChange, oneTap, onlyShowMonth, setCalendarDate, updateValue]);\n  var isDateDisabled = (0, _react.useCallback)(function (date) {\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date);\n    }\n    if (typeof DEPRECATED_disabledDate === 'function') {\n      return DEPRECATED_disabledDate(date);\n    }\n    return false;\n  }, [DEPRECATED_disabledDate, shouldDisableDate]);\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _react.useCallback)(function (value, event) {\n    setInputState('Typing');\n\n    // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n    if (!(0, _dateUtils.isMatch)(value, formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n    var date = parseDate(value, formatStr);\n\n    // If only the time is included in the characters, it will default to today.\n    if ((0, _dateUtils.shouldOnlyRenderTime)(formatStr)) {\n      date = new Date((0, _dateUtils.format)(new Date(), 'yyyy-MM-dd') + \" \" + value);\n    }\n    if (!(0, _dateUtils.isValid)(date)) {\n      setInputState('Error');\n      return;\n    }\n    if (isDateDisabled(date)) {\n      setInputState('Error');\n      return;\n    }\n    handleSelect(date, event, false);\n  }, [formatStr, locale, parseDate, isDateDisabled, handleSelect]);\n\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      updateValue(event, calendarDate);\n    }\n    setInputState('Initial');\n  }, [inputState, calendarDate, updateValue]);\n  var handleInputBackspace = (0, _react.useCallback)(function (event) {\n    var value = event.target.value;\n\n    // When the input box is empty, the date is cleared.\n    if (value === '') {\n      handleClean(event);\n    }\n  }, [handleClean]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setActive(false);\n  }, [onClose]);\n\n  // Check whether the time is within the time range of the shortcut option in the toolbar.\n  var disabledToolbarHandle = (0, _react.useCallback)(function (date) {\n    var _DEPRECATED_disabledD;\n    var allowDate = (_DEPRECATED_disabledD = DEPRECATED_disabledDate === null || DEPRECATED_disabledDate === void 0 ? void 0 : DEPRECATED_disabledDate(date)) !== null && _DEPRECATED_disabledD !== void 0 ? _DEPRECATED_disabledD : false;\n    var allowTime = (0, _dateUtils.disabledTime)(props, date);\n    return allowDate || allowTime;\n  }, [DEPRECATED_disabledDate, props]);\n\n  /**\n   * Whether \"OK\" button is disabled\n   *\n   * - If format is date, disable ok button if selected date is disabled\n   * - If format is month, disable ok button if all dates in the month of selected date are disabled\n   */\n  var isOKButtonDisabled = (0, _react.useCallback)(function (selectedDate) {\n    if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {\n      return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);\n    }\n    return disabledToolbarHandle(selectedDate);\n  }, [disabledToolbarHandle, formatStr]);\n  var calendarProps = (0, _react.useMemo)(function () {\n    return (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {\n      return function (next, date) {\n        var _disabledOrHiddenTime;\n        return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;\n      };\n    });\n  }, [props]);\n  var calendar = /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {\n    locale: locale,\n    showWeekNumbers: showWeekNumbers,\n    showMeridian: showMeridian,\n    disabledDate: isDateDisabled,\n    disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,\n    disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,\n    disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,\n    limitEndYear: limitEndYear,\n    limitStartYear: limitStartYear,\n    format: formatStr,\n    isoWeek: isoWeek,\n    calendarDate: calendarDate,\n    onMoveForward: handleMoveForward,\n    onMoveBackward: handleMoveBackward,\n    onSelect: handleSelect,\n    onToggleMonthDropdown: handleToggleMonthDropdown,\n    onToggleTimeDropdown: onToggleTimeDropdown,\n    onChangeMonth: handleChangeMonth,\n    onChangeTime: handleChangeTime,\n    onToggleMeridian: handleToggleMeridian,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 706,\n      columnNumber: 7\n    }\n  }));\n\n  // The shortcut option on the left side of the calendar panel\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\n  // The shortcut option on the bottom of the calendar panel\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  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(menuClassName, className, prefix('date-menu'));\n    var styles = {\n      left: left,\n      top: top\n    };\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      role: \"dialog\",\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      style: styles,\n      target: triggerRef,\n      onKeyDown: handlePickerOverlayKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 744,\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: 752,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('date-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledToolbarHandle,\n      onShortcutClick: handleShortcutPageDate,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 754,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, calendar, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      ranges: bottomRanges,\n      calendarDate: calendarDate,\n      disabledOkBtn: isOKButtonDisabled,\n      disabledShortcut: disabledToolbarHandle,\n      onShortcutClick: handleShortcutPageDate,\n      onOk: handleOK,\n      hideOkBtn: oneTap,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 768,\n        columnNumber: 15\n      }\n    }))));\n  };\n  var hasValue = !!value;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'date',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var renderDate = (0, _react.useCallback)(function () {\n    var _renderValue;\n    if (!value) {\n      return placeholder || formatStr;\n    }\n    return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);\n  }, [formatStr, formatDate, placeholder, renderValue, value]);\n  var caretAs = (0, _react.useMemo)(function () {\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var handleTriggerClose = (0, _react.useCallback)(function (cause) {\n    // Unless overlay is closing on user clicking \"OK\" button,\n    // reset the selected date on calendar panel\n    if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {\n      resetCalendarDate();\n    }\n    setShowMonthDropdown(false);\n  }, [resetCalendarDate]);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onClose: handleTriggerClose,\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 822,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: merge(className, classes),\n    style: style,\n    ref: rootRef,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 832,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    className: prefix({\n      error: inputState === 'Error'\n    }),\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    editable: editable,\n    inputValue: value ? formatDate(value, formatStr) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,\n    inputMask: (0, _dateUtils.getDateMask)(formatStr),\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onInputBackspace: (0, _debounce.default)(handleInputBackspace, 10),\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs,\n    \"aria-haspopup\": \"dialog\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 833,\n      columnNumber: 11\n    }\n  }), renderDate())));\n});\nDatePicker.displayName = 'DatePicker';\nDatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  calendarDefaultDate: _propTypes.default.instanceOf(Date),\n  defaultValue: _propTypes.default.instanceOf(Date),\n  disabledDate: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  disabledHours: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableHour\" property instead.'),\n  disabledMinutes: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableMinute\" property instead.'),\n  disabledSeconds: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableSecond\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  shouldDisableHour: _propTypes.default.func,\n  shouldDisableMinute: _propTypes.default.func,\n  shouldDisableSecond: _propTypes.default.func,\n  format: _propTypes.default.string,\n  hideHours: _propTypes.default.func,\n  hideMinutes: _propTypes.default.func,\n  hideSeconds: _propTypes.default.func,\n  isoWeek: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onChangeCalendarDate: _propTypes.default.func,\n  onNextMonth: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  onPrevMonth: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onToggleMonthDropdown: _propTypes.default.func,\n  onToggleTimeDropdown: _propTypes.default.func,\n  oneTap: _propTypes.default.bool,\n  panelContainerRef: _propTypes.default.any,\n  ranges: _propTypes.default.array,\n  showMeridian: _propTypes.default.bool,\n  showWeekNumbers: _propTypes.default.bool,\n  value: _propTypes.default.instanceOf(Date)\n});\nvar _default = DatePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/DatePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _mapValues = _interopRequireDefault(__webpack_require__(/*! lodash/mapValues */ \"./node_modules/lodash/mapValues.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _delay = _interopRequireDefault(__webpack_require__(/*! lodash/delay */ \"./node_modules/lodash/delay.js\"));\nvar _debounce = _interopRequireDefault(__webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.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 _CalendarContainer = _interopRequireDefault(__webpack_require__(/*! ../Calendar/CalendarContainer */ \"./src/Calendar/CalendarContainer.tsx\"));\nvar _useCalendarDate2 = _interopRequireDefault(__webpack_require__(/*! ../Calendar/useCalendarDate */ \"./src/Calendar/useCalendarDate.ts\"));\nvar _MonthDropdown = __webpack_require__(/*! ../Calendar/MonthDropdown */ \"./src/Calendar/MonthDropdown.tsx\");\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ./PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\nvar _OverlayTrigger = __webpack_require__(/*! ../Overlay/OverlayTrigger */ \"./src/Overlay/OverlayTrigger.tsx\");\nvar _deprecatePropType = __webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\");\nvar _utils2 = __webpack_require__(/*! ../Calendar/utils */ \"./src/Calendar/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DatePicker/DatePicker.tsx\",\n  _this = void 0;\n/**\n * A date picker allows users to select a date from a calendar.\n *\n * @see https://rsuitejs.com/components/date-picker\n */\nvar DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    calendarDefaultDate = props.calendarDefaultDate,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    defaultValue = props.defaultValue,\n    disabled = props.disabled,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    isoWeek = props.isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    ranges = props.ranges,\n    valueProp = props.value,\n    showMeridian = props.showMeridian,\n    showWeekNumbers = props.showWeekNumbers,\n    style = props.style,\n    toggleAs = props.toggleAs,\n    caretAsProp = props.caretAs,\n    DEPRECATED_disabledDate = props.disabledDate,\n    DEPRECATED_disabledHours = props.disabledHours,\n    DEPRECATED_disabledMinutes = props.disabledMinutes,\n    DEPRECATED_disabledSeconds = props.disabledSeconds,\n    shouldDisableDate = props.shouldDisableDate,\n    shouldDisableHour = props.shouldDisableHour,\n    shouldDisableMinute = props.shouldDisableMinute,\n    shouldDisableSecond = props.shouldDisableSecond,\n    renderValue = props.renderValue,\n    onChange = props.onChange,\n    onChangeCalendarDate = props.onChangeCalendarDate,\n    onClean = props.onClean,\n    onClose = props.onClose,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onNextMonth = props.onNextMonth,\n    onOk = props.onOk,\n    onOpen = props.onOpen,\n    onPrevMonth = props.onPrevMonth,\n    onSelect = props.onSelect,\n    onToggleMonthDropdown = props.onToggleMonthDropdown,\n    onToggleTimeDropdown = props.onToggleTimeDropdown,\n    onShortcutClick = props.onShortcutClick,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"calendarDefaultDate\", \"cleanable\", \"editable\", \"defaultValue\", \"disabled\", \"format\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"menuClassName\", \"menuStyle\", \"appearance\", \"placement\", \"oneTap\", \"placeholder\", \"ranges\", \"value\", \"showMeridian\", \"showWeekNumbers\", \"style\", \"toggleAs\", \"caretAs\", \"disabledDate\", \"disabledHours\", \"disabledMinutes\", \"disabledSeconds\", \"shouldDisableDate\", \"shouldDisableHour\", \"shouldDisableMinute\", \"shouldDisableSecond\", \"renderValue\", \"onChange\", \"onChangeCalendarDate\", \"onClean\", \"onClose\", \"onEntered\", \"onExited\", \"onNextMonth\", \"onOk\", \"onOpen\", \"onPrevMonth\", \"onSelect\", \"onToggleMonthDropdown\", \"onToggleTimeDropdown\", \"onShortcutClick\"]);\n  var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate,\n    parseDate = _useCustom.parseDate;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1];\n  var _useCalendarDate = (0, _useCalendarDate2.default)(value, calendarDefaultDate),\n    calendarDate = _useCalendarDate.calendarDate,\n    setCalendarDate = _useCalendarDate.setCalendarDate,\n    resetCalendarDate = _useCalendarDate.resetCalendarDate;\n  var _useState = (0, _react.useState)(false),\n    showMonthDropdown = _useState[0],\n    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n  var showMonth = onlyShowMonth || showMonthDropdown;\n  var _useState2 = (0, _react.useState)(),\n    inputState = _useState2[0],\n    setInputState = _useState2[1];\n  var _useState3 = (0, _react.useState)(false),\n    active = _useState3[0],\n    setActive = _useState3[1];\n  var triggerRef = (0, _react.useRef)(null);\n  var rootRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  (0, _Picker.usePublicMethods)(ref, {\n    rootRef: rootRef,\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n\n  /**\n   * Switch to the callback triggered after the next month.\n   */\n  var handleMoveForward = (0, _react.useCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  }, [onChangeCalendarDate, onNextMonth, setCalendarDate]);\n\n  /**\n   * Switch to the callback triggered after the previous month.\n   */\n  var handleMoveBackward = (0, _react.useCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  }, [onChangeCalendarDate, onPrevMonth, setCalendarDate]);\n\n  /**\n   * The callback triggered when the date changes.\n   */\n  var handleDateChange = (0, _react.useCallback)(function (nextValue, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);\n  }, [onChangeCalendarDate, onSelect]);\n\n  /**\n   *  A callback triggered when the time on the calendar changes.\n   */\n  var handleChangeTime = (0, _react.useCallback)(function (nextPageTime) {\n    setCalendarDate(nextPageTime);\n    handleDateChange(nextPageTime);\n  }, [handleDateChange, setCalendarDate]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var handleToggleMeridian = (0, _react.useCallback)(function () {\n    var hours = (0, _dateUtils.getHours)(calendarDate);\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    var nextDate = (0, _dateUtils.setHours)(calendarDate, nextHours);\n    handleChangeTime(nextDate);\n  }, [calendarDate, handleChangeTime]);\n  var updateValue = (0, _react.useCallback)(function (event, nextPageDate, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;\n    setCalendarDate(nextValue || new Date());\n    setValue(nextValue);\n    if (nextValue !== value) {\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  }, [handleClose, onChange, calendarDate, setCalendarDate, setValue, value]);\n\n  /**\n   * The callback triggered after the date in the shortcut area is clicked.\n   */\n  var handleShortcutPageDate = (0, _react.useCallback)(function (range, closeOverlay, event) {\n    var value = range.value;\n    updateValue(event, value, closeOverlay);\n    handleDateChange(value, event);\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n  }, [handleDateChange, onShortcutClick, updateValue]);\n\n  /**\n   * Get the corresponding container based on date selection and month selection\n   */\n  var getOverlayContainer = (0, _react.useCallback)(function () {\n    var _overlayRef$current;\n    return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector(showMonth ? '[role=\"menu\"]' : '[role=\"grid\"]');\n  }, [showMonth]);\n\n  /**\n   * Check whether the date is focusable\n   */\n  var checkFocusable = (0, _react.useCallback)(function (date) {\n    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;\n    var ariaLabel = (0, _utils2.getAriaLabel)(date, formatStr, formatDate);\n    var container = getOverlayContainer();\n    var dateElement = container.querySelector(\"[aria-label=\\\"\" + ariaLabel + \"\\\"]\");\n    if (dateElement !== null && dateElement !== void 0 && dateElement.hasAttribute('aria-disabled')) {\n      return false;\n    }\n    return true;\n  }, [formatDate, getOverlayContainer, locale, showMonth]);\n\n  /**\n   * Focus on the currently selected date element\n   */\n  var focusSelectedDate = (0, _react.useCallback)(function () {\n    (0, _delay.default)(function () {\n      var container = getOverlayContainer();\n      var selectedElement = container === null || container === void 0 ? void 0 : container.querySelector('[aria-selected=\"true\"]');\n      selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.focus();\n    }, 1);\n  }, [getOverlayContainer]);\n\n  /**\n   * Focus on the input element\n   */\n  var focusTargetButton = (0, _react.useCallback)(function () {\n    (0, _delay.default)(function () {\n      var _targetRef$current, _targetRef$current$qu;\n      (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$qu = _targetRef$current.querySelector('input')) === null || _targetRef$current$qu === void 0 ? void 0 : _targetRef$current$qu.focus();\n    }, 100);\n  }, []);\n\n  /**\n   * The callback triggered after clicking the OK button.\n   */\n  var handleOK = (0, _react.useCallback)(function (event) {\n    updateValue(event);\n    onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);\n    focusTargetButton();\n  }, [updateValue, onOk, calendarDate, focusTargetButton]);\n\n  /**\n   * Callback after clicking the clear button.\n   */\n  var handleClean = (0, _react.useCallback)(function (event) {\n    updateValue(event, null);\n    resetCalendarDate(null);\n  }, [resetCalendarDate, updateValue]);\n  var handlePickerToggleKeyDown = (0, _react.useCallback)(function (event) {\n    var _event$target;\n    var tagName = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName;\n    if (tagName === 'INPUT') {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        focusSelectedDate();\n      } else if (event.key === 'Enter') {\n        var _triggerRef$current2, _triggerRef$current2$;\n        (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n      }\n    }\n  }, [focusSelectedDate]);\n  var handlePickerOverlayKeyDown = (0, _react.useCallback)(function (event) {\n    var delta = 0;\n    var step = showMonth ? 6 : 7;\n    var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        delta = step;\n      },\n      up: function up() {\n        delta = -step;\n      },\n      right: function right() {\n        delta = 1;\n      },\n      left: function left() {\n        delta = -1;\n      },\n      enter: function enter() {\n        handleOK(event);\n      }\n    });\n    var nextDate = changeDateFunc(calendarDate, delta);\n    if (checkFocusable(nextDate)) {\n      setCalendarDate(nextDate);\n      focusSelectedDate();\n    }\n  }, [showMonth, calendarDate, checkFocusable, handleOK, setCalendarDate, focusSelectedDate]);\n\n  /**\n   * The callback triggered after the month selection box is opened or closed.\n   */\n  var handleToggleMonthDropdown = (0, _react.useCallback)(function (toggle) {\n    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);\n    setShowMonthDropdown(toggle);\n  }, [onToggleMonthDropdown]);\n\n  /**\n   * Handle keyboard events.\n   */\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    active: active,\n    onExit: handleClean,\n    onKeyDown: handlePickerToggleKeyDown\n  }, rest));\n\n  /**\n   * Callback after the date is selected.\n   */\n  var handleSelect = (0, _react.useCallback)(function (nextValue, event, updatableValue) {\n    if (updatableValue === void 0) {\n      updatableValue = true;\n    }\n    setCalendarDate(\n    // Determine whether the current value contains time, if not, use calendarDate.\n    (0, _dateUtils.shouldRenderTime)(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {\n      return (0, _dateUtils.setHours)(d, (0, _dateUtils.getHours)(calendarDate));\n    }, function (d) {\n      return (0, _dateUtils.setMinutes)(d, (0, _dateUtils.getMinutes)(calendarDate));\n    }, function (d) {\n      return (0, _dateUtils.setSeconds)(d, (0, _dateUtils.getSeconds)(calendarDate));\n    })(nextValue));\n    handleDateChange(nextValue);\n    if (oneTap && updatableValue) {\n      updateValue(event, nextValue);\n    }\n  }, [setCalendarDate, formatStr, handleDateChange, oneTap, calendarDate, updateValue]);\n\n  /**\n   *  A callback triggered when the date on the calendar changes.\n   */\n  var handleChangeMonth = (0, _react.useCallback)(function (nextPageDate, event) {\n    setCalendarDate(nextPageDate);\n    handleDateChange(nextPageDate);\n    focusSelectedDate();\n    if (oneTap && onlyShowMonth) {\n      updateValue(event, nextPageDate);\n    }\n  }, [focusSelectedDate, handleDateChange, oneTap, onlyShowMonth, setCalendarDate, updateValue]);\n  var isDateDisabled = (0, _react.useCallback)(function (date) {\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date);\n    }\n    if (typeof DEPRECATED_disabledDate === 'function') {\n      return DEPRECATED_disabledDate(date);\n    }\n    return false;\n  }, [DEPRECATED_disabledDate, shouldDisableDate]);\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _react.useCallback)(function (value, event) {\n    setInputState('Typing');\n\n    // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n    if (!(0, _dateUtils.isMatch)(value, formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n    var date = parseDate(value, formatStr);\n\n    // If only the time is included in the characters, it will default to today.\n    if ((0, _dateUtils.shouldOnlyRenderTime)(formatStr)) {\n      date = new Date((0, _dateUtils.format)(new Date(), 'yyyy-MM-dd') + \" \" + value);\n    }\n    if (!(0, _dateUtils.isValid)(date)) {\n      setInputState('Error');\n      return;\n    }\n    if (isDateDisabled(date)) {\n      setInputState('Error');\n      return;\n    }\n    handleSelect(date, event, false);\n  }, [formatStr, locale, parseDate, isDateDisabled, handleSelect]);\n\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      updateValue(event, calendarDate);\n    }\n    setInputState('Initial');\n  }, [inputState, calendarDate, updateValue]);\n  var handleInputBackspace = (0, _react.useCallback)(function (event) {\n    var value = event.target.value;\n\n    // When the input box is empty, the date is cleared.\n    if (value === '') {\n      handleClean(event);\n    }\n  }, [handleClean]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setActive(false);\n  }, [onClose]);\n\n  // Check whether the time is within the time range of the shortcut option in the toolbar.\n  var disabledToolbarHandle = (0, _react.useCallback)(function (date) {\n    var _DEPRECATED_disabledD;\n    var allowDate = (_DEPRECATED_disabledD = DEPRECATED_disabledDate === null || DEPRECATED_disabledDate === void 0 ? void 0 : DEPRECATED_disabledDate(date)) !== null && _DEPRECATED_disabledD !== void 0 ? _DEPRECATED_disabledD : false;\n    var allowTime = (0, _dateUtils.disabledTime)(props, date);\n    return allowDate || allowTime;\n  }, [DEPRECATED_disabledDate, props]);\n\n  /**\n   * Whether \"OK\" button is disabled\n   *\n   * - If format is date, disable ok button if selected date is disabled\n   * - If format is month, disable ok button if all dates in the month of selected date are disabled\n   */\n  var isOKButtonDisabled = (0, _react.useCallback)(function (selectedDate) {\n    if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {\n      return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);\n    }\n    return disabledToolbarHandle(selectedDate);\n  }, [disabledToolbarHandle, formatStr]);\n  var calendarProps = (0, _react.useMemo)(function () {\n    return (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {\n      return function (next, date) {\n        var _disabledOrHiddenTime;\n        return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;\n      };\n    });\n  }, [props]);\n  var calendar = /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {\n    locale: locale,\n    showWeekNumbers: showWeekNumbers,\n    showMeridian: showMeridian,\n    disabledDate: isDateDisabled,\n    disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,\n    disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,\n    disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,\n    limitEndYear: limitEndYear,\n    limitStartYear: limitStartYear,\n    format: formatStr,\n    isoWeek: isoWeek,\n    calendarDate: calendarDate,\n    onMoveForward: handleMoveForward,\n    onMoveBackward: handleMoveBackward,\n    onSelect: handleSelect,\n    onToggleMonthDropdown: handleToggleMonthDropdown,\n    onToggleTimeDropdown: onToggleTimeDropdown,\n    onChangeMonth: handleChangeMonth,\n    onChangeTime: handleChangeTime,\n    onToggleMeridian: handleToggleMeridian,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 707,\n      columnNumber: 7\n    }\n  }));\n\n  // The shortcut option on the left side of the calendar panel\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\n  // The shortcut option on the bottom of the calendar panel\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  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(menuClassName, className, prefix('date-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      role: \"dialog\",\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      style: styles,\n      target: triggerRef,\n      onKeyDown: handlePickerOverlayKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 745,\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: 753,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('date-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledToolbarHandle,\n      onShortcutClick: handleShortcutPageDate,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 755,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, calendar, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      ranges: bottomRanges,\n      calendarDate: calendarDate,\n      disabledOkBtn: isOKButtonDisabled,\n      disabledShortcut: disabledToolbarHandle,\n      onShortcutClick: handleShortcutPageDate,\n      onOk: handleOK,\n      hideOkBtn: oneTap,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 769,\n        columnNumber: 15\n      }\n    }))));\n  };\n  var hasValue = !!value;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'date',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var renderDate = (0, _react.useCallback)(function () {\n    var _renderValue;\n    if (!value) {\n      return placeholder || formatStr;\n    }\n    return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);\n  }, [formatStr, formatDate, placeholder, renderValue, value]);\n  var caretAs = (0, _react.useMemo)(function () {\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var handleTriggerClose = (0, _react.useCallback)(function (cause) {\n    // Unless overlay is closing on user clicking \"OK\" button,\n    // reset the selected date on calendar panel\n    if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {\n      resetCalendarDate();\n    }\n    setShowMonthDropdown(false);\n  }, [resetCalendarDate]);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onClose: handleTriggerClose,\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 823,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: merge(className, classes),\n    style: style,\n    ref: rootRef,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 833,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    className: prefix({\n      error: inputState === 'Error'\n    }),\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    editable: editable,\n    inputValue: value ? formatDate(value, formatStr) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,\n    inputMask: (0, _dateUtils.getDateMask)(formatStr),\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onInputBackspace: (0, _debounce.default)(handleInputBackspace, 10),\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs,\n    \"aria-haspopup\": \"dialog\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 834,\n      columnNumber: 11\n    }\n  }), renderDate())));\n});\nDatePicker.displayName = 'DatePicker';\nDatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  calendarDefaultDate: _propTypes.default.instanceOf(Date),\n  defaultValue: _propTypes.default.instanceOf(Date),\n  disabledDate: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  disabledHours: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableHour\" property instead.'),\n  disabledMinutes: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableMinute\" property instead.'),\n  disabledSeconds: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableSecond\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  shouldDisableHour: _propTypes.default.func,\n  shouldDisableMinute: _propTypes.default.func,\n  shouldDisableSecond: _propTypes.default.func,\n  format: _propTypes.default.string,\n  hideHours: _propTypes.default.func,\n  hideMinutes: _propTypes.default.func,\n  hideSeconds: _propTypes.default.func,\n  isoWeek: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onChangeCalendarDate: _propTypes.default.func,\n  onNextMonth: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  onPrevMonth: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onToggleMonthDropdown: _propTypes.default.func,\n  onToggleTimeDropdown: _propTypes.default.func,\n  oneTap: _propTypes.default.bool,\n  panelContainerRef: _propTypes.default.any,\n  ranges: _propTypes.default.array,\n  showMeridian: _propTypes.default.bool,\n  showWeekNumbers: _propTypes.default.bool,\n  value: _propTypes.default.instanceOf(Date)\n});\nvar _default = DatePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/DatePicker.tsx?");
 
 /***/ }),
 
@@ -2754,7 +2754,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _schem
 /***/ (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 _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 _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _FormContext = _interopRequireWildcard(__webpack_require__(/*! ../Form/FormContext */ \"./src/Form/FormContext.tsx\"));\nvar _FormGroup = __webpack_require__(/*! ../FormGroup/FormGroup */ \"./src/FormGroup/FormGroup.tsx\");\nvar _useRegisterModel = _interopRequireDefault(__webpack_require__(/*! ./useRegisterModel */ \"./src/FormControl/useRegisterModel.ts\"));\nvar _Toggle = _interopRequireDefault(__webpack_require__(/*! ../Toggle */ \"./src/Toggle/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/FormControl/FormControl.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * Props that FormControl passes to its accepter\n */\n\n/**\n * The `<Form.Control>` component is used to wrap the components that need to be validated.\n * @see https://rsuitejs.com/components/form/\n */\nvar FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _accepterProps;\n  var _useContext = (0, _react.useContext)(_FormContext.default),\n    readOnlyContext = _useContext.readOnly,\n    plaintextContext = _useContext.plaintext,\n    disabledContext = _useContext.disabled,\n    errorFromContext = _useContext.errorFromContext,\n    formError = _useContext.formError,\n    removeFieldValue = _useContext.removeFieldValue,\n    removeFieldError = _useContext.removeFieldError,\n    pushFieldRule = _useContext.pushFieldRule,\n    removeFieldRule = _useContext.removeFieldRule,\n    onFieldChange = _useContext.onFieldChange,\n    onFieldError = _useContext.onFieldError,\n    onFieldSuccess = _useContext.onFieldSuccess,\n    getCombinedModel = _useContext.getCombinedModel,\n    contextCheckTrigger = _useContext.checkTrigger;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$accepter = props.accepter,\n    AccepterComponent = _props$accepter === void 0 ? _Input.default : _props$accepter,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'form-control' : _props$classPrefix,\n    checkAsync = props.checkAsync,\n    checkTrigger = props.checkTrigger,\n    _props$errorPlacement = props.errorPlacement,\n    errorPlacement = _props$errorPlacement === void 0 ? 'bottomStart' : _props$errorPlacement,\n    errorMessage = props.errorMessage,\n    name = props.name,\n    value = props.value,\n    _props$readOnly = props.readOnly,\n    readOnly = _props$readOnly === void 0 ? readOnlyContext : _props$readOnly,\n    _props$plaintext = props.plaintext,\n    plaintext = _props$plaintext === void 0 ? plaintextContext : _props$plaintext,\n    _props$disabled = props.disabled,\n    disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,\n    onChange = props.onChange,\n    onBlur = props.onBlur,\n    defaultValue = props.defaultValue,\n    _props$shouldResetWit = props.shouldResetWithUnmount,\n    shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,\n    rule = props.rule,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"accepter\", \"classPrefix\", \"checkAsync\", \"checkTrigger\", \"errorPlacement\", \"errorMessage\", \"name\", \"value\", \"readOnly\", \"plaintext\", \"disabled\", \"onChange\", \"onBlur\", \"defaultValue\", \"shouldResetWithUnmount\", \"rule\"]);\n  var _useContext2 = (0, _react.useContext)(_FormGroup.FormGroupContext),\n    controlId = _useContext2.controlId;\n  if (!onFieldChange) {\n    throw new Error(\"\\n      <FormControl> must be inside a component decorated with <Form>.\\n      And need to update React to 16.6.0 +.\\n    \");\n  }\n  (0, _useRegisterModel.default)(name, pushFieldRule, removeFieldRule, rule);\n  (0, _utils.useWillUnmount)(function () {\n    if (shouldResetWithUnmount) {\n      removeFieldValue === null || removeFieldValue === void 0 ? void 0 : removeFieldValue(name);\n      removeFieldError === null || removeFieldError === void 0 ? void 0 : removeFieldError(name);\n    }\n  });\n  var trigger = checkTrigger || contextCheckTrigger;\n  var formValue = (0, _react.useContext)(_FormContext.FormValueContext);\n  var val = (0, _isUndefined.default)(value) ? formValue === null || formValue === void 0 ? void 0 : formValue[name] : value;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var classes = withClassPrefix('wrapper');\n  var handleFieldChange = function handleFieldChange(value, event) {\n    handleFieldCheck(value, trigger === 'change');\n    onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(name, value, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  };\n  var handleFieldBlur = function handleFieldBlur(event) {\n    handleFieldCheck(val, trigger === 'blur');\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  };\n  var handleFieldCheck = function handleFieldCheck(value, isCheckTrigger) {\n    var _extends2;\n    var callbackEvents = function callbackEvents(checkResult) {\n      // The relevant event is triggered only when the inspection is allowed.\n      if (isCheckTrigger) {\n        if (checkResult.hasError) {\n          onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(name, (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult);\n        } else {\n          onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(name);\n        }\n      }\n      return checkResult;\n    };\n    var nextFormValue = (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[name] = value, _extends2));\n    var model = getCombinedModel();\n    if (checkAsync) {\n      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue).then(function (checkResult) {\n        return callbackEvents(checkResult);\n      });\n    }\n    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue)));\n  };\n  var messageNode = null;\n  if (!(0, _isUndefined.default)(errorMessage)) {\n    messageNode = errorMessage;\n  } else if (errorFromContext) {\n    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];\n    if (typeof fieldError === 'string' || !(fieldError !== null && fieldError !== void 0 && fieldError.array) && !(fieldError !== null && fieldError !== void 0 && fieldError.object) && fieldError !== null && fieldError !== void 0 && fieldError.hasError) {\n      messageNode = fieldError;\n    }\n  }\n  var ariaDescribedby = controlId ? controlId + \"-help-text\" : null;\n  var fieldHasError = Boolean(messageNode);\n  var ariaErrormessage = fieldHasError && controlId ? controlId + \"-error-message\" : undefined;\n  var valueKey = 'value';\n\n  // Toggle component is a special case that uses `checked` and `defaultChecked` instead of `value` and `defaultValue` props.\n  if (AccepterComponent === _Toggle.default) {\n    valueKey = 'checked';\n  }\n  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = val === undefined ? defaultValue : val, _accepterProps);\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 205,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends3.default)({\n    id: controlId,\n    \"aria-labelledby\": controlId ? controlId + \"-control-label\" : null,\n    \"aria-describedby\": ariaDescribedby,\n    \"aria-invalid\": fieldHasError || undefined,\n    \"aria-errormessage\": ariaErrormessage\n  }, accepterProps, rest, {\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled,\n    name: name,\n    onChange: handleFieldChange,\n    onBlur: handleFieldBlur,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 206,\n      columnNumber: 7\n    }\n  })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {\n    id: controlId + \"-error-message\",\n    role: \"alert\",\n    \"aria-relevant\": \"all\",\n    show: !!messageNode,\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"message-wrapper\"]))),\n    placement: errorPlacement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 222,\n      columnNumber: 7\n    }\n  }, messageNode));\n});\nFormControl.displayName = 'FormControl';\nFormControl.propTypes = {\n  name: _propTypes.default.string.isRequired,\n  checkTrigger: _propTypes.default.oneOf(['change', 'blur', 'none']),\n  checkAsync: _propTypes.default.bool,\n  accepter: _propTypes.default.any,\n  onChange: _propTypes.default.func,\n  onBlur: _propTypes.default.func,\n  classPrefix: _propTypes.default.string,\n  errorMessage: _propTypes.default.node,\n  errorPlacement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd']),\n  value: _propTypes.default.any\n};\nvar _default = FormControl;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/FormControl/FormControl.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 _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _FormContext = _interopRequireWildcard(__webpack_require__(/*! ../Form/FormContext */ \"./src/Form/FormContext.tsx\"));\nvar _FormGroup = __webpack_require__(/*! ../FormGroup/FormGroup */ \"./src/FormGroup/FormGroup.tsx\");\nvar _useRegisterModel = _interopRequireDefault(__webpack_require__(/*! ./useRegisterModel */ \"./src/FormControl/useRegisterModel.ts\"));\nvar _Toggle = _interopRequireDefault(__webpack_require__(/*! ../Toggle */ \"./src/Toggle/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/FormControl/FormControl.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * Props that FormControl passes to its accepter\n */\n\n/**\n * The `<Form.Control>` component is used to wrap the components that need to be validated.\n * @see https://rsuitejs.com/components/form/\n */\nvar FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _accepterProps;\n  var _useContext = (0, _react.useContext)(_FormContext.default),\n    readOnlyContext = _useContext.readOnly,\n    plaintextContext = _useContext.plaintext,\n    disabledContext = _useContext.disabled,\n    errorFromContext = _useContext.errorFromContext,\n    formError = _useContext.formError,\n    removeFieldValue = _useContext.removeFieldValue,\n    removeFieldError = _useContext.removeFieldError,\n    pushFieldRule = _useContext.pushFieldRule,\n    removeFieldRule = _useContext.removeFieldRule,\n    onFieldChange = _useContext.onFieldChange,\n    onFieldError = _useContext.onFieldError,\n    onFieldSuccess = _useContext.onFieldSuccess,\n    getCombinedModel = _useContext.getCombinedModel,\n    contextCheckTrigger = _useContext.checkTrigger;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$accepter = props.accepter,\n    AccepterComponent = _props$accepter === void 0 ? _Input.default : _props$accepter,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'form-control' : _props$classPrefix,\n    checkAsync = props.checkAsync,\n    checkTrigger = props.checkTrigger,\n    _props$errorPlacement = props.errorPlacement,\n    errorPlacement = _props$errorPlacement === void 0 ? 'bottomStart' : _props$errorPlacement,\n    errorMessage = props.errorMessage,\n    name = props.name,\n    value = props.value,\n    _props$readOnly = props.readOnly,\n    readOnly = _props$readOnly === void 0 ? readOnlyContext : _props$readOnly,\n    _props$plaintext = props.plaintext,\n    plaintext = _props$plaintext === void 0 ? plaintextContext : _props$plaintext,\n    _props$disabled = props.disabled,\n    disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,\n    onChange = props.onChange,\n    onBlur = props.onBlur,\n    defaultValue = props.defaultValue,\n    _props$shouldResetWit = props.shouldResetWithUnmount,\n    shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,\n    rule = props.rule,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"accepter\", \"classPrefix\", \"checkAsync\", \"checkTrigger\", \"errorPlacement\", \"errorMessage\", \"name\", \"value\", \"readOnly\", \"plaintext\", \"disabled\", \"onChange\", \"onBlur\", \"defaultValue\", \"shouldResetWithUnmount\", \"rule\"]);\n  var _useContext2 = (0, _react.useContext)(_FormGroup.FormGroupContext),\n    controlId = _useContext2.controlId;\n  if (!onFieldChange) {\n    throw new Error(\"\\n      <FormControl> must be inside a component decorated with <Form>.\\n      And need to update React to 16.6.0 +.\\n    \");\n  }\n  (0, _useRegisterModel.default)(name, pushFieldRule, removeFieldRule, rule);\n  (0, _utils.useWillUnmount)(function () {\n    if (shouldResetWithUnmount) {\n      removeFieldValue === null || removeFieldValue === void 0 ? void 0 : removeFieldValue(name);\n      removeFieldError === null || removeFieldError === void 0 ? void 0 : removeFieldError(name);\n    }\n  });\n  var trigger = checkTrigger || contextCheckTrigger;\n  var formValue = (0, _react.useContext)(_FormContext.FormValueContext);\n  var val = (0, _isUndefined.default)(value) ? formValue === null || formValue === void 0 ? void 0 : formValue[name] : value;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var classes = withClassPrefix('wrapper');\n  var handleFieldChange = function handleFieldChange(value, event) {\n    handleFieldCheck(value, trigger === 'change');\n    onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(name, value, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  };\n  var handleFieldBlur = function handleFieldBlur(event) {\n    handleFieldCheck(val, trigger === 'blur');\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  };\n  var handleFieldCheck = function handleFieldCheck(value, isCheckTrigger) {\n    var _extends2;\n    var callbackEvents = function callbackEvents(checkResult) {\n      // The relevant event is triggered only when the inspection is allowed.\n      if (isCheckTrigger) {\n        if (checkResult.hasError) {\n          onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(name, (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult);\n        } else {\n          onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(name);\n        }\n      }\n      return checkResult;\n    };\n    var nextFormValue = (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[name] = value, _extends2));\n    var model = getCombinedModel();\n    if (checkAsync) {\n      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue).then(function (checkResult) {\n        return callbackEvents(checkResult);\n      });\n    }\n    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue)));\n  };\n  var messageNode = null;\n  if (!(0, _isUndefined.default)(errorMessage)) {\n    messageNode = errorMessage;\n  } else if (errorFromContext) {\n    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];\n    if (typeof fieldError === 'string' || !(fieldError !== null && fieldError !== void 0 && fieldError.array) && !(fieldError !== null && fieldError !== void 0 && fieldError.object) && fieldError !== null && fieldError !== void 0 && fieldError.hasError) {\n      messageNode = fieldError;\n    }\n  }\n  var ariaDescribedby = controlId ? controlId + \"-help-text\" : null;\n  var fieldHasError = Boolean(messageNode);\n  var ariaErrormessage = fieldHasError && controlId ? controlId + \"-error-message\" : undefined;\n  var valueKey = 'value';\n\n  // Toggle component is a special case that uses `checked` and `defaultChecked` instead of `value` and `defaultValue` props.\n  if (AccepterComponent === _Toggle.default) {\n    valueKey = 'checked';\n  }\n  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = val === undefined ? defaultValue : val, _accepterProps);\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    ref: ref,\n    \"data-testid\": \"form-control-wrapper\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 205,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends3.default)({\n    id: controlId,\n    \"aria-labelledby\": controlId ? controlId + \"-control-label\" : null,\n    \"aria-describedby\": ariaDescribedby,\n    \"aria-invalid\": fieldHasError || undefined,\n    \"aria-errormessage\": ariaErrormessage\n  }, accepterProps, rest, {\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled,\n    name: name,\n    onChange: handleFieldChange,\n    onBlur: handleFieldBlur,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 206,\n      columnNumber: 7\n    }\n  })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {\n    id: controlId + \"-error-message\",\n    role: \"alert\",\n    \"aria-relevant\": \"all\",\n    show: !!messageNode,\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"message-wrapper\"]))),\n    placement: errorPlacement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 222,\n      columnNumber: 7\n    }\n  }, messageNode));\n});\nFormControl.displayName = 'FormControl';\nFormControl.propTypes = {\n  name: _propTypes.default.string.isRequired,\n  checkTrigger: _propTypes.default.oneOf(['change', 'blur', 'none']),\n  checkAsync: _propTypes.default.bool,\n  accepter: _propTypes.default.any,\n  onChange: _propTypes.default.func,\n  onBlur: _propTypes.default.func,\n  classPrefix: _propTypes.default.string,\n  errorMessage: _propTypes.default.node,\n  errorPlacement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd']),\n  value: _propTypes.default.any\n};\nvar _default = FormControl;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/FormControl/FormControl.tsx?");
 
 /***/ }),
 
@@ -3458,7 +3458,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 _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 _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/MultiCascader/DropdownMenu.tsx\"));\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../Checkbox */ \"./src/Checkbox/index.tsx\"));\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/MultiCascader/utils.ts\");\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils2 = __webpack_require__(/*! ../Cascader/utils */ \"./src/Cascader/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascader/MultiCascader.tsx\",\n  _this = void 0;\nvar emptyArray = [];\n\n/**\n * The `MultiCascader` component is used to select multiple values from cascading options.\n * @see https://rsuitejs.com/components/multi-cascader/\n */\nvar MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _selectedPaths;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    defaultValue = props.defaultValue,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    disabled = props.disabled,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    _props$cascade = props.cascade,\n    cascade = _props$cascade === void 0 ? true : _props$cascade,\n    inline = props.inline,\n    placeholder = props.placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    menuWidth = props.menuWidth,\n    menuHeight = props.menuHeight,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    id = props.id,\n    getChildren = props.getChildren,\n    renderValue = props.renderValue,\n    renderMenu = props.renderMenu,\n    renderMenuItem = props.renderMenuItem,\n    renderExtraFooter = props.renderExtraFooter,\n    onEnter = props.onEnter,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onChange = props.onChange,\n    onOpen = props.onOpen,\n    onClose = props.onClose,\n    onCheck = props.onCheck,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"classPrefix\", \"defaultValue\", \"value\", \"valueKey\", \"labelKey\", \"childrenKey\", \"disabled\", \"disabledItemValues\", \"cleanable\", \"locale\", \"toggleAs\", \"style\", \"countable\", \"cascade\", \"inline\", \"placeholder\", \"placement\", \"appearance\", \"menuWidth\", \"menuHeight\", \"menuClassName\", \"menuStyle\", \"searchable\", \"uncheckableItemValues\", \"id\", \"getChildren\", \"renderValue\", \"renderMenu\", \"renderMenuItem\", \"renderExtraFooter\", \"onEnter\", \"onExit\", \"onExited\", \"onClean\", \"onSearch\", \"onSelect\", \"onChange\", \"onOpen\", \"onClose\", \"onCheck\"]);\n  var itemKeys = {\n    childrenKey: childrenKey,\n    labelKey: labelKey,\n    valueKey: valueKey\n  };\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useFlattenData = (0, _utils.useFlattenData)(data, itemKeys),\n    flattenData = _useFlattenData.flattenData,\n    addFlattenData = _useFlattenData.addFlattenData;\n  var _useCascadeValue = (0, _utils.useCascadeValue)((0, _extends3.default)({}, itemKeys, {\n      uncheckableItemValues: uncheckableItemValues,\n      cascade: cascade,\n      value: valueProp || defaultValue\n    }), flattenData),\n    value = _useCascadeValue.value,\n    setValue = _useCascadeValue.setValue,\n    splitValue = _useCascadeValue.splitValue; // The columns displayed in the cascading panel.\n  var _useColumnData = (0, _utils.useColumnData)(flattenData),\n    columnData = _useColumnData.columnData,\n    setColumnData = _useColumnData.setColumnData,\n    addColumn = _useColumnData.addColumn,\n    removeColumnByIndex = _useColumnData.removeColumnByIndex,\n    enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;\n  (0, _utils3.useUpdateEffect)(function () {\n    enforceUpdateColumnData(data);\n  }, [data]);\n\n  // The path after cascading data selection.\n  var _useState2 = (0, _react.useState)(),\n    selectedPaths = _useState2[0],\n    setSelectedPaths = _useState2[1];\n  var triggerRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n  var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale,\n    rtl = _useCustom.rtl;\n  var selectedItems = flattenData.filter(function (item) {\n    return value.some(function (v) {\n      return v === item[valueKey];\n    });\n  }) || [];\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(selectedPaths === null || selectedPaths === void 0 ? void 0 : (_selectedPaths = selectedPaths[selectedPaths.length - 1]) === null || _selectedPaths === void 0 ? void 0 : _selectedPaths[valueKey], {\n      rtl: rtl,\n      data: flattenData,\n      valueKey: valueKey,\n      defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,\n      target: function target() {\n        return overlayRef.current;\n      },\n      callback: (0, _react.useCallback)(function (value) {\n        var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(function (item) {\n            return item[valueKey] === value;\n          }), {\n            getParent: function getParent() {\n              return undefined;\n            },\n            getChildren: function getChildren(item) {\n              return item[childrenKey];\n            }\n          }),\n          columns = _getColumnsAndPaths.columns,\n          path = _getColumnsAndPaths.path;\n        setColumnData(columns);\n        setSelectedPaths(path);\n      }, [childrenKey, data, flattenData, setColumnData, valueKey])\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setLayer = _useFocusItemValue.setLayer,\n    setKeys = _useFocusItemValue.setKeys,\n    onFocusItem = _useFocusItemValue.onKeyDown;\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   */\n  var hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);\n  var _useClassNames = (0, _utils3.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useState3 = (0, _react.useState)(''),\n    searchKeyword = _useState3[0],\n    setSearchKeyword = _useState3[1];\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setActive(false);\n    setSearchKeyword('');\n  }, []);\n  var handleSelect = (0, _react.useCallback)(function (node, cascadePaths, event) {\n    var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;\n    setSelectedPaths(cascadePaths);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n    var columnIndex = cascadePaths.length;\n\n    // Lazy load node's children\n    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {\n      node.loading = true;\n      var children = getChildren(node);\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          node.loading = false;\n          node[childrenKey] = data;\n          if (targetRef.current || inline) {\n            addFlattenData(data, node);\n            addColumn(data, columnIndex);\n          }\n        });\n      } else {\n        node.loading = false;\n        node[childrenKey] = children;\n        addFlattenData(children, node);\n        addColumn(children, columnIndex);\n      }\n    } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {\n      addColumn(node[childrenKey], columnIndex);\n    } else {\n      // Removes subsequent columns of the current column when the clicked node is a leaf node.\n      removeColumnByIndex(columnIndex);\n    }\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);\n  }, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);\n  var handleCheck = (0, _react.useCallback)(function (node, event, checked) {\n    var nodeValue = node[valueKey];\n    var nextValue = [];\n    if (cascade) {\n      nextValue = splitValue(node, checked, value).value;\n    } else {\n      nextValue = [].concat(value);\n      if (checked) {\n        nextValue.push(nodeValue);\n      } else {\n        nextValue = nextValue.filter(function (n) {\n          return n !== nodeValue;\n        });\n      }\n    }\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);\n  }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || !targetRef.current) {\n      return;\n    }\n    setSelectedPaths([]);\n    setValue([]);\n    setColumnData([data]);\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  }, [data, disabled, onChange, setColumnData, setValue]);\n  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {\n    var _overlayRef$current;\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var checkbox = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector(\"[data-key=\\\"\" + focusItemValue + \"\\\"] [type=\\\"checkbox\\\"]\");\n    if (checkbox) {\n      handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');\n    }\n  }, [data, focusItemValue, handleCheck, valueKey]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n  var handleSearch = (0, _react.useCallback)(function (value, event) {\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n    if (value) {\n      setLayer(0);\n    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {\n      setLayer(selectedPaths.length - 1);\n    }\n    setKeys([]);\n  }, [onSearch, selectedPaths, setKeys, setLayer]);\n  var getSearchResult = (0, _react.useCallback)(function () {\n    var items = [];\n    var result = flattenData.filter(function (item) {\n      if (uncheckableItemValues.some(function (value) {\n        return item[valueKey] === value;\n      })) {\n        return false;\n      }\n      if (item[labelKey].match(new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'i'))) {\n        return true;\n      }\n      return false;\n    });\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]);\n\n      // A maximum of 100 search results are returned.\n      if (i === 99) {\n        return items;\n      }\n    }\n    return items;\n  }, [flattenData, labelKey, searchKeyword, uncheckableItemValues, valueKey]);\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var _extends2;\n    var nodes = (0, _treeUtils.getNodeParents)(item);\n    var regx = new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'ig');\n    var labelElements = [];\n    var a = item[labelKey].split(regx);\n    var b = item[labelKey].match(regx);\n    for (var i = 0; i < a.length; i++) {\n      labelElements.push(a[i]);\n      if (b[i]) {\n        labelElements.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n          key: i,\n          className: prefix('cascader-search-match'),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 403,\n            columnNumber: 13\n          }\n        }, b[i]));\n      }\n    }\n    nodes.push((0, _extends3.default)({}, item, (_extends2 = {}, _extends2[labelKey] = labelElements, _extends2)));\n    var active = value.some(function (value) {\n      if (cascade) {\n        return nodes.some(function (node) {\n          return node[valueKey] === value;\n        });\n      }\n      return item[valueKey] === value;\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return nodes.some(function (node) {\n        return node[valueKey] === value;\n      });\n    });\n    var itemClasses = prefix('cascader-row', {\n      'cascader-row-disabled': disabled,\n      'cascader-row-focus': item[valueKey] === focusItemValue\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: key,\n      className: itemClasses,\n      \"aria-disabled\": disabled,\n      \"data-key\": item[valueKey],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 428,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {\n      disabled: disabled,\n      checked: active,\n      value: item[valueKey],\n      indeterminate: cascade && !active && (0, _utils.isSomeChildChecked)(item, value, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }),\n      onChange: function onChange(_value, checked, event) {\n        handleCheck(item, event, checked);\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 429,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('cascader-cols'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 440,\n        columnNumber: 13\n      }\n    }, nodes.map(function (node, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('cascader-col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 442,\n          columnNumber: 17\n        }\n      }, node[labelKey]);\n    }))));\n  };\n  var renderSearchResultPanel = function renderSearchResultPanel() {\n    if (searchKeyword === '') {\n      return null;\n    }\n    var items = getSearchResult();\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('cascader-search-panel'),\n      \"data-layer\": 0,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 459,\n        columnNumber: 9\n      }\n    }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('none'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 463,\n        columnNumber: 13\n      }\n    }, locale.noResultsText));\n  };\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var _ref = positionProps || {},\n      left = _ref.left,\n      top = _ref.top,\n      className = _ref.className;\n    var styles = (0, _extends3.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, menuClassName, prefix('cascader-menu', 'multi-cascader-menu', {\n      inline: inline\n    }));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils3.mergeRefs)(overlayRef, speakerRef),\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 480,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInputRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 488,\n        columnNumber: 13\n      }\n    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {\n      id: id ? id + \"-listbox\" : undefined,\n      cascade: cascade,\n      menuWidth: menuWidth,\n      menuHeight: menuHeight,\n      uncheckableItemValues: uncheckableItemValues,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'picker-cascader-menu',\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      value: value,\n      onSelect: handleSelect,\n      onCheck: handleCheck,\n      renderMenu: renderMenu,\n      renderMenuItem: renderMenuItem,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 499,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 529,\n        columnNumber: 9\n      }\n    });\n  }\n  if (hasValue && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {\n      classPrefix: classPrefix,\n      hasValue: hasValue,\n      countable: countable,\n      name: 'cascader',\n      appearance: appearance,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderDropdownMenu();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),\n    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),\n    onExit: (0, _utils3.createChainedFunction)(onClose, onExit),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 569,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 578,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    ref: targetRef,\n    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 579,\n      columnNumber: 11\n    }\n  }), selectedElement || locale.placeholder)));\n});\nMultiCascader.displayName = 'MultiCascader';\nMultiCascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {\n  value: _propTypes.default.array,\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cascade: _propTypes.default.bool,\n  inline: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  uncheckableItemValues: _propTypes.default.array,\n  searchable: _propTypes.default.bool,\n  renderMenuItem: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func\n});\nvar _default = MultiCascader;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/MultiCascader.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 _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 _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/MultiCascader/DropdownMenu.tsx\"));\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../Checkbox */ \"./src/Checkbox/index.tsx\"));\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/MultiCascader/utils.ts\");\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils2 = __webpack_require__(/*! ../Cascader/utils */ \"./src/Cascader/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascader/MultiCascader.tsx\",\n  _this = void 0;\nvar emptyArray = [];\n\n/**\n * The `MultiCascader` component is used to select multiple values from cascading options.\n * @see https://rsuitejs.com/components/multi-cascader/\n */\nvar MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _selectedPaths;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    defaultValue = props.defaultValue,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    disabled = props.disabled,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    _props$cascade = props.cascade,\n    cascade = _props$cascade === void 0 ? true : _props$cascade,\n    inline = props.inline,\n    placeholder = props.placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    menuWidth = props.menuWidth,\n    menuHeight = props.menuHeight,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    id = props.id,\n    getChildren = props.getChildren,\n    renderValue = props.renderValue,\n    renderMenu = props.renderMenu,\n    renderMenuItem = props.renderMenuItem,\n    renderExtraFooter = props.renderExtraFooter,\n    onEnter = props.onEnter,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onChange = props.onChange,\n    onOpen = props.onOpen,\n    onClose = props.onClose,\n    onCheck = props.onCheck,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"classPrefix\", \"defaultValue\", \"value\", \"valueKey\", \"labelKey\", \"childrenKey\", \"disabled\", \"disabledItemValues\", \"cleanable\", \"locale\", \"toggleAs\", \"style\", \"countable\", \"cascade\", \"inline\", \"placeholder\", \"placement\", \"appearance\", \"menuWidth\", \"menuHeight\", \"menuClassName\", \"menuStyle\", \"searchable\", \"uncheckableItemValues\", \"id\", \"getChildren\", \"renderValue\", \"renderMenu\", \"renderMenuItem\", \"renderExtraFooter\", \"onEnter\", \"onExit\", \"onExited\", \"onClean\", \"onSearch\", \"onSelect\", \"onChange\", \"onOpen\", \"onClose\", \"onCheck\"]);\n  var itemKeys = {\n    childrenKey: childrenKey,\n    labelKey: labelKey,\n    valueKey: valueKey\n  };\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useFlattenData = (0, _utils.useFlattenData)(data, itemKeys),\n    flattenData = _useFlattenData.flattenData,\n    addFlattenData = _useFlattenData.addFlattenData;\n  var _useControlled = (0, _utils3.useControlled)(valueProp, defaultValue),\n    controlledValue = _useControlled[0];\n  var _useCascadeValue = (0, _utils.useCascadeValue)((0, _extends3.default)({}, itemKeys, {\n      uncheckableItemValues: uncheckableItemValues,\n      cascade: cascade,\n      value: controlledValue\n    }), flattenData),\n    value = _useCascadeValue.value,\n    setValue = _useCascadeValue.setValue,\n    splitValue = _useCascadeValue.splitValue; // The columns displayed in the cascading panel.\n  var _useColumnData = (0, _utils.useColumnData)(flattenData),\n    columnData = _useColumnData.columnData,\n    setColumnData = _useColumnData.setColumnData,\n    addColumn = _useColumnData.addColumn,\n    removeColumnByIndex = _useColumnData.removeColumnByIndex,\n    enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;\n  (0, _utils3.useUpdateEffect)(function () {\n    enforceUpdateColumnData(data);\n  }, [data]);\n\n  // The path after cascading data selection.\n  var _useState2 = (0, _react.useState)(),\n    selectedPaths = _useState2[0],\n    setSelectedPaths = _useState2[1];\n  var triggerRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n  var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale,\n    rtl = _useCustom.rtl;\n  var selectedItems = flattenData.filter(function (item) {\n    return value.some(function (v) {\n      return v === item[valueKey];\n    });\n  }) || [];\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(selectedPaths === null || selectedPaths === void 0 ? void 0 : (_selectedPaths = selectedPaths[selectedPaths.length - 1]) === null || _selectedPaths === void 0 ? void 0 : _selectedPaths[valueKey], {\n      rtl: rtl,\n      data: flattenData,\n      valueKey: valueKey,\n      defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,\n      target: function target() {\n        return overlayRef.current;\n      },\n      callback: (0, _react.useCallback)(function (value) {\n        var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(function (item) {\n            return item[valueKey] === value;\n          }), {\n            getParent: function getParent() {\n              return undefined;\n            },\n            getChildren: function getChildren(item) {\n              return item[childrenKey];\n            }\n          }),\n          columns = _getColumnsAndPaths.columns,\n          path = _getColumnsAndPaths.path;\n        setColumnData(columns);\n        setSelectedPaths(path);\n      }, [childrenKey, data, flattenData, setColumnData, valueKey])\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setLayer = _useFocusItemValue.setLayer,\n    setKeys = _useFocusItemValue.setKeys,\n    onFocusItem = _useFocusItemValue.onKeyDown;\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   */\n  var hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);\n  var _useClassNames = (0, _utils3.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useState3 = (0, _react.useState)(''),\n    searchKeyword = _useState3[0],\n    setSearchKeyword = _useState3[1];\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setActive(false);\n    setSearchKeyword('');\n  }, []);\n  var handleSelect = (0, _react.useCallback)(function (node, cascadePaths, event) {\n    var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;\n    setSelectedPaths(cascadePaths);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n    var columnIndex = cascadePaths.length;\n\n    // Lazy load node's children\n    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {\n      node.loading = true;\n      var children = getChildren(node);\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          node.loading = false;\n          node[childrenKey] = data;\n          if (targetRef.current || inline) {\n            addFlattenData(data, node);\n            addColumn(data, columnIndex);\n          }\n        });\n      } else {\n        node.loading = false;\n        node[childrenKey] = children;\n        addFlattenData(children, node);\n        addColumn(children, columnIndex);\n      }\n    } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {\n      addColumn(node[childrenKey], columnIndex);\n    } else {\n      // Removes subsequent columns of the current column when the clicked node is a leaf node.\n      removeColumnByIndex(columnIndex);\n    }\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);\n  }, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);\n  var handleCheck = (0, _react.useCallback)(function (node, event, checked) {\n    var nodeValue = node[valueKey];\n    var nextValue = [];\n    if (cascade) {\n      nextValue = splitValue(node, checked, value).value;\n    } else {\n      nextValue = [].concat(value);\n      if (checked) {\n        nextValue.push(nodeValue);\n      } else {\n        nextValue = nextValue.filter(function (n) {\n          return n !== nodeValue;\n        });\n      }\n    }\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);\n  }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || !targetRef.current) {\n      return;\n    }\n    setSelectedPaths([]);\n    setValue([]);\n    setColumnData([data]);\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  }, [data, disabled, onChange, setColumnData, setValue]);\n  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {\n    var _overlayRef$current;\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var checkbox = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector(\"[data-key=\\\"\" + focusItemValue + \"\\\"] [type=\\\"checkbox\\\"]\");\n    if (checkbox) {\n      handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');\n    }\n  }, [data, focusItemValue, handleCheck, valueKey]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n  var handleSearch = (0, _react.useCallback)(function (value, event) {\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n    if (value) {\n      setLayer(0);\n    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {\n      setLayer(selectedPaths.length - 1);\n    }\n    setKeys([]);\n  }, [onSearch, selectedPaths, setKeys, setLayer]);\n  var getSearchResult = (0, _react.useCallback)(function () {\n    var items = [];\n    var result = flattenData.filter(function (item) {\n      if (uncheckableItemValues.some(function (value) {\n        return item[valueKey] === value;\n      })) {\n        return false;\n      }\n      if (item[labelKey].match(new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'i'))) {\n        return true;\n      }\n      return false;\n    });\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]);\n\n      // A maximum of 100 search results are returned.\n      if (i === 99) {\n        return items;\n      }\n    }\n    return items;\n  }, [flattenData, labelKey, searchKeyword, uncheckableItemValues, valueKey]);\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var _extends2;\n    var nodes = (0, _treeUtils.getNodeParents)(item);\n    var regx = new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'ig');\n    var labelElements = [];\n    var a = item[labelKey].split(regx);\n    var b = item[labelKey].match(regx);\n    for (var i = 0; i < a.length; i++) {\n      labelElements.push(a[i]);\n      if (b[i]) {\n        labelElements.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n          key: i,\n          className: prefix('cascader-search-match'),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 405,\n            columnNumber: 13\n          }\n        }, b[i]));\n      }\n    }\n    nodes.push((0, _extends3.default)({}, item, (_extends2 = {}, _extends2[labelKey] = labelElements, _extends2)));\n    var active = value.some(function (value) {\n      if (cascade) {\n        return nodes.some(function (node) {\n          return node[valueKey] === value;\n        });\n      }\n      return item[valueKey] === value;\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return nodes.some(function (node) {\n        return node[valueKey] === value;\n      });\n    });\n    var itemClasses = prefix('cascader-row', {\n      'cascader-row-disabled': disabled,\n      'cascader-row-focus': item[valueKey] === focusItemValue\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: key,\n      className: itemClasses,\n      \"aria-disabled\": disabled,\n      \"data-key\": item[valueKey],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 430,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {\n      disabled: disabled,\n      checked: active,\n      value: item[valueKey],\n      indeterminate: cascade && !active && (0, _utils.isSomeChildChecked)(item, value, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }),\n      onChange: function onChange(_value, checked, event) {\n        handleCheck(item, event, checked);\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 431,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('cascader-cols'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 442,\n        columnNumber: 13\n      }\n    }, nodes.map(function (node, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('cascader-col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 444,\n          columnNumber: 17\n        }\n      }, node[labelKey]);\n    }))));\n  };\n  var renderSearchResultPanel = function renderSearchResultPanel() {\n    if (searchKeyword === '') {\n      return null;\n    }\n    var items = getSearchResult();\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('cascader-search-panel'),\n      \"data-layer\": 0,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 461,\n        columnNumber: 9\n      }\n    }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('none'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 465,\n        columnNumber: 13\n      }\n    }, locale.noResultsText));\n  };\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var _ref = positionProps || {},\n      left = _ref.left,\n      top = _ref.top,\n      className = _ref.className;\n    var styles = (0, _extends3.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, menuClassName, prefix('cascader-menu', 'multi-cascader-menu', {\n      inline: inline\n    }));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils3.mergeRefs)(overlayRef, speakerRef),\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 482,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInputRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 490,\n        columnNumber: 13\n      }\n    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {\n      id: id ? id + \"-listbox\" : undefined,\n      cascade: cascade,\n      menuWidth: menuWidth,\n      menuHeight: menuHeight,\n      uncheckableItemValues: uncheckableItemValues,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'picker-cascader-menu',\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      value: value,\n      onSelect: handleSelect,\n      onCheck: handleCheck,\n      renderMenu: renderMenu,\n      renderMenuItem: renderMenuItem,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 501,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 531,\n        columnNumber: 9\n      }\n    });\n  }\n  if (hasValue && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {\n      classPrefix: classPrefix,\n      hasValue: hasValue,\n      countable: countable,\n      name: 'cascader',\n      appearance: appearance,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderDropdownMenu();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),\n    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),\n    onExit: (0, _utils3.createChainedFunction)(onClose, onExit),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 571,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 580,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    ref: targetRef,\n    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 581,\n      columnNumber: 11\n    }\n  }), selectedElement || locale.placeholder)));\n});\nMultiCascader.displayName = 'MultiCascader';\nMultiCascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {\n  value: _propTypes.default.array,\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cascade: _propTypes.default.bool,\n  inline: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  uncheckableItemValues: _propTypes.default.array,\n  searchable: _propTypes.default.bool,\n  renderMenuItem: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func\n});\nvar _default = MultiCascader;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/MultiCascader.tsx?");
 
 /***/ }),
 
@@ -3942,7 +3942,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 _debounce = _interopRequireDefault(__webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\"));\nvar _ToggleButton = _interopRequireDefault(__webpack_require__(/*! ./ToggleButton */ \"./src/Picker/ToggleButton.tsx\"));\nvar _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../CloseButton */ \"./src/CloseButton/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\nvar _useToggleCaret = _interopRequireDefault(__webpack_require__(/*! ../utils/useToggleCaret */ \"./src/utils/useToggleCaret.tsx\"));\nvar _TextMask = _interopRequireDefault(__webpack_require__(/*! ../MaskedInput/TextMask */ \"./src/MaskedInput/TextMask.tsx\"));\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\nvar _Loader = _interopRequireDefault(__webpack_require__(/*! ../Loader */ \"./src/Loader/index.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/PickerToggle.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2;\nvar defaultInputMask = [];\nvar PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var activeProp = props.active,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? _ToggleButton.default : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker-toggle' : _props$classPrefix,\n    children = props.children,\n    _props$caret = props.caret,\n    caret = _props$caret === void 0 ? true : _props$caret,\n    className = props.className,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    hasValue = props.hasValue,\n    editable = props.editable,\n    _props$loading = props.loading,\n    loading = _props$loading === void 0 ? false : _props$loading,\n    cleanableProp = props.cleanable,\n    _props$tabIndex = props.tabIndex,\n    tabIndexProp = _props$tabIndex === void 0 ? editable ? -1 : 0 : _props$tabIndex,\n    id = props.id,\n    value = props.value,\n    inputPlaceholder = props.inputPlaceholder,\n    inputValueProp = props.inputValue,\n    _props$inputMask = props.inputMask,\n    inputMask = _props$inputMask === void 0 ? defaultInputMask : _props$inputMask,\n    onInputChange = props.onInputChange,\n    onInputPressEnter = props.onInputPressEnter,\n    onInputBackspace = props.onInputBackspace,\n    onInputBlur = props.onInputBlur,\n    onInputFocus = props.onInputFocus,\n    onClean = props.onClean,\n    onFocus = props.onFocus,\n    onBlur = props.onBlur,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    caretComponent = props.caretComponent,\n    _props$caretAs = props.caretAs,\n    caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,\n    label = props.label,\n    name = props.name,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"classPrefix\", \"children\", \"caret\", \"className\", \"disabled\", \"readOnly\", \"plaintext\", \"hasValue\", \"editable\", \"loading\", \"cleanable\", \"tabIndex\", \"id\", \"value\", \"inputPlaceholder\", \"inputValue\", \"inputMask\", \"onInputChange\", \"onInputPressEnter\", \"onInputBackspace\", \"onInputBlur\", \"onInputFocus\", \"onClean\", \"onFocus\", \"onBlur\", \"placement\", \"caretComponent\", \"caretAs\", \"label\", \"name\"]);\n  var _useCustom = (0, _utils.useCustom)(),\n    locale = _useCustom.locale;\n  var inputRef = (0, _react.useRef)(null);\n  var comboboxRef = (0, _react.useRef)(null);\n  var _useState = (0, _react.useState)(false),\n    activeState = _useState[0],\n    setActive = _useState[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var getInputValue = (0, _react.useCallback)(function () {\n    return typeof inputValueProp === 'undefined' ? Array.isArray(value) ? value.join(',') : value : inputValueProp;\n  }, [inputValueProp, value]);\n  var _useState2 = (0, _react.useState)(getInputValue),\n    inputValue = _useState2[0],\n    setInputValue = _useState2[1];\n  (0, _react.useEffect)(function () {\n    if (comboboxRef.current) {\n      var _value = getInputValue();\n      setInputValue(_value);\n    }\n  }, [getInputValue]);\n  var classes = merge(className, withClassPrefix({\n    active: activeProp || activeState\n  }));\n  var handleFocus = (0, _react.useCallback)(function (event) {\n    if (!loading) {\n      setActive(true);\n    }\n    if (editable) {\n      // Avoid firing the onFocus event twice when DatePicker and DateRangePicker allow keyboard input.\n      if (event.target === inputRef.current) {\n        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n      }\n\n      // Force the input to be focused and editable.\n      if (document.activeElement === comboboxRef.current) {\n        var _inputRef$current;\n        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();\n      }\n    } else {\n      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n    }\n  }, [editable, loading, onFocus]);\n  var handleBlur = (0, _react.useCallback)(function (event) {\n    if (inputRef.current && !editable) {\n      setActive(false);\n    }\n\n    // When activeElement is an input, it remains active.\n    if (editable && inputRef.current && document.activeElement !== inputRef.current) {\n      setActive(false);\n    }\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  }, [editable, onBlur]);\n  var handleInputBlur = function handleInputBlur(event) {\n    setInputValue(getInputValue());\n    onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(event);\n  };\n  var handleClean = (0, _react.useCallback)(function (event) {\n    var _inputRef$current2, _comboboxRef$current;\n    event.stopPropagation();\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n\n    // When the value is cleared, the current component is still in focus.\n    editable ? (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus() : (_comboboxRef$current = comboboxRef.current) === null || _comboboxRef$current === void 0 ? void 0 : _comboboxRef$current.focus();\n  }, [editable, onClean]);\n  var handleInputChange = (0, _react.useCallback)(function (event) {\n    var _event$target;\n    var value = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;\n    setInputValue(value);\n    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);\n  }, [onInputChange]);\n  var handleInputKeyDown = (0, _react.useCallback)(function (event) {\n    if (editable) {\n      if (event.key === _utils.KEY_VALUES.ENTER) {\n        onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);\n      }\n      if (event.key === _utils.KEY_VALUES.BACKSPACE) {\n        onInputBackspace === null || onInputBackspace === void 0 ? void 0 : onInputBackspace(event);\n      }\n    }\n  }, [editable, onInputPressEnter, onInputBackspace]);\n  var renderInput = (0, _react.useCallback)(function (ref, props) {\n    return /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({\n      type: \"text\",\n      autoComplete: \"off\",\n      ref: (0, _utils.mergeRefs)(inputRef, ref),\n      name: name,\n      style: {\n        pointerEvents: editable ? undefined : 'none'\n      }\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 203,\n        columnNumber: 9\n      }\n    }));\n  }, [editable, name]);\n  var ToggleCaret = (0, _useToggleCaret.default)(placement);\n  var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"notSelected\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 220,\n        columnNumber: 9\n      }\n    }, hasValue ? children : null);\n  }\n  var showCleanButton = cleanableProp && hasValue && !readOnly;\n\n  // When the component is read-only or disabled, the input is not interactive.\n  var inputFocused = readOnly || disabled ? false : editable && activeState;\n  var tabIndex = disabled ? undefined : tabIndexProp;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"combobox\",\n    \"aria-haspopup\": \"listbox\",\n    \"aria-expanded\": activeProp,\n    \"aria-disabled\": disabled,\n    \"aria-owns\": id ? id + \"-listbox\" : undefined\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(comboboxRef, ref),\n    disabled: disabled,\n    tabIndex: tabIndex,\n    className: classes,\n    onFocus: !disabled ? handleFocus : null\n    // The debounce is set to 200 to solve the flicker caused by the switch between input and div.\n    ,\n    onBlur: !disabled ? (0, _debounce.default)(handleBlur, 200) : null,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 234,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Stack.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 249,\n      columnNumber: 9\n    }\n  }, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 251,\n      columnNumber: 13\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('label'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 252,\n      columnNumber: 15\n    }\n  }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    grow: 1,\n    style: {\n      overflow: 'hidden'\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 255,\n      columnNumber: 11\n    }\n  }, loading ? /*#__PURE__*/_react.default.createElement(_Loader.default, {\n    style: {\n      display: 'block',\n      padding: '1px 0'\n    },\n    \"data-testid\": \"spinner\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 257,\n      columnNumber: 15\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextMask.default, {\n    keepCharPositions: true,\n    mask: inputMask,\n    value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,\n    onBlur: handleInputBlur,\n    onFocus: onInputFocus,\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    id: id,\n    \"aria-hidden\": !inputFocused,\n    readOnly: !inputFocused,\n    disabled: disabled,\n    \"aria-controls\": id ? id + \"-listbox\" : undefined,\n    tabIndex: editable ? 0 : -1,\n    className: prefix('textbox', {\n      'read-only': !inputFocused\n    }),\n    placeholder: inputPlaceholder,\n    render: renderInput,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 260,\n      columnNumber: 17\n    }\n  }), children ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(hasValue ? 'value' : 'placeholder'),\n    \"aria-placeholder\": typeof children === 'string' ? children : undefined,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 279,\n      columnNumber: 19\n    }\n  }, children) : null)), showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"clean\"]))),\n    tabIndex: -1,\n    locale: {\n      closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear\n    },\n    onClick: handleClean,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 290,\n      columnNumber: 13\n    }\n  }), caret && !showCleanButton && /*#__PURE__*/_react.default.createElement(Caret, {\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"caret\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 297,\n      columnNumber: 41\n    }\n  })));\n});\nPickerToggle.displayName = 'PickerToggle';\nPickerToggle.propTypes = {\n  classPrefix: _propTypes.default.string,\n  hasValue: _propTypes.default.bool,\n  cleanable: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  caret: _propTypes.default.bool,\n  as: _propTypes.default.elementType,\n  onClean: _propTypes.default.func,\n  active: _propTypes.default.bool,\n  readOnly: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  caretComponent: (0, _deprecatePropType.default)(_propTypes.default.elementType, 'Use `caretAs` instead.'),\n  caretAs: _propTypes.default.elementType\n};\nvar _default = PickerToggle;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/PickerToggle.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\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 _debounce = _interopRequireDefault(__webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\"));\nvar _ToggleButton = _interopRequireDefault(__webpack_require__(/*! ./ToggleButton */ \"./src/Picker/ToggleButton.tsx\"));\nvar _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../CloseButton */ \"./src/CloseButton/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\nvar _useToggleCaret = _interopRequireDefault(__webpack_require__(/*! ../utils/useToggleCaret */ \"./src/utils/useToggleCaret.tsx\"));\nvar _TextMask = _interopRequireDefault(__webpack_require__(/*! ../MaskedInput/TextMask */ \"./src/MaskedInput/TextMask.tsx\"));\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\nvar _Loader = _interopRequireDefault(__webpack_require__(/*! ../Loader */ \"./src/Loader/index.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/PickerToggle.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2;\nvar defaultInputMask = [];\nvar PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var activeProp = props.active,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? _ToggleButton.default : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker-toggle' : _props$classPrefix,\n    children = props.children,\n    _props$caret = props.caret,\n    caret = _props$caret === void 0 ? true : _props$caret,\n    className = props.className,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    hasValue = props.hasValue,\n    editable = props.editable,\n    _props$loading = props.loading,\n    loading = _props$loading === void 0 ? false : _props$loading,\n    cleanableProp = props.cleanable,\n    _props$tabIndex = props.tabIndex,\n    tabIndexProp = _props$tabIndex === void 0 ? editable ? -1 : 0 : _props$tabIndex,\n    id = props.id,\n    value = props.value,\n    inputPlaceholder = props.inputPlaceholder,\n    inputValueProp = props.inputValue,\n    _props$inputMask = props.inputMask,\n    inputMask = _props$inputMask === void 0 ? defaultInputMask : _props$inputMask,\n    onInputChange = props.onInputChange,\n    onInputPressEnter = props.onInputPressEnter,\n    onInputBackspace = props.onInputBackspace,\n    onInputBlur = props.onInputBlur,\n    onInputFocus = props.onInputFocus,\n    onClean = props.onClean,\n    onFocus = props.onFocus,\n    onBlur = props.onBlur,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    caretComponent = props.caretComponent,\n    _props$caretAs = props.caretAs,\n    caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,\n    label = props.label,\n    name = props.name,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"classPrefix\", \"children\", \"caret\", \"className\", \"disabled\", \"readOnly\", \"plaintext\", \"hasValue\", \"editable\", \"loading\", \"cleanable\", \"tabIndex\", \"id\", \"value\", \"inputPlaceholder\", \"inputValue\", \"inputMask\", \"onInputChange\", \"onInputPressEnter\", \"onInputBackspace\", \"onInputBlur\", \"onInputFocus\", \"onClean\", \"onFocus\", \"onBlur\", \"placement\", \"caretComponent\", \"caretAs\", \"label\", \"name\"]);\n  var _useCustom = (0, _utils.useCustom)(),\n    locale = _useCustom.locale;\n  var inputRef = (0, _react.useRef)(null);\n  var comboboxRef = (0, _react.useRef)(null);\n  var _useState = (0, _react.useState)(false),\n    activeState = _useState[0],\n    setActive = _useState[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var getInputValue = (0, _react.useCallback)(function () {\n    return typeof inputValueProp === 'undefined' ? Array.isArray(value) ? value.join(',') : value : inputValueProp;\n  }, [inputValueProp, value]);\n  var _useState2 = (0, _react.useState)(getInputValue),\n    inputValue = _useState2[0],\n    setInputValue = _useState2[1];\n  (0, _react.useEffect)(function () {\n    if (comboboxRef.current) {\n      var _value = getInputValue();\n      setInputValue(_value);\n    }\n  }, [getInputValue]);\n  var classes = merge(className, withClassPrefix({\n    active: activeProp || activeState\n  }));\n  var handleFocus = (0, _react.useCallback)(function (event) {\n    if (!loading) {\n      setActive(true);\n    }\n    if (editable) {\n      // Avoid firing the onFocus event twice when DatePicker and DateRangePicker allow keyboard input.\n      if (event.target === inputRef.current) {\n        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n      }\n\n      // Force the input to be focused and editable.\n      if (document.activeElement === comboboxRef.current) {\n        var _inputRef$current;\n        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();\n      }\n    } else {\n      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n    }\n  }, [editable, loading, onFocus]);\n  var handleBlur = (0, _react.useCallback)(function (event) {\n    if (inputRef.current && !editable) {\n      setActive(false);\n    }\n\n    // When activeElement is an input, it remains active.\n    if (editable && inputRef.current && document.activeElement !== inputRef.current) {\n      setActive(false);\n    }\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  }, [editable, onBlur]);\n  var handleInputBlur = function handleInputBlur(event) {\n    setInputValue(getInputValue());\n    onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(event);\n  };\n  var handleClean = (0, _react.useCallback)(function (event) {\n    var _inputRef$current2, _comboboxRef$current;\n    event.stopPropagation();\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n\n    // When the value is cleared, the current component is still in focus.\n    editable ? (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus() : (_comboboxRef$current = comboboxRef.current) === null || _comboboxRef$current === void 0 ? void 0 : _comboboxRef$current.focus();\n  }, [editable, onClean]);\n  var handleInputChange = (0, _react.useCallback)(function (event) {\n    var _event$target;\n    var value = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;\n    setInputValue(value);\n    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);\n  }, [onInputChange]);\n  var handleInputKeyDown = (0, _react.useCallback)(function (event) {\n    if (editable) {\n      if (event.key === _utils.KEY_VALUES.ENTER) {\n        onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);\n      }\n      if (event.key === _utils.KEY_VALUES.BACKSPACE) {\n        onInputBackspace === null || onInputBackspace === void 0 ? void 0 : onInputBackspace(event);\n      }\n    }\n  }, [editable, onInputPressEnter, onInputBackspace]);\n  var renderInput = (0, _react.useCallback)(function (ref, props) {\n    return /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({\n      type: \"text\",\n      autoComplete: \"off\",\n      ref: (0, _utils.mergeRefs)(inputRef, ref),\n      name: name,\n      style: {\n        pointerEvents: editable ? undefined : 'none'\n      }\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 203,\n        columnNumber: 9\n      }\n    }));\n  }, [editable, name]);\n  var ToggleCaret = (0, _useToggleCaret.default)(placement);\n  var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"notSelected\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 220,\n        columnNumber: 9\n      }\n    }, hasValue ? children : null);\n  }\n  var showCleanButton = cleanableProp && hasValue && !readOnly;\n\n  // When the component is read-only or disabled, the input is not interactive.\n  var inputFocused = readOnly || disabled ? false : editable && activeState;\n  var tabIndex = disabled ? undefined : tabIndexProp;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"combobox\",\n    \"aria-haspopup\": \"listbox\",\n    \"aria-expanded\": activeProp,\n    \"aria-disabled\": disabled,\n    \"aria-owns\": id ? id + \"-listbox\" : undefined\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(comboboxRef, ref),\n    disabled: disabled,\n    tabIndex: tabIndex,\n    className: classes,\n    onFocus: !disabled ? handleFocus : null\n    // The debounce is set to 200 to solve the flicker caused by the switch between input and div.\n    ,\n    onBlur: !disabled ? (0, _debounce.default)(handleBlur, 200) : null,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 234,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Stack.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 249,\n      columnNumber: 9\n    }\n  }, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 251,\n      columnNumber: 13\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('label'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 252,\n      columnNumber: 15\n    }\n  }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    grow: 1,\n    style: {\n      overflow: 'hidden'\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 255,\n      columnNumber: 11\n    }\n  }, loading ? /*#__PURE__*/_react.default.createElement(_Loader.default, {\n    style: {\n      display: 'block',\n      padding: '1px 0'\n    },\n    \"data-testid\": \"spinner\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 257,\n      columnNumber: 15\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextMask.default, {\n    keepCharPositions: true,\n    mask: inputMask,\n    value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,\n    onBlur: handleInputBlur,\n    onFocus: onInputFocus,\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    id: id,\n    \"aria-hidden\": !inputFocused,\n    readOnly: !inputFocused,\n    disabled: disabled,\n    \"aria-controls\": id ? id + \"-listbox\" : undefined,\n    tabIndex: editable ? 0 : -1,\n    className: prefix('textbox', {\n      'read-only': !inputFocused\n    }),\n    placeholder: inputPlaceholder,\n    render: renderInput,\n    \"data-testid\": \"picker-toggle-input\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 260,\n      columnNumber: 17\n    }\n  }), children ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(hasValue ? 'value' : 'placeholder'),\n    \"aria-placeholder\": typeof children === 'string' ? children : undefined,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 280,\n      columnNumber: 19\n    }\n  }, children) : null)), showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"clean\"]))),\n    tabIndex: -1,\n    locale: {\n      closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear\n    },\n    onClick: handleClean,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 291,\n      columnNumber: 13\n    }\n  }), caret && !showCleanButton && /*#__PURE__*/_react.default.createElement(Caret, {\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"caret\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 298,\n      columnNumber: 41\n    }\n  })));\n});\nPickerToggle.displayName = 'PickerToggle';\nPickerToggle.propTypes = {\n  classPrefix: _propTypes.default.string,\n  hasValue: _propTypes.default.bool,\n  cleanable: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  caret: _propTypes.default.bool,\n  as: _propTypes.default.elementType,\n  onClean: _propTypes.default.func,\n  active: _propTypes.default.bool,\n  readOnly: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  caretComponent: (0, _deprecatePropType.default)(_propTypes.default.elementType, 'Use `caretAs` instead.'),\n  caretAs: _propTypes.default.elementType\n};\nvar _default = PickerToggle;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/PickerToggle.tsx?");
 
 /***/ }),
 
@@ -5185,7 +5185,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useMediaQueryLegacy = useMediaQueryLegacy;\nexports.useMediaQuery = useMediaQuery;\nexports[\"default\"] = exports.mediaQuerySizeMap = 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 _canUseDOM = _interopRequireDefault(__webpack_require__(/*! dom-lib/canUseDOM */ \"./node_modules/dom-lib/esm/canUseDOM.js\"));\nvar mediaQuerySizeMap = {\n  xs: '(max-width: 575px)',\n  sm: '(min-width: 576px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 992px)',\n  xl: '(min-width: 1200px)',\n  xxl: '(min-width: 1400px)'\n};\nexports.mediaQuerySizeMap = mediaQuerySizeMap;\nvar matchMedia = function matchMedia(query) {\n  if (_canUseDOM.default) {\n    return window.matchMedia(query);\n  }\n  return {\n    matches: false,\n    media: query\n  };\n};\n\n/**\n * React hook that tracks state of a CSS media query.\n * @deprecated Use useMediaQuery instead.\n *\n * @see https://rsuitejs.com/components/use-media-query\n */\nfunction useMediaQueryLegacy(query) {\n  var queries = Array.isArray(query) ? query : [query];\n  var mediaQueries = queries.map(function (query) {\n    return mediaQuerySizeMap[query] || query;\n  });\n  var _useState = (0, _react.useState)(function () {\n      return mediaQueries.map(function (query) {\n        return matchMedia(query);\n      });\n    }),\n    mediaQueryArray = _useState[0],\n    setMediaQueryArray = _useState[1];\n  function handleChange(event) {\n    setMediaQueryArray(function (prevMediaQueryArray) {\n      return prevMediaQueryArray.map(function (item) {\n        return item.media === event.media ? (0, _extends2.default)({}, item, {\n          matches: event.matches\n        }) : item;\n      });\n    });\n  }\n  (0, _react.useEffect)(function () {\n    var mediaQueryList = mediaQueries.map(function (query) {\n      return matchMedia(query);\n    });\n    mediaQueryList.forEach(function (query) {\n      query.addEventListener('change', handleChange);\n    });\n    return function () {\n      mediaQueryList.forEach(function (query) {\n        query.removeEventListener('change', handleChange);\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [mediaQueries]);\n  return mediaQueryArray.map(function (query) {\n    return query.matches;\n  });\n}\n\n/**\n * React hook that tracks state of a CSS media query\n * @version 5.48.0\n * @see https://rsuitejs.com/components/use-media-query\n */\nfunction useMediaQuery(query) {\n  var _React$useSyncExterna;\n  var queries = Array.isArray(query) ? query : [query];\n  var mediaQueries = queries.map(function (query) {\n    return mediaQuerySizeMap[query] || query;\n  });\n  var mediaQueryArray = (0, _react.useRef)(mediaQueries.map(function (query) {\n    return matchMedia(query).matches;\n  }));\n  var subscribe = (0, _react.useCallback)(function (callback) {\n    var list = mediaQueries.map(function (query) {\n      return matchMedia(query);\n    });\n    var handleChange = function handleChange(event) {\n      var index = list.findIndex(function (item) {\n        return item.media === event.media;\n      });\n      if (index !== -1) {\n        mediaQueryArray.current[index] = event.matches;\n      }\n      callback();\n    };\n    list.forEach(function (query) {\n      query.addEventListener('change', handleChange);\n    });\n    return function () {\n      list.forEach(function (query) {\n        query.removeEventListener('change', handleChange);\n      });\n    };\n  }, [mediaQueries]);\n  var getSnapshot = function getSnapshot() {\n    return mediaQueryArray.current;\n  };\n  var getServerSnapshot = function getServerSnapshot() {\n    throw Error('useMediaQuery is a client-only hook');\n  };\n  return (_React$useSyncExterna = _react.default['useSyncExternalStore']) === null || _React$useSyncExterna === void 0 ? void 0 : _React$useSyncExterna.call(_react.default, subscribe, getSnapshot, getServerSnapshot);\n}\nvar _default = typeof _react.default['useSyncExternalStore'] === 'function' ? useMediaQuery : useMediaQueryLegacy;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/useMediaQuery/useMediaQuery.ts?");
+eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useMediaQueryLegacy = useMediaQueryLegacy;\nexports.useMediaQuery = useMediaQuery;\nexports[\"default\"] = exports.mediaQuerySizeMap = 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 _canUseDOM = _interopRequireDefault(__webpack_require__(/*! dom-lib/canUseDOM */ \"./node_modules/dom-lib/esm/canUseDOM.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar mediaQuerySizeMap = {\n  xs: '(max-width: 575px)',\n  sm: '(min-width: 576px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 992px)',\n  xl: '(min-width: 1200px)',\n  xxl: '(min-width: 1400px)'\n};\nexports.mediaQuerySizeMap = mediaQuerySizeMap;\nvar matchMedia = function matchMedia(query) {\n  if (_canUseDOM.default) {\n    return window.matchMedia(query);\n  }\n  return {\n    matches: false,\n    media: query\n  };\n};\n\n/**\n * React hook that tracks state of a CSS media query.\n * @deprecated Use useMediaQuery instead.\n *\n * @see https://rsuitejs.com/components/use-media-query\n */\nfunction useMediaQueryLegacy(query) {\n  var queries = Array.isArray(query) ? query : [query];\n  var mediaQueries = queries.map(function (query) {\n    return mediaQuerySizeMap[query] || query;\n  });\n  var _useState = (0, _react.useState)(function () {\n      return mediaQueries.map(function (query) {\n        return (0, _pick.default)(matchMedia(query), ['matches', 'media']);\n      });\n    }),\n    mediaQueryArray = _useState[0],\n    setMediaQueryArray = _useState[1];\n  function handleChange(event) {\n    setMediaQueryArray(function (prevMediaQueryArray) {\n      return prevMediaQueryArray.map(function (item) {\n        return item.media === event.media ? (0, _extends2.default)({}, item, {\n          matches: event.matches\n        }) : item;\n      });\n    });\n  }\n  (0, _react.useEffect)(function () {\n    var mediaQueryList = mediaQueries.map(function (query) {\n      return matchMedia(query);\n    });\n    mediaQueryList.forEach(function (query) {\n      query.addEventListener('change', handleChange);\n    });\n    return function () {\n      mediaQueryList.forEach(function (query) {\n        query.removeEventListener('change', handleChange);\n      });\n    };\n  }, [mediaQueries]);\n  return mediaQueryArray.map(function (query) {\n    return query.matches;\n  });\n}\n\n/**\n * React hook that tracks state of a CSS media query\n * @version 5.48.0\n * @see https://rsuitejs.com/components/use-media-query\n */\nfunction useMediaQuery(query) {\n  var _React$useSyncExterna;\n  var queries = Array.isArray(query) ? query : [query];\n  var mediaQueries = queries.map(function (query) {\n    return mediaQuerySizeMap[query] || query;\n  });\n  var mediaQueryArray = (0, _react.useRef)(mediaQueries.map(function (query) {\n    return matchMedia(query).matches;\n  }));\n  var subscribe = (0, _react.useCallback)(function (callback) {\n    var list = mediaQueries.map(function (query) {\n      return matchMedia(query);\n    });\n    var handleChange = function handleChange(event) {\n      var index = list.findIndex(function (item) {\n        return item.media === event.media;\n      });\n      if (index !== -1) {\n        mediaQueryArray.current[index] = event.matches;\n      }\n      callback();\n    };\n    list.forEach(function (query) {\n      query.addEventListener('change', handleChange);\n    });\n    return function () {\n      list.forEach(function (query) {\n        query.removeEventListener('change', handleChange);\n      });\n    };\n  }, [mediaQueries]);\n  var getSnapshot = function getSnapshot() {\n    return mediaQueryArray.current;\n  };\n  var getServerSnapshot = function getServerSnapshot() {\n    throw Error('useMediaQuery is a client-only hook');\n  };\n  return (_React$useSyncExterna = _react.default['useSyncExternalStore']) === null || _React$useSyncExterna === void 0 ? void 0 : _React$useSyncExterna.call(_react.default, subscribe, getSnapshot, getServerSnapshot);\n}\nvar _default = typeof _react.default['useSyncExternalStore'] === 'function' ? useMediaQuery : useMediaQueryLegacy;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/useMediaQuery/useMediaQuery.ts?");
 
 /***/ }),