rsuite 5.46.1 → 5.47.0

package/dist/rsuite.js

@@ -2050,7 +2050,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 _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _CheckboxGroup = __webpack_require__(/*! ../CheckboxGroup */ \"./src/CheckboxGroup/index.tsx\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Checkbox/Checkbox.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3;\nvar Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var checkboxGroupContext = (0, _react.useContext)(_CheckboxGroup.CheckboxGroupContext);\n  var _ref = checkboxGroupContext !== null && checkboxGroupContext !== void 0 ? checkboxGroupContext : {},\n    inlineContext = _ref.inline,\n    nameContext = _ref.name,\n    disabledContext = _ref.disabled,\n    readOnlyContext = _ref.readOnly,\n    plaintextContext = _ref.plaintext,\n    onGroupChange = _ref.onChange;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    controlledChecked = props.checked,\n    className = props.className,\n    children = props.children,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'checkbox' : _props$classPrefix,\n    _props$checkable = props.checkable,\n    checkable = _props$checkable === void 0 ? true : _props$checkable,\n    _props$defaultChecked = props.defaultChecked,\n    defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,\n    title = props.title,\n    inputRef = props.inputRef,\n    inputProps = props.inputProps,\n    indeterminate = props.indeterminate,\n    _props$tabIndex = props.tabIndex,\n    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n    _props$disabled = props.disabled,\n    disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,\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$inline = props.inline,\n    inline = _props$inline === void 0 ? inlineContext : _props$inline,\n    _props$name = props.name,\n    name = _props$name === void 0 ? nameContext : _props$name,\n    value = props.value,\n    onClick = props.onClick,\n    onCheckboxClick = props.onCheckboxClick,\n    onChange = props.onChange,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"checked\", \"className\", \"children\", \"classPrefix\", \"checkable\", \"defaultChecked\", \"title\", \"inputRef\", \"inputProps\", \"indeterminate\", \"tabIndex\", \"disabled\", \"readOnly\", \"plaintext\", \"inline\", \"name\", \"value\", \"onClick\", \"onCheckboxClick\", \"onChange\"]);\n  var _useControlled = (0, _utils.useControlled)(controlledChecked, defaultChecked),\n    selfChecked = _useControlled[0],\n    setSelfChecked = _useControlled[1],\n    selfControlled = _useControlled[2]; // Either <Checkbox> is checked itself or by parent <CheckboxGroup>\n  var checked = (0, _react.useMemo)(function () {\n    var _checkboxGroupContext, _checkboxGroupContext2;\n    if (!checkboxGroupContext) {\n      return selfChecked;\n    }\n\n    // fixme value from group should not be nullable\n    return (_checkboxGroupContext = (_checkboxGroupContext2 = checkboxGroupContext.value) === null || _checkboxGroupContext2 === void 0 ? void 0 : _checkboxGroupContext2.some(function (checkedValue) {\n      return checkedValue === value;\n    })) !== null && _checkboxGroupContext !== void 0 ? _checkboxGroupContext : false;\n  }, [checkboxGroupContext, selfChecked, value]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var classes = merge(className, withClassPrefix({\n    inline: inline,\n    indeterminate: indeterminate,\n    disabled: disabled,\n    checked: checked\n  }));\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(rest),\n    htmlInputProps = _partitionHTMLProps[0],\n    restProps = _partitionHTMLProps[1]; // If <Checkbox> is within a <CheckboxGroup>, it's bound to be controlled\n  // because its checked state is inferred from group's value, not retrieved from the DOM\n  var controlled = checkboxGroupContext ? true : selfControlled;\n  if (typeof controlled !== 'undefined') {\n    // In uncontrolled situations, use defaultChecked instead of checked\n    htmlInputProps[controlled ? 'checked' : 'defaultChecked'] = checked;\n  }\n  var handleChange = (0, _react.useCallback)(function (event) {\n    var nextChecked = event.target.checked;\n    if (disabled || readOnly) {\n      return;\n    }\n    setSelfChecked(nextChecked);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, nextChecked, event);\n    onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, nextChecked, event);\n  }, [disabled, readOnly, setSelfChecked, onChange, value, onGroupChange]);\n  if (plaintext) {\n    return checked ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {\n      ref: ref,\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 148,\n        columnNumber: 9\n      }\n    }), children) : null;\n  }\n  var input = /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"wrapper\"]))),\n    onClick: onCheckboxClick,\n    \"aria-disabled\": disabled,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 155,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({}, htmlInputProps, inputProps, {\n    name: name,\n    value: value,\n    type: \"checkbox\",\n    ref: inputRef,\n    tabIndex: tabIndex,\n    readOnly: readOnly,\n    disabled: disabled,\n    \"aria-disabled\": disabled,\n    \"aria-checked\": indeterminate ? 'mixed' : checked,\n    onClick: function onClick(event) {\n      return event.stopPropagation();\n    },\n    onChange: handleChange,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 156,\n      columnNumber: 9\n    }\n  })), /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"inner\"]))),\n    \"aria-hidden\": true,\n    role: \"presentation\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 171,\n      columnNumber: 9\n    }\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {\n    ref: ref,\n    onClick: onClick,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 176,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"checker\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 177,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"label\", {\n    title: title,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 178,\n      columnNumber: 11\n    }\n  }, checkable ? input : null, children)));\n});\nCheckbox.displayName = 'Checkbox';\nCheckbox.propTypes = {\n  as: _propTypes.default.elementType,\n  title: _propTypes.default.string,\n  className: _propTypes.default.string,\n  inline: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  checked: _propTypes.default.bool,\n  defaultChecked: _propTypes.default.bool,\n  indeterminate: _propTypes.default.bool,\n  onChange: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  inputProps: _propTypes.default.any,\n  inputRef: _utils.TypeChecker.refType,\n  value: _propTypes.default.any,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number,\n  checkable: _propTypes.default.bool,\n  onCheckboxClick: _propTypes.default.func\n};\nvar _default = Checkbox;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Checkbox/Checkbox.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 _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _CheckboxGroup = __webpack_require__(/*! ../CheckboxGroup */ \"./src/CheckboxGroup/index.tsx\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Checkbox/Checkbox.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3;\nvar Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var checkboxGroupContext = (0, _react.useContext)(_CheckboxGroup.CheckboxGroupContext);\n  var _ref = checkboxGroupContext !== null && checkboxGroupContext !== void 0 ? checkboxGroupContext : {},\n    inlineContext = _ref.inline,\n    nameContext = _ref.name,\n    disabledContext = _ref.disabled,\n    readOnlyContext = _ref.readOnly,\n    plaintextContext = _ref.plaintext,\n    onGroupChange = _ref.onChange;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    controlledChecked = props.checked,\n    className = props.className,\n    children = props.children,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'checkbox' : _props$classPrefix,\n    _props$checkable = props.checkable,\n    checkable = _props$checkable === void 0 ? true : _props$checkable,\n    _props$defaultChecked = props.defaultChecked,\n    defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,\n    title = props.title,\n    inputRef = props.inputRef,\n    inputProps = props.inputProps,\n    indeterminate = props.indeterminate,\n    _props$tabIndex = props.tabIndex,\n    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n    _props$disabled = props.disabled,\n    disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,\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$inline = props.inline,\n    inline = _props$inline === void 0 ? inlineContext : _props$inline,\n    _props$name = props.name,\n    name = _props$name === void 0 ? nameContext : _props$name,\n    value = props.value,\n    onClick = props.onClick,\n    onCheckboxClick = props.onCheckboxClick,\n    onChange = props.onChange,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"checked\", \"className\", \"children\", \"classPrefix\", \"checkable\", \"defaultChecked\", \"title\", \"inputRef\", \"inputProps\", \"indeterminate\", \"tabIndex\", \"disabled\", \"readOnly\", \"plaintext\", \"inline\", \"name\", \"value\", \"onClick\", \"onCheckboxClick\", \"onChange\"]);\n  var _useControlled = (0, _utils.useControlled)(controlledChecked, defaultChecked),\n    selfChecked = _useControlled[0],\n    setSelfChecked = _useControlled[1],\n    selfControlled = _useControlled[2]; // Either <Checkbox> is checked itself or by parent <CheckboxGroup>\n  var checked = (0, _react.useMemo)(function () {\n    var _checkboxGroupContext, _checkboxGroupContext2;\n    if (!checkboxGroupContext) {\n      return selfChecked;\n    }\n\n    // fixme value from group should not be nullable\n    return (_checkboxGroupContext = (_checkboxGroupContext2 = checkboxGroupContext.value) === null || _checkboxGroupContext2 === void 0 ? void 0 : _checkboxGroupContext2.some(function (checkedValue) {\n      return checkedValue === value;\n    })) !== null && _checkboxGroupContext !== void 0 ? _checkboxGroupContext : false;\n  }, [checkboxGroupContext, selfChecked, value]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var classes = merge(className, withClassPrefix({\n    inline: inline,\n    indeterminate: indeterminate,\n    disabled: disabled,\n    checked: checked\n  }));\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(rest),\n    htmlInputProps = _partitionHTMLProps[0],\n    restProps = _partitionHTMLProps[1]; // If <Checkbox> is within a <CheckboxGroup>, it's bound to be controlled\n  // because its checked state is inferred from group's value, not retrieved from the DOM\n  var controlled = checkboxGroupContext ? true : selfControlled;\n  if (typeof controlled !== 'undefined') {\n    // In uncontrolled situations, use defaultChecked instead of checked\n    htmlInputProps[controlled ? 'checked' : 'defaultChecked'] = checked;\n  }\n  var handleChange = (0, _react.useCallback)(function (event) {\n    var nextChecked = event.target.checked;\n    if (disabled || readOnly) {\n      return;\n    }\n    setSelfChecked(nextChecked);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, nextChecked, event);\n    onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, nextChecked, event);\n  }, [disabled, readOnly, setSelfChecked, onChange, value, onGroupChange]);\n  if (plaintext) {\n    return checked ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {\n      ref: ref,\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 151,\n        columnNumber: 9\n      }\n    }), children) : null;\n  }\n  var input = /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"wrapper\"]))),\n    onClick: onCheckboxClick,\n    \"aria-disabled\": disabled,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 158,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({}, htmlInputProps, inputProps, {\n    name: name,\n    value: value,\n    type: \"checkbox\",\n    ref: inputRef,\n    tabIndex: tabIndex,\n    readOnly: readOnly,\n    disabled: disabled,\n    \"aria-disabled\": disabled,\n    \"aria-checked\": indeterminate ? 'mixed' : checked,\n    onClick: function onClick(event) {\n      return event.stopPropagation();\n    },\n    onChange: handleChange,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 159,\n      columnNumber: 9\n    }\n  })), /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"inner\"]))),\n    \"aria-hidden\": true,\n    role: \"presentation\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 174,\n      columnNumber: 9\n    }\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {\n    ref: ref,\n    onClick: onClick,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 179,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"checker\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 180,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"label\", {\n    title: title,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 181,\n      columnNumber: 11\n    }\n  }, checkable ? input : null, children)));\n});\nCheckbox.displayName = 'Checkbox';\nCheckbox.propTypes = {\n  as: _propTypes.default.elementType,\n  title: _propTypes.default.string,\n  className: _propTypes.default.string,\n  inline: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  checked: _propTypes.default.bool,\n  defaultChecked: _propTypes.default.bool,\n  indeterminate: _propTypes.default.bool,\n  onChange: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  inputProps: _propTypes.default.any,\n  inputRef: _utils.TypeChecker.refType,\n  value: _propTypes.default.any,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number,\n  checkable: _propTypes.default.bool,\n  onCheckboxClick: _propTypes.default.func\n};\nvar _default = Checkbox;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Checkbox/Checkbox.tsx?");
 
 /***/ }),
 
@@ -2105,7 +2105,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Close = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Close */ \"./node_modules/@rsuite/icons/Close.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CloseButton/CloseButton.tsx\",\n  _this = void 0;\n/**\n * Close button for components such as Message and Notification.\n */\nvar CloseButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'span' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'btn-close' : _props$classPrefix,\n    className = props.className,\n    overrideLocale = props.locale,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"locale\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var _useCustom = (0, _utils.useCustom)('CloseButton', overrideLocale),\n    locale = _useCustom.locale;\n  var classes = merge(className, withClassPrefix());\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"button\"\n  }, rest, {\n    ref: ref,\n    className: classes,\n    title: locale === null || locale === void 0 ? void 0 : locale.closeLabel,\n    \"aria-label\": locale === null || locale === void 0 ? void 0 : locale.closeLabel,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 31,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Close.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 39,\n      columnNumber: 9\n    }\n  }));\n});\nCloseButton.displayName = 'CloseButton';\nvar _default = CloseButton;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CloseButton/CloseButton.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Close = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Close */ \"./node_modules/@rsuite/icons/Close.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CloseButton/CloseButton.tsx\",\n  _this = void 0;\n/**\n * Close button for components such as Message and Notification.\n */\nvar CloseButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'button' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'btn-close' : _props$classPrefix,\n    className = props.className,\n    overrideLocale = props.locale,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"locale\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var _useCustom = (0, _utils.useCustom)('CloseButton', overrideLocale),\n    locale = _useCustom.locale;\n  var classes = merge(className, withClassPrefix());\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    type: \"button\",\n    ref: ref,\n    className: classes,\n    \"aria-label\": locale === null || locale === void 0 ? void 0 : locale.closeLabel\n  }, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 31,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Close.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 38,\n      columnNumber: 9\n    }\n  }));\n});\nCloseButton.displayName = 'CloseButton';\nvar _default = CloseButton;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CloseButton/CloseButton.tsx?");
 
 /***/ }),
 
@@ -2985,7 +2985,18 @@ 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\"] = exports.InputPickerContext = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ./InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\nvar _InputSearch = _interopRequireDefault(__webpack_require__(/*! ./InputSearch */ \"./src/InputPicker/InputSearch.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3,\n  _templateObject4,\n  _templateObject5;\nvar InputPickerContext = /*#__PURE__*/_react.default.createContext({\n  tagProps: {},\n  trigger: 'Enter'\n});\nexports.InputPickerContext = InputPickerContext;\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$cacheData = props.cacheData,\n    cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$data = props.data,\n    controlledData = _props$data === void 0 ? [] : _props$data,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    defaultValue = props.defaultValue,\n    _props$defaultOpen = props.defaultOpen,\n    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    controlledOpen = props.open,\n    placeholder = props.placeholder,\n    groupBy = props.groupBy,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    creatable = props.creatable,\n    shouldDisplayCreateOption = props.shouldDisplayCreateOption,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    virtualized = props.virtualized,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    listProps = props.listProps,\n    id = props.id,\n    tabIndex = props.tabIndex,\n    sort = props.sort,\n    renderMenu = props.renderMenu,\n    renderExtraFooter = props.renderExtraFooter,\n    renderValue = props.renderValue,\n    renderMenuItem = props.renderMenuItem,\n    renderMenuGroup = props.renderMenuGroup,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onCreate = props.onCreate,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onOpen = props.onOpen,\n    onClose = props.onClose,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    searchBy = props.searchBy,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"cleanable\", \"cacheData\", \"classPrefix\", \"data\", \"disabled\", \"readOnly\", \"plaintext\", \"defaultValue\", \"defaultOpen\", \"disabledItemValues\", \"locale\", \"toggleAs\", \"style\", \"searchable\", \"open\", \"placeholder\", \"groupBy\", \"menuClassName\", \"menuStyle\", \"menuAutoWidth\", \"menuMaxHeight\", \"creatable\", \"shouldDisplayCreateOption\", \"value\", \"valueKey\", \"virtualized\", \"labelKey\", \"listProps\", \"id\", \"tabIndex\", \"sort\", \"renderMenu\", \"renderExtraFooter\", \"renderValue\", \"renderMenuItem\", \"renderMenuGroup\", \"onEnter\", \"onEntered\", \"onExit\", \"onExited\", \"onChange\", \"onClean\", \"onCreate\", \"onSearch\", \"onSelect\", \"onOpen\", \"onClose\", \"onBlur\", \"onFocus\", \"searchBy\", \"placement\"]);\n  var _useContext = (0, _react.useContext)(InputPickerContext),\n    multi = _useContext.multi,\n    tagProps = _useContext.tagProps,\n    trigger = _useContext.trigger,\n    disabledOptions = _useContext.disabledOptions,\n    onTagRemove = _useContext.onTagRemove;\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var inputRef = (0, _react.useRef)();\n  var listRef = (0, _react.useRef)(null);\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n    locale = _useCustom.locale;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useState = (0, _react.useState)(controlledData),\n    uncontrolledData = _useState[0],\n    setData = _useState[1];\n  var _useState2 = (0, _react.useState)(100),\n    maxWidth = _useState2[0],\n    setMaxWidth = _useState2[1];\n  var _useState3 = (0, _react.useState)([]),\n    newData = _useState3[0],\n    setNewData = _useState3[1];\n  var _useState4 = (0, _react.useState)(defaultOpen),\n    uncontrolledOpen = _useState4[0],\n    setOpen = _useState4[1];\n  var open = (0, _isUndefined.default)(controlledOpen) ? uncontrolledOpen : controlledOpen;\n  var getAllData = (0, _react.useCallback)(function () {\n    return [].concat(uncontrolledData, newData);\n  }, [uncontrolledData, newData]);\n  var getAllDataAndCache = (0, _react.useCallback)(function () {\n    return [].concat(getAllData(), cacheData);\n  }, [getAllData, cacheData]);\n  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var cloneValue = (0, _react.useCallback)(function () {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  }, [multi, value]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _targetRef$current, _targetRef$current$fo;\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n\n    // The focus is on the trigger button after closing\n    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);\n  }, []);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {\n      data: getAllDataAndCache(),\n      valueKey: valueKey,\n      target: function target() {\n        return overlayRef.current;\n      }\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onKeyDown = _useFocusItemValue.onKeyDown;\n  var handleSearchCallback = (0, _react.useCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n    // The first option after filtering is the focus.\n    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]);\n\n  // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(getAllData(), {\n      labelKey: labelKey,\n      searchBy: searchBy,\n      callback: handleSearchCallback\n    }),\n    searchKeyword = _useSearch.searchKeyword,\n    resetSearch = _useSearch.resetSearch,\n    checkShouldDisplay = _useSearch.checkShouldDisplay,\n    handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      var _controlledData$;\n      setData(controlledData);\n      setNewData([]);\n      setFocusItemValue(controlledData === null || controlledData === void 0 ? void 0 : (_controlledData$ = controlledData[0]) === null || _controlledData$ === void 0 ? void 0 : _controlledData$[valueKey]);\n    }\n  }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current2;\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {\n      setMaxWidth((0, _getWidth.default)(triggerRef.current.root));\n    }\n  }, []);\n\n  // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current3, _triggerRef$current3$;\n    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);\n  }, [searchKeyword, value]);\n  var getDateItem = function getDateItem(value) {\n    // Find active `MenuItem` by `value`\n    var allData = getAllDataAndCache();\n    var activeItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n  var getInput = (0, _react.useCallback)(function () {\n    var _inputRef$current;\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  }, [inputRef, multi]);\n  var focusInput = (0, _react.useCallback)(function () {\n    var _getInput;\n    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  }, [getInput]);\n  var blurInput = (0, _react.useCallback)(function () {\n    var _getInput2;\n    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  }, [getInput]);\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  var createOption = (0, _react.useCallback)(function (value) {\n    var _ref2;\n    if (groupBy) {\n      var _ref;\n      return _ref = {\n        create: true\n      }, _ref[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _ref[valueKey] = value, _ref[labelKey] = value, _ref;\n    }\n    return _ref2 = {\n      create: true\n    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;\n  }, [groupBy, valueKey, labelKey, locale]);\n  var handleChange = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n  var handleRemoveItemByTag = (0, _react.useCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);\n  }, [cloneValue, setValue, handleChange, onTagRemove]);\n  var handleSelect = (0, _react.useCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  }, [creatable, newData, onSelect, onCreate]);\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  var handleSelectItem = function handleSelectItem(value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  };\n\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {\n    var val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, nextItemValue);\n      });\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focusInput();\n  };\n  var handleTagKeyPress = (0, _react.useCallback)(function (event) {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    var val = cloneValue();\n    var data = getAllData();\n    if (!focusItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n    if (!val.some(function (v) {\n      return (0, _shallowEqual.default)(v, focusItemValue);\n    })) {\n      val.push(focusItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, focusItemValue);\n      });\n    }\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n    if (!focusItem) {\n      focusItem = createOption(focusItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, resetSearch, handleSelect, handleChange, valueKey, createOption]);\n  var handleMenuItemKeyPress = (0, _react.useCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    var allData = getAllData();\n    var focusItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    });\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, resetSearch, createOption, getAllData, handleChange, handleSelect]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    listRef: listRef\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  var removeLastItem = (0, _react.useCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focusInput();\n      return;\n    }\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, focusInput, handleChange, cloneValue]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  }, [disabled, searchKeyword, setValue, setFocusItemValue, resetSearch, multi, onClean, handleChange]);\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _react.useCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  }, [handleTagKeyPress, trigger]);\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef\n  }, events, rest));\n  var handleExited = (0, _react.useCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [setFocusItemValue, resetSearch, onClose, value, multi]);\n  var handleFocus = (0, _react.useCallback)(function () {\n    if (!readOnly) {\n      var _triggerRef$current4;\n      setOpen(true);\n      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();\n    }\n  }, [readOnly]);\n  var handleEnter = (0, _react.useCallback)(function () {\n    focusInput();\n    setOpen(true);\n  }, [focusInput]);\n  var handleExit = (0, _react.useCallback)(function () {\n    blurInput();\n    setOpen(false);\n  }, [blurInput]);\n  var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 618,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    var dataItem = getDateItem(value);\n    var itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n    var _tagProps$closable = tagProps.closable,\n      closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n      onClose = tagProps.onClose,\n      tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDateItem = getDateItem(tag),\n        isValid = _getDateItem.isValid,\n        itemNode = _getDateItem.itemNode,\n        activeItem = _getDateItem.activeItem;\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, tagRest, {\n        key: tag,\n        size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 663,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    }))) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n        ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 709,\n          columnNumber: 16\n        }\n      });\n    }\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      listProps: listProps,\n      listRef: listRef,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      dropdownMenuItemAs: multi ? _Picker.DropdownMenuCheckItem : _Picker.DropdownMenuItem,\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items\n      // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any\n      ,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderDropdownMenuItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 713,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 737,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 741,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _checkValue = checkValue(),\n    isValid = _checkValue.isValid,\n    itemNode = _checkValue.itemNode;\n  var tagElements = renderMultiValue();\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValue,\n      name: 'input',\n      cleanable: cleanable\n    })),\n    pickerClasses = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"tag\"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"focused\"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)([\"disabled-options\"])))] = disabledOptions, _merge));\n  var searching = !!searchKeyword && open;\n  var displaySearchInput = searchable && !disabled && !rest.loading;\n  var inputProps = multi ? {\n    inputStyle: {\n      maxWidth: maxWidth - 63\n    },\n    as: _InputAutosize.default\n  } : {\n    as: 'input'\n  };\n  if (plaintext) {\n    var plaintextProps = {};\n\n    // TagPicker has -6px margin-left on the plaintext wrapper\n    // for fixing margin-left on tags from 2nd line on\n    if (multi && hasValue) {\n      plaintextProps.style = {\n        marginLeft: -6\n      };\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: targetRef\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 801,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onEntered, onOpen),\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 810,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focusInput,\n    onKeyDown: onPickerKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 821,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: targetRef,\n    as: toggleAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    caret: !disabledOptions,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 827,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)([\"tag-wrapper\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 849,\n      columnNumber: 13\n    }\n  }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {\n    tabIndex: -1,\n    readOnly: readOnly,\n    onBlur: onBlur,\n    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),\n    inputRef: inputRef,\n    onChange: handleSearch,\n    value: open ? searchKeyword : '',\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 852,\n      columnNumber: 17\n    }\n  })))));\n});\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ./InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\nvar _InputSearch = _interopRequireDefault(__webpack_require__(/*! ./InputSearch */ \"./src/InputPicker/InputSearch.tsx\"));\nvar _InputPickerContext = _interopRequireDefault(__webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3,\n  _templateObject4,\n  _templateObject5;\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$cacheData = props.cacheData,\n    cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$data = props.data,\n    controlledData = _props$data === void 0 ? [] : _props$data,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    defaultValue = props.defaultValue,\n    _props$defaultOpen = props.defaultOpen,\n    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    controlledOpen = props.open,\n    placeholder = props.placeholder,\n    groupBy = props.groupBy,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    creatable = props.creatable,\n    shouldDisplayCreateOption = props.shouldDisplayCreateOption,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    virtualized = props.virtualized,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    listProps = props.listProps,\n    id = props.id,\n    tabIndex = props.tabIndex,\n    sort = props.sort,\n    renderMenu = props.renderMenu,\n    renderExtraFooter = props.renderExtraFooter,\n    renderValue = props.renderValue,\n    renderMenuItem = props.renderMenuItem,\n    renderMenuGroup = props.renderMenuGroup,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onCreate = props.onCreate,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onOpen = props.onOpen,\n    onClose = props.onClose,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    searchBy = props.searchBy,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"cleanable\", \"cacheData\", \"classPrefix\", \"data\", \"disabled\", \"readOnly\", \"plaintext\", \"defaultValue\", \"defaultOpen\", \"disabledItemValues\", \"locale\", \"toggleAs\", \"style\", \"searchable\", \"open\", \"placeholder\", \"groupBy\", \"menuClassName\", \"menuStyle\", \"menuAutoWidth\", \"menuMaxHeight\", \"creatable\", \"shouldDisplayCreateOption\", \"value\", \"valueKey\", \"virtualized\", \"labelKey\", \"listProps\", \"id\", \"tabIndex\", \"sort\", \"renderMenu\", \"renderExtraFooter\", \"renderValue\", \"renderMenuItem\", \"renderMenuGroup\", \"onEnter\", \"onEntered\", \"onExit\", \"onExited\", \"onChange\", \"onClean\", \"onCreate\", \"onSearch\", \"onSelect\", \"onOpen\", \"onClose\", \"onBlur\", \"onFocus\", \"searchBy\", \"placement\"]);\n  var _useContext = (0, _react.useContext)(_InputPickerContext.default),\n    multi = _useContext.multi,\n    tagProps = _useContext.tagProps,\n    trigger = _useContext.trigger,\n    disabledOptions = _useContext.disabledOptions,\n    onTagRemove = _useContext.onTagRemove,\n    renderMenuItemCheckbox = _useContext.renderMenuItemCheckbox;\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var inputRef = (0, _react.useRef)();\n  var listRef = (0, _react.useRef)(null);\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n    locale = _useCustom.locale;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useState = (0, _react.useState)(controlledData),\n    uncontrolledData = _useState[0],\n    setData = _useState[1];\n  var _useState2 = (0, _react.useState)(100),\n    maxWidth = _useState2[0],\n    setMaxWidth = _useState2[1];\n  var _useState3 = (0, _react.useState)([]),\n    newData = _useState3[0],\n    setNewData = _useState3[1];\n  var _useState4 = (0, _react.useState)(defaultOpen),\n    uncontrolledOpen = _useState4[0],\n    setOpen = _useState4[1];\n  var open = (0, _isUndefined.default)(controlledOpen) ? uncontrolledOpen : controlledOpen;\n  var getAllData = (0, _react.useCallback)(function () {\n    return [].concat(uncontrolledData, newData);\n  }, [uncontrolledData, newData]);\n  var getAllDataAndCache = (0, _react.useCallback)(function () {\n    return [].concat(getAllData(), cacheData);\n  }, [getAllData, cacheData]);\n  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var cloneValue = (0, _react.useCallback)(function () {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  }, [multi, value]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _targetRef$current, _targetRef$current$fo;\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n\n    // The focus is on the trigger button after closing\n    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);\n  }, []);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {\n      data: getAllDataAndCache(),\n      valueKey: valueKey,\n      target: function target() {\n        return overlayRef.current;\n      }\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onKeyDown = _useFocusItemValue.onKeyDown;\n  var handleSearchCallback = (0, _react.useCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n    // The first option after filtering is the focus.\n    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]);\n\n  // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(getAllData(), {\n      labelKey: labelKey,\n      searchBy: searchBy,\n      callback: handleSearchCallback\n    }),\n    searchKeyword = _useSearch.searchKeyword,\n    resetSearch = _useSearch.resetSearch,\n    checkShouldDisplay = _useSearch.checkShouldDisplay,\n    handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      var _controlledData$;\n      setData(controlledData);\n      setNewData([]);\n      setFocusItemValue(controlledData === null || controlledData === void 0 ? void 0 : (_controlledData$ = controlledData[0]) === null || _controlledData$ === void 0 ? void 0 : _controlledData$[valueKey]);\n    }\n  }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current2;\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {\n      setMaxWidth((0, _getWidth.default)(triggerRef.current.root));\n    }\n  }, []);\n\n  // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current3, _triggerRef$current3$;\n    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);\n  }, [searchKeyword, value]);\n  var getDateItem = function getDateItem(value) {\n    // Find active `MenuItem` by `value`\n    var allData = getAllDataAndCache();\n    var activeItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n  var getInput = (0, _react.useCallback)(function () {\n    var _inputRef$current;\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  }, [inputRef, multi]);\n  var focusInput = (0, _react.useCallback)(function () {\n    var _getInput;\n    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  }, [getInput]);\n  var blurInput = (0, _react.useCallback)(function () {\n    var _getInput2;\n    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  }, [getInput]);\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  var createOption = (0, _react.useCallback)(function (value) {\n    var _ref2;\n    if (groupBy) {\n      var _ref;\n      return _ref = {\n        create: true\n      }, _ref[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _ref[valueKey] = value, _ref[labelKey] = value, _ref;\n    }\n    return _ref2 = {\n      create: true\n    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;\n  }, [groupBy, valueKey, labelKey, locale]);\n  var handleChange = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n  var handleRemoveItemByTag = (0, _react.useCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);\n  }, [cloneValue, setValue, handleChange, onTagRemove]);\n  var handleSelect = (0, _react.useCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  }, [creatable, newData, onSelect, onCreate]);\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  var handleSelectItem = function handleSelectItem(value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  };\n\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {\n    var val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, nextItemValue);\n      });\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focusInput();\n  };\n  var handleTagKeyPress = (0, _react.useCallback)(function (event) {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    var val = cloneValue();\n    var data = getAllData();\n    if (!focusItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n    if (!val.some(function (v) {\n      return (0, _shallowEqual.default)(v, focusItemValue);\n    })) {\n      val.push(focusItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, focusItemValue);\n      });\n    }\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n    if (!focusItem) {\n      focusItem = createOption(focusItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, resetSearch, handleSelect, handleChange, valueKey, createOption]);\n  var handleMenuItemKeyPress = (0, _react.useCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    var allData = getAllData();\n    var focusItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    });\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, resetSearch, createOption, getAllData, handleChange, handleSelect]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    listRef: listRef\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  var removeLastItem = (0, _react.useCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focusInput();\n      return;\n    }\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, focusInput, handleChange, cloneValue]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  }, [disabled, searchKeyword, setValue, setFocusItemValue, resetSearch, multi, onClean, handleChange]);\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _react.useCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  }, [handleTagKeyPress, trigger]);\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef\n  }, events, rest));\n  var handleExited = (0, _react.useCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [setFocusItemValue, resetSearch, onClose, value, multi]);\n  var handleFocus = (0, _react.useCallback)(function () {\n    if (!readOnly) {\n      var _triggerRef$current4;\n      setOpen(true);\n      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();\n    }\n  }, [readOnly]);\n  var handleEnter = (0, _react.useCallback)(function () {\n    focusInput();\n    setOpen(true);\n  }, [focusInput]);\n  var handleExit = (0, _react.useCallback)(function () {\n    blurInput();\n    setOpen(false);\n  }, [blurInput]);\n  var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 592,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    var dataItem = getDateItem(value);\n    var itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n    var _tagProps$closable = tagProps.closable,\n      closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n      onClose = tagProps.onClose,\n      tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDateItem = getDateItem(tag),\n        isValid = _getDateItem.isValid,\n        itemNode = _getDateItem.itemNode,\n        activeItem = _getDateItem.activeItem;\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, tagRest, {\n        key: tag,\n        size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 637,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    }))) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n        ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 683,\n          columnNumber: 16\n        }\n      });\n    }\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      listProps: listProps,\n      listRef: listRef,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      dropdownMenuItemAs: multi ? _Picker.DropdownMenuCheckItem : _Picker.DropdownMenuItem,\n      dropdownMenuItemProps: {\n        renderMenuItemCheckbox: renderMenuItemCheckbox\n      },\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items\n      // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any\n      ,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderDropdownMenuItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 687,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 712,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 716,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _checkValue = checkValue(),\n    isValid = _checkValue.isValid,\n    itemNode = _checkValue.itemNode;\n  var tagElements = renderMultiValue();\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValue,\n      name: 'input',\n      cleanable: cleanable\n    })),\n    pickerClasses = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"tag\"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"focused\"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)([\"disabled-options\"])))] = disabledOptions, _merge));\n  var searching = !!searchKeyword && open;\n  var displaySearchInput = searchable && !disabled && !rest.loading;\n  var inputProps = multi ? {\n    inputStyle: {\n      maxWidth: maxWidth - 63\n    },\n    as: _InputAutosize.default\n  } : {\n    as: 'input'\n  };\n  if (plaintext) {\n    var plaintextProps = {};\n\n    // TagPicker has -6px margin-left on the plaintext wrapper\n    // for fixing margin-left on tags from 2nd line on\n    if (multi && hasValue) {\n      plaintextProps.style = {\n        marginLeft: -6\n      };\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: targetRef\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 776,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onEntered, onOpen),\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 785,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focusInput,\n    onKeyDown: onPickerKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 796,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: targetRef,\n    as: toggleAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    caret: !disabledOptions,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 802,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)([\"tag-wrapper\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 824,\n      columnNumber: 13\n    }\n  }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {\n    tabIndex: -1,\n    readOnly: readOnly,\n    onBlur: onBlur,\n    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),\n    inputRef: inputRef,\n    onChange: handleSearch,\n    value: open ? searchKeyword : '',\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 827,\n      columnNumber: 17\n    }\n  })))));\n});\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
+
+/***/ }),
+
+/***/ "./src/InputPicker/InputPickerContext.tsx":
+/*!************************************************!*\
+  !*** ./src/InputPicker/InputPickerContext.tsx ***!
+  \************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar InputPickerContext = /*#__PURE__*/_react.default.createContext({\n  tagProps: {},\n  trigger: 'Enter'\n});\nvar _default = InputPickerContext;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPickerContext.tsx?");
 
 /***/ }),
 
@@ -3821,7 +3832,7 @@ eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/h
 /***/ (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\"] = exports.dropdownMenuPropTypes = 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 _get2 = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.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 _isString = _interopRequireDefault(__webpack_require__(/*! lodash/isString */ \"./node_modules/lodash/isString.js\"));\nvar _isNumber = _interopRequireDefault(__webpack_require__(/*! lodash/isNumber */ \"./node_modules/lodash/isNumber.js\"));\nvar _findIndex = _interopRequireDefault(__webpack_require__(/*! lodash/findIndex */ \"./node_modules/lodash/findIndex.js\"));\nvar _getPosition = _interopRequireDefault(__webpack_require__(/*! dom-lib/getPosition */ \"./node_modules/dom-lib/esm/getPosition.js\"));\nvar _scrollTop = _interopRequireDefault(__webpack_require__(/*! dom-lib/scrollTop */ \"./node_modules/dom-lib/esm/scrollTop.js\"));\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../Windowing */ \"./src/Windowing/index.ts\");\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _DropdownMenuGroup = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenuGroup */ \"./src/Picker/DropdownMenuGroup.tsx\"));\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/DropdownMenu.tsx\",\n  _this = void 0;\nvar DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$data = props.data,\n    data = _props$data === void 0 ? [] : _props$data,\n    group = props.group,\n    groupBy = props.groupBy,\n    _props$maxHeight = props.maxHeight,\n    maxHeight = _props$maxHeight === void 0 ? 320 : _props$maxHeight,\n    _props$activeItemValu = props.activeItemValues,\n    activeItemValues = _props$activeItemValu === void 0 ? [] : _props$activeItemValu,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,\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    virtualized = props.virtualized,\n    listProps = props.listProps,\n    virtualizedListRef = props.listRef,\n    className = props.className,\n    style = props.style,\n    focusItemValue = props.focusItemValue,\n    dropdownMenuItemClassPrefix = props.dropdownMenuItemClassPrefix,\n    DropdownMenuItem = props.dropdownMenuItemAs,\n    _props$rowHeight = props.rowHeight,\n    rowHeight = _props$rowHeight === void 0 ? 36 : _props$rowHeight,\n    _props$rowGroupHeight = props.rowGroupHeight,\n    rowGroupHeight = _props$rowGroupHeight === void 0 ? 48 : _props$rowGroupHeight,\n    renderMenuGroup = props.renderMenuGroup,\n    renderMenuItem = props.renderMenuItem,\n    onGroupTitleClick = props.onGroupTitleClick,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"data\", \"group\", \"groupBy\", \"maxHeight\", \"activeItemValues\", \"disabledItemValues\", \"classPrefix\", \"valueKey\", \"labelKey\", \"virtualized\", \"listProps\", \"listRef\", \"className\", \"style\", \"focusItemValue\", \"dropdownMenuItemClassPrefix\", \"dropdownMenuItemAs\", \"rowHeight\", \"rowGroupHeight\", \"renderMenuGroup\", \"renderMenuItem\", \"onGroupTitleClick\", \"onSelect\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix('items', {\n    grouped: group\n  }));\n  var menuBodyContainerRef = (0, _react.useRef)(null);\n  var listRef = (0, _react.useRef)(null);\n  var _useState = (0, _react.useState)([]),\n    foldedGroupKeys = _useState[0],\n    setFoldedGroupKeys = _useState[1];\n  var handleGroupTitleClick = (0, _react.useCallback)(function (key, event) {\n    var nextGroupKeys = foldedGroupKeys.filter(function (item) {\n      return item !== key;\n    });\n    if (nextGroupKeys.length === foldedGroupKeys.length) {\n      nextGroupKeys.push(key);\n    }\n    setFoldedGroupKeys(nextGroupKeys);\n    onGroupTitleClick === null || onGroupTitleClick === void 0 ? void 0 : onGroupTitleClick(event);\n  }, [onGroupTitleClick, foldedGroupKeys]);\n  var handleSelect = (0, _react.useCallback)(function (item, value, event, checked) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event, checked);\n  }, [onSelect]);\n  var getRowHeight = function getRowHeight(list, index) {\n    var item = list[index];\n    if (group && item[_getDataGroupBy.KEY_GROUP] && index !== 0) {\n      return rowGroupHeight;\n    }\n    return rowHeight;\n  };\n  (0, _react.useEffect)(function () {\n    var container = menuBodyContainerRef.current;\n    if (!container) {\n      return;\n    }\n    var activeItem = container.querySelector(\".\" + prefix('item-focus'));\n    if (!activeItem) {\n      activeItem = container.querySelector(\".\" + prefix('item-active'));\n    }\n    if (!activeItem) {\n      return;\n    }\n    var position = (0, _getPosition.default)(activeItem, container);\n    var sTop = (0, _scrollTop.default)(container);\n    var sHeight = (0, _getHeight.default)(container);\n    if (sTop > position.top) {\n      (0, _scrollTop.default)(container, Math.max(0, position.top - 20));\n    } else if (position.top > sTop + sHeight) {\n      (0, _scrollTop.default)(container, Math.max(0, position.top - sHeight + 32));\n    }\n  }, [focusItemValue, menuBodyContainerRef, prefix]);\n  var renderItem = function renderItem(_ref) {\n    var _ref$index = _ref.index,\n      index = _ref$index === void 0 ? 0 : _ref$index,\n      style = _ref.style,\n      data = _ref.data,\n      itemData = _ref.item;\n    var item = itemData || data[index];\n    var value = item[valueKey];\n    var label = item[labelKey];\n    if ((0, _isUndefined.default)(label) && !item[_getDataGroupBy.KEY_GROUP]) {\n      throw Error(\"labelKey \\\"\" + labelKey + \"\\\" is not defined in \\\"data\\\" : \" + index);\n    }\n\n    // Use `value` in keys when If `value` is string or number\n    var itemKey = (0, _isString.default)(value) || (0, _isNumber.default)(value) ? value : index;\n\n    /**\n     * Render <DropdownMenuGroup>\n     * when if `group` is enabled\n     */\n    if (group && item[_getDataGroupBy.KEY_GROUP]) {\n      var groupValue = item[_getDataGroupBy.KEY_GROUP_TITLE];\n      // TODO: grouped options should be owned by group\n      return /*#__PURE__*/_react.default.createElement(_DropdownMenuGroup.default, {\n        style: style,\n        classPrefix: 'picker-menu-group',\n        className: (0, _classnames.default)({\n          folded: foldedGroupKeys.some(function (key) {\n            return key === groupValue;\n          })\n        }),\n        key: \"group-\" + groupValue,\n        onClick: handleGroupTitleClick.bind(null, groupValue),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 184,\n          columnNumber: 9\n        }\n      }, renderMenuGroup ? renderMenuGroup(groupValue, item) : groupValue);\n    } else if ((0, _isUndefined.default)(value) && !(0, _isUndefined.default)(item[_getDataGroupBy.KEY_GROUP])) {\n      throw Error(\"valueKey \\\"\" + valueKey + \"\\\" is not defined in \\\"data\\\" : \" + index + \" \");\n    }\n    var disabled = disabledItemValues === null || disabledItemValues === void 0 ? void 0 : disabledItemValues.some(function (disabledValue) {\n      return (0, _shallowEqual.default)(disabledValue, value);\n    });\n    var active = activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues.some(function (v) {\n      return (0, _shallowEqual.default)(v, value);\n    });\n    var focus = !(0, _isUndefined.default)(focusItemValue) && (0, _shallowEqual.default)(focusItemValue, value);\n    return /*#__PURE__*/_react.default.createElement(DropdownMenuItem, {\n      style: style,\n      key: itemKey,\n      disabled: disabled,\n      active: active,\n      focus: focus,\n      value: value,\n      classPrefix: dropdownMenuItemClassPrefix,\n      onSelect: handleSelect.bind(null, item),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 205,\n        columnNumber: 7\n      }\n    }, renderMenuItem ? renderMenuItem(label, item) : label);\n  };\n  var filteredItems = group ? data.filter(function (item) {\n    var _item$parent;\n    // Display group title items\n    if (item[_getDataGroupBy.KEY_GROUP]) return true;\n\n    // Display items under the unfolded group\n    // FIXME-Doma\n    // `groupBy` is bound to be string when `group` is true\n    // because `group` is actually redundant as a prop\n    // It could simply be derived from `groupBy` value\n    var groupValue = (0, _get2.default)(item, groupBy, '') || ( // FIXME-Doma\n    // Usage of `item.parent` is strongly discouraged\n    // It's only here for legacy support\n    // Remove once `item.parent` is completely removed across related components\n    (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[_getDataGroupBy.KEY_GROUP_TITLE]);\n    return !foldedGroupKeys.includes(groupValue);\n  }) : data;\n  var rowCount = filteredItems.length;\n  (0, _utils.useMount)(function () {\n    var _listRef$current, _listRef$current$scro;\n    var itemIndex = (0, _findIndex.default)(filteredItems, function (item) {\n      return item[valueKey] === (activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues[0]);\n    });\n    (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : (_listRef$current$scro = _listRef$current.scrollToItem) === null || _listRef$current$scro === void 0 ? void 0 : _listRef$current$scro.call(_listRef$current, itemIndex);\n  });\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    role: \"listbox\"\n  }, rest, {\n    className: classes,\n    ref: (0, _utils.mergeRefs)(menuBodyContainerRef, ref),\n    style: (0, _extends2.default)({}, style, {\n      maxHeight: maxHeight\n    }),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 248,\n      columnNumber: 5\n    }\n  }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n    defaultHeight: maxHeight,\n    style: {\n      width: 'auto',\n      height: 'auto'\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 256,\n      columnNumber: 9\n    }\n  }, function (_ref2) {\n    var height = _ref2.height;\n    return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n      as: _Windowing.VariableSizeList,\n      ref: (0, _utils.mergeRefs)(listRef, virtualizedListRef),\n      height: height || maxHeight,\n      itemCount: rowCount,\n      itemData: filteredItems,\n      itemSize: getRowHeight.bind(_this, filteredItems)\n    }, listProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 258,\n        columnNumber: 13\n      }\n    }), renderItem);\n  }) : filteredItems.map(function (item, index) {\n    return renderItem({\n      index: index,\n      item: item\n    });\n  }));\n});\nvar dropdownMenuPropTypes = {\n  classPrefix: _propTypes.default.string.isRequired,\n  className: _propTypes.default.string,\n  dropdownMenuItemAs: _propTypes.default.elementType.isRequired,\n  dropdownMenuItemClassPrefix: _propTypes.default.string,\n  data: _propTypes.default.array,\n  group: _propTypes.default.bool,\n  disabledItemValues: _propTypes.default.array,\n  activeItemValues: _propTypes.default.array,\n  focusItemValue: _propTypes.default.any,\n  maxHeight: _propTypes.default.number,\n  valueKey: _propTypes.default.string,\n  labelKey: _propTypes.default.string,\n  style: _propTypes.default.object,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  listProps: _propTypes.default.any,\n  rowHeight: _propTypes.default.number,\n  rowGroupHeight: _propTypes.default.number\n};\nexports.dropdownMenuPropTypes = dropdownMenuPropTypes;\nDropdownMenu.displayName = 'DropdownMenu';\nDropdownMenu.propTypes = dropdownMenuPropTypes;\nvar _default = DropdownMenu;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/DropdownMenu.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\"] = exports.dropdownMenuPropTypes = 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 _get2 = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.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 _isString = _interopRequireDefault(__webpack_require__(/*! lodash/isString */ \"./node_modules/lodash/isString.js\"));\nvar _isNumber = _interopRequireDefault(__webpack_require__(/*! lodash/isNumber */ \"./node_modules/lodash/isNumber.js\"));\nvar _findIndex = _interopRequireDefault(__webpack_require__(/*! lodash/findIndex */ \"./node_modules/lodash/findIndex.js\"));\nvar _pickBy = _interopRequireDefault(__webpack_require__(/*! lodash/pickBy */ \"./node_modules/lodash/pickBy.js\"));\nvar _getPosition = _interopRequireDefault(__webpack_require__(/*! dom-lib/getPosition */ \"./node_modules/dom-lib/esm/getPosition.js\"));\nvar _scrollTop = _interopRequireDefault(__webpack_require__(/*! dom-lib/scrollTop */ \"./node_modules/dom-lib/esm/scrollTop.js\"));\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../Windowing */ \"./src/Windowing/index.ts\");\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _DropdownMenuGroup = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenuGroup */ \"./src/Picker/DropdownMenuGroup.tsx\"));\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/DropdownMenu.tsx\",\n  _this = void 0;\nvar DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$data = props.data,\n    data = _props$data === void 0 ? [] : _props$data,\n    group = props.group,\n    groupBy = props.groupBy,\n    _props$maxHeight = props.maxHeight,\n    maxHeight = _props$maxHeight === void 0 ? 320 : _props$maxHeight,\n    _props$activeItemValu = props.activeItemValues,\n    activeItemValues = _props$activeItemValu === void 0 ? [] : _props$activeItemValu,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,\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    virtualized = props.virtualized,\n    listProps = props.listProps,\n    virtualizedListRef = props.listRef,\n    className = props.className,\n    style = props.style,\n    focusItemValue = props.focusItemValue,\n    dropdownMenuItemClassPrefix = props.dropdownMenuItemClassPrefix,\n    DropdownMenuItem = props.dropdownMenuItemAs,\n    dropdownMenuItemProps = props.dropdownMenuItemProps,\n    _props$rowHeight = props.rowHeight,\n    rowHeight = _props$rowHeight === void 0 ? 36 : _props$rowHeight,\n    _props$rowGroupHeight = props.rowGroupHeight,\n    rowGroupHeight = _props$rowGroupHeight === void 0 ? 48 : _props$rowGroupHeight,\n    renderMenuGroup = props.renderMenuGroup,\n    renderMenuItem = props.renderMenuItem,\n    onGroupTitleClick = props.onGroupTitleClick,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"data\", \"group\", \"groupBy\", \"maxHeight\", \"activeItemValues\", \"disabledItemValues\", \"classPrefix\", \"valueKey\", \"labelKey\", \"virtualized\", \"listProps\", \"listRef\", \"className\", \"style\", \"focusItemValue\", \"dropdownMenuItemClassPrefix\", \"dropdownMenuItemAs\", \"dropdownMenuItemProps\", \"rowHeight\", \"rowGroupHeight\", \"renderMenuGroup\", \"renderMenuItem\", \"onGroupTitleClick\", \"onSelect\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix('items', {\n    grouped: group\n  }));\n  var menuBodyContainerRef = (0, _react.useRef)(null);\n  var listRef = (0, _react.useRef)(null);\n  var _useState = (0, _react.useState)([]),\n    foldedGroupKeys = _useState[0],\n    setFoldedGroupKeys = _useState[1];\n  var handleGroupTitleClick = (0, _react.useCallback)(function (key, event) {\n    var nextGroupKeys = foldedGroupKeys.filter(function (item) {\n      return item !== key;\n    });\n    if (nextGroupKeys.length === foldedGroupKeys.length) {\n      nextGroupKeys.push(key);\n    }\n    setFoldedGroupKeys(nextGroupKeys);\n    onGroupTitleClick === null || onGroupTitleClick === void 0 ? void 0 : onGroupTitleClick(event);\n  }, [onGroupTitleClick, foldedGroupKeys]);\n  var handleSelect = (0, _react.useCallback)(function (item, value, event, checked) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event, checked);\n  }, [onSelect]);\n  var getRowHeight = function getRowHeight(list, index) {\n    var item = list[index];\n    if (group && item[_getDataGroupBy.KEY_GROUP] && index !== 0) {\n      return rowGroupHeight;\n    }\n    return rowHeight;\n  };\n  (0, _react.useEffect)(function () {\n    var container = menuBodyContainerRef.current;\n    if (!container) {\n      return;\n    }\n    var activeItem = container.querySelector(\".\" + prefix('item-focus'));\n    if (!activeItem) {\n      activeItem = container.querySelector(\".\" + prefix('item-active'));\n    }\n    if (!activeItem) {\n      return;\n    }\n    var position = (0, _getPosition.default)(activeItem, container);\n    var sTop = (0, _scrollTop.default)(container);\n    var sHeight = (0, _getHeight.default)(container);\n    if (sTop > position.top) {\n      (0, _scrollTop.default)(container, Math.max(0, position.top - 20));\n    } else if (position.top > sTop + sHeight) {\n      (0, _scrollTop.default)(container, Math.max(0, position.top - sHeight + 32));\n    }\n  }, [focusItemValue, menuBodyContainerRef, prefix]);\n  var renderItem = function renderItem(_ref) {\n    var _ref$index = _ref.index,\n      index = _ref$index === void 0 ? 0 : _ref$index,\n      style = _ref.style,\n      data = _ref.data,\n      itemData = _ref.item;\n    var item = itemData || data[index];\n    var value = item[valueKey];\n    var label = item[labelKey];\n    if ((0, _isUndefined.default)(label) && !item[_getDataGroupBy.KEY_GROUP]) {\n      throw Error(\"labelKey \\\"\" + labelKey + \"\\\" is not defined in \\\"data\\\" : \" + index);\n    }\n\n    // Use `value` in keys when If `value` is string or number\n    var itemKey = (0, _isString.default)(value) || (0, _isNumber.default)(value) ? value : index;\n\n    /**\n     * Render <DropdownMenuGroup>\n     * when if `group` is enabled\n     */\n    if (group && item[_getDataGroupBy.KEY_GROUP]) {\n      var groupValue = item[_getDataGroupBy.KEY_GROUP_TITLE];\n      // TODO: grouped options should be owned by group\n      return /*#__PURE__*/_react.default.createElement(_DropdownMenuGroup.default, {\n        style: style,\n        classPrefix: 'picker-menu-group',\n        className: (0, _classnames.default)({\n          folded: foldedGroupKeys.some(function (key) {\n            return key === groupValue;\n          })\n        }),\n        key: \"group-\" + groupValue,\n        onClick: handleGroupTitleClick.bind(null, groupValue),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 187,\n          columnNumber: 9\n        }\n      }, renderMenuGroup ? renderMenuGroup(groupValue, item) : groupValue);\n    } else if ((0, _isUndefined.default)(value) && !(0, _isUndefined.default)(item[_getDataGroupBy.KEY_GROUP])) {\n      throw Error(\"valueKey \\\"\" + valueKey + \"\\\" is not defined in \\\"data\\\" : \" + index + \" \");\n    }\n    var disabled = disabledItemValues === null || disabledItemValues === void 0 ? void 0 : disabledItemValues.some(function (disabledValue) {\n      return (0, _shallowEqual.default)(disabledValue, value);\n    });\n    var active = activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues.some(function (v) {\n      return (0, _shallowEqual.default)(v, value);\n    });\n    var focus = !(0, _isUndefined.default)(focusItemValue) && (0, _shallowEqual.default)(focusItemValue, value);\n    return /*#__PURE__*/_react.default.createElement(DropdownMenuItem, (0, _extends2.default)({\n      style: style,\n      key: itemKey,\n      disabled: disabled,\n      active: active,\n      focus: focus,\n      value: value,\n      classPrefix: dropdownMenuItemClassPrefix,\n      onSelect: handleSelect.bind(null, item)\n    }, (0, _pickBy.default)(dropdownMenuItemProps, function (v) {\n      return v !== undefined;\n    }), {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 208,\n        columnNumber: 7\n      }\n    }), renderMenuItem ? renderMenuItem(label, item) : label);\n  };\n  var filteredItems = group ? data.filter(function (item) {\n    var _item$parent;\n    // Display group title items\n    if (item[_getDataGroupBy.KEY_GROUP]) return true;\n\n    // Display items under the unfolded group\n    // FIXME-Doma\n    // `groupBy` is bound to be string when `group` is true\n    // because `group` is actually redundant as a prop\n    // It could simply be derived from `groupBy` value\n    var groupValue = (0, _get2.default)(item, groupBy, '') || ( // FIXME-Doma\n    // Usage of `item.parent` is strongly discouraged\n    // It's only here for legacy support\n    // Remove once `item.parent` is completely removed across related components\n    (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[_getDataGroupBy.KEY_GROUP_TITLE]);\n    return !foldedGroupKeys.includes(groupValue);\n  }) : data;\n  var rowCount = filteredItems.length;\n  (0, _utils.useMount)(function () {\n    var _listRef$current, _listRef$current$scro;\n    var itemIndex = (0, _findIndex.default)(filteredItems, function (item) {\n      return item[valueKey] === (activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues[0]);\n    });\n    (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : (_listRef$current$scro = _listRef$current.scrollToItem) === null || _listRef$current$scro === void 0 ? void 0 : _listRef$current$scro.call(_listRef$current, itemIndex);\n  });\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    role: \"listbox\"\n  }, rest, {\n    className: classes,\n    ref: (0, _utils.mergeRefs)(menuBodyContainerRef, ref),\n    style: (0, _extends2.default)({}, style, {\n      maxHeight: maxHeight\n    }),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 252,\n      columnNumber: 5\n    }\n  }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n    defaultHeight: maxHeight,\n    style: {\n      width: 'auto',\n      height: 'auto'\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 260,\n      columnNumber: 9\n    }\n  }, function (_ref2) {\n    var height = _ref2.height;\n    return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n      as: _Windowing.VariableSizeList,\n      ref: (0, _utils.mergeRefs)(listRef, virtualizedListRef),\n      height: height || maxHeight,\n      itemCount: rowCount,\n      itemData: filteredItems,\n      itemSize: getRowHeight.bind(_this, filteredItems)\n    }, listProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 262,\n        columnNumber: 13\n      }\n    }), renderItem);\n  }) : filteredItems.map(function (item, index) {\n    return renderItem({\n      index: index,\n      item: item\n    });\n  }));\n});\nvar dropdownMenuPropTypes = {\n  classPrefix: _propTypes.default.string.isRequired,\n  className: _propTypes.default.string,\n  dropdownMenuItemAs: _propTypes.default.elementType.isRequired,\n  dropdownMenuItemClassPrefix: _propTypes.default.string,\n  data: _propTypes.default.array,\n  group: _propTypes.default.bool,\n  disabledItemValues: _propTypes.default.array,\n  activeItemValues: _propTypes.default.array,\n  focusItemValue: _propTypes.default.any,\n  maxHeight: _propTypes.default.number,\n  valueKey: _propTypes.default.string,\n  labelKey: _propTypes.default.string,\n  style: _propTypes.default.object,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  listProps: _propTypes.default.any,\n  rowHeight: _propTypes.default.number,\n  rowGroupHeight: _propTypes.default.number\n};\nexports.dropdownMenuPropTypes = dropdownMenuPropTypes;\nDropdownMenu.displayName = 'DropdownMenu';\nDropdownMenu.propTypes = dropdownMenuPropTypes;\nvar _default = DropdownMenu;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/DropdownMenu.tsx?");
 
 /***/ }),
 
@@ -3832,7 +3843,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 _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../Checkbox */ \"./src/Checkbox/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/DropdownMenuCheckItem.tsx\",\n  _this = void 0;\nvar DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$active = props.active,\n    active = _props$active === void 0 ? false : _props$active,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$checkboxAs = props.checkboxAs,\n    CheckboxItem = _props$checkboxAs === void 0 ? _Checkbox.default : _props$checkboxAs,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'check-item' : _props$classPrefix,\n    _props$checkable = props.checkable,\n    checkable = _props$checkable === void 0 ? true : _props$checkable,\n    disabled = props.disabled,\n    value = props.value,\n    focus = props.focus,\n    children = props.children,\n    className = props.className,\n    indeterminate = props.indeterminate,\n    onKeyDown = props.onKeyDown,\n    onSelect = props.onSelect,\n    onCheck = props.onCheck,\n    onSelectItem = props.onSelectItem,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"checkboxAs\", \"classPrefix\", \"checkable\", \"disabled\", \"value\", \"focus\", \"children\", \"className\", \"indeterminate\", \"onKeyDown\", \"onSelect\", \"onCheck\", \"onSelectItem\"]);\n  var handleChange = (0, _react.useCallback)(function (value, checked, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);\n  }, [onSelect]);\n  var handleCheck = (0, _react.useCallback)(function (event) {\n    if (!disabled) {\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(value, event, !active);\n    }\n  }, [value, disabled, onCheck, active]);\n  var handleSelectItem = (0, _react.useCallback)(function (event) {\n    if (!disabled) {\n      onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(value, event, !active);\n    }\n  }, [value, disabled, onSelectItem, active]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var checkboxItemClasses = withClassPrefix({\n    focus: focus\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"option\",\n    \"aria-selected\": active,\n    \"aria-disabled\": disabled,\n    \"data-key\": value\n  }, rest, {\n    ref: ref,\n    className: className,\n    tabIndex: -1,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 75,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(CheckboxItem, {\n    value: value,\n    role: \"checkbox\",\n    disabled: disabled,\n    checked: active,\n    checkable: checkable,\n    indeterminate: indeterminate,\n    className: checkboxItemClasses,\n    onKeyDown: disabled ? null : onKeyDown,\n    onChange: handleChange,\n    onClick: handleSelectItem,\n    onCheckboxClick: handleCheck,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 85,\n      columnNumber: 9\n    }\n  }, children));\n});\nDropdownMenuCheckItem.displayName = 'DropdownMenuCheckItem';\nDropdownMenuCheckItem.propTypes = {\n  classPrefix: _propTypes.default.string,\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  checkable: _propTypes.default.bool,\n  indeterminate: _propTypes.default.bool,\n  value: _propTypes.default.any,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func,\n  onSelectItem: _propTypes.default.func,\n  onKeyDown: _propTypes.default.func,\n  focus: _propTypes.default.bool,\n  title: _propTypes.default.string,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  as: _propTypes.default.elementType,\n  checkboxAs: _propTypes.default.elementType\n};\nvar _default = DropdownMenuCheckItem;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/DropdownMenuCheckItem.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 _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../Checkbox */ \"./src/Checkbox/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/DropdownMenuCheckItem.tsx\",\n  _this = void 0;\nvar DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$active = props.active,\n    active = _props$active === void 0 ? false : _props$active,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$checkboxAs = props.checkboxAs,\n    CheckboxItem = _props$checkboxAs === void 0 ? _Checkbox.default : _props$checkboxAs,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'check-item' : _props$classPrefix,\n    _props$checkable = props.checkable,\n    checkable = _props$checkable === void 0 ? true : _props$checkable,\n    disabled = props.disabled,\n    value = props.value,\n    focus = props.focus,\n    children = props.children,\n    className = props.className,\n    indeterminate = props.indeterminate,\n    onKeyDown = props.onKeyDown,\n    onSelect = props.onSelect,\n    onCheck = props.onCheck,\n    onSelectItem = props.onSelectItem,\n    renderMenuItemCheckbox = props.renderMenuItemCheckbox,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"checkboxAs\", \"classPrefix\", \"checkable\", \"disabled\", \"value\", \"focus\", \"children\", \"className\", \"indeterminate\", \"onKeyDown\", \"onSelect\", \"onCheck\", \"onSelectItem\", \"renderMenuItemCheckbox\"]);\n  var handleChange = (0, _react.useCallback)(function (value, checked, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);\n  }, [onSelect]);\n  var handleCheck = (0, _react.useCallback)(function (event) {\n    if (!disabled) {\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(value, event, !active);\n    }\n  }, [value, disabled, onCheck, active]);\n  var handleSelectItem = (0, _react.useCallback)(function (event) {\n    if (!disabled) {\n      onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(value, event, !active);\n    }\n  }, [value, disabled, onSelectItem, active]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var checkboxItemClasses = withClassPrefix({\n    focus: focus\n  });\n  var checkboxProps = {\n    value: value,\n    disabled: disabled,\n    indeterminate: indeterminate,\n    checkable: checkable,\n    children: children,\n    checked: active,\n    className: checkboxItemClasses,\n    onKeyDown: disabled ? undefined : onKeyDown,\n    onChange: handleChange,\n    onClick: handleSelectItem,\n    onCheckboxClick: handleCheck\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"option\",\n    \"aria-selected\": active,\n    \"aria-disabled\": disabled,\n    \"data-key\": value\n  }, rest, {\n    ref: ref,\n    className: className,\n    tabIndex: -1,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 91,\n      columnNumber: 7\n    }\n  }), renderMenuItemCheckbox ? renderMenuItemCheckbox(checkboxProps) : /*#__PURE__*/_react.default.createElement(CheckboxItem, (0, _extends2.default)({\n    role: \"checkbox\"\n  }, checkboxProps, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 104,\n      columnNumber: 11\n    }\n  })));\n});\nDropdownMenuCheckItem.displayName = 'DropdownMenuCheckItem';\nDropdownMenuCheckItem.propTypes = {\n  classPrefix: _propTypes.default.string,\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  checkable: _propTypes.default.bool,\n  indeterminate: _propTypes.default.bool,\n  value: _propTypes.default.any,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func,\n  onSelectItem: _propTypes.default.func,\n  onKeyDown: _propTypes.default.func,\n  focus: _propTypes.default.bool,\n  title: _propTypes.default.string,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  as: _propTypes.default.elementType,\n  checkboxAs: _propTypes.default.elementType\n};\nvar _default = DropdownMenuCheckItem;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/DropdownMenuCheckItem.tsx?");
 
 /***/ }),
 
@@ -3876,7 +3887,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 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: 202,\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: 219,\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: 233,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Stack.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 248,\n      columnNumber: 9\n    }\n  }, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 250,\n      columnNumber: 13\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('label'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 251,\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: 254,\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: 256,\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: 259,\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: 278,\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: 'Clear'\n    },\n    onClick: handleClean,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 289,\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: 296,\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    __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?");
 
 /***/ }),
 
@@ -4151,7 +4162,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 _Check = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Check */ \"./node_modules/@rsuite/icons/Check.js\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _RadioTileGroup = __webpack_require__(/*! ../RadioTileGroup/RadioTileGroup */ \"./src/RadioTileGroup/RadioTileGroup.tsx\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _useUniqueId = _interopRequireDefault(__webpack_require__(/*! ../utils/useUniqueId */ \"./src/utils/useUniqueId.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/RadioTile/RadioTile.tsx\",\n  _this = void 0;\nvar RadioTile = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_RadioTileGroup.RadioTileContext),\n    groupValue = _useContext.value,\n    nameContext = _useContext.name,\n    disabledContext = _useContext.disabled,\n    onGroupChange = _useContext.onChange;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? _Stack.default : _props$as,\n    children = props.children,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'radio-tile' : _props$classPrefix,\n    checkedProp = props.checked,\n    className = props.className,\n    defaultChecked = props.defaultChecked,\n    _props$disabled = props.disabled,\n    disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,\n    icon = props.icon,\n    value = props.value,\n    label = props.label,\n    _props$name = props.name,\n    name = _props$name === void 0 ? nameContext : _props$name,\n    _props$tabIndex = props.tabIndex,\n    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n    onChange = props.onChange,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"children\", \"classPrefix\", \"checked\", \"className\", \"defaultChecked\", \"disabled\", \"icon\", \"value\", \"label\", \"name\", \"tabIndex\", \"onChange\"]);\n  var _useControlled = (0, _utils.useControlled)(typeof groupValue !== 'undefined' ? groupValue === value : checkedProp, defaultChecked || false),\n    checked = _useControlled[0],\n    setChecked = _useControlled[1];\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(rest),\n    htmlInputProps = _partitionHTMLProps[0],\n    restProps = _partitionHTMLProps[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var handleChange = (0, _react.useCallback)(function (event) {\n    setChecked(true);\n    onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange, onGroupChange, setChecked, value]);\n  var classes = merge(className, withClassPrefix({\n    checked: checked,\n    disabled: disabled\n  }));\n  var radioId = (0, _useUniqueId.default)('radio-');\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    spacing: 6\n  }, restProps, {\n    childrenRenderMode: \"clone\",\n    ref: ref,\n    className: classes,\n    as: \"label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 89,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('icon'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 97,\n      columnNumber: 7\n    }\n  }, icon), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('body'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 98,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({}, htmlInputProps, {\n    type: \"radio\",\n    name: name,\n    value: value,\n    checked: checked,\n    tabIndex: tabIndex,\n    disabled: disabled,\n    onChange: handleChange,\n    \"aria-checked\": checked,\n    \"aria-disabled\": disabled,\n    \"aria-labelledby\": radioId + \"-label\",\n    \"aria-describedby\": radioId + \"-desc\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 99,\n      columnNumber: 9\n    }\n  })), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('label'),\n    id: radioId + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 113,\n      columnNumber: 9\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('content'),\n    id: radioId + \"-desc\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 116,\n      columnNumber: 9\n    }\n  }, children), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('mark'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 119,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Check.default, {\n    className: prefix('mark-icon'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 120,\n      columnNumber: 11\n    }\n  }))));\n});\nRadioTile.displayName = 'RadioTile';\nRadioTile.propTypes = {\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  checked: _propTypes.default.bool,\n  defaultChecked: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  label: _propTypes.default.node,\n  name: _propTypes.default.string,\n  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),\n  onChange: _propTypes.default.func\n};\nvar _default = RadioTile;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/RadioTile/RadioTile.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 _Check = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Check */ \"./node_modules/@rsuite/icons/Check.js\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _RadioTileGroup = __webpack_require__(/*! ../RadioTileGroup/RadioTileGroup */ \"./src/RadioTileGroup/RadioTileGroup.tsx\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _useUniqueId = _interopRequireDefault(__webpack_require__(/*! ../utils/useUniqueId */ \"./src/utils/useUniqueId.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/RadioTile/RadioTile.tsx\",\n  _this = void 0;\n/**\n * A series of selectable tile components that behave like Radio.\n * @version 5.35.0\n * @see https://rsuitejs.com/components/radio-tile/\n */\nvar RadioTile = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_RadioTileGroup.RadioTileContext),\n    groupValue = _useContext.value,\n    nameContext = _useContext.name,\n    disabledContext = _useContext.disabled,\n    onGroupChange = _useContext.onChange;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? _Stack.default : _props$as,\n    children = props.children,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'radio-tile' : _props$classPrefix,\n    checkedProp = props.checked,\n    className = props.className,\n    defaultChecked = props.defaultChecked,\n    _props$disabled = props.disabled,\n    disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,\n    icon = props.icon,\n    value = props.value,\n    label = props.label,\n    _props$name = props.name,\n    name = _props$name === void 0 ? nameContext : _props$name,\n    _props$tabIndex = props.tabIndex,\n    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n    onChange = props.onChange,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"children\", \"classPrefix\", \"checked\", \"className\", \"defaultChecked\", \"disabled\", \"icon\", \"value\", \"label\", \"name\", \"tabIndex\", \"onChange\"]);\n  var _useControlled = (0, _utils.useControlled)(typeof groupValue !== 'undefined' ? groupValue === value : checkedProp, defaultChecked || false),\n    checked = _useControlled[0],\n    setChecked = _useControlled[1];\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(rest),\n    htmlInputProps = _partitionHTMLProps[0],\n    restProps = _partitionHTMLProps[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var handleChange = (0, _react.useCallback)(function (event) {\n    setChecked(true);\n    onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange, onGroupChange, setChecked, value]);\n  var classes = merge(className, withClassPrefix({\n    checked: checked,\n    disabled: disabled\n  }));\n  var radioId = (0, _useUniqueId.default)('radio-');\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    spacing: 6\n  }, restProps, {\n    childrenRenderMode: \"clone\",\n    ref: ref,\n    className: classes,\n    as: \"label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 94,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('icon'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 102,\n      columnNumber: 7\n    }\n  }, icon), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('body'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 103,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({}, htmlInputProps, {\n    type: \"radio\",\n    name: name,\n    value: value,\n    checked: checked,\n    tabIndex: tabIndex,\n    disabled: disabled,\n    onChange: handleChange,\n    \"aria-checked\": checked,\n    \"aria-disabled\": disabled,\n    \"aria-labelledby\": radioId + \"-label\",\n    \"aria-describedby\": radioId + \"-desc\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 104,\n      columnNumber: 9\n    }\n  })), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('label'),\n    id: radioId + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 118,\n      columnNumber: 9\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('content'),\n    id: radioId + \"-desc\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 121,\n      columnNumber: 9\n    }\n  }, children), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('mark'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 124,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Check.default, {\n    className: prefix('mark-icon'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 125,\n      columnNumber: 11\n    }\n  }))));\n});\nRadioTile.displayName = 'RadioTile';\nRadioTile.propTypes = {\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  checked: _propTypes.default.bool,\n  defaultChecked: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  label: _propTypes.default.node,\n  name: _propTypes.default.string,\n  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),\n  onChange: _propTypes.default.func\n};\nvar _default = RadioTile;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/RadioTile/RadioTile.tsx?");
 
 /***/ }),
 
@@ -4723,7 +4734,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../CloseButton */ \"./src/CloseButton/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Tag/Tag.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2;\nvar Tag = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'tag' : _props$classPrefix,\n    _props$size = props.size,\n    size = _props$size === void 0 ? 'md' : _props$size,\n    _props$color = props.color,\n    color = _props$color === void 0 ? 'default' : _props$color,\n    children = props.children,\n    closable = props.closable,\n    className = props.className,\n    onClose = props.onClose,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"size\", \"color\", \"children\", \"closable\", \"className\", \"onClose\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix(size, color, {\n    closable: closable\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 41,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"text\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 7\n    }\n  }, children), closable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"icon-close\"]))),\n    onClick: onClose,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 43,\n      columnNumber: 20\n    }\n  }));\n});\nTag.displayName = 'Tag';\nTag.propTypes = {\n  closable: _propTypes.default.bool,\n  classPrefix: _propTypes.default.string,\n  onClose: _propTypes.default.func,\n  children: _propTypes.default.node,\n  className: _propTypes.default.string,\n  as: _propTypes.default.elementType\n};\nvar _default = Tag;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Tag/Tag.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../CloseButton */ \"./src/CloseButton/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Tag/Tag.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2;\nvar Tag = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'tag' : _props$classPrefix,\n    _props$size = props.size,\n    size = _props$size === void 0 ? 'md' : _props$size,\n    _props$color = props.color,\n    color = _props$color === void 0 ? 'default' : _props$color,\n    children = props.children,\n    closable = props.closable,\n    className = props.className,\n    onClose = props.onClose,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"size\", \"color\", \"children\", \"closable\", \"className\", \"onClose\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix(size, color, {\n    closable: closable\n  }));\n  var _useCustom = (0, _utils.useCustom)(),\n    locale = _useCustom.locale;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"text\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 43,\n      columnNumber: 7\n    }\n  }, children), closable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"icon-close\"]))),\n    onClick: onClose,\n    tabIndex: -1,\n    locale: {\n      closeLabel: locale === null || locale === void 0 ? void 0 : locale.remove\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 45,\n      columnNumber: 9\n    }\n  }));\n});\nTag.displayName = 'Tag';\nTag.propTypes = {\n  closable: _propTypes.default.bool,\n  classPrefix: _propTypes.default.string,\n  onClose: _propTypes.default.func,\n  children: _propTypes.default.node,\n  className: _propTypes.default.string,\n  as: _propTypes.default.elementType\n};\nvar _default = Tag;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Tag/Tag.tsx?");
 
 /***/ }),
 
@@ -4767,7 +4778,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _InputPicker = _interopRequireWildcard(__webpack_require__(/*! ../InputPicker/InputPicker */ \"./src/InputPicker/InputPicker.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TagInput/index.tsx\",\n  _this = void 0;\nvar TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$tagProps = props.tagProps,\n    tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,\n    value = props.value,\n    defaultValue = props.defaultValue,\n    onTagRemove = props.onTagRemove,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"tagProps\", \"trigger\", \"value\", \"defaultValue\", \"onTagRemove\"]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      multi: true,\n      disabledOptions: true,\n      trigger: trigger,\n      tagProps: tagProps,\n      onTagRemove: onTagRemove\n    };\n  }, [onTagRemove, tagProps, trigger]);\n  var data = (0, _react.useMemo)(function () {\n    return (value || defaultValue || []).map(function (v) {\n      return {\n        value: v,\n        label: v\n      };\n    });\n  }, [defaultValue, value]);\n  return /*#__PURE__*/_react.default.createElement(_InputPicker.InputPickerContext.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 38,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {\n    value: value,\n    defaultValue: defaultValue,\n    data: data,\n    placement: undefined,\n    creatable: true,\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 39,\n      columnNumber: 7\n    }\n  })));\n});\nTagInput.displayName = 'TagInput';\nvar _default = TagInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TagInput/index.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _InputPicker = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPicker */ \"./src/InputPicker/InputPicker.tsx\"));\nvar _InputPickerContext = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TagInput/index.tsx\",\n  _this = void 0;\nvar TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$tagProps = props.tagProps,\n    tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,\n    value = props.value,\n    defaultValue = props.defaultValue,\n    onTagRemove = props.onTagRemove,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"tagProps\", \"trigger\", \"value\", \"defaultValue\", \"onTagRemove\"]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      multi: true,\n      disabledOptions: true,\n      trigger: trigger,\n      tagProps: tagProps,\n      onTagRemove: onTagRemove\n    };\n  }, [onTagRemove, tagProps, trigger]);\n  var data = (0, _react.useMemo)(function () {\n    return (value || defaultValue || []).map(function (v) {\n      return {\n        value: v,\n        label: v\n      };\n    });\n  }, [defaultValue, value]);\n  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 22,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {\n    value: value,\n    defaultValue: defaultValue,\n    data: data,\n    placement: undefined,\n    creatable: true,\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 23,\n      columnNumber: 7\n    }\n  })));\n});\nTagInput.displayName = 'TagInput';\nvar _default = TagInput;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TagInput/index.tsx?");
 
 /***/ }),
 
@@ -4778,7 +4789,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _InputPicker = _interopRequireWildcard(__webpack_require__(/*! ../InputPicker/InputPicker */ \"./src/InputPicker/InputPicker.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TagPicker/index.tsx\",\n  _this = void 0;\nvar TagPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$tagProps = props.tagProps,\n    tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,\n    onTagRemove = props.onTagRemove,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"tagProps\", \"trigger\", \"onTagRemove\"]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      multi: true,\n      trigger: trigger,\n      tagProps: tagProps,\n      onTagRemove: onTagRemove\n    };\n  }, [onTagRemove, tagProps, trigger]);\n  return /*#__PURE__*/_react.default.createElement(_InputPicker.InputPickerContext.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 32,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 33,\n      columnNumber: 9\n    }\n  })));\n});\nTagPicker.displayName = 'TagPicker';\nvar _default = TagPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TagPicker/index.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _InputPicker = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPicker */ \"./src/InputPicker/InputPicker.tsx\"));\nvar _InputPickerContext = _interopRequireDefault(__webpack_require__(/*! ../InputPicker/InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TagPicker/index.tsx\",\n  _this = void 0;\n/**\n * Multi-select by tag and support new options\n * @see https://rsuitejs.com/components/tag-picker/\n */\nvar TagPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$tagProps = props.tagProps,\n    tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,\n    onTagRemove = props.onTagRemove,\n    renderMenuItemCheckbox = props.renderMenuItemCheckbox,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"tagProps\", \"trigger\", \"onTagRemove\", \"renderMenuItemCheckbox\"]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      multi: true,\n      trigger: trigger,\n      tagProps: tagProps,\n      onTagRemove: onTagRemove,\n      renderMenuItemCheckbox: renderMenuItemCheckbox\n    };\n  }, [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);\n  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 34,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 35,\n      columnNumber: 9\n    }\n  })));\n});\nTagPicker.displayName = 'TagPicker';\nvar _default = TagPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TagPicker/index.tsx?");
 
 /***/ }),
 
@@ -4932,7 +4943,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\"] = exports.formatSize = 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 _Attachment = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Attachment */ \"./node_modules/@rsuite/icons/legacy/Attachment.js\"));\nvar _Reload = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Reload */ \"./node_modules/@rsuite/icons/Reload.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../CloseButton */ \"./src/CloseButton/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Uploader/UploadFileItem.tsx\",\n  _this = void 0;\n/**\n * Format display file size\n * @param size\n */\nvar formatSize = function formatSize(size) {\n  if (size === void 0) {\n    size = 0;\n  }\n  var K = 1024;\n  var M = 1024 * 1024;\n  var G = 1024 * 1024 * 1024;\n  if (size > G) {\n    return (size / G).toFixed(2) + \"GB\";\n  }\n  if (size > M) {\n    return (size / M).toFixed(2) + \"MB\";\n  }\n  if (size > K) {\n    return (size / K).toFixed(2) + \"KB\";\n  }\n  return size + \"B\";\n};\nexports.formatSize = formatSize;\nvar UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    disabled = props.disabled,\n    _props$allowReupload = props.allowReupload,\n    allowReupload = _props$allowReupload === void 0 ? true : _props$allowReupload,\n    file = props.file,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'uploader-file-item' : _props$classPrefix,\n    _props$listType = props.listType,\n    listType = _props$listType === void 0 ? 'text' : _props$listType,\n    className = props.className,\n    _props$removable = props.removable,\n    removable = _props$removable === void 0 ? true : _props$removable,\n    _props$maxPreviewFile = props.maxPreviewFileSize,\n    maxPreviewFileSize = _props$maxPreviewFile === void 0 ? 1024 * 1024 * 5 : _props$maxPreviewFile,\n    locale = props.locale,\n    renderFileInfo = props.renderFileInfo,\n    renderThumbnail = props.renderThumbnail,\n    onPreview = props.onPreview,\n    onCancel = props.onCancel,\n    onReupload = props.onReupload,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"disabled\", \"allowReupload\", \"file\", \"classPrefix\", \"listType\", \"className\", \"removable\", \"maxPreviewFileSize\", \"locale\", \"renderFileInfo\", \"renderThumbnail\", \"onPreview\", \"onCancel\", \"onReupload\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, withClassPrefix(listType, {\n    disabled: disabled,\n    'has-error': file.status === 'error'\n  }));\n  var _useState = (0, _react.useState)(file.url ? file.url : null),\n    previewImage = _useState[0],\n    setPreviewImage = _useState[1];\n  /**\n   * Get thumbnail of image file\n   */\n  var getThumbnail = (0, _react.useCallback)(function (callback) {\n    var _file$blobFile;\n    if (!~['picture-text', 'picture'].indexOf(listType)) {\n      return;\n    }\n\n    // The thumbnail file size cannot be larger than the preset value.\n    if (!file.blobFile || (file === null || file === void 0 ? void 0 : (_file$blobFile = file.blobFile) === null || _file$blobFile === void 0 ? void 0 : _file$blobFile.size) > maxPreviewFileSize) {\n      return;\n    }\n    (0, _utils.previewFile)(file.blobFile, callback);\n  }, [file, listType, maxPreviewFileSize]);\n  (0, _react.useEffect)(function () {\n    if (!file.url) {\n      getThumbnail(function (previewImage) {\n        setPreviewImage(previewImage);\n      });\n    }\n  }, [file.url, getThumbnail]);\n  var handlePreview = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n    onPreview === null || onPreview === void 0 ? void 0 : onPreview(file, event);\n  }, [disabled, file, onPreview]);\n  var handleRemove = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n    onCancel === null || onCancel === void 0 ? void 0 : onCancel(file.fileKey, event);\n  }, [disabled, file.fileKey, onCancel]);\n  var handleReupload = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n    onReupload === null || onReupload === void 0 ? void 0 : onReupload(file, event);\n  }, [disabled, file, onReupload]);\n\n  /**\n   * Rendering progress bar\n   */\n  var renderProgressBar = function renderProgressBar() {\n    var _file$progress = file.progress,\n      progress = _file$progress === void 0 ? 0 : _file$progress,\n      status = file.status;\n    var show = !disabled && status === 'uploading';\n    var visibility = show ? 'visible' : 'hidden';\n    var wrapStyle = {\n      visibility: visibility\n    };\n    var progressbarStyle = {\n      width: progress + \"%\"\n    };\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('progress'),\n      style: wrapStyle,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 151,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('progress-bar'),\n      style: progressbarStyle,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 152,\n        columnNumber: 9\n      }\n    }));\n  };\n  var renderPreview = function renderPreview() {\n    var thumbnail = previewImage ? /*#__PURE__*/_react.default.createElement(\"img\", {\n      role: \"presentation\",\n      src: previewImage,\n      alt: file.name,\n      onClick: handlePreview,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 159,\n        columnNumber: 7\n      }\n    }) : /*#__PURE__*/_react.default.createElement(_Attachment.default, {\n      className: prefix('icon'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 161,\n        columnNumber: 7\n      }\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('preview'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 165,\n        columnNumber: 7\n      }\n    }, renderThumbnail ? renderThumbnail(file, thumbnail) : thumbnail);\n  };\n\n  /**\n   * Render the loading state.\n   */\n  var renderIcon = function renderIcon() {\n    var uploading = file.status === 'uploading';\n    var classes = prefix('icon-wrapper', {\n      'icon-loading': uploading\n    });\n    if (uploading) {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: classes,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 180,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(\"i\", {\n        className: prefix('icon'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 181,\n          columnNumber: 11\n        }\n      }));\n    }\n    if (listType === 'picture' || listType === 'picture-text') {\n      return null;\n    }\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 191,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Attachment.default, {\n      className: prefix('icon'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 192,\n        columnNumber: 9\n      }\n    }));\n  };\n\n  /**\n   * Render the remove file button.\n   */\n  var renderRemoveButton = function renderRemoveButton() {\n    if (!removable) {\n      return null;\n    }\n    return /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n      className: prefix('btn-remove'),\n      onClick: handleRemove,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 205,\n        columnNumber: 12\n      }\n    });\n  };\n\n  /**\n   * Render error messages.\n   */\n  var renderErrorStatus = function renderErrorStatus() {\n    if (file.status === 'error') {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('status'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 214,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(\"span\", {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 215,\n          columnNumber: 12\n        }\n      }, locale === null || locale === void 0 ? void 0 : locale.error), allowReupload && /*#__PURE__*/_react.default.createElement(\"a\", {\n        role: \"button\",\n        tabIndex: -1,\n        onClick: handleReupload,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 217,\n          columnNumber: 13\n        }\n      }, /*#__PURE__*/_react.default.createElement(_Reload.default, {\n        className: prefix('icon-reupload'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 218,\n          columnNumber: 15\n        }\n      })));\n    }\n    return null;\n  };\n\n  /**\n   * Render file size.\n   */\n  var renderFileSize = function renderFileSize() {\n    if (file.status !== 'error' && file.blobFile) {\n      var _file$blobFile2;\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: prefix('size'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 232,\n          columnNumber: 14\n        }\n      }, formatSize(file === null || file === void 0 ? void 0 : (_file$blobFile2 = file.blobFile) === null || _file$blobFile2 === void 0 ? void 0 : _file$blobFile2.size));\n    }\n    return null;\n  };\n\n  /**\n   * Render file panel\n   */\n  var renderFilePanel = function renderFilePanel() {\n    var fileElement = /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('title'),\n      onClick: handlePreview,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 242,\n        columnNumber: 7\n      }\n    }, file.name);\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('panel'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 247,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 248,\n        columnNumber: 9\n      }\n    }, renderFileInfo ? renderFileInfo(file, fileElement) : fileElement, renderErrorStatus(), renderFileSize()));\n  };\n  if (listType === 'picture') {\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n      ref: ref,\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 259,\n        columnNumber: 7\n      }\n    }), renderIcon(), renderPreview(), renderErrorStatus(), renderRemoveButton());\n  }\n  if (listType === 'picture-text') {\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n      ref: ref,\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 270,\n        columnNumber: 7\n      }\n    }), renderIcon(), renderPreview(), renderFilePanel(), renderProgressBar(), renderRemoveButton());\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 281,\n      columnNumber: 5\n    }\n  }), renderIcon(), renderFilePanel(), renderProgressBar(), renderRemoveButton());\n});\nUploadFileItem.displayName = 'UploadFileItem';\nUploadFileItem.propTypes = {\n  locale: _propTypes.default.any,\n  file: _propTypes.default.object.isRequired,\n  listType: _propTypes.default.oneOf(['text', 'picture-text', 'picture']),\n  disabled: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  maxPreviewFileSize: _propTypes.default.number,\n  classPrefix: _propTypes.default.string,\n  removable: _propTypes.default.bool,\n  allowReupload: _propTypes.default.bool,\n  renderFileInfo: _propTypes.default.func,\n  renderThumbnail: _propTypes.default.func,\n  onCancel: _propTypes.default.func,\n  onPreview: _propTypes.default.func,\n  onReupload: _propTypes.default.func\n};\nvar _default = UploadFileItem;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Uploader/UploadFileItem.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\"] = exports.formatSize = 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 _Attachment = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Attachment */ \"./node_modules/@rsuite/icons/legacy/Attachment.js\"));\nvar _Reload = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Reload */ \"./node_modules/@rsuite/icons/Reload.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../CloseButton */ \"./src/CloseButton/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Uploader/UploadFileItem.tsx\",\n  _this = void 0;\n/**\n * Format display file size\n * @param size\n */\nvar formatSize = function formatSize(size) {\n  if (size === void 0) {\n    size = 0;\n  }\n  var K = 1024;\n  var M = 1024 * 1024;\n  var G = 1024 * 1024 * 1024;\n  if (size > G) {\n    return (size / G).toFixed(2) + \"GB\";\n  }\n  if (size > M) {\n    return (size / M).toFixed(2) + \"MB\";\n  }\n  if (size > K) {\n    return (size / K).toFixed(2) + \"KB\";\n  }\n  return size + \"B\";\n};\nexports.formatSize = formatSize;\nvar UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    disabled = props.disabled,\n    _props$allowReupload = props.allowReupload,\n    allowReupload = _props$allowReupload === void 0 ? true : _props$allowReupload,\n    file = props.file,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'uploader-file-item' : _props$classPrefix,\n    _props$listType = props.listType,\n    listType = _props$listType === void 0 ? 'text' : _props$listType,\n    className = props.className,\n    _props$removable = props.removable,\n    removable = _props$removable === void 0 ? true : _props$removable,\n    _props$maxPreviewFile = props.maxPreviewFileSize,\n    maxPreviewFileSize = _props$maxPreviewFile === void 0 ? 1024 * 1024 * 5 : _props$maxPreviewFile,\n    locale = props.locale,\n    renderFileInfo = props.renderFileInfo,\n    renderThumbnail = props.renderThumbnail,\n    onPreview = props.onPreview,\n    onCancel = props.onCancel,\n    onReupload = props.onReupload,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"disabled\", \"allowReupload\", \"file\", \"classPrefix\", \"listType\", \"className\", \"removable\", \"maxPreviewFileSize\", \"locale\", \"renderFileInfo\", \"renderThumbnail\", \"onPreview\", \"onCancel\", \"onReupload\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, withClassPrefix(listType, {\n    disabled: disabled,\n    'has-error': file.status === 'error'\n  }));\n  var _useState = (0, _react.useState)(file.url ? file.url : null),\n    previewImage = _useState[0],\n    setPreviewImage = _useState[1];\n  /**\n   * Get thumbnail of image file\n   */\n  var getThumbnail = (0, _react.useCallback)(function (callback) {\n    var _file$blobFile;\n    if (!~['picture-text', 'picture'].indexOf(listType)) {\n      return;\n    }\n\n    // The thumbnail file size cannot be larger than the preset value.\n    if (!file.blobFile || (file === null || file === void 0 ? void 0 : (_file$blobFile = file.blobFile) === null || _file$blobFile === void 0 ? void 0 : _file$blobFile.size) > maxPreviewFileSize) {\n      return;\n    }\n    (0, _utils.previewFile)(file.blobFile, callback);\n  }, [file, listType, maxPreviewFileSize]);\n  (0, _react.useEffect)(function () {\n    if (!file.url) {\n      getThumbnail(function (previewImage) {\n        setPreviewImage(previewImage);\n      });\n    }\n  }, [file.url, getThumbnail]);\n  var handlePreview = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n    onPreview === null || onPreview === void 0 ? void 0 : onPreview(file, event);\n  }, [disabled, file, onPreview]);\n  var handleRemove = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n    onCancel === null || onCancel === void 0 ? void 0 : onCancel(file.fileKey, event);\n  }, [disabled, file.fileKey, onCancel]);\n  var handleReupload = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n    onReupload === null || onReupload === void 0 ? void 0 : onReupload(file, event);\n  }, [disabled, file, onReupload]);\n\n  /**\n   * Rendering progress bar\n   */\n  var renderProgressBar = function renderProgressBar() {\n    var _file$progress = file.progress,\n      progress = _file$progress === void 0 ? 0 : _file$progress,\n      status = file.status;\n    var show = !disabled && status === 'uploading';\n    var visibility = show ? 'visible' : 'hidden';\n    var wrapStyle = {\n      visibility: visibility\n    };\n    var progressbarStyle = {\n      width: progress + \"%\"\n    };\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('progress'),\n      style: wrapStyle,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 151,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('progress-bar'),\n      style: progressbarStyle,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 152,\n        columnNumber: 9\n      }\n    }));\n  };\n  var renderPreview = function renderPreview() {\n    var thumbnail = previewImage ? /*#__PURE__*/_react.default.createElement(\"img\", {\n      role: \"presentation\",\n      src: previewImage,\n      alt: file.name,\n      onClick: handlePreview,\n      \"aria-label\": \"Preview: \" + file.name,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 159,\n        columnNumber: 7\n      }\n    }) : /*#__PURE__*/_react.default.createElement(_Attachment.default, {\n      className: prefix('icon'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 167,\n        columnNumber: 7\n      }\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('preview'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 171,\n        columnNumber: 7\n      }\n    }, renderThumbnail ? renderThumbnail(file, thumbnail) : thumbnail);\n  };\n\n  /**\n   * Render the loading state.\n   */\n  var renderIcon = function renderIcon() {\n    var uploading = file.status === 'uploading';\n    var classes = prefix('icon-wrapper', {\n      'icon-loading': uploading\n    });\n    if (uploading) {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: classes,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 186,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(\"i\", {\n        className: prefix('icon'),\n        \"aria-label\": \"Uploading\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 187,\n          columnNumber: 11\n        }\n      }));\n    }\n    if (listType === 'picture' || listType === 'picture-text') {\n      return null;\n    }\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 197,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Attachment.default, {\n      className: prefix('icon'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 198,\n        columnNumber: 9\n      }\n    }));\n  };\n\n  /**\n   * Render the remove file button.\n   */\n  var renderRemoveButton = function renderRemoveButton() {\n    if (!removable) {\n      return null;\n    }\n    var closeLabel = 'Remove file';\n    if (locale !== null && locale !== void 0 && locale.removeFile) {\n      closeLabel = (locale === null || locale === void 0 ? void 0 : locale.removeFile) + (file !== null && file !== void 0 && file.name ? \": \" + (file === null || file === void 0 ? void 0 : file.name) : '');\n    }\n    return /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n      className: prefix('btn-remove'),\n      onClick: handleRemove,\n      tabIndex: -1,\n      locale: {\n        closeLabel: closeLabel\n      },\n      \"aria-hidden\": disabled,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 218,\n        columnNumber: 7\n      }\n    });\n  };\n\n  /**\n   * Render error messages.\n   */\n  var renderErrorStatus = function renderErrorStatus() {\n    if (file.status === 'error') {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('status'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 234,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(\"span\", {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 235,\n          columnNumber: 12\n        }\n      }, locale === null || locale === void 0 ? void 0 : locale.error), allowReupload && /*#__PURE__*/_react.default.createElement(\"a\", {\n        role: \"button\",\n        tabIndex: -1,\n        onClick: handleReupload,\n        \"aria-label\": \"Retry\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 237,\n          columnNumber: 13\n        }\n      }, /*#__PURE__*/_react.default.createElement(_Reload.default, {\n        className: prefix('icon-reupload'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 238,\n          columnNumber: 15\n        }\n      })));\n    }\n    return null;\n  };\n\n  /**\n   * Render file size.\n   */\n  var renderFileSize = function renderFileSize() {\n    if (file.status !== 'error' && file.blobFile) {\n      var _file$blobFile2;\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: prefix('size'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 252,\n          columnNumber: 14\n        }\n      }, formatSize(file === null || file === void 0 ? void 0 : (_file$blobFile2 = file.blobFile) === null || _file$blobFile2 === void 0 ? void 0 : _file$blobFile2.size));\n    }\n    return null;\n  };\n\n  /**\n   * Render file panel\n   */\n  var renderFilePanel = function renderFilePanel() {\n    var fileElement = /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('title'),\n      tabIndex: -1,\n      onClick: handlePreview,\n      \"aria-label\": \"Preview: \" + file.name,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 262,\n        columnNumber: 7\n      }\n    }, file.name);\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('panel'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 272,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 273,\n        columnNumber: 9\n      }\n    }, renderFileInfo ? renderFileInfo(file, fileElement) : fileElement, renderErrorStatus(), renderFileSize()));\n  };\n  if (listType === 'picture') {\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n      ref: ref,\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 284,\n        columnNumber: 7\n      }\n    }), renderIcon(), renderPreview(), renderErrorStatus(), renderRemoveButton());\n  }\n  if (listType === 'picture-text') {\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n      ref: ref,\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 295,\n        columnNumber: 7\n      }\n    }), renderIcon(), renderPreview(), renderFilePanel(), renderProgressBar(), renderRemoveButton());\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 306,\n      columnNumber: 5\n    }\n  }), renderIcon(), renderFilePanel(), renderProgressBar(), renderRemoveButton());\n});\nUploadFileItem.displayName = 'UploadFileItem';\nUploadFileItem.propTypes = {\n  locale: _propTypes.default.any,\n  file: _propTypes.default.object.isRequired,\n  listType: _propTypes.default.oneOf(['text', 'picture-text', 'picture']),\n  disabled: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  maxPreviewFileSize: _propTypes.default.number,\n  classPrefix: _propTypes.default.string,\n  removable: _propTypes.default.bool,\n  allowReupload: _propTypes.default.bool,\n  renderFileInfo: _propTypes.default.func,\n  renderThumbnail: _propTypes.default.func,\n  onCancel: _propTypes.default.func,\n  onPreview: _propTypes.default.func,\n  onReupload: _propTypes.default.func\n};\nvar _default = UploadFileItem;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Uploader/UploadFileItem.tsx?");
 
 /***/ }),
 
@@ -5042,7 +5053,7 @@ eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/h
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _enGB = _interopRequireDefault(__webpack_require__(/*! date-fns/locale/en-GB */ \"./node_modules/date-fns/esm/locale/en-GB/index.js\"));\nvar Calendar = {\n  sunday: 'Su',\n  monday: 'Mo',\n  tuesday: 'Tu',\n  wednesday: 'We',\n  thursday: 'Th',\n  friday: 'Fr',\n  saturday: 'Sa',\n  ok: 'OK',\n  today: 'Today',\n  yesterday: 'Yesterday',\n  hours: 'Hours',\n  minutes: 'Minutes',\n  seconds: 'Seconds',\n  /**\n   * Format of the string is based on Unicode Technical Standard #35:\n   * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\n   **/\n  formattedMonthPattern: 'MMM yyyy',\n  formattedDayPattern: 'dd MMM yyyy',\n  dateLocale: _enGB.default\n};\nvar _default = {\n  common: {\n    loading: 'Loading...',\n    emptyMessage: 'No data found'\n  },\n  Plaintext: {\n    unfilled: 'Unfilled',\n    notSelected: 'Not selected',\n    notUploaded: 'Not uploaded'\n  },\n  Pagination: {\n    more: 'More',\n    prev: 'Previous',\n    next: 'Next',\n    first: 'First',\n    last: 'Last',\n    limit: '{0} / page',\n    total: 'Total Rows: {0}',\n    skip: 'Go to{0}'\n  },\n  Calendar: Calendar,\n  DatePicker: (0, _extends2.default)({}, Calendar),\n  DateRangePicker: (0, _extends2.default)({}, Calendar, {\n    last7Days: 'Last 7 Days'\n  }),\n  Picker: {\n    noResultsText: 'No results found',\n    placeholder: 'Select',\n    searchPlaceholder: 'Search',\n    checkAll: 'All'\n  },\n  InputPicker: {\n    newItem: 'New item',\n    createOption: 'Create option \"{0}\"'\n  },\n  Uploader: {\n    inited: 'Initial',\n    progress: 'Uploading',\n    error: 'Error',\n    complete: 'Finished',\n    emptyFile: 'Empty',\n    upload: 'Upload'\n  },\n  CloseButton: {\n    closeLabel: 'Close'\n  },\n  Breadcrumb: {\n    expandText: 'Show path'\n  },\n  Toggle: {\n    on: 'Open',\n    off: 'Close'\n  }\n};\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/locales/default.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _enGB = _interopRequireDefault(__webpack_require__(/*! date-fns/locale/en-GB */ \"./node_modules/date-fns/esm/locale/en-GB/index.js\"));\nvar Calendar = {\n  sunday: 'Su',\n  monday: 'Mo',\n  tuesday: 'Tu',\n  wednesday: 'We',\n  thursday: 'Th',\n  friday: 'Fr',\n  saturday: 'Sa',\n  ok: 'OK',\n  today: 'Today',\n  yesterday: 'Yesterday',\n  hours: 'Hours',\n  minutes: 'Minutes',\n  seconds: 'Seconds',\n  /**\n   * Format of the string is based on Unicode Technical Standard #35:\n   * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\n   **/\n  formattedMonthPattern: 'MMM yyyy',\n  formattedDayPattern: 'dd MMM yyyy',\n  dateLocale: _enGB.default\n};\nvar _default = {\n  common: {\n    loading: 'Loading...',\n    emptyMessage: 'No data found',\n    remove: 'Remove',\n    clear: 'Clear'\n  },\n  Plaintext: {\n    unfilled: 'Unfilled',\n    notSelected: 'Not selected',\n    notUploaded: 'Not uploaded'\n  },\n  Pagination: {\n    more: 'More',\n    prev: 'Previous',\n    next: 'Next',\n    first: 'First',\n    last: 'Last',\n    limit: '{0} / page',\n    total: 'Total Rows: {0}',\n    skip: 'Go to{0}'\n  },\n  Calendar: Calendar,\n  DatePicker: (0, _extends2.default)({}, Calendar),\n  DateRangePicker: (0, _extends2.default)({}, Calendar, {\n    last7Days: 'Last 7 Days'\n  }),\n  Picker: {\n    noResultsText: 'No results found',\n    placeholder: 'Select',\n    searchPlaceholder: 'Search',\n    checkAll: 'All'\n  },\n  InputPicker: {\n    newItem: 'New item',\n    createOption: 'Create option \"{0}\"'\n  },\n  Uploader: {\n    inited: 'Initial',\n    progress: 'Uploading',\n    error: 'Error',\n    complete: 'Finished',\n    emptyFile: 'Empty',\n    upload: 'Upload',\n    removeFile: 'Remove file'\n  },\n  CloseButton: {\n    closeLabel: 'Close'\n  },\n  Breadcrumb: {\n    expandText: 'Show path'\n  },\n  Toggle: {\n    on: 'Open',\n    off: 'Close'\n  }\n};\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/locales/default.ts?");
 
 /***/ }),