rsuite 5.10.0 → 5.13.0

package/dist/rsuite.js

@@ -509,6 +509,28 @@ eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol
 
 /***/ }),
 
+/***/ "./node_modules/@rsuite/icon-font/lib/direction/ArrowDownLine.js":
+/*!***********************************************************************!*\
+  !*** ./node_modules/@rsuite/icon-font/lib/direction/ArrowDownLine.js ***!
+  \***********************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar React = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nfunction _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { \"default\": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj[\"default\"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction ArrowDownLine(props, svgRef) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    width: \"1em\",\n    height: \"1em\",\n    viewBox: \"0 0 16 16\",\n    fill: \"currentColor\",\n    ref: svgRef\n  }, props), /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M8 11a.997.997 0 01-.707-.293l-3-3a.999.999 0 111.414-1.414L8 8.586l2.293-2.293a.999.999 0 111.414 1.414l-3 3A.997.997 0 018 11z\"\n  }));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(ArrowDownLine);\nvar _default = ForwardRef;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./node_modules/@rsuite/icon-font/lib/direction/ArrowDownLine.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@rsuite/icon-font/lib/direction/ArrowLeftLine.js":
+/*!***********************************************************************!*\
+  !*** ./node_modules/@rsuite/icon-font/lib/direction/ArrowLeftLine.js ***!
+  \***********************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar React = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nfunction _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { \"default\": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj[\"default\"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction ArrowLeftLine(props, svgRef) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    width: \"1em\",\n    height: \"1em\",\n    viewBox: \"0 0 16 16\",\n    fill: \"currentColor\",\n    ref: svgRef\n  }, props), /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M9.707 5.707L7.415 8l2.292 2.293a.999.999 0 11-1.414 1.414l-3-3a.99.99 0 01-.277-.531l-.014-.117v-.118a.997.997 0 01.291-.648l3-3a.999.999 0 111.414 1.414z\"\n  }));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(ArrowLeftLine);\nvar _default = ForwardRef;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./node_modules/@rsuite/icon-font/lib/direction/ArrowLeftLine.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@rsuite/icon-font/lib/direction/ArrowRight.js":
 /*!********************************************************************!*\
   !*** ./node_modules/@rsuite/icon-font/lib/direction/ArrowRight.js ***!
@@ -520,6 +542,17 @@ eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol
 
 /***/ }),
 
+/***/ "./node_modules/@rsuite/icon-font/lib/direction/ArrowRightLine.js":
+/*!************************************************************************!*\
+  !*** ./node_modules/@rsuite/icon-font/lib/direction/ArrowRightLine.js ***!
+  \************************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar React = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nfunction _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { \"default\": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj[\"default\"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction ArrowRightLine(props, svgRef) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    width: \"1em\",\n    height: \"1em\",\n    viewBox: \"0 0 16 16\",\n    fill: \"currentColor\",\n    ref: svgRef\n  }, props), /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M6.293 10.293L8.585 8 6.293 5.707a.999.999 0 111.414-1.414l3 3a.99.99 0 01.277.531l.014.117v.118a.997.997 0 01-.291.648l-3 3a.999.999 0 11-1.414-1.414z\"\n  }));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(ArrowRightLine);\nvar _default = ForwardRef;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./node_modules/@rsuite/icon-font/lib/direction/ArrowRightLine.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@rsuite/icon-font/lib/direction/Sort.js":
 /*!**************************************************************!*\
   !*** ./node_modules/@rsuite/icon-font/lib/direction/Sort.js ***!
@@ -795,6 +828,28 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 
 /***/ }),
 
+/***/ "./node_modules/@rsuite/icons/ArrowDownLine.js":
+/*!*****************************************************!*\
+  !*** ./node_modules/@rsuite/icons/ArrowDownLine.js ***!
+  \*****************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nObject.defineProperty(exports, \"default\", ({\n  enumerable: true,\n  get: function get() {\n    return _ArrowDownLine[\"default\"];\n  }\n}));\n\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! ./lib/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/lib/icons/ArrowDownLine.js\"));\n\nfunction _interopRequireDefault(obj) {\n  return obj && obj.__esModule ? obj : { default: obj };\n}\n\n\n//# sourceURL=webpack://rsuite/./node_modules/@rsuite/icons/ArrowDownLine.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@rsuite/icons/ArrowLeftLine.js":
+/*!*****************************************************!*\
+  !*** ./node_modules/@rsuite/icons/ArrowLeftLine.js ***!
+  \*****************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nObject.defineProperty(exports, \"default\", ({\n  enumerable: true,\n  get: function get() {\n    return _ArrowLeftLine[\"default\"];\n  }\n}));\n\nvar _ArrowLeftLine = _interopRequireDefault(__webpack_require__(/*! ./lib/icons/ArrowLeftLine */ \"./node_modules/@rsuite/icons/lib/icons/ArrowLeftLine.js\"));\n\nfunction _interopRequireDefault(obj) {\n  return obj && obj.__esModule ? obj : { default: obj };\n}\n\n\n//# sourceURL=webpack://rsuite/./node_modules/@rsuite/icons/ArrowLeftLine.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@rsuite/icons/ArrowRight.js":
 /*!**************************************************!*\
   !*** ./node_modules/@rsuite/icons/ArrowRight.js ***!
@@ -806,6 +861,17 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 
 /***/ }),
 
+/***/ "./node_modules/@rsuite/icons/ArrowRightLine.js":
+/*!******************************************************!*\
+  !*** ./node_modules/@rsuite/icons/ArrowRightLine.js ***!
+  \******************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nObject.defineProperty(exports, \"default\", ({\n  enumerable: true,\n  get: function get() {\n    return _ArrowRightLine[\"default\"];\n  }\n}));\n\nvar _ArrowRightLine = _interopRequireDefault(__webpack_require__(/*! ./lib/icons/ArrowRightLine */ \"./node_modules/@rsuite/icons/lib/icons/ArrowRightLine.js\"));\n\nfunction _interopRequireDefault(obj) {\n  return obj && obj.__esModule ? obj : { default: obj };\n}\n\n\n//# sourceURL=webpack://rsuite/./node_modules/@rsuite/icons/ArrowRightLine.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@rsuite/icons/Check.js":
 /*!*********************************************!*\
   !*** ./node_modules/@rsuite/icons/Check.js ***!
@@ -1136,6 +1202,28 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./node_modules/@rsuite/icons/lib/icons/ArrowDownLine.js":
+/*!***************************************************************!*\
+  !*** ./node_modules/@rsuite/icons/lib/icons/ArrowDownLine.js ***!
+  \***************************************************************/
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _createSvgIcon = _interopRequireDefault(__webpack_require__(/*! ../createSvgIcon */ \"./node_modules/@rsuite/icons/lib/createSvgIcon.js\"));\n\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icon-font/lib/direction/ArrowDownLine */ \"./node_modules/@rsuite/icon-font/lib/direction/ArrowDownLine.js\"));\n\n// Generated by script, don't edit it please.\nvar ArrowDownLine = (0, _createSvgIcon[\"default\"])({\n  as: _ArrowDownLine[\"default\"],\n  ariaLabel: 'arrow down line',\n  category: 'direction',\n  displayName: 'ArrowDownLine'\n});\nvar _default = ArrowDownLine;\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://rsuite/./node_modules/@rsuite/icons/lib/icons/ArrowDownLine.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@rsuite/icons/lib/icons/ArrowLeftLine.js":
+/*!***************************************************************!*\
+  !*** ./node_modules/@rsuite/icons/lib/icons/ArrowLeftLine.js ***!
+  \***************************************************************/
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _createSvgIcon = _interopRequireDefault(__webpack_require__(/*! ../createSvgIcon */ \"./node_modules/@rsuite/icons/lib/createSvgIcon.js\"));\n\nvar _ArrowLeftLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icon-font/lib/direction/ArrowLeftLine */ \"./node_modules/@rsuite/icon-font/lib/direction/ArrowLeftLine.js\"));\n\n// Generated by script, don't edit it please.\nvar ArrowLeftLine = (0, _createSvgIcon[\"default\"])({\n  as: _ArrowLeftLine[\"default\"],\n  ariaLabel: 'arrow left line',\n  category: 'direction',\n  displayName: 'ArrowLeftLine'\n});\nvar _default = ArrowLeftLine;\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://rsuite/./node_modules/@rsuite/icons/lib/icons/ArrowLeftLine.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@rsuite/icons/lib/icons/ArrowRight.js":
 /*!************************************************************!*\
   !*** ./node_modules/@rsuite/icons/lib/icons/ArrowRight.js ***!
@@ -1147,6 +1235,17 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./node_modules/@rsuite/icons/lib/icons/ArrowRightLine.js":
+/*!****************************************************************!*\
+  !*** ./node_modules/@rsuite/icons/lib/icons/ArrowRightLine.js ***!
+  \****************************************************************/
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _createSvgIcon = _interopRequireDefault(__webpack_require__(/*! ../createSvgIcon */ \"./node_modules/@rsuite/icons/lib/createSvgIcon.js\"));\n\nvar _ArrowRightLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icon-font/lib/direction/ArrowRightLine */ \"./node_modules/@rsuite/icon-font/lib/direction/ArrowRightLine.js\"));\n\n// Generated by script, don't edit it please.\nvar ArrowRightLine = (0, _createSvgIcon[\"default\"])({\n  as: _ArrowRightLine[\"default\"],\n  ariaLabel: 'arrow right line',\n  category: 'direction',\n  displayName: 'ArrowRightLine'\n});\nvar _default = ArrowRightLine;\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://rsuite/./node_modules/@rsuite/icons/lib/icons/ArrowRightLine.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@rsuite/icons/lib/icons/Check.js":
 /*!*******************************************************!*\
   !*** ./node_modules/@rsuite/icons/lib/icons/Check.js ***!
@@ -1990,7 +2089,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.dropdownMenuPropTypes = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Spinner = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Spinner */ \"./node_modules/@rsuite/icons/legacy/Spinner.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\n\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\n\nvar _getPosition = _interopRequireDefault(__webpack_require__(/*! dom-lib/getPosition */ \"./node_modules/dom-lib/esm/getPosition.js\"));\n\nvar _scrollTop = _interopRequireDefault(__webpack_require__(/*! dom-lib/scrollTop */ \"./node_modules/dom-lib/esm/scrollTop.js\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Cascader/DropdownMenu.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\n\nvar DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      activeItemValue = props.activeItemValue,\n      classPrefix = props.classPrefix,\n      className = props.className,\n      _props$childrenKey = props.childrenKey,\n      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n      _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n      _props$menuWidth = props.menuWidth,\n      menuWidth = _props$menuWidth === void 0 ? 120 : _props$menuWidth,\n      _props$menuHeight = props.menuHeight,\n      menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,\n      _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$cascadeData = props.cascadeData,\n      cascadeData = _props$cascadeData === void 0 ? emptyArray : _props$cascadeData,\n      _props$cascadePaths = props.cascadePaths,\n      cascadePaths = _props$cascadePaths === void 0 ? emptyArray : _props$cascadePaths,\n      _props$labelKey = props.labelKey,\n      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n      renderMenu = props.renderMenu,\n      renderMenuItem = props.renderMenuItem,\n      onSelect = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"activeItemValue\", \"classPrefix\", \"className\", \"childrenKey\", \"disabledItemValues\", \"menuWidth\", \"menuHeight\", \"valueKey\", \"cascadeData\", \"cascadePaths\", \"labelKey\", \"renderMenu\", \"renderMenuItem\", \"onSelect\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, prefix('items'));\n  var rootRef = (0, _react.useRef)();\n  var rtl = (0, _utils.useCustom)('DropdownMenu');\n  (0, _react.useEffect)(function () {\n    var _rootRef$current;\n\n    var columns = ((_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelectorAll('[data-type=\"column\"]')) || [];\n    columns.forEach(function (column) {\n      if (!column) {\n        return;\n      }\n\n      var activeItem = column.querySelector(\".\" + prefix('item-focus'));\n\n      if (!activeItem) {\n        activeItem = column.querySelector(\".\" + prefix('item-active'));\n      }\n\n      if (activeItem) {\n        var position = (0, _getPosition.default)(activeItem, column); // Let the active option scroll into view.\n\n        (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);\n      }\n    });\n  }, [prefix]);\n  var getCascadePaths = (0, _react.useCallback)(function (layer, node) {\n    var paths = [];\n\n    for (var i = 0; i < cascadeData.length && i < layer; i += 1) {\n      if (i < layer - 1 && cascadePaths) {\n        paths.push(cascadePaths[i]);\n      }\n    }\n\n    paths.push(node);\n    return paths;\n  }, [cascadeData, cascadePaths]);\n\n  var handleSelect = function handleSelect(layer, node, event) {\n    var isLeafNode = (0, _isNil.default)(node[childrenKey]);\n    var cascadePaths = getCascadePaths(layer + 1, node);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);\n  };\n\n  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus) {\n    var children = node[childrenKey];\n    var value = node[valueKey];\n    var label = node[labelKey];\n    var disabled = disabledItemValues.some(function (disabledValue) {\n      return (0, _utils.shallowEqual)(disabledValue, value);\n    }); // Use `value` in keys when If `value` is string or number\n\n    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;\n    var Icon = node.loading ? _Spinner.default : rtl ? _AngleRight.default : _AngleLeft.default;\n    return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuItem, {\n      classPrefix: \"picker-cascader-menu-item\",\n      as: 'li',\n      key: layer + \"-\" + onlyKey,\n      disabled: disabled,\n      active: !(0, _isUndefined.default)(activeItemValue) && (0, _utils.shallowEqual)(activeItemValue, value),\n      focus: focus,\n      value: value,\n      className: children ? prefix('has-children') : undefined,\n      onSelect: function onSelect(_value, event) {\n        return handleSelect(layer, node, event);\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 124,\n        columnNumber: 9\n      }\n    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {\n      className: prefix('caret'),\n      spin: node.loading,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 136,\n        columnNumber: 23\n      }\n    }) : null);\n  };\n\n  var styles = {\n    width: cascadeData.length * menuWidth\n  };\n  var cascadeNodes = cascadeData.map(function (children, layer) {\n    var onlyKey = layer + \"_\" + children.length;\n\n    var menu = /*#__PURE__*/_react.default.createElement(\"ul\", {\n      role: \"listbox\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 145,\n        columnNumber: 9\n      }\n    }, children.map(function (item, index) {\n      return renderCascadeNode(item, index, layer, cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]));\n    }));\n\n    var parentNode = cascadePaths[layer - 1];\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: onlyKey,\n      className: prefix('column'),\n      \"data-layer\": layer,\n      \"data-type\": 'column',\n      style: {\n        height: menuHeight,\n        width: menuWidth\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 159,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: (0, _utils.mergeRefs)(rootRef, ref),\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 172,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 173,\n      columnNumber: 9\n    }\n  }, cascadeNodes));\n});\n\nvar dropdownMenuPropTypes = {\n  classPrefix: _propTypes.default.string,\n  disabledItemValues: _propTypes.default.array,\n  activeItemValue: _propTypes.default.any,\n  childrenKey: _propTypes.default.string,\n  valueKey: _propTypes.default.string,\n  labelKey: _propTypes.default.string,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  className: _propTypes.default.string,\n  renderMenuItem: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  cascadeData: _propTypes.default.array,\n  cascadePaths: _propTypes.default.array\n};\nexports.dropdownMenuPropTypes = dropdownMenuPropTypes;\nDropdownMenu.displayName = 'DropdownMenu';\nDropdownMenu.propTypes = dropdownMenuPropTypes;\nvar _default = DropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/DropdownMenu.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.dropdownMenuPropTypes = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Spinner = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Spinner */ \"./node_modules/@rsuite/icons/legacy/Spinner.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\n\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\n\nvar _getPosition = _interopRequireDefault(__webpack_require__(/*! dom-lib/getPosition */ \"./node_modules/dom-lib/esm/getPosition.js\"));\n\nvar _scrollTop = _interopRequireDefault(__webpack_require__(/*! dom-lib/scrollTop */ \"./node_modules/dom-lib/esm/scrollTop.js\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Cascader/DropdownMenu.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\n\nvar DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      activeItemValue = props.activeItemValue,\n      classPrefix = props.classPrefix,\n      className = props.className,\n      _props$childrenKey = props.childrenKey,\n      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n      _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n      _props$menuWidth = props.menuWidth,\n      menuWidth = _props$menuWidth === void 0 ? 120 : _props$menuWidth,\n      _props$menuHeight = props.menuHeight,\n      menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,\n      _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$cascadeData = props.cascadeData,\n      cascadeData = _props$cascadeData === void 0 ? emptyArray : _props$cascadeData,\n      _props$cascadePaths = props.cascadePaths,\n      cascadePaths = _props$cascadePaths === void 0 ? emptyArray : _props$cascadePaths,\n      _props$labelKey = props.labelKey,\n      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n      renderMenu = props.renderMenu,\n      renderMenuItem = props.renderMenuItem,\n      onSelect = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"activeItemValue\", \"classPrefix\", \"className\", \"childrenKey\", \"disabledItemValues\", \"menuWidth\", \"menuHeight\", \"valueKey\", \"cascadeData\", \"cascadePaths\", \"labelKey\", \"renderMenu\", \"renderMenuItem\", \"onSelect\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, prefix('items'));\n  var rootRef = (0, _react.useRef)();\n  var rtl = (0, _utils.useCustom)('DropdownMenu');\n  (0, _react.useEffect)(function () {\n    var _rootRef$current;\n\n    var columns = ((_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelectorAll('[data-type=\"column\"]')) || [];\n    columns.forEach(function (column) {\n      if (!column) {\n        return;\n      }\n\n      var activeItem = column.querySelector(\".\" + prefix('item-focus'));\n\n      if (!activeItem) {\n        activeItem = column.querySelector(\".\" + prefix('item-active'));\n      }\n\n      if (activeItem) {\n        var position = (0, _getPosition.default)(activeItem, column); // Let the active option scroll into view.\n\n        (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);\n      }\n    });\n  }, [prefix]);\n  var getCascadePaths = (0, _react.useCallback)(function (layer, node) {\n    var paths = [];\n\n    for (var i = 0; i < cascadeData.length && i < layer; i += 1) {\n      if (i < layer - 1 && cascadePaths) {\n        paths.push(cascadePaths[i]);\n      }\n    }\n\n    paths.push(node);\n    return paths;\n  }, [cascadeData, cascadePaths]);\n\n  var handleSelect = function handleSelect(layer, node, event) {\n    var isLeafNode = (0, _isNil.default)(node[childrenKey]);\n    var cascadePaths = getCascadePaths(layer + 1, node);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);\n  };\n\n  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus) {\n    var children = node[childrenKey];\n    var value = node[valueKey];\n    var label = node[labelKey];\n    var disabled = disabledItemValues.some(function (disabledValue) {\n      return (0, _utils.shallowEqual)(disabledValue, value);\n    }); // Use `value` in keys when If `value` is string or number\n\n    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;\n    var Icon = node.loading ? _Spinner.default : rtl ? _AngleRight.default : _AngleLeft.default;\n    return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuItem, {\n      classPrefix: \"picker-cascader-menu-item\",\n      as: 'li',\n      role: \"treeitem\",\n      key: layer + \"-\" + onlyKey,\n      disabled: disabled,\n      active: !(0, _isUndefined.default)(activeItemValue) && (0, _utils.shallowEqual)(activeItemValue, value),\n      focus: focus,\n      value: value,\n      \"aria-owns\": node.children ? 'treeitem-' + value + '-children' : undefined,\n      className: children ? prefix('has-children') : undefined,\n      onSelect: function onSelect(_value, event) {\n        return handleSelect(layer, node, event);\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 124,\n        columnNumber: 9\n      }\n    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {\n      className: prefix('caret'),\n      spin: node.loading,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 138,\n        columnNumber: 23\n      }\n    }) : null);\n  };\n\n  var styles = {\n    width: cascadeData.length * menuWidth\n  };\n  var cascadeNodes = cascadeData.map(function (children, layer) {\n    var onlyKey = layer + \"_\" + children.length;\n    var parentNode = cascadePaths[layer - 1];\n\n    var menu = /*#__PURE__*/_react.default.createElement(\"ul\", {\n      role: layer === 0 ? 'none presentation' : 'group',\n      id: parentNode ? 'treeitem-' + parentNode[valueKey] + '-children' : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 151,\n        columnNumber: 9\n      }\n    }, children.map(function (item, index) {\n      return renderCascadeNode(item, index, layer, cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]));\n    }));\n\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: onlyKey,\n      className: prefix('column'),\n      \"data-layer\": layer,\n      \"data-type\": 'column',\n      style: {\n        height: menuHeight,\n        width: menuWidth\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 167,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"tree\"\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(rootRef, ref),\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 180,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 181,\n      columnNumber: 9\n    }\n  }, cascadeNodes));\n});\n\nvar dropdownMenuPropTypes = {\n  classPrefix: _propTypes.default.string,\n  disabledItemValues: _propTypes.default.array,\n  activeItemValue: _propTypes.default.any,\n  childrenKey: _propTypes.default.string,\n  valueKey: _propTypes.default.string,\n  labelKey: _propTypes.default.string,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  className: _propTypes.default.string,\n  renderMenuItem: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  cascadeData: _propTypes.default.array,\n  cascadePaths: _propTypes.default.array\n};\nexports.dropdownMenuPropTypes = dropdownMenuPropTypes;\nDropdownMenu.displayName = 'DropdownMenu';\nDropdownMenu.propTypes = dropdownMenuPropTypes;\nvar _default = DropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/DropdownMenu.tsx?");
 
 /***/ }),
 
@@ -2353,7 +2452,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\n\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\n\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\n\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n    _this = void 0;\n\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      className = props.className,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      _props$character = props.character,\n      character = _props$character === void 0 ? ' ~ ' : _props$character,\n      defaultCalendarValue = props.defaultCalendarValue,\n      defaultValue = props.defaultValue,\n      disabled = props.disabled,\n      disabledDateProp = props.disabledDate,\n      _props$format = props.format,\n      formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n      hoverRange = props.hoverRange,\n      _props$isoWeek = props.isoWeek,\n      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n      _props$limitEndYear = props.limitEndYear,\n      limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n      overrideLocale = props.locale,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      oneTap = props.oneTap,\n      _props$placeholder = props.placeholder,\n      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      ranges = props.ranges,\n      renderValue = props.renderValue,\n      _props$showOneCalenda = props.showOneCalendar,\n      showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n      showWeekNumbers = props.showWeekNumbers,\n      showMeridian = props.showMeridian,\n      style = props.style,\n      toggleAs = props.toggleAs,\n      caretAs = props.caretAs,\n      valueProp = props.value,\n      onChange = props.onChange,\n      onClean = props.onClean,\n      onClose = props.onClose,\n      onEnter = props.onEnter,\n      onEntered = props.onEntered,\n      onExited = props.onExited,\n      onOk = props.onOk,\n      onOpen = props.onOpen,\n      onSelect = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"disabled\", \"disabledDate\", \"format\", \"hoverRange\", \"isoWeek\", \"limitEndYear\", \"locale\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"renderValue\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"style\", \"toggleAs\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onClose\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onOpen\", \"onSelect\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n      locale = _useCustom.locale,\n      formatDate = _useCustom.formatDate,\n      parseDate = _useCustom.parseDate;\n\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n\n\n  var hasDoneSelect = (0, _react.useRef)(true);\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n\n  var _useState = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n      selectedDates = _useState[0],\n      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n\n\n  var _useState2 = (0, _react.useState)(null),\n      hoverDateRange = _useState2[0],\n      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.\n\n\n  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({\n    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n  })),\n      calendarDate = _useState3[0],\n      setCalendarDate = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(),\n      inputState = _useState4[0],\n      setInputState = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n\n\n  var selectRangeValueRef = (0, _react.useRef)(null);\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n\n  var updateCalendarDate = (0, _react.useCallback)(function (value) {\n    setCalendarDate((0, _utils2.getCalendarDate)({\n      value: value\n    }));\n  }, []); // if valueProp changed then update selectValue/hoverValue\n\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n\n  var _useState5 = (0, _react.useState)(false),\n      isPickerToggleActive = _useState5[0],\n      setPickerToggleActive = _useState5[1];\n\n  var rootRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var handleCloseDropdown = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    rootRef: rootRef\n  });\n  var getDisplayString = (0, _react.useCallback)(function (nextValue, isPlaintext) {\n    var _nextValue$, _nextValue$2;\n\n    var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;\n    var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;\n\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n\n      if (isPlaintext) {\n        return formatDate(displayValue[0], formatStr) + character + formatDate(displayValue[1], formatStr);\n      }\n\n      return renderValue ? renderValue(displayValue, formatStr) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[0],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 271,\n          columnNumber: 13\n        }\n      }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[1],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 273,\n          columnNumber: 13\n        }\n      }));\n    }\n\n    return isPlaintext ? '' : placeholder || rangeFormatStr;\n  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);\n  /**\n   * preset hover range\n   */\n\n  var getHoverRangeValue = (0, _react.useCallback)(function (date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n\n      return hoverRange;\n    }\n\n    var hoverRangeFunc = getHoverRangeFunc();\n\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n\n    if (!isHoverRangeValid) {\n      return null;\n    }\n\n    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {\n      hoverValues.reverse();\n    }\n\n    return hoverValues;\n  }, [hoverRange, isoWeek]);\n  var handleValueUpdate = (0, _react.useCallback)(function (event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    } // `closeOverlay` default value is `true`\n\n\n    if (closeOverlay !== false) {\n      handleCloseDropdown();\n    }\n  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n\n  var handleMouseMove = (0, _react.useCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date); // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n\n    if (!hasDoneSelect.current) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n\n        if (_utils.DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      } // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  }, [getHoverRangeValue]);\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n\n  var handleSelectDate = (0, _react.useCallback)(function (date, event) {\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode\n\n    if (hasDoneSelect.current && oneTap) {\n      handleValueUpdate(event, noHoverRangeValid ? [(0, _utils2.setTimingMargin)(date), (0, _utils2.setTimingMargin)(date, 'right')] : hoverRangeValue);\n      hasDoneSelect.current = false;\n      return;\n    } // no preset hover range can use\n\n\n    if (noHoverRangeValid) {\n      // start select\n      if (hasDoneSelect.current) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!hasDoneSelect.current) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    } // If user have completed the selection, then sort\n\n\n    if (nextSelectDates.length === 2 && _utils.DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {\n      nextSelectDates.reverse();\n    }\n\n    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);\n    setSelectedDates(nextSelectDates);\n    updateCalendarDate(nextSelectDates);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    hasDoneSelect.current = !hasDoneSelect.current;\n  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDate]);\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var handleChangeCalendarDate = (0, _react.useCallback)(function (index, date) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    updateCalendarDate(nextCalendarDate);\n  }, [calendarDate, updateCalendarDate]);\n  var handleChangeCalendarTime = (0, _react.useCallback)(function (index, date) {\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n      var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day\n\n      if (next[index]) {\n        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());\n      }\n\n      next[index] = clonedDate;\n      return next;\n    });\n    handleChangeCalendarDate(index, date);\n  }, [handleChangeCalendarDate]);\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n\n  var handleToggleMeridian = (0, _react.useCallback)(function (index) {\n    var next = Array.from(calendarDate);\n    var clonedDate = new Date(next[index].valueOf());\n\n    var hours = _utils.DateUtils.getHours(clonedDate);\n\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    next[index] = _utils.DateUtils.setHours(clonedDate, nextHours);\n    setCalendarDate(next); // If the value already exists, update the value again.\n\n    if (selectedDates.length === 2) {\n      setSelectedDates(next);\n    }\n  }, [calendarDate, selectedDates]);\n  /**\n   * Toolbar operation callback function\n   */\n\n  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n\n    handleValueUpdate(event, value, closeOverlay);\n  }, [handleValueUpdate]);\n  var handleOK = (0, _react.useCallback)(function (event) {\n    handleValueUpdate(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  }, [handleValueUpdate, onOk, selectedDates]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    updateCalendarDate(null);\n    handleValueUpdate(event, null);\n  }, [handleValueUpdate, updateCalendarDate]);\n  /**\n   * Callback after the input box value is changed.\n   */\n\n  var handleInputChange = (0, _react.useCallback)(function (value) {\n    setInputState('Typing');\n    var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n\n    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr, {\n      locale: locale.dateLocale\n    }) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n\n    var startDate = parseDate(rangeValue[0], formatStr);\n    var endDate = parseDate(rangeValue[1], formatStr);\n    var selectValue = [startDate, endDate];\n\n    if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {\n      setInputState('Error');\n      return;\n    }\n\n    if (isDateDisabled(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {\n      setInputState('Error');\n      return;\n    }\n\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    updateCalendarDate(selectValue);\n  }, // eslint-disable-next-line react-hooks/exhaustive-deps\n  [character, rangeFormatStr, updateCalendarDate]);\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);\n    }\n\n    setInputState('Initial');\n  }, [handleValueUpdate, selectedDates, inputState]);\n  var handleEnter = (0, _react.useCallback)(function () {\n    var nextCalendarDate;\n\n    if (value && value.length) {\n      var _startDate = value[0],\n          endData = value[1];\n      nextCalendarDate = [_startDate, (0, _dateUtils.isSameMonth)(_startDate, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      nextCalendarDate = (0, _utils2.getCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    updateCalendarDate(nextCalendarDate);\n  }, [defaultCalendarValue, updateCalendarDate, setSelectedDates, value]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setPickerToggleActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setPickerToggleActive(false);\n    hasDoneSelect.current = true;\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose]);\n  var isDateDisabled = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {\n    var _disabledDateProp;\n\n    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;\n  }, [disabledDateProp]);\n  var disabledByBetween = (0, _react.useCallback)(function (start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {\n      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {\n        return true;\n      }\n\n      start = _utils.DateUtils.addDays(start, 1);\n    }\n\n    return false;\n  }, [isDateDisabled, selectedDates]);\n  var disabledOkButton = (0, _react.useCallback)(function () {\n    var start = selectedDates[0],\n        end = selectedDates[1];\n\n    if (!start || !end || !hasDoneSelect.current) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  }, [disabledByBetween, selectedDates]);\n  var disabledShortcutButton = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n\n    var _value = value,\n        start = _value[0],\n        end = _value[1];\n\n    if (!start || !end) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  }, [disabledByBetween]);\n  var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {\n    return isDateDisabled(date, values, hasDoneSelect.current, type);\n  }, [isDateDisabled]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    active: isPickerToggleActive,\n    onExit: handleClean\n  }, rest));\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('daterange-menu'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var panelProps = {\n      calendarDate: calendarDate,\n      disabledDate: handleDisabledDate,\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      locale: locale,\n      showOneCalendar: showOneCalendar,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarDate: handleChangeCalendarDate,\n      onChangeCalendarTime: handleChangeCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian\n    };\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      target: triggerRef,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 712,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 718,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 719,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 720,\n        columnNumber: 13\n      }\n    }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 721,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, panelProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 722,\n        columnNumber: 15\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, panelProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 723,\n        columnNumber: 36\n      }\n    })))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disabledOkBtn: disabledOkButton,\n      disabledShortcut: disabledShortcutButton,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onClickShortcut: handleShortcutPageDate,\n      ranges: ranges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 726,\n        columnNumber: 11\n      }\n    })));\n  };\n\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n    classPrefix: classPrefix,\n    name: 'daterange',\n    appearance: appearance,\n    hasValue: hasValue,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 752,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: rootRef,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = inputState === 'Error', _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 761,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    input: true,\n    inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),\n    inputValue: value ? getDisplayString(value, true) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: isPickerToggleActive,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs || _Calendar.default,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 768,\n      columnNumber: 9\n    }\n  }), getDisplayString(value))));\n});\n\nDateRangePicker.after = disabledDateUtils.after;\nDateRangePicker.afterToday = disabledDateUtils.afterToday;\nDateRangePicker.allowedDays = disabledDateUtils.allowedDays;\nDateRangePicker.allowedMaxDays = disabledDateUtils.allowedMaxDays;\nDateRangePicker.allowedRange = disabledDateUtils.allowedRange;\nDateRangePicker.before = disabledDateUtils.before;\nDateRangePicker.beforeToday = disabledDateUtils.beforeToday;\nDateRangePicker.combine = disabledDateUtils.combine;\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([_propTypes.default.oneOf(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\n\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\n\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\n\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n    _this = void 0;\n\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      className = props.className,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      _props$character = props.character,\n      character = _props$character === void 0 ? ' ~ ' : _props$character,\n      defaultCalendarValue = props.defaultCalendarValue,\n      defaultValue = props.defaultValue,\n      disabled = props.disabled,\n      disabledDateProp = props.disabledDate,\n      _props$format = props.format,\n      formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n      hoverRange = props.hoverRange,\n      _props$isoWeek = props.isoWeek,\n      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n      _props$limitEndYear = props.limitEndYear,\n      limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n      overrideLocale = props.locale,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      oneTap = props.oneTap,\n      _props$placeholder = props.placeholder,\n      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      ranges = props.ranges,\n      renderValue = props.renderValue,\n      _props$showOneCalenda = props.showOneCalendar,\n      showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n      showWeekNumbers = props.showWeekNumbers,\n      showMeridian = props.showMeridian,\n      style = props.style,\n      toggleAs = props.toggleAs,\n      caretAs = props.caretAs,\n      valueProp = props.value,\n      onChange = props.onChange,\n      onClean = props.onClean,\n      onClose = props.onClose,\n      onEnter = props.onEnter,\n      onEntered = props.onEntered,\n      onExited = props.onExited,\n      onOk = props.onOk,\n      onOpen = props.onOpen,\n      onSelect = props.onSelect,\n      renderTitle = props.renderTitle,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"disabled\", \"disabledDate\", \"format\", \"hoverRange\", \"isoWeek\", \"limitEndYear\", \"locale\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"renderValue\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"style\", \"toggleAs\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onClose\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onOpen\", \"onSelect\", \"renderTitle\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n      locale = _useCustom.locale,\n      formatDate = _useCustom.formatDate,\n      parseDate = _useCustom.parseDate;\n\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n\n\n  var hasDoneSelect = (0, _react.useRef)(true);\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n\n  var _useState = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n      selectedDates = _useState[0],\n      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n\n\n  var _useState2 = (0, _react.useState)(null),\n      hoverDateRange = _useState2[0],\n      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.\n\n\n  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({\n    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n  })),\n      calendarDate = _useState3[0],\n      setCalendarDate = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(),\n      inputState = _useState4[0],\n      setInputState = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n\n\n  var selectRangeValueRef = (0, _react.useRef)(null);\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n\n  var updateCalendarDate = (0, _react.useCallback)(function (value) {\n    setCalendarDate((0, _utils2.getCalendarDate)({\n      value: value\n    }));\n  }, []); // if valueProp changed then update selectValue/hoverValue\n\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n\n  var _useState5 = (0, _react.useState)(false),\n      isPickerToggleActive = _useState5[0],\n      setPickerToggleActive = _useState5[1];\n\n  var rootRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var handleCloseDropdown = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    rootRef: rootRef\n  });\n  var getDisplayString = (0, _react.useCallback)(function (nextValue, isPlaintext) {\n    var _nextValue$, _nextValue$2;\n\n    var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;\n    var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;\n\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n\n      if (isPlaintext) {\n        return formatDate(displayValue[0], formatStr) + character + formatDate(displayValue[1], formatStr);\n      }\n\n      return renderValue ? renderValue(displayValue, formatStr) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[0],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 275,\n          columnNumber: 13\n        }\n      }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[1],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 277,\n          columnNumber: 13\n        }\n      }));\n    }\n\n    return isPlaintext ? '' : placeholder || rangeFormatStr;\n  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);\n  /**\n   * preset hover range\n   */\n\n  var getHoverRangeValue = (0, _react.useCallback)(function (date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n\n      return hoverRange;\n    }\n\n    var hoverRangeFunc = getHoverRangeFunc();\n\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n\n    if (!isHoverRangeValid) {\n      return null;\n    }\n\n    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {\n      hoverValues.reverse();\n    }\n\n    return hoverValues;\n  }, [hoverRange, isoWeek]);\n  var handleValueUpdate = (0, _react.useCallback)(function (event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    } // `closeOverlay` default value is `true`\n\n\n    if (closeOverlay !== false) {\n      handleCloseDropdown();\n    }\n  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n\n  var handleMouseMove = (0, _react.useCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date); // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n\n    if (!hasDoneSelect.current) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n\n        if (_utils.DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      } // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  }, [getHoverRangeValue]);\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n\n  var handleSelectDate = (0, _react.useCallback)(function (date, event) {\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode\n\n    if (hasDoneSelect.current && oneTap) {\n      handleValueUpdate(event, noHoverRangeValid ? [(0, _utils2.setTimingMargin)(date), (0, _utils2.setTimingMargin)(date, 'right')] : hoverRangeValue);\n      hasDoneSelect.current = false;\n      return;\n    } // no preset hover range can use\n\n\n    if (noHoverRangeValid) {\n      // start select\n      if (hasDoneSelect.current) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!hasDoneSelect.current) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    } // If user have completed the selection, then sort\n\n\n    if (nextSelectDates.length === 2 && _utils.DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {\n      nextSelectDates.reverse();\n    }\n\n    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);\n    setSelectedDates(nextSelectDates);\n    updateCalendarDate(nextSelectDates);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    hasDoneSelect.current = !hasDoneSelect.current;\n  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDate]);\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var handleChangeCalendarDate = (0, _react.useCallback)(function (index, date) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    updateCalendarDate(nextCalendarDate);\n  }, [calendarDate, updateCalendarDate]);\n  var handleChangeCalendarTime = (0, _react.useCallback)(function (index, date) {\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n      var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day\n\n      if (next[index]) {\n        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());\n      }\n\n      next[index] = clonedDate;\n      return next;\n    });\n    handleChangeCalendarDate(index, date);\n  }, [handleChangeCalendarDate]);\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n\n  var handleToggleMeridian = (0, _react.useCallback)(function (index) {\n    var next = Array.from(calendarDate);\n    var clonedDate = new Date(next[index].valueOf());\n\n    var hours = _utils.DateUtils.getHours(clonedDate);\n\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    next[index] = _utils.DateUtils.setHours(clonedDate, nextHours);\n    setCalendarDate(next); // If the value already exists, update the value again.\n\n    if (selectedDates.length === 2) {\n      setSelectedDates(next);\n    }\n  }, [calendarDate, selectedDates]);\n  /**\n   * Toolbar operation callback function\n   */\n\n  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n\n    handleValueUpdate(event, value, closeOverlay);\n  }, [handleValueUpdate]);\n  var handleOK = (0, _react.useCallback)(function (event) {\n    handleValueUpdate(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  }, [handleValueUpdate, onOk, selectedDates]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    updateCalendarDate(null);\n    handleValueUpdate(event, null);\n  }, [handleValueUpdate, updateCalendarDate]);\n  /**\n   * Callback after the input box value is changed.\n   */\n\n  var handleInputChange = (0, _react.useCallback)(function (value) {\n    setInputState('Typing');\n    var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n\n    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr, {\n      locale: locale.dateLocale\n    }) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n\n    var startDate = parseDate(rangeValue[0], formatStr);\n    var endDate = parseDate(rangeValue[1], formatStr);\n    var selectValue = [startDate, endDate];\n\n    if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {\n      setInputState('Error');\n      return;\n    }\n\n    if (isDateDisabled(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {\n      setInputState('Error');\n      return;\n    }\n\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    updateCalendarDate(selectValue);\n  }, // eslint-disable-next-line react-hooks/exhaustive-deps\n  [character, rangeFormatStr, updateCalendarDate]);\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);\n    }\n\n    setInputState('Initial');\n  }, [handleValueUpdate, selectedDates, inputState]);\n  var handleEnter = (0, _react.useCallback)(function () {\n    var nextCalendarDate;\n\n    if (value && value.length) {\n      var _startDate = value[0],\n          endData = value[1];\n      nextCalendarDate = [_startDate, (0, _dateUtils.isSameMonth)(_startDate, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      nextCalendarDate = (0, _utils2.getCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    updateCalendarDate(nextCalendarDate);\n  }, [defaultCalendarValue, updateCalendarDate, setSelectedDates, value]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setPickerToggleActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setPickerToggleActive(false);\n    hasDoneSelect.current = true;\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose]);\n  var isDateDisabled = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {\n    var _disabledDateProp;\n\n    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;\n  }, [disabledDateProp]);\n  var disabledByBetween = (0, _react.useCallback)(function (start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {\n      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {\n        return true;\n      }\n\n      start = _utils.DateUtils.addDays(start, 1);\n    }\n\n    return false;\n  }, [isDateDisabled, selectedDates]);\n  var disabledOkButton = (0, _react.useCallback)(function () {\n    var start = selectedDates[0],\n        end = selectedDates[1];\n\n    if (!start || !end || !hasDoneSelect.current) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  }, [disabledByBetween, selectedDates]);\n  var disabledShortcutButton = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n\n    var _value = value,\n        start = _value[0],\n        end = _value[1];\n\n    if (!start || !end) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  }, [disabledByBetween]);\n  var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {\n    return isDateDisabled(date, values, hasDoneSelect.current, type);\n  }, [isDateDisabled]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    active: isPickerToggleActive,\n    onExit: handleClean\n  }, rest));\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('daterange-menu'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var panelProps = {\n      calendarDate: calendarDate,\n      disabledDate: handleDisabledDate,\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      locale: locale,\n      showOneCalendar: showOneCalendar,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarDate: handleChangeCalendarDate,\n      onChangeCalendarTime: handleChangeCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian,\n      renderTitle: renderTitle\n    };\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      target: triggerRef,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 717,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 723,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 724,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 725,\n        columnNumber: 13\n      }\n    }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 726,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, panelProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 727,\n        columnNumber: 15\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, panelProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 728,\n        columnNumber: 36\n      }\n    })))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disabledOkBtn: disabledOkButton,\n      disabledShortcut: disabledShortcutButton,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onClickShortcut: handleShortcutPageDate,\n      ranges: ranges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 731,\n        columnNumber: 11\n      }\n    })));\n  };\n\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n    classPrefix: classPrefix,\n    name: 'daterange',\n    appearance: appearance,\n    hasValue: hasValue,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 757,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: rootRef,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = inputState === 'Error', _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 766,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    input: true,\n    inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),\n    inputValue: value ? getDisplayString(value, true) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: isPickerToggleActive,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs || _Calendar.default,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 773,\n      columnNumber: 9\n    }\n  }), getDisplayString(value))));\n});\n\nDateRangePicker.after = disabledDateUtils.after;\nDateRangePicker.afterToday = disabledDateUtils.afterToday;\nDateRangePicker.allowedDays = disabledDateUtils.allowedDays;\nDateRangePicker.allowedMaxDays = disabledDateUtils.allowedMaxDays;\nDateRangePicker.allowedRange = disabledDateUtils.allowedRange;\nDateRangePicker.before = disabledDateUtils.before;\nDateRangePicker.beforeToday = disabledDateUtils.beforeToday;\nDateRangePicker.combine = disabledDateUtils.combine;\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([_propTypes.default.oneOf(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
 
 /***/ }),
 
@@ -2507,7 +2606,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/Dropdown/DropdownMenu.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _DropdownItem = _interopRequireDefault(__webpack_require__(/*! ./DropdownItem */ \"./src/Dropdown/DropdownItem.tsx\"));\n\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\n\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menu */ \"./src/Menu/Menu.tsx\"));\n\nvar _DropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./DropdownToggle */ \"./src/Dropdown/DropdownToggle.tsx\"));\n\nvar _MenuContext = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuContext */ \"./src/Menu/MenuContext.ts\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _Navbar = __webpack_require__(/*! ../Navbar */ \"./src/Navbar/index.tsx\");\n\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../Disclosure/Disclosure */ \"./src/Disclosure/Disclosure.tsx\"));\n\nvar _SidenavDropdown = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavDropdown */ \"./src/Sidenav/SidenavDropdown.tsx\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _DropdownState = __webpack_require__(/*! ./DropdownState */ \"./src/Dropdown/DropdownState.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/Dropdown.tsx\",\n    _this = void 0;\n\n/**\n * The <Dropdown> API\n * When used inside <Sidenav>, renders a <TreeviewRootItem>;\n * Otherwise renders a <MenuRoot>\n */\nvar Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var activeKey = props.activeKey,\n      onSelectProp = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"activeKey\", \"onSelect\"]);\n  var _rest$as = rest.as,\n      Component = _rest$as === void 0 ? 'div' : _rest$as,\n      title = rest.title,\n      onClose = rest.onClose,\n      onOpen = rest.onOpen,\n      onToggle = rest.onToggle,\n      eventKey = rest.eventKey,\n      _rest$trigger = rest.trigger,\n      trigger = _rest$trigger === void 0 ? 'click' : _rest$trigger,\n      _rest$placement = rest.placement,\n      placement = _rest$placement === void 0 ? 'bottomStart' : _rest$placement,\n      toggleAs = rest.toggleAs,\n      toggleClassName = rest.toggleClassName,\n      open = rest.open,\n      defaultOpen = rest.defaultOpen,\n      _rest$classPrefix = rest.classPrefix,\n      classPrefix = _rest$classPrefix === void 0 ? 'dropdown' : _rest$classPrefix,\n      className = rest.className,\n      disabled = rest.disabled,\n      children = rest.children,\n      menuStyle = rest.menuStyle,\n      style = rest.style,\n      toggleProps = (0, _objectWithoutPropertiesLoose2.default)(rest, [\"as\", \"title\", \"onClose\", \"onOpen\", \"onToggle\", \"eventKey\", \"trigger\", \"placement\", \"toggleAs\", \"toggleClassName\", \"open\", \"defaultOpen\", \"classPrefix\", \"className\", \"disabled\", \"children\", \"menuStyle\", \"style\"]);\n\n  var _useContext = (0, _react.useContext)(_NavContext.default),\n      onSelectFromNav = _useContext.onSelect;\n\n  var emitSelect = (0, _react.useCallback)(function (eventKey, event) {\n    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event); // If <Dropdown> is inside <Nav>, also trigger `onSelect` on <Nav>\n\n    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);\n  }, [onSelectProp, onSelectFromNav]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  var _useClassNames3 = (0, _utils.useClassNames)('nav-item'),\n      withNavItemClassPrefix = _useClassNames3.withClassPrefix,\n      mergeNavItemClassNames = _useClassNames3.merge;\n\n  var menuButtonTriggers = (0, _react.useMemo)(function () {\n    if (!trigger) {\n      return undefined;\n    }\n\n    var triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n\n    return trigger.map(function (t) {\n      return triggerMap[t];\n    });\n  }, [trigger]);\n  var parentMenu = (0, _react.useContext)(_MenuContext.default);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n\n  var _useReducer = (0, _react.useReducer)(_DropdownState.reducer, _DropdownState.initialState),\n      items = _useReducer[0].items,\n      dispatch = _useReducer[1];\n\n  var hasSelectedItem = (0, _react.useMemo)(function () {\n    return items.some(function (item) {\n      return item.props.selected;\n    });\n  }, [items]);\n  var dropdownContextValue = (0, _react.useMemo)(function () {\n    return {\n      activeKey: activeKey,\n      onSelect: emitSelect,\n      hasSelectedItem: hasSelectedItem,\n      dispatch: dispatch\n    };\n  }, [activeKey, emitSelect, hasSelectedItem, dispatch]); // Render a disclosure when inside expanded <Sidenav>\n\n  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {\n      value: dropdownContextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 192,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_SidenavDropdown.default, (0, _extends2.default)({\n      ref: ref\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 193,\n        columnNumber: 9\n      }\n    })));\n  } // Renders a disclosure when used inside <Navbar>\n\n\n  if (navbar) {\n    return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {\n      value: dropdownContextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 201,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n      hideOnClickOutside: true,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 202,\n        columnNumber: 9\n      }\n    }, function (_ref, containerRef) {\n      var _withClassPrefix;\n\n      var open = _ref.open;\n      var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix)));\n      return /*#__PURE__*/_react.default.createElement(Component, {\n        ref: (0, _utils.mergeRefs)(ref, containerRef),\n        className: classes,\n        style: style,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 214,\n          columnNumber: 15\n        }\n      }, /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 215,\n          columnNumber: 17\n        }\n      }, function (buttonProps, buttonRef) {\n        return /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({\n          ref: buttonRef,\n          as: toggleAs,\n          className: toggleClassName,\n          placement: placement,\n          disabled: disabled\n        }, (0, _omit.default)(buttonProps, ['open']), toggleProps, {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 217,\n            columnNumber: 21\n          }\n        }), title);\n      }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 230,\n          columnNumber: 17\n        }\n      }, function (_ref2, elementRef) {\n        var open = _ref2.open;\n        var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n        return /*#__PURE__*/_react.default.createElement(\"ul\", {\n          ref: elementRef,\n          className: menuClassName,\n          style: menuStyle,\n          hidden: !open,\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 234,\n            columnNumber: 23\n          }\n        }, children);\n      }));\n    }));\n  }\n\n  var renderMenuButton = function renderMenuButton(menuButtonProps, menuButtonRef) {\n    return /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({\n      ref: menuButtonRef,\n      as: toggleAs,\n      className: toggleClassName,\n      placement: placement,\n      disabled: disabled\n    }, (0, _omit.default)(menuButtonProps, ['open']), (0, _omit.default)(toggleProps, ['data-testid']), {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 254,\n        columnNumber: 5\n      }\n    }), title);\n  };\n\n  if (parentMenu) {\n    renderMenuButton = function renderMenuButton(menuButtonProps, buttonRef) {\n      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n        disabled: disabled,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 269,\n          columnNumber: 7\n        }\n      }, function (_ref3, menuitemRef) {\n        var active = _ref3.active,\n            menuitemProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3, [\"active\"]);\n        return /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({\n          ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),\n          as: toggleAs,\n          className: mergeNavItemClassNames(toggleClassName, withNavItemClassPrefix({\n            focus: active\n          }))\n        }, menuButtonProps, (0, _omit.default)(menuitemProps, ['onClick']), (0, _omit.default)(toggleProps, 'data-testid'), {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 272,\n            columnNumber: 13\n          }\n        }), title);\n      });\n    };\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {\n    value: dropdownContextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 294,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    open: open,\n    defaultOpen: defaultOpen,\n    menuButtonText: title,\n    renderMenuButton: renderMenuButton,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: function renderMenuPopup(_ref4, popupRef) {\n      var open = _ref4.open,\n          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref4, [\"open\"]);\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix({})); // When inside a collapsed <Sidenav>, render a header in menu\n\n      var showHeader = !!sidenav;\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 307,\n          columnNumber: 13\n        }\n      }), showHeader && /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('header'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 314,\n          columnNumber: 30\n        }\n      }, title), children);\n    },\n    onToggleMenu: function onToggleMenu(open, event) {\n      onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);\n      sidenav === null || sidenav === void 0 ? void 0 : sidenav.onOpenChange(eventKey, event);\n\n      if (open) {\n        onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n      } else {\n        onClose === null || onClose === void 0 ? void 0 : onClose();\n      }\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 295,\n      columnNumber: 7\n    }\n  }, function (_ref5, menuContainerRef) {\n    var _withClassPrefix2;\n\n    var open = _ref5.open,\n        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref5, [\"open\"]);\n    var classes = merge(className, withClassPrefix((_withClassPrefix2 = {}, _withClassPrefix2[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix2.disabled = disabled, _withClassPrefix2.open = open, _withClassPrefix2.submenu = !!parentMenu, _withClassPrefix2['selected-within'] = hasSelectedItem, _withClassPrefix2)));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 341,\n        columnNumber: 13\n      }\n    }));\n  }));\n});\n\nDropdown.Item = _DropdownItem.default;\nDropdown.Menu = _DropdownMenu.default;\nDropdown.displayName = 'Dropdown';\nDropdown.propTypes = {\n  activeKey: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover', 'contextMenu'])]),\n  placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),\n  title: _propTypes.default.node,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  menuStyle: _propTypes.default.object,\n  className: _propTypes.default.string,\n  toggleClassName: _propTypes.default.string,\n  children: _propTypes.default.node,\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  eventKey: _propTypes.default.any,\n  as: _propTypes.default.elementType,\n  toggleAs: _propTypes.default.elementType,\n  noCaret: _propTypes.default.bool,\n  style: _propTypes.default.object,\n  onClose: _propTypes.default.func,\n  onOpen: _propTypes.default.func,\n  onToggle: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onMouseEnter: _propTypes.default.func,\n  onMouseLeave: _propTypes.default.func,\n  onContextMenu: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  renderToggle: _propTypes.default.func\n};\nvar _default = Dropdown;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/Dropdown.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/Dropdown/DropdownMenu.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _DropdownItem = _interopRequireDefault(__webpack_require__(/*! ./DropdownItem */ \"./src/Dropdown/DropdownItem.tsx\"));\n\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\n\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menu */ \"./src/Menu/Menu.tsx\"));\n\nvar _DropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./DropdownToggle */ \"./src/Dropdown/DropdownToggle.tsx\"));\n\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _DropdownState = __webpack_require__(/*! ./DropdownState */ \"./src/Dropdown/DropdownState.ts\");\n\nvar _warnOnce = _interopRequireDefault(__webpack_require__(/*! ../utils/warnOnce */ \"./src/utils/warnOnce.ts\"));\n\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/Dropdown.tsx\",\n    _this = void 0;\n\n/**\n * The <Dropdown> API\n * When used inside <Sidenav>, renders a <TreeviewRootItem>;\n * Otherwise renders a <MenuRoot>\n */\nvar Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var activeKey = props.activeKey,\n      onSelect = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"activeKey\", \"onSelect\"]);\n  var _rest$as = rest.as,\n      Component = _rest$as === void 0 ? 'div' : _rest$as,\n      title = rest.title,\n      onClose = rest.onClose,\n      onOpen = rest.onOpen,\n      onToggle = rest.onToggle,\n      _rest$trigger = rest.trigger,\n      trigger = _rest$trigger === void 0 ? 'click' : _rest$trigger,\n      _rest$placement = rest.placement,\n      placement = _rest$placement === void 0 ? 'bottomStart' : _rest$placement,\n      toggleAs = rest.toggleAs,\n      toggleClassName = rest.toggleClassName,\n      open = rest.open,\n      defaultOpen = rest.defaultOpen,\n      _rest$classPrefix = rest.classPrefix,\n      classPrefix = _rest$classPrefix === void 0 ? 'dropdown' : _rest$classPrefix,\n      className = rest.className,\n      disabled = rest.disabled,\n      children = rest.children,\n      menuStyle = rest.menuStyle,\n      style = rest.style,\n      toggleProps = (0, _objectWithoutPropertiesLoose2.default)(rest, [\"as\", \"title\", \"onClose\", \"onOpen\", \"onToggle\", \"trigger\", \"placement\", \"toggleAs\", \"toggleClassName\", \"open\", \"defaultOpen\", \"classPrefix\", \"className\", \"disabled\", \"children\", \"menuStyle\", \"style\"]);\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  var menuButtonTriggers = (0, _react.useMemo)(function () {\n    if (!trigger) {\n      return undefined;\n    }\n\n    var triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n\n    return trigger.map(function (t) {\n      return triggerMap[t];\n    });\n  }, [trigger]);\n\n  var _useReducer = (0, _react.useReducer)(_DropdownState.reducer, _DropdownState.initialState),\n      items = _useReducer[0].items,\n      dispatch = _useReducer[1];\n\n  var hasSelectedItem = (0, _react.useMemo)(function () {\n    return items.some(function (item) {\n      return item.props.selected;\n    });\n  }, [items]);\n  var dropdownContextValue = (0, _react.useMemo)(function () {\n    return {\n      activeKey: activeKey,\n      onSelect: onSelect,\n      hasSelectedItem: hasSelectedItem,\n      dispatch: dispatch\n    };\n  }, [activeKey, onSelect, hasSelectedItem, dispatch]); // Deprecate <Dropdown> within <Nav> usage\n  // in favor of <Nav.Menu> API\n\n  if (nav) {\n    (0, _warnOnce.default)('Usage of <Dropdown> within <Nav> is deprecated. Replace with <Nav.Menu>');\n    return /*#__PURE__*/_react.default.createElement(_Nav.default.Menu, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 171,\n        columnNumber: 12\n      }\n    }));\n  }\n\n  var renderMenuButton = function renderMenuButton(menuButtonProps, menuButtonRef) {\n    return /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({\n      ref: menuButtonRef,\n      as: toggleAs,\n      className: toggleClassName,\n      placement: placement,\n      disabled: disabled\n    }, (0, _omit.default)(menuButtonProps, ['open']), (0, _omit.default)(toggleProps, ['data-testid']), {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 175,\n        columnNumber: 5\n      }\n    }), title);\n  };\n\n  return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {\n    value: dropdownContextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 189,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    open: open,\n    defaultOpen: defaultOpen,\n    menuButtonText: title,\n    renderMenuButton: renderMenuButton,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: function renderMenuPopup(_ref, popupRef) {\n      var open = _ref.open,\n          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"open\"]);\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix({}));\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 200,\n          columnNumber: 13\n        }\n      }), children);\n    },\n    onToggleMenu: function onToggleMenu(open) {\n      onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);\n\n      if (open) {\n        onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n      } else {\n        onClose === null || onClose === void 0 ? void 0 : onClose();\n      }\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 190,\n      columnNumber: 7\n    }\n  }, function (_ref2, menuContainerRef) {\n    var _withClassPrefix;\n\n    var open = _ref2.open,\n        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"open\"]);\n    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix['selected-within'] = hasSelectedItem, _withClassPrefix)));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 231,\n        columnNumber: 13\n      }\n    }));\n  }));\n});\n\nDropdown.Item = _DropdownItem.default;\nDropdown.Menu = _DropdownMenu.default;\nDropdown.displayName = 'Dropdown';\nDropdown.propTypes = {\n  activeKey: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover', 'contextMenu'])]),\n  placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),\n  title: _propTypes.default.node,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  menuStyle: _propTypes.default.object,\n  className: _propTypes.default.string,\n  toggleClassName: _propTypes.default.string,\n  children: _propTypes.default.node,\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  eventKey: _propTypes.default.any,\n  as: _propTypes.default.elementType,\n  toggleAs: _propTypes.default.elementType,\n  noCaret: _propTypes.default.bool,\n  style: _propTypes.default.object,\n  onClose: _propTypes.default.func,\n  onOpen: _propTypes.default.func,\n  onToggle: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onMouseEnter: _propTypes.default.func,\n  onMouseLeave: _propTypes.default.func,\n  onContextMenu: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  renderToggle: _propTypes.default.func\n};\nvar _default = Dropdown;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/Dropdown.tsx?");
 
 /***/ }),
 
@@ -2529,7 +2628,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Navbar = __webpack_require__(/*! ../Navbar/Navbar */ \"./src/Navbar/Navbar.tsx\");\n\nvar _SidenavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavDropdownItem */ \"./src/Sidenav/SidenavDropdownItem.tsx\"));\n\nvar _DisclosureContext = _interopRequireWildcard(__webpack_require__(/*! ../Disclosure/DisclosureContext */ \"./src/Disclosure/DisclosureContext.ts\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _useInternalId = _interopRequireDefault(__webpack_require__(/*! ../utils/useInternalId */ \"./src/utils/useInternalId.ts\"));\n\nvar _DropdownState = __webpack_require__(/*! ./DropdownState */ \"./src/Dropdown/DropdownState.ts\");\n\nvar _useRenderDropdownItem = __webpack_require__(/*! ./useRenderDropdownItem */ \"./src/Dropdown/useRenderDropdownItem.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/DropdownItem.tsx\",\n    _this = void 0;\n\n/**\n * The <Dropdown.Item> API\n * When used inside <Sidenav>, renders a <TreeviewItem>\n * Otherwise renders a <MenuItem>\n */\nvar DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,\n      className = props.className,\n      activeProp = props.active,\n      eventKey = props.eventKey,\n      onSelect = props.onSelect,\n      icon = props.icon,\n      _props$as = props.as,\n      Component = _props$as === void 0 ? 'li' : _props$as,\n      divider = props.divider,\n      panel = props.panel,\n      children = props.children,\n      disabled = props.disabled,\n      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"classPrefix\", \"className\", \"active\", \"eventKey\", \"onSelect\", \"icon\", \"as\", \"divider\", \"panel\", \"children\", \"disabled\"]);\n  var internalId = (0, _useInternalId.default)('DropdownItem');\n  var nav = (0, _react.useContext)(_NavContext.default);\n  var dropdown = (0, _react.useContext)(_DropdownContext.default);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var handleSelectItem = (0, _react.useCallback)(function (event) {\n    var _dropdown$onSelect;\n\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    dropdown === null || dropdown === void 0 ? void 0 : (_dropdown$onSelect = dropdown.onSelect) === null || _dropdown$onSelect === void 0 ? void 0 : _dropdown$onSelect.call(dropdown, eventKey, event);\n  }, [onSelect, eventKey, dropdown]);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var disclosure = (0, _react.useContext)(_DisclosureContext.default);\n\n  var _ref = disclosure !== null && disclosure !== void 0 ? disclosure : [],\n      dispatchDisclosure = _ref[1];\n\n  var handleClickNavbarDropdownItem = (0, _react.useCallback)(function (event) {\n    dispatchDisclosure === null || dispatchDisclosure === void 0 ? void 0 : dispatchDisclosure({\n      type: _DisclosureContext.DisclosureActionTypes.Hide,\n      cascade: true\n    });\n    handleSelectItem === null || handleSelectItem === void 0 ? void 0 : handleSelectItem(event);\n  }, [dispatchDisclosure, handleSelectItem]);\n  var selected = activeProp || !(0, _isNil.default)(eventKey) && ((0, _utils.shallowEqual)(dropdown === null || dropdown === void 0 ? void 0 : dropdown.activeKey, eventKey) || (0, _utils.shallowEqual)(nav === null || nav === void 0 ? void 0 : nav.activeKey, eventKey));\n  var dispatch = dropdown === null || dropdown === void 0 ? void 0 : dropdown.dispatch;\n  (0, _react.useEffect)(function () {\n    if (dispatch) {\n      dispatch({\n        type: _DropdownState.DropdownActionType.RegisterItem,\n        payload: {\n          id: internalId,\n          props: {\n            selected: selected\n          }\n        }\n      });\n      return function () {\n        dispatch({\n          type: _DropdownState.DropdownActionType.UnregisterItem,\n          payload: {\n            id: internalId\n          }\n        });\n      };\n    }\n  }, [internalId, selected, dispatch]);\n  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);\n\n  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_SidenavDropdownItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 149,\n        columnNumber: 14\n      }\n    }));\n  }\n\n  if (divider) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      role: 'separator',\n      className: merge(prefix('divider'), className)\n    }, restProps));\n  }\n\n  if (panel) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      className: merge(prefix('panel'), className),\n      children: children\n    }, restProps));\n  }\n\n  if (navbar) {\n    var classes = merge(className, withClassPrefix({\n      'with-icon': icon,\n      disabled: disabled,\n      divider: divider,\n      panel: panel,\n      active: selected\n    }));\n    var dataAttributes = {\n      'data-event-key': eventKey\n    };\n\n    if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {\n      dataAttributes['data-event-key-type'] = typeof eventKey;\n    }\n\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      className: classes,\n      'aria-current': selected || undefined\n    }, dataAttributes, restProps, {\n      onClick: (0, _utils.createChainedFunction)(handleClickNavbarDropdownItem, restProps.onClick),\n      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n        className: prefix('menu-icon')\n      }), children)\n    }));\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n    selected: selected,\n    disabled: disabled,\n    onActivate: handleSelectItem,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 205,\n      columnNumber: 7\n    }\n  }, function (_ref2, menuitemRef) {\n    var selected = _ref2.selected,\n        active = _ref2.active,\n        menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"selected\", \"active\"]);\n    var classes = merge(className, withClassPrefix({\n      'with-icon': icon,\n      active: selected,\n      disabled: disabled,\n      focus: active,\n      divider: divider,\n      panel: panel\n    }));\n    var dataAttributes = {\n      'data-event-key': eventKey\n    };\n\n    if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {\n      dataAttributes['data-event-key-type'] = typeof eventKey;\n    }\n\n    return renderDropdownItem((0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuitemRef),\n      className: classes\n    }, menuitem, dataAttributes, restProps, {\n      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n        className: prefix('menu-icon')\n      }), children)\n    }));\n  });\n});\n\nDropdownItem.displayName = 'Dropdown.Item';\nDropdownItem.propTypes = {\n  as: _propTypes.default.elementType,\n  divider: _propTypes.default.bool,\n  panel: _propTypes.default.bool,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  submenu: _propTypes.default.element,\n  onSelect: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  icon: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  style: _propTypes.default.object,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number\n};\nvar _default = DropdownItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/DropdownItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _useInternalId = _interopRequireDefault(__webpack_require__(/*! ../utils/useInternalId */ \"./src/utils/useInternalId.ts\"));\n\nvar _DropdownState = __webpack_require__(/*! ./DropdownState */ \"./src/Dropdown/DropdownState.ts\");\n\nvar _useRenderDropdownItem = __webpack_require__(/*! ./useRenderDropdownItem */ \"./src/Dropdown/useRenderDropdownItem.tsx\");\n\nvar _warnOnce = _interopRequireDefault(__webpack_require__(/*! ../utils/warnOnce */ \"./src/utils/warnOnce.ts\"));\n\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/DropdownItem.tsx\",\n    _this = void 0;\n\n/**\n * The <Dropdown.Item> API\n * When used inside <Sidenav>, renders a <TreeviewItem>\n * Otherwise renders a <MenuItem>\n */\nvar DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,\n      className = props.className,\n      activeProp = props.active,\n      eventKey = props.eventKey,\n      onSelect = props.onSelect,\n      icon = props.icon,\n      _props$as = props.as,\n      Component = _props$as === void 0 ? 'li' : _props$as,\n      divider = props.divider,\n      panel = props.panel,\n      children = props.children,\n      disabled = props.disabled,\n      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"classPrefix\", \"className\", \"active\", \"eventKey\", \"onSelect\", \"icon\", \"as\", \"divider\", \"panel\", \"children\", \"disabled\"]);\n  var internalId = (0, _useInternalId.default)('DropdownItem');\n  var nav = (0, _react.useContext)(_NavContext.default);\n  var dropdown = (0, _react.useContext)(_DropdownContext.default);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var handleSelectItem = (0, _react.useCallback)(function (event) {\n    var _dropdown$onSelect;\n\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    dropdown === null || dropdown === void 0 ? void 0 : (_dropdown$onSelect = dropdown.onSelect) === null || _dropdown$onSelect === void 0 ? void 0 : _dropdown$onSelect.call(dropdown, eventKey, event);\n  }, [onSelect, eventKey, dropdown]);\n  var selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(dropdown === null || dropdown === void 0 ? void 0 : dropdown.activeKey, eventKey);\n  var dispatch = dropdown === null || dropdown === void 0 ? void 0 : dropdown.dispatch;\n  (0, _react.useEffect)(function () {\n    if (dispatch) {\n      dispatch({\n        type: _DropdownState.DropdownActionType.RegisterItem,\n        payload: {\n          id: internalId,\n          props: {\n            selected: selected\n          }\n        }\n      });\n      return function () {\n        dispatch({\n          type: _DropdownState.DropdownActionType.UnregisterItem,\n          payload: {\n            id: internalId\n          }\n        });\n      };\n    }\n  }, [internalId, selected, dispatch]);\n  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component); // If using <Dropdown.Item> within <Nav>\n  // Suggest <Nav.Item>\n\n  if (nav) {\n    (0, _warnOnce.default)('Usage of <Dropdown.Item> within <Nav> is deprecated. Replace with <Nav.Item> within <Nav.Menu>.');\n    return /*#__PURE__*/_react.default.createElement(_Nav.default.Item, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 137,\n        columnNumber: 14\n      }\n    }));\n  }\n\n  if (divider) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      role: 'separator',\n      className: merge(prefix('divider'), className)\n    }, restProps));\n  }\n\n  if (panel) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      className: merge(prefix('panel'), className),\n      children: children\n    }, restProps));\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n    selected: selected,\n    disabled: disabled,\n    onActivate: handleSelectItem,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 159,\n      columnNumber: 7\n    }\n  }, function (_ref, menuitemRef) {\n    var selected = _ref.selected,\n        active = _ref.active,\n        menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"selected\", \"active\"]);\n    var classes = merge(className, withClassPrefix({\n      'with-icon': icon,\n      active: selected,\n      disabled: disabled,\n      focus: active,\n      divider: divider,\n      panel: panel\n    }));\n    var dataAttributes = {\n      'data-event-key': eventKey\n    };\n\n    if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {\n      dataAttributes['data-event-key-type'] = typeof eventKey;\n    }\n\n    return renderDropdownItem((0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuitemRef),\n      className: classes\n    }, menuitem, dataAttributes, restProps, {\n      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n        className: prefix('menu-icon')\n      }), children)\n    }));\n  });\n});\n\nDropdownItem.displayName = 'Dropdown.Item';\nDropdownItem.propTypes = {\n  as: _propTypes.default.elementType,\n  divider: _propTypes.default.bool,\n  panel: _propTypes.default.bool,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  submenu: _propTypes.default.element,\n  onSelect: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  icon: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  style: _propTypes.default.object,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number\n};\nvar _default = DropdownItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/DropdownItem.tsx?");
 
 /***/ }),
 
@@ -2540,7 +2639,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menu */ \"./src/Menu/Menu.tsx\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\n\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\n\nvar _useCustom2 = _interopRequireDefault(__webpack_require__(/*! ../utils/useCustom */ \"./src/utils/useCustom.ts\"));\n\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\n\nvar _Navbar = __webpack_require__(/*! ../Navbar */ \"./src/Navbar/index.tsx\");\n\nvar _Menubar = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menubar */ \"./src/Menu/Menubar.tsx\"));\n\nvar _SidenavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavDropdownMenu */ \"./src/Sidenav/SidenavDropdownMenu.tsx\"));\n\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../Disclosure */ \"./src/Disclosure/index.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/DropdownMenu.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2,\n    _templateObject3,\n    _templateObject4;\n\n/**\n * The <Dropdown.Menu> API\n *\n * @description\n * Note the difference between this component and <Menu> component:\n * <Menu> is used for ARIA menu control logic and is used internally only.\n * This component is only used for supporting submenu syntax and is\n * assigned to Dropdown.Menu\n *\n * @example\n *\n * <Dropdown>\n *   <Dropdown.Item>Item 1</Dropdown.Item>\n *   <Dropdown.Menu title=\"Submenu\">\n *     <Dropdown.Item>Sub item</Dropdown.Item>\n *   </Dropdown.Menu>\n * </Dropdown>\n */\nvar DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var onToggle = props.onToggle,\n      eventKey = props.eventKey,\n      title = props.title,\n      activeKey = props.activeKey,\n      onSelect = props.onSelect,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,\n      children = props.children,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"onToggle\", \"eventKey\", \"title\", \"activeKey\", \"onSelect\", \"classPrefix\", \"children\"]);\n  var dropdown = (0, _react.useContext)(_DropdownContext.default);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var withinNavbar = Boolean((0, _react.useContext)(_Navbar.NavbarContext));\n\n  var _useCustom = (0, _useCustom2.default)('DropdownMenu'),\n      rtl = _useCustom.rtl;\n\n  var handleToggleSubmenu = (0, _react.useCallback)(function (_, event) {\n    onToggle === null || onToggle === void 0 ? void 0 : onToggle(eventKey, event);\n  }, [eventKey, onToggle]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),\n      mergeItemClassNames = _useClassNames3.merge,\n      withItemClassPrefix = _useClassNames3.withClassPrefix,\n      prefixItemClassName = _useClassNames3.prefix;\n\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      activeKey: activeKey,\n      onSelect: onSelect\n    };\n  }, [activeKey, onSelect]); // <Dropdown.Menu> is used outside of <Dropdown>\n  // renders a vertical `menubar`\n\n  if (!dropdown) {\n    var classes = merge(props.className, withClassPrefix());\n    return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 108,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {\n      vertical: true,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 109,\n        columnNumber: 9\n      }\n    }, function (menubar, menubarRef) {\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: (0, _utils.mergeRefs)(menubarRef, ref),\n        className: classes\n      }, menubar, rest, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 111,\n          columnNumber: 13\n        }\n      }), children);\n    }));\n  }\n\n  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_SidenavDropdownMenu.default, (0, _extends2.default)({}, (0, _omit2.default)(props, 'classPrefix'), {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 120,\n        columnNumber: 12\n      }\n    }));\n  } // Parent menu exists. This is a submenu.\n  // Should render a `menuitem` that controls this submenu.\n\n\n  var _omit = (0, _omit2.default)(rest, ['trigger']),\n      icon = _omit.icon,\n      className = _omit.className,\n      disabled = _omit.disabled,\n      menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, [\"icon\", \"className\", \"disabled\"]);\n\n  var Icon = rtl ? _AngleLeft.default : _AngleRight.default; // Renders a disclosure when used within <Navbar>\n\n  if (withinNavbar) {\n    return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n      hideOnClickOutside: true,\n      trigger: ['click', 'mouseover'],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 132,\n        columnNumber: 7\n      }\n    }, function (_ref, containerRef) {\n      var open = _ref.open,\n          props = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"open\"]);\n      var classes = mergeItemClassNames(className, withItemClassPrefix({\n        disabled: disabled,\n        open: open,\n        submenu: true\n      }));\n      return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n        ref: (0, _utils.mergeRefs)(ref, containerRef),\n        className: classes\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 143,\n          columnNumber: 13\n        }\n      }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 144,\n          columnNumber: 15\n        }\n      }, function (_ref2, buttonRef) {\n        var open = _ref2.open,\n            buttonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"open\"]);\n        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"toggle\"]))), withItemClassPrefix({\n          'with-icon': icon,\n          open: open,\n          disabled: disabled\n        }));\n        return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n          ref: (0, _utils.mergeRefs)(buttonRef, buttonRef),\n          className: classes,\n          \"data-event-key\": eventKey,\n          \"data-event-key-type\": typeof eventKey\n        }, buttonProps, {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 157,\n            columnNumber: 21\n          }\n        }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n          className: prefix('menu-icon')\n        }), title, /*#__PURE__*/_react.default.createElement(Icon, {\n          className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"toggle-icon\"]))),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 166,\n            columnNumber: 23\n          }\n        }));\n      }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 171,\n          columnNumber: 15\n        }\n      }, function (_ref3, elementRef) {\n        var open = _ref3.open;\n        var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n        return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n          ref: elementRef,\n          className: menuClassName,\n          hidden: !open\n        }, menuProps, {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 176,\n            columnNumber: 21\n          }\n        }), children);\n      }));\n    });\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    openMenuOn: ['mouseover', 'click'],\n    renderMenuButton: function renderMenuButton(_ref4, buttonRef) {\n      var open = _ref4.open,\n          menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref4, [\"open\"]);\n      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n        disabled: disabled,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 198,\n          columnNumber: 9\n        }\n      }, function (_ref5, menuitemRef) {\n        var selected = _ref5.selected,\n            active = _ref5.active,\n            menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref5, [\"selected\", \"active\"]);\n        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"toggle\"]))), withItemClassPrefix({\n          'with-icon': icon,\n          open: open,\n          active: selected,\n          disabled: disabled,\n          focus: active\n        }));\n        return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n          ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),\n          className: classes,\n          \"data-event-key\": eventKey,\n          \"data-event-key-type\": typeof eventKey\n        }, menuitem, (0, _omit2.default)(menuButtonProps, ['role']), {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 213,\n            columnNumber: 15\n          }\n        }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n          className: prefix('menu-icon')\n        }), title, /*#__PURE__*/_react.default.createElement(Icon, {\n          className: prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)([\"toggle-icon\"]))),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 223,\n            columnNumber: 17\n          }\n        }));\n      });\n    },\n    renderMenuPopup: function renderMenuPopup(_ref6, popupRef) {\n      var open = _ref6.open,\n          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref6, [\"open\"]);\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        hidden: !open\n      }, popupProps, menuProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 233,\n          columnNumber: 11\n        }\n      }), children);\n    },\n    onToggleMenu: handleToggleSubmenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 195,\n      columnNumber: 5\n    }\n  }, function (_ref7, menuContainerRef) {\n    var open = _ref7.open,\n        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref7, [\"open\"]);\n    var classes = mergeItemClassNames(className, withItemClassPrefix({\n      disabled: disabled,\n      open: open,\n      submenu: true\n    }));\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 256,\n        columnNumber: 11\n      }\n    }));\n  });\n});\n\nDropdownMenu.displayName = 'Dropdown.Menu';\nDropdownMenu.propTypes = {\n  active: _propTypes.default.bool,\n  activeKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  icon: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  pullLeft: _propTypes.default.bool,\n  title: _propTypes.default.node,\n  open: _propTypes.default.bool,\n  trigger: _propTypes.default.oneOf(['click', 'hover']),\n  eventKey: _propTypes.default.any,\n  expanded: _propTypes.default.bool,\n  collapsible: _propTypes.default.bool,\n  onSelect: _propTypes.default.func,\n  onToggle: _propTypes.default.func\n};\nvar _default = DropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/DropdownMenu.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menu */ \"./src/Menu/Menu.tsx\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\n\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\n\nvar _useCustom2 = _interopRequireDefault(__webpack_require__(/*! ../utils/useCustom */ \"./src/utils/useCustom.ts\"));\n\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\n\nvar _Menubar = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menubar */ \"./src/Menu/Menubar.tsx\"));\n\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _warnOnce = _interopRequireDefault(__webpack_require__(/*! ../utils/warnOnce */ \"./src/utils/warnOnce.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/DropdownMenu.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2;\n\n/**\n * The <Dropdown.Menu> API\n *\n * @description\n * Note the difference between this component and <Menu> component:\n * <Menu> is used for ARIA menu control logic and is used internally only.\n * This component is only used for supporting submenu syntax and is\n * assigned to Dropdown.Menu\n *\n * @example\n *\n * <Dropdown>\n *   <Dropdown.Item>Item 1</Dropdown.Item>\n *   <Dropdown.Menu title=\"Submenu\">\n *     <Dropdown.Item>Sub item</Dropdown.Item>\n *   </Dropdown.Menu>\n * </Dropdown>\n */\nvar DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var onToggle = props.onToggle,\n      eventKey = props.eventKey,\n      title = props.title,\n      activeKey = props.activeKey,\n      onSelect = props.onSelect,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,\n      children = props.children,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"onToggle\", \"eventKey\", \"title\", \"activeKey\", \"onSelect\", \"classPrefix\", \"children\"]);\n  var nav = (0, _react.useContext)(_NavContext.default);\n  var dropdown = (0, _react.useContext)(_DropdownContext.default);\n\n  var _useCustom = (0, _useCustom2.default)('DropdownMenu'),\n      rtl = _useCustom.rtl;\n\n  var handleToggleSubmenu = (0, _react.useCallback)(function (_, event) {\n    onToggle === null || onToggle === void 0 ? void 0 : onToggle(eventKey, event);\n  }, [eventKey, onToggle]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),\n      mergeItemClassNames = _useClassNames3.merge,\n      withItemClassPrefix = _useClassNames3.withClassPrefix,\n      prefixItemClassName = _useClassNames3.prefix;\n\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      activeKey: activeKey,\n      onSelect: onSelect\n    };\n  }, [activeKey, onSelect]); // If rendered within a <Nav>\n  // Suggest <Nav.Menu>\n\n  if (nav) {\n    (0, _warnOnce.default)('Usage of <Dropdown.Menu> within <Nav> is deprecated. Replace with <Nav.Menu>');\n    return /*#__PURE__*/_react.default.createElement(_Nav.default.Menu, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 106,\n        columnNumber: 12\n      }\n    }));\n  } // <Dropdown.Menu> is used outside of <Dropdown>\n  // renders a vertical `menubar`\n\n\n  if (!dropdown) {\n    var classes = merge(props.className, withClassPrefix());\n    return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 115,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {\n      vertical: true,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 116,\n        columnNumber: 9\n      }\n    }, function (menubar, menubarRef) {\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: (0, _utils.mergeRefs)(menubarRef, ref),\n        className: classes\n      }, menubar, rest, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 118,\n          columnNumber: 13\n        }\n      }), children);\n    }));\n  } // Parent menu exists. This is a submenu.\n  // Should render a `menuitem` that controls this submenu.\n\n\n  var _omit = (0, _omit2.default)(rest, ['trigger']),\n      icon = _omit.icon,\n      className = _omit.className,\n      disabled = _omit.disabled,\n      menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, [\"icon\", \"className\", \"disabled\"]);\n\n  var Icon = rtl ? _AngleLeft.default : _AngleRight.default;\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    openMenuOn: ['mouseover', 'click'],\n    renderMenuButton: function renderMenuButton(_ref, buttonRef) {\n      var open = _ref.open,\n          menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"open\"]);\n      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n        disabled: disabled,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 137,\n          columnNumber: 9\n        }\n      }, function (_ref2, menuitemRef) {\n        var selected = _ref2.selected,\n            active = _ref2.active,\n            menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"selected\", \"active\"]);\n        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"toggle\"]))), withItemClassPrefix({\n          'with-icon': icon,\n          open: open,\n          active: selected,\n          disabled: disabled,\n          focus: active\n        }));\n        return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n          ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),\n          className: classes,\n          \"data-event-key\": eventKey,\n          \"data-event-key-type\": typeof eventKey\n        }, menuitem, (0, _omit2.default)(menuButtonProps, ['role']), {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 152,\n            columnNumber: 15\n          }\n        }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n          className: prefix('menu-icon')\n        }), title, /*#__PURE__*/_react.default.createElement(Icon, {\n          className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"toggle-icon\"]))),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 162,\n            columnNumber: 17\n          }\n        }));\n      });\n    },\n    renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {\n      var open = _ref3.open,\n          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3, [\"open\"]);\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        hidden: !open\n      }, popupProps, menuProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 172,\n          columnNumber: 11\n        }\n      }), children);\n    },\n    onToggleMenu: handleToggleSubmenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 134,\n      columnNumber: 5\n    }\n  }, function (_ref4, menuContainerRef) {\n    var open = _ref4.open,\n        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref4, [\"open\"]);\n    var classes = mergeItemClassNames(className, withItemClassPrefix({\n      disabled: disabled,\n      open: open,\n      submenu: true\n    }));\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 195,\n        columnNumber: 11\n      }\n    }));\n  });\n});\n\nDropdownMenu.displayName = 'Dropdown.Menu';\nDropdownMenu.propTypes = {\n  active: _propTypes.default.bool,\n  activeKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  icon: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  pullLeft: _propTypes.default.bool,\n  title: _propTypes.default.node,\n  open: _propTypes.default.bool,\n  trigger: _propTypes.default.oneOf(['click', 'hover']),\n  eventKey: _propTypes.default.any,\n  expanded: _propTypes.default.bool,\n  collapsible: _propTypes.default.bool,\n  onSelect: _propTypes.default.func,\n  onToggle: _propTypes.default.func\n};\nvar _default = DropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/DropdownMenu.tsx?");
 
 /***/ }),
 
@@ -2562,7 +2661,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _useToggleCaret = _interopRequireDefault(__webpack_require__(/*! ../utils/useToggleCaret */ \"./src/utils/useToggleCaret.tsx\"));\n\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/DropdownToggle.tsx\",\n    _this = void 0;\n\nvar DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _Button.default : _props$as,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-toggle' : _props$classPrefix,\n      renderToggle = props.renderToggle,\n      children = props.children,\n      icon = props.icon,\n      noCaret = props.noCaret,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"renderToggle\", \"children\", \"icon\", \"noCaret\", \"placement\"]);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  var _useContext = (0, _react.useContext)(_NavContext.default),\n      withinNav = _useContext.withinNav;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix({\n    'no-caret': noCaret\n  }));\n  var inSidenav = !!sidenav; // Caret icon is down by default, when Dropdown is used in Sidenav.\n\n  var Caret = (0, _useToggleCaret.default)(inSidenav ? 'bottomStart' : placement);\n\n  var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    appearance: withinNav ? 'subtle' : undefined\n  }, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 43,\n      columnNumber: 7\n    }\n  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: prefix('icon')\n  }), children, noCaret ? null : /*#__PURE__*/_react.default.createElement(Caret, {\n    className: prefix('caret'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 54,\n      columnNumber: 27\n    }\n  }));\n\n  return renderToggle ? renderToggle(rest, ref) : toggle;\n});\n\nDropdownToggle.displayName = 'DropdownToggle';\nDropdownToggle.propTypes = {\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  icon: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  noCaret: _propTypes.default.bool,\n  as: _propTypes.default.elementType,\n  renderToggle: _propTypes.default.func,\n  placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])\n};\nvar _default = DropdownToggle;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/DropdownToggle.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _useToggleCaret = _interopRequireDefault(__webpack_require__(/*! ../utils/useToggleCaret */ \"./src/utils/useToggleCaret.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/DropdownToggle.tsx\",\n    _this = void 0;\n\nvar DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _Button.default : _props$as,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-toggle' : _props$classPrefix,\n      renderToggle = props.renderToggle,\n      children = props.children,\n      icon = props.icon,\n      noCaret = props.noCaret,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"renderToggle\", \"children\", \"icon\", \"noCaret\", \"placement\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix({\n    'no-caret': noCaret\n  })); // Caret icon is down by default, when Dropdown is used in Sidenav.\n\n  var Caret = (0, _useToggleCaret.default)(placement);\n\n  var toggle = /*#__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: 37,\n      columnNumber: 7\n    }\n  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: prefix('icon')\n  }), children, noCaret ? null : /*#__PURE__*/_react.default.createElement(Caret, {\n    className: prefix('caret'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 43,\n      columnNumber: 27\n    }\n  }));\n\n  return renderToggle ? renderToggle(rest, ref) : toggle;\n});\n\nDropdownToggle.displayName = 'DropdownToggle';\nDropdownToggle.propTypes = {\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  icon: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  noCaret: _propTypes.default.bool,\n  as: _propTypes.default.elementType,\n  renderToggle: _propTypes.default.func,\n  placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])\n};\nvar _default = DropdownToggle;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/DropdownToggle.tsx?");
 
 /***/ }),
 
@@ -2650,7 +2749,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends6 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\n\nvar _FormContext = _interopRequireWildcard(__webpack_require__(/*! ./FormContext */ \"./src/Form/FormContext.tsx\"));\n\nvar _FormControl = _interopRequireDefault(__webpack_require__(/*! ../FormControl */ \"./src/FormControl/index.tsx\"));\n\nvar _FormControlLabel = _interopRequireDefault(__webpack_require__(/*! ../FormControlLabel */ \"./src/FormControlLabel/index.tsx\"));\n\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\n\nvar _FormGroup = _interopRequireDefault(__webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\"));\n\nvar _FormHelpText = _interopRequireDefault(__webpack_require__(/*! ../FormHelpText */ \"./src/FormHelpText/index.tsx\"));\n\nvar _useFormClassNames = __webpack_require__(/*! ./useFormClassNames */ \"./src/Form/useFormClassNames.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Form/Form.tsx\",\n    _this = void 0;\n\nvar Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$checkTrigger = props.checkTrigger,\n      checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'form' : _props$classPrefix,\n      _props$errorFromConte = props.errorFromContext,\n      errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,\n      _props$formDefaultVal = props.formDefaultValue,\n      formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,\n      formValue = props.formValue,\n      formError = props.formError,\n      fluid = props.fluid,\n      _props$layout = props.layout,\n      layout = _props$layout === void 0 ? 'vertical' : _props$layout,\n      _props$model = props.model,\n      model = _props$model === void 0 ? (0, _schemaTyped.SchemaModel)({}) : _props$model,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      className = props.className,\n      children = props.children,\n      disabled = props.disabled,\n      onSubmit = props.onSubmit,\n      onCheck = props.onCheck,\n      onError = props.onError,\n      onChange = props.onChange,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"checkTrigger\", \"classPrefix\", \"errorFromContext\", \"formDefaultValue\", \"formValue\", \"formError\", \"fluid\", \"layout\", \"model\", \"readOnly\", \"plaintext\", \"className\", \"children\", \"disabled\", \"onSubmit\", \"onCheck\", \"onError\", \"onChange\"]);\n  var classes = (0, _useFormClassNames.useFormClassNames)({\n    classPrefix: classPrefix,\n    className: className,\n    fluid: fluid,\n    layout: layout,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled\n  });\n\n  var _useState = (0, _react.useState)(formDefaultValue),\n      _formValue = _useState[0],\n      setFormValue = _useState[1];\n\n  var _useState2 = (0, _react.useState)(formError || {}),\n      _formError = _useState2[0],\n      setFormError = _useState2[1];\n\n  var getFormValue = (0, _react.useCallback)(function () {\n    return (0, _isUndefined.default)(formValue) ? _formValue : formValue;\n  }, [_formValue, formValue]);\n  var getFormError = (0, _react.useCallback)(function () {\n    return (0, _isUndefined.default)(formError) ? _formError : formError;\n  }, [formError, _formError]);\n  /**\n   * Validate the form data and return a boolean.\n   * The error message after verification is returned in the callback.\n   * @param callback\n   */\n\n  var check = (0, _react.useCallback)(function (callback) {\n    var formValue = getFormValue() || {};\n    var formError = {};\n    var errorCount = 0;\n    Object.keys(model.spec).forEach(function (key) {\n      var checkResult = model.checkForField(key, formValue);\n\n      if (checkResult.hasError === true) {\n        errorCount += 1;\n        formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;\n      }\n    });\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    callback === null || callback === void 0 ? void 0 : callback(formError);\n\n    if (errorCount > 0) {\n      onError === null || onError === void 0 ? void 0 : onError(formError);\n      return false;\n    }\n\n    return true;\n  }, [onCheck, onError, model, getFormValue]);\n  /**\n   * Check the data field\n   * @param fieldName\n   * @param callback\n   */\n\n  var checkForField = (0, _react.useCallback)(function (fieldName, callback) {\n    var _extends2;\n\n    var formValue = getFormValue() || {};\n    var checkResult = model.checkForField(fieldName, formValue);\n    var formError = (0, _extends6.default)({}, getFormError(), (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    callback === null || callback === void 0 ? void 0 : callback(checkResult);\n\n    if (checkResult.hasError) {\n      onError === null || onError === void 0 ? void 0 : onError(formError);\n    }\n\n    return !checkResult.hasError;\n  }, [model, getFormValue, getFormError, onCheck, onError]);\n  /**\n   * Check form data asynchronously and return a Promise\n   */\n\n  var checkAsync = (0, _react.useCallback)(function () {\n    var formValue = getFormValue() || {};\n    var promises = [];\n    var keys = [];\n    Object.keys(model.spec).forEach(function (key) {\n      keys.push(key);\n      promises.push(model.checkForFieldAsync(key, formValue));\n    });\n    return Promise.all(promises).then(function (values) {\n      var formError = {};\n      var errorCount = 0;\n\n      for (var i = 0; i < values.length; i++) {\n        if (values[i].hasError) {\n          errorCount += 1;\n          formError[keys[i]] = values[i].errorMessage;\n        }\n      }\n\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n      setFormError(formError);\n\n      if (errorCount > 0) {\n        onError === null || onError === void 0 ? void 0 : onError(formError);\n      }\n\n      return {\n        hasError: errorCount > 0,\n        formError: formError\n      };\n    });\n  }, [model, getFormValue, onCheck, onError]);\n  /**\n   * Asynchronously check form fields and return Promise\n   * @param fieldName\n   */\n\n  var checkForFieldAsync = (0, _react.useCallback)(function (fieldName) {\n    var formValue = getFormValue() || {};\n    return model.checkForFieldAsync(fieldName, formValue).then(function (checkResult) {\n      var _extends3;\n\n      var formError = (0, _extends6.default)({}, getFormError(), (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n      setFormError(formError);\n\n      if (checkResult.hasError) {\n        onError === null || onError === void 0 ? void 0 : onError(formError);\n      }\n\n      return checkResult;\n    });\n  }, [model, getFormValue, getFormError, onCheck, onError]);\n  var cleanErrors = (0, _react.useCallback)(function () {\n    setFormError({});\n  }, []);\n  var cleanErrorForField = (0, _react.useCallback)(function (fieldName) {\n    setFormError((0, _omit.default)(_formError, [fieldName]));\n  }, [_formError]);\n  var resetErrors = (0, _react.useCallback)(function (formError) {\n    if (formError === void 0) {\n      formError = {};\n    }\n\n    setFormError(formError);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      root: rootRef.current,\n      check: check,\n      checkForField: checkForField,\n      checkAsync: checkAsync,\n      checkForFieldAsync: checkForFieldAsync,\n      cleanErrors: cleanErrors,\n      cleanErrorForField: cleanErrorForField,\n      resetErrors: resetErrors\n    };\n  });\n  var removeFieldError = (0, _react.useCallback)(function (name) {\n    var formError = (0, _omit.default)(getFormError(), [name]);\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n  }, [getFormError, onCheck]);\n  var removeFieldValue = (0, _react.useCallback)(function (name) {\n    var formValue = (0, _omit.default)(getFormValue(), [name]);\n    setFormValue(formValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);\n  }, [getFormValue, onChange]);\n  var handleSubmit = (0, _react.useCallback)(function (event) {\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n    var checkStatus = check();\n    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(checkStatus, event);\n  }, [disabled, readOnly, plaintext, check, onSubmit]);\n  var handleFieldError = (0, _react.useCallback)(function (name, errorMessage) {\n    var _extends4;\n\n    var formError = (0, _extends6.default)({}, getFormError(), (_extends4 = {}, _extends4[name] = errorMessage, _extends4));\n    setFormError(formError);\n    onError === null || onError === void 0 ? void 0 : onError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n  }, [onError, onCheck, getFormError]);\n  var handleFieldSuccess = (0, _react.useCallback)(function (name) {\n    removeFieldError(name);\n  }, [removeFieldError]);\n  var handleFieldChange = (0, _react.useCallback)(function (name, value, event) {\n    var _extends5;\n\n    var formValue = getFormValue();\n    var nextFormValue = (0, _extends6.default)({}, formValue, (_extends5 = {}, _extends5[name] = value, _extends5));\n    setFormValue(nextFormValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);\n  }, [onChange, getFormValue]);\n  var rootRef = (0, _react.useRef)(null);\n  var formContextValue = (0, _react.useMemo)(function () {\n    return {\n      model: model,\n      checkTrigger: checkTrigger,\n      formDefaultValue: formDefaultValue,\n      errorFromContext: errorFromContext,\n      readOnly: readOnly,\n      plaintext: plaintext,\n      disabled: disabled,\n      formError: getFormError(),\n      removeFieldValue: removeFieldValue,\n      removeFieldError: removeFieldError,\n      onFieldChange: handleFieldChange,\n      onFieldError: handleFieldError,\n      onFieldSuccess: handleFieldSuccess\n    };\n  }, [model, checkTrigger, formDefaultValue, errorFromContext, readOnly, plaintext, disabled, getFormError, removeFieldValue, removeFieldError, handleFieldChange, handleFieldError, handleFieldSuccess]);\n  return /*#__PURE__*/_react.default.createElement(\"form\", (0, _extends6.default)({}, rest, {\n    ref: rootRef,\n    onSubmit: handleSubmit,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 398,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_FormContext.default.Provider, {\n    value: formContextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 399,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueContext.Provider, {\n    value: formValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 400,\n      columnNumber: 9\n    }\n  }, children)));\n});\n\nForm.Control = _FormControl.default;\nForm.ControlLabel = _FormControlLabel.default;\nForm.ErrorMessage = _FormErrorMessage.default;\nForm.Group = _FormGroup.default;\nForm.HelpText = _FormHelpText.default;\nForm.Control = _FormControl.default;\nForm.displayName = 'Form';\nForm.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  errorFromContext: _propTypes.default.bool,\n  layout: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),\n  fluid: _propTypes.default.bool,\n  formValue: _propTypes.default.object,\n  formDefaultValue: _propTypes.default.object,\n  formError: _propTypes.default.object,\n  checkTrigger: _propTypes.default.oneOf(['change', 'blur', 'none']),\n  onChange: _propTypes.default.func,\n  onError: _propTypes.default.func,\n  onCheck: _propTypes.default.func,\n  onSubmit: _propTypes.default.func,\n  model: _propTypes.default.any,\n  readOnly: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  disabled: _propTypes.default.bool\n};\nvar _default = Form;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Form/Form.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends6 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\n\nvar _FormContext = _interopRequireWildcard(__webpack_require__(/*! ./FormContext */ \"./src/Form/FormContext.tsx\"));\n\nvar _FormControl = _interopRequireDefault(__webpack_require__(/*! ../FormControl */ \"./src/FormControl/index.tsx\"));\n\nvar _FormControlLabel = _interopRequireDefault(__webpack_require__(/*! ../FormControlLabel */ \"./src/FormControlLabel/index.tsx\"));\n\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\n\nvar _FormGroup = _interopRequireDefault(__webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\"));\n\nvar _FormHelpText = _interopRequireDefault(__webpack_require__(/*! ../FormHelpText */ \"./src/FormHelpText/index.tsx\"));\n\nvar _useFormClassNames = __webpack_require__(/*! ./useFormClassNames */ \"./src/Form/useFormClassNames.ts\");\n\nvar _useSchemaModel2 = _interopRequireDefault(__webpack_require__(/*! ./useSchemaModel */ \"./src/Form/useSchemaModel.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Form/Form.tsx\",\n    _this = void 0;\n\nvar Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$checkTrigger = props.checkTrigger,\n      checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'form' : _props$classPrefix,\n      _props$errorFromConte = props.errorFromContext,\n      errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,\n      _props$formDefaultVal = props.formDefaultValue,\n      formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,\n      formValue = props.formValue,\n      formError = props.formError,\n      fluid = props.fluid,\n      _props$layout = props.layout,\n      layout = _props$layout === void 0 ? 'vertical' : _props$layout,\n      _props$model = props.model,\n      formModel = _props$model === void 0 ? (0, _schemaTyped.SchemaModel)({}) : _props$model,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      className = props.className,\n      children = props.children,\n      disabled = props.disabled,\n      onSubmit = props.onSubmit,\n      onCheck = props.onCheck,\n      onError = props.onError,\n      onChange = props.onChange,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"checkTrigger\", \"classPrefix\", \"errorFromContext\", \"formDefaultValue\", \"formValue\", \"formError\", \"fluid\", \"layout\", \"model\", \"readOnly\", \"plaintext\", \"className\", \"children\", \"disabled\", \"onSubmit\", \"onCheck\", \"onError\", \"onChange\"]);\n\n  var _useSchemaModel = (0, _useSchemaModel2.default)(formModel),\n      getCombinedModel = _useSchemaModel.getCombinedModel,\n      pushFieldRule = _useSchemaModel.pushFieldRule,\n      removeFieldRule = _useSchemaModel.removeFieldRule;\n\n  var classes = (0, _useFormClassNames.useFormClassNames)({\n    classPrefix: classPrefix,\n    className: className,\n    fluid: fluid,\n    layout: layout,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled\n  });\n\n  var _useState = (0, _react.useState)(formDefaultValue),\n      _formValue = _useState[0],\n      setFormValue = _useState[1];\n\n  var _useState2 = (0, _react.useState)(formError || {}),\n      _formError = _useState2[0],\n      setFormError = _useState2[1];\n\n  var getFormValue = (0, _react.useCallback)(function () {\n    return (0, _isUndefined.default)(formValue) ? _formValue : formValue;\n  }, [_formValue, formValue]);\n  var getFormError = (0, _react.useCallback)(function () {\n    return (0, _isUndefined.default)(formError) ? _formError : formError;\n  }, [formError, _formError]);\n  /**\n   * Validate the form data and return a boolean.\n   * The error message after verification is returned in the callback.\n   * @param callback\n   */\n\n  var check = (0, _react.useCallback)(function (callback) {\n    var formValue = getFormValue() || {};\n    var formError = {};\n    var errorCount = 0;\n    var model = getCombinedModel();\n    Object.keys(model.spec).forEach(function (key) {\n      var checkResult = model.checkForField(key, formValue);\n\n      if (checkResult.hasError === true) {\n        errorCount += 1;\n        formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;\n      }\n    });\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    callback === null || callback === void 0 ? void 0 : callback(formError);\n\n    if (errorCount > 0) {\n      onError === null || onError === void 0 ? void 0 : onError(formError);\n      return false;\n    }\n\n    return true;\n  }, [getFormValue, getCombinedModel, onCheck, onError]);\n  /**\n   * Check the data field\n   * @param fieldName\n   * @param callback\n   */\n\n  var checkForField = (0, _react.useCallback)(function (fieldName, callback) {\n    var _extends2;\n\n    var formValue = getFormValue() || {};\n    var model = getCombinedModel();\n    var checkResult = model.checkForField(fieldName, formValue);\n    var formError = (0, _extends6.default)({}, getFormError(), (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    callback === null || callback === void 0 ? void 0 : callback(checkResult);\n\n    if (checkResult.hasError) {\n      onError === null || onError === void 0 ? void 0 : onError(formError);\n    }\n\n    return !checkResult.hasError;\n  }, [getFormValue, getCombinedModel, getFormError, onCheck, onError]);\n  /**\n   * Check form data asynchronously and return a Promise\n   */\n\n  var checkAsync = (0, _react.useCallback)(function () {\n    var formValue = getFormValue() || {};\n    var promises = [];\n    var keys = [];\n    var model = getCombinedModel();\n    Object.keys(model.spec).forEach(function (key) {\n      keys.push(key);\n      promises.push(model.checkForFieldAsync(key, formValue));\n    });\n    return Promise.all(promises).then(function (values) {\n      var formError = {};\n      var errorCount = 0;\n\n      for (var i = 0; i < values.length; i++) {\n        if (values[i].hasError) {\n          errorCount += 1;\n          formError[keys[i]] = values[i].errorMessage;\n        }\n      }\n\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n      setFormError(formError);\n\n      if (errorCount > 0) {\n        onError === null || onError === void 0 ? void 0 : onError(formError);\n      }\n\n      return {\n        hasError: errorCount > 0,\n        formError: formError\n      };\n    });\n  }, [getFormValue, getCombinedModel, onCheck, onError]);\n  /**\n   * Asynchronously check form fields and return Promise\n   * @param fieldName\n   */\n\n  var checkForFieldAsync = (0, _react.useCallback)(function (fieldName) {\n    var formValue = getFormValue() || {};\n    var model = getCombinedModel();\n    return model.checkForFieldAsync(fieldName, formValue).then(function (checkResult) {\n      var _extends3;\n\n      var formError = (0, _extends6.default)({}, getFormError(), (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n      setFormError(formError);\n\n      if (checkResult.hasError) {\n        onError === null || onError === void 0 ? void 0 : onError(formError);\n      }\n\n      return checkResult;\n    });\n  }, [getFormValue, getCombinedModel, getFormError, onCheck, onError]);\n  var cleanErrors = (0, _react.useCallback)(function () {\n    setFormError({});\n  }, []);\n  var cleanErrorForField = (0, _react.useCallback)(function (fieldName) {\n    setFormError((0, _omit.default)(_formError, [fieldName]));\n  }, [_formError]);\n  var resetErrors = (0, _react.useCallback)(function (formError) {\n    if (formError === void 0) {\n      formError = {};\n    }\n\n    setFormError(formError);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      root: rootRef.current,\n      check: check,\n      checkForField: checkForField,\n      checkAsync: checkAsync,\n      checkForFieldAsync: checkForFieldAsync,\n      cleanErrors: cleanErrors,\n      cleanErrorForField: cleanErrorForField,\n      resetErrors: resetErrors\n    };\n  });\n  var removeFieldError = (0, _react.useCallback)(function (name) {\n    var formError = (0, _omit.default)(getFormError(), [name]);\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n  }, [getFormError, onCheck]);\n  var removeFieldValue = (0, _react.useCallback)(function (name) {\n    var formValue = (0, _omit.default)(getFormValue(), [name]);\n    setFormValue(formValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);\n  }, [getFormValue, onChange]);\n  var handleSubmit = (0, _react.useCallback)(function (event) {\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n    var checkStatus = check();\n    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(checkStatus, event);\n  }, [disabled, readOnly, plaintext, check, onSubmit]);\n  var handleFieldError = (0, _react.useCallback)(function (name, errorMessage) {\n    var _extends4;\n\n    var formError = (0, _extends6.default)({}, getFormError(), (_extends4 = {}, _extends4[name] = errorMessage, _extends4));\n    setFormError(formError);\n    onError === null || onError === void 0 ? void 0 : onError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n  }, [onError, onCheck, getFormError]);\n  var handleFieldSuccess = (0, _react.useCallback)(function (name) {\n    removeFieldError(name);\n  }, [removeFieldError]);\n  var handleFieldChange = (0, _react.useCallback)(function (name, value, event) {\n    var _extends5;\n\n    var formValue = getFormValue();\n    var nextFormValue = (0, _extends6.default)({}, formValue, (_extends5 = {}, _extends5[name] = value, _extends5));\n    setFormValue(nextFormValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);\n  }, [onChange, getFormValue]);\n  var rootRef = (0, _react.useRef)(null);\n  var formContextValue = (0, _react.useMemo)(function () {\n    return {\n      getCombinedModel: getCombinedModel,\n      checkTrigger: checkTrigger,\n      formDefaultValue: formDefaultValue,\n      errorFromContext: errorFromContext,\n      readOnly: readOnly,\n      plaintext: plaintext,\n      disabled: disabled,\n      formError: getFormError(),\n      removeFieldValue: removeFieldValue,\n      removeFieldError: removeFieldError,\n      pushFieldRule: pushFieldRule,\n      removeFieldRule: removeFieldRule,\n      onFieldChange: handleFieldChange,\n      onFieldError: handleFieldError,\n      onFieldSuccess: handleFieldSuccess\n    };\n  }, [getCombinedModel, checkTrigger, formDefaultValue, errorFromContext, readOnly, plaintext, disabled, getFormError, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);\n  return /*#__PURE__*/_react.default.createElement(\"form\", (0, _extends6.default)({}, rest, {\n    ref: rootRef,\n    onSubmit: handleSubmit,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 411,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_FormContext.default.Provider, {\n    value: formContextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 412,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueContext.Provider, {\n    value: formValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 413,\n      columnNumber: 9\n    }\n  }, children)));\n});\n\nForm.Control = _FormControl.default;\nForm.ControlLabel = _FormControlLabel.default;\nForm.ErrorMessage = _FormErrorMessage.default;\nForm.Group = _FormGroup.default;\nForm.HelpText = _FormHelpText.default;\nForm.Control = _FormControl.default;\nForm.displayName = 'Form';\nForm.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  errorFromContext: _propTypes.default.bool,\n  layout: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),\n  fluid: _propTypes.default.bool,\n  formValue: _propTypes.default.object,\n  formDefaultValue: _propTypes.default.object,\n  formError: _propTypes.default.object,\n  checkTrigger: _propTypes.default.oneOf(['change', 'blur', 'none']),\n  onChange: _propTypes.default.func,\n  onError: _propTypes.default.func,\n  onCheck: _propTypes.default.func,\n  onSubmit: _propTypes.default.func,\n  model: _propTypes.default.any,\n  readOnly: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  disabled: _propTypes.default.bool\n};\nvar _default = Form;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Form/Form.tsx?");
 
 /***/ }),
 
@@ -2687,6 +2786,17 @@ eval("\n\nexports.__esModule = true;\nexports.useFormClassNames = useFormClassNa
 
 /***/ }),
 
+/***/ "./src/Form/useSchemaModel.ts":
+/*!************************************!*\
+  !*** ./src/Form/useSchemaModel.ts ***!
+  \************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nfunction useSchemaModel(formModel) {\n  var subRulesRef = (0, _react.useRef)([]);\n  var pushFieldRule = (0, _react.useCallback)(function (name, fieldRule) {\n    subRulesRef.current.push({\n      name: name,\n      fieldRule: fieldRule\n    });\n  }, []);\n  var removeFieldRule = (0, _react.useCallback)(function (name) {\n    var index = subRulesRef.current.findIndex(function (v) {\n      return v.name === name;\n    });\n    subRulesRef.current.splice(index, 1);\n  }, []);\n  var getCombinedModel = (0, _react.useCallback)(function () {\n    var realSubRules = subRulesRef.current.filter(function (v) {\n      return Boolean(v.fieldRule.current);\n    });\n    return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(realSubRules.map(function (_ref) {\n      var _ref2;\n\n      var name = _ref.name,\n          fieldRule = _ref.fieldRule;\n      return _ref2 = {}, _ref2[name] = fieldRule.current, _ref2;\n    }).reduce(function (a, b) {\n      return Object.assign(a, b);\n    }, {})));\n  }, [formModel]);\n  return {\n    getCombinedModel: getCombinedModel,\n    pushFieldRule: pushFieldRule,\n    removeFieldRule: removeFieldRule\n  };\n}\n\nvar _default = useSchemaModel;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Form/useSchemaModel.ts?");
+
+/***/ }),
+
 /***/ "./src/FormControl/FormControl.tsx":
 /*!*****************************************!*\
   !*** ./src/FormControl/FormControl.tsx ***!
@@ -2694,7 +2804,7 @@ eval("\n\nexports.__esModule = true;\nexports.useFormClassNames = useFormClassNa
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\n\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _FormContext = _interopRequireWildcard(__webpack_require__(/*! ../Form/FormContext */ \"./src/Form/FormContext.tsx\"));\n\nvar _FormGroup = __webpack_require__(/*! ../FormGroup/FormGroup */ \"./src/FormGroup/FormGroup.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/FormControl/FormControl.tsx\",\n    _this = void 0,\n    _templateObject;\n\nvar FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_FormContext.default),\n      readOnlyContext = _useContext.readOnly,\n      plaintextContext = _useContext.plaintext,\n      disabledContext = _useContext.disabled,\n      errorFromContext = _useContext.errorFromContext,\n      _useContext$formDefau = _useContext.formDefaultValue,\n      formDefaultValue = _useContext$formDefau === void 0 ? {} : _useContext$formDefau,\n      formError = _useContext.formError,\n      removeFieldValue = _useContext.removeFieldValue,\n      removeFieldError = _useContext.removeFieldError,\n      onFieldChange = _useContext.onFieldChange,\n      onFieldError = _useContext.onFieldError,\n      onFieldSuccess = _useContext.onFieldSuccess,\n      model = _useContext.model,\n      contextCheckTrigger = _useContext.checkTrigger;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$accepter = props.accepter,\n      AccepterComponent = _props$accepter === void 0 ? _Input.default : _props$accepter,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'form-control' : _props$classPrefix,\n      className = props.className,\n      checkAsync = props.checkAsync,\n      checkTrigger = props.checkTrigger,\n      _props$errorPlacement = props.errorPlacement,\n      errorPlacement = _props$errorPlacement === void 0 ? 'bottomStart' : _props$errorPlacement,\n      errorMessage = props.errorMessage,\n      name = props.name,\n      value = props.value,\n      _props$readOnly = props.readOnly,\n      readOnly = _props$readOnly === void 0 ? readOnlyContext : _props$readOnly,\n      _props$plaintext = props.plaintext,\n      plaintext = _props$plaintext === void 0 ? plaintextContext : _props$plaintext,\n      _props$disabled = props.disabled,\n      disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,\n      onChange = props.onChange,\n      onBlur = props.onBlur,\n      defaultValue = props.defaultValue,\n      _props$shouldResetWit = props.shouldResetWithUnmount,\n      shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"accepter\", \"classPrefix\", \"className\", \"checkAsync\", \"checkTrigger\", \"errorPlacement\", \"errorMessage\", \"name\", \"value\", \"readOnly\", \"plaintext\", \"disabled\", \"onChange\", \"onBlur\", \"defaultValue\", \"shouldResetWithUnmount\"]);\n\n  var _useContext2 = (0, _react.useContext)(_FormGroup.FormGroupContext),\n      controlId = _useContext2.controlId;\n\n  if (!onFieldChange) {\n    throw new Error(\"\\n      <FormControl> must be inside a component decorated with <Form>.\\n      And need to update React to 16.6.0 +.\\n    \");\n  }\n\n  (0, _utils.useWillUnmount)(function () {\n    if (shouldResetWithUnmount) {\n      removeFieldValue === null || removeFieldValue === void 0 ? void 0 : removeFieldValue(name);\n      removeFieldError === null || removeFieldError === void 0 ? void 0 : removeFieldError(name);\n    }\n  });\n  var trigger = checkTrigger || contextCheckTrigger;\n  var formValue = (0, _react.useContext)(_FormContext.FormValueContext);\n  var val = (0, _isUndefined.default)(value) ? formValue === null || formValue === void 0 ? void 0 : formValue[name] : value;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix('wrapper'));\n\n  var handleFieldChange = function handleFieldChange(value, event) {\n    handleFieldCheck(value, trigger === 'change');\n    onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(name, value, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  };\n\n  var handleFieldBlur = function handleFieldBlur(event) {\n    handleFieldCheck(val, trigger === 'blur');\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  };\n\n  var handleFieldCheck = function handleFieldCheck(value, isCheckTrigger) {\n    var _extends2;\n\n    var callbackEvents = function callbackEvents(checkResult) {\n      // The relevant event is triggered only when the inspection is allowed.\n      if (isCheckTrigger) {\n        if (checkResult.hasError) {\n          onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(name, (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult);\n        } else {\n          onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(name);\n        }\n      }\n\n      return checkResult;\n    };\n\n    var nextFormValue = (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[name] = value, _extends2));\n\n    if (checkAsync) {\n      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue).then(function (checkResult) {\n        return callbackEvents(checkResult);\n      });\n    }\n\n    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue)));\n  };\n\n  var messageNode = null;\n\n  if (!(0, _isUndefined.default)(errorMessage)) {\n    messageNode = errorMessage;\n  } else if (errorFromContext) {\n    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];\n\n    if (typeof fieldError === 'string' || !(fieldError !== null && fieldError !== void 0 && fieldError.array) && !(fieldError !== null && fieldError !== void 0 && fieldError.object) && fieldError !== null && fieldError !== void 0 && fieldError.hasError) {\n      messageNode = fieldError;\n    }\n  }\n\n  var ariaDescribedby = controlId ? controlId + \"-help-text\" : null;\n  var fieldHasError = Boolean(messageNode);\n  var ariaErrormessage = fieldHasError && controlId ? controlId + \"-error-message\" : undefined;\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 180,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends3.default)({\n    id: controlId,\n    \"aria-labelledby\": controlId ? controlId + \"-control-label\" : null,\n    \"aria-describedby\": ariaDescribedby,\n    \"aria-invalid\": fieldHasError || undefined,\n    \"aria-errormessage\": ariaErrormessage\n  }, rest, {\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled,\n    name: name,\n    onChange: handleFieldChange,\n    onBlur: handleFieldBlur,\n    defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : formDefaultValue[name],\n    value: val,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 181,\n      columnNumber: 7\n    }\n  })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {\n    id: controlId + \"-error-message\",\n    role: \"alert\",\n    \"aria-relevant\": \"all\",\n    show: !!messageNode,\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"message-wrapper\"]))),\n    placement: errorPlacement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 198,\n      columnNumber: 7\n    }\n  }, messageNode));\n});\n\nFormControl.displayName = 'FormControl';\nFormControl.propTypes = {\n  name: _propTypes.default.string.isRequired,\n  checkTrigger: _propTypes.default.oneOf(['change', 'blur', 'none']),\n  checkAsync: _propTypes.default.bool,\n  accepter: _propTypes.default.any,\n  onChange: _propTypes.default.func,\n  onBlur: _propTypes.default.func,\n  classPrefix: _propTypes.default.string,\n  errorMessage: _propTypes.default.node,\n  errorPlacement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd']),\n  value: _propTypes.default.any\n};\nvar _default = FormControl;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/FormControl/FormControl.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\n\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _FormContext = _interopRequireWildcard(__webpack_require__(/*! ../Form/FormContext */ \"./src/Form/FormContext.tsx\"));\n\nvar _FormGroup = __webpack_require__(/*! ../FormGroup/FormGroup */ \"./src/FormGroup/FormGroup.tsx\");\n\nvar _useRegisterModel = _interopRequireDefault(__webpack_require__(/*! ./useRegisterModel */ \"./src/FormControl/useRegisterModel.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/FormControl/FormControl.tsx\",\n    _this = void 0,\n    _templateObject;\n\nvar FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_FormContext.default),\n      readOnlyContext = _useContext.readOnly,\n      plaintextContext = _useContext.plaintext,\n      disabledContext = _useContext.disabled,\n      errorFromContext = _useContext.errorFromContext,\n      _useContext$formDefau = _useContext.formDefaultValue,\n      formDefaultValue = _useContext$formDefau === void 0 ? {} : _useContext$formDefau,\n      formError = _useContext.formError,\n      removeFieldValue = _useContext.removeFieldValue,\n      removeFieldError = _useContext.removeFieldError,\n      pushFieldRule = _useContext.pushFieldRule,\n      removeFieldRule = _useContext.removeFieldRule,\n      onFieldChange = _useContext.onFieldChange,\n      onFieldError = _useContext.onFieldError,\n      onFieldSuccess = _useContext.onFieldSuccess,\n      getCombinedModel = _useContext.getCombinedModel,\n      contextCheckTrigger = _useContext.checkTrigger;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$accepter = props.accepter,\n      AccepterComponent = _props$accepter === void 0 ? _Input.default : _props$accepter,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'form-control' : _props$classPrefix,\n      className = props.className,\n      checkAsync = props.checkAsync,\n      checkTrigger = props.checkTrigger,\n      _props$errorPlacement = props.errorPlacement,\n      errorPlacement = _props$errorPlacement === void 0 ? 'bottomStart' : _props$errorPlacement,\n      errorMessage = props.errorMessage,\n      name = props.name,\n      value = props.value,\n      _props$readOnly = props.readOnly,\n      readOnly = _props$readOnly === void 0 ? readOnlyContext : _props$readOnly,\n      _props$plaintext = props.plaintext,\n      plaintext = _props$plaintext === void 0 ? plaintextContext : _props$plaintext,\n      _props$disabled = props.disabled,\n      disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,\n      onChange = props.onChange,\n      onBlur = props.onBlur,\n      defaultValue = props.defaultValue,\n      _props$shouldResetWit = props.shouldResetWithUnmount,\n      shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,\n      rule = props.rule,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"accepter\", \"classPrefix\", \"className\", \"checkAsync\", \"checkTrigger\", \"errorPlacement\", \"errorMessage\", \"name\", \"value\", \"readOnly\", \"plaintext\", \"disabled\", \"onChange\", \"onBlur\", \"defaultValue\", \"shouldResetWithUnmount\", \"rule\"]);\n\n  var _useContext2 = (0, _react.useContext)(_FormGroup.FormGroupContext),\n      controlId = _useContext2.controlId;\n\n  if (!onFieldChange) {\n    throw new Error(\"\\n      <FormControl> must be inside a component decorated with <Form>.\\n      And need to update React to 16.6.0 +.\\n    \");\n  }\n\n  (0, _useRegisterModel.default)(name, pushFieldRule, removeFieldRule, rule);\n  (0, _utils.useWillUnmount)(function () {\n    if (shouldResetWithUnmount) {\n      removeFieldValue === null || removeFieldValue === void 0 ? void 0 : removeFieldValue(name);\n      removeFieldError === null || removeFieldError === void 0 ? void 0 : removeFieldError(name);\n    }\n  });\n  var trigger = checkTrigger || contextCheckTrigger;\n  var formValue = (0, _react.useContext)(_FormContext.FormValueContext);\n  var val = (0, _isUndefined.default)(value) ? formValue === null || formValue === void 0 ? void 0 : formValue[name] : value;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix('wrapper'));\n\n  var handleFieldChange = function handleFieldChange(value, event) {\n    handleFieldCheck(value, trigger === 'change');\n    onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(name, value, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  };\n\n  var handleFieldBlur = function handleFieldBlur(event) {\n    handleFieldCheck(val, trigger === 'blur');\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  };\n\n  var handleFieldCheck = function handleFieldCheck(value, isCheckTrigger) {\n    var _extends2;\n\n    var callbackEvents = function callbackEvents(checkResult) {\n      // The relevant event is triggered only when the inspection is allowed.\n      if (isCheckTrigger) {\n        if (checkResult.hasError) {\n          onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(name, (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult);\n        } else {\n          onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(name);\n        }\n      }\n\n      return checkResult;\n    };\n\n    var nextFormValue = (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[name] = value, _extends2));\n    var model = getCombinedModel();\n\n    if (checkAsync) {\n      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue).then(function (checkResult) {\n        return callbackEvents(checkResult);\n      });\n    }\n\n    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue)));\n  };\n\n  var messageNode = null;\n\n  if (!(0, _isUndefined.default)(errorMessage)) {\n    messageNode = errorMessage;\n  } else if (errorFromContext) {\n    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];\n\n    if (typeof fieldError === 'string' || !(fieldError !== null && fieldError !== void 0 && fieldError.array) && !(fieldError !== null && fieldError !== void 0 && fieldError.object) && fieldError !== null && fieldError !== void 0 && fieldError.hasError) {\n      messageNode = fieldError;\n    }\n  }\n\n  var ariaDescribedby = controlId ? controlId + \"-help-text\" : null;\n  var fieldHasError = Boolean(messageNode);\n  var ariaErrormessage = fieldHasError && controlId ? controlId + \"-error-message\" : undefined;\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 190,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends3.default)({\n    id: controlId,\n    \"aria-labelledby\": controlId ? controlId + \"-control-label\" : null,\n    \"aria-describedby\": ariaDescribedby,\n    \"aria-invalid\": fieldHasError || undefined,\n    \"aria-errormessage\": ariaErrormessage\n  }, rest, {\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled,\n    name: name,\n    onChange: handleFieldChange,\n    onBlur: handleFieldBlur,\n    defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : formDefaultValue[name],\n    value: val,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 191,\n      columnNumber: 7\n    }\n  })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {\n    id: controlId + \"-error-message\",\n    role: \"alert\",\n    \"aria-relevant\": \"all\",\n    show: !!messageNode,\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"message-wrapper\"]))),\n    placement: errorPlacement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 208,\n      columnNumber: 7\n    }\n  }, messageNode));\n});\n\nFormControl.displayName = 'FormControl';\nFormControl.propTypes = {\n  name: _propTypes.default.string.isRequired,\n  checkTrigger: _propTypes.default.oneOf(['change', 'blur', 'none']),\n  checkAsync: _propTypes.default.bool,\n  accepter: _propTypes.default.any,\n  onChange: _propTypes.default.func,\n  onBlur: _propTypes.default.func,\n  classPrefix: _propTypes.default.string,\n  errorMessage: _propTypes.default.node,\n  errorPlacement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd']),\n  value: _propTypes.default.any\n};\nvar _default = FormControl;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/FormControl/FormControl.tsx?");
 
 /***/ }),
 
@@ -2709,6 +2819,17 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/FormControl/useRegisterModel.ts":
+/*!*********************************************!*\
+  !*** ./src/FormControl/useRegisterModel.ts ***!
+  \*********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nfunction useRegisterModel(name, pushFieldRule, removeFieldRule, rule) {\n  var refRule = (0, _react.useRef)(rule);\n  refRule.current = rule;\n  (0, _react.useEffect)(function () {\n    pushFieldRule(name, refRule);\n    return function () {\n      removeFieldRule(name);\n    };\n  }, [name, pushFieldRule, removeFieldRule]);\n}\n\nvar _default = useRegisterModel;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/FormControl/useRegisterModel.ts?");
+
+/***/ }),
+
 /***/ "./src/FormControlLabel/FormControlLabel.tsx":
 /*!***************************************************!*\
   !*** ./src/FormControlLabel/FormControlLabel.tsx ***!
@@ -3189,7 +3310,7 @@ eval("\n\nexports.__esModule = true;\nexports.convertMaskToPlaceholder = convert
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _MenuContext = _interopRequireWildcard(__webpack_require__(/*! ./MenuContext */ \"./src/Menu/MenuContext.ts\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _useUniqueId = _interopRequireDefault(__webpack_require__(/*! ../utils/useUniqueId */ \"./src/utils/useUniqueId.ts\"));\n\nvar _useMenu = _interopRequireDefault(__webpack_require__(/*! ./useMenu */ \"./src/Menu/useMenu.ts\"));\n\nvar _useFocus2 = _interopRequireDefault(__webpack_require__(/*! ../utils/useFocus */ \"./src/utils/useFocus.ts\"));\n\nvar _useClickOutside = _interopRequireDefault(__webpack_require__(/*! ../utils/useClickOutside */ \"./src/utils/useClickOutside.ts\"));\n\nvar _events = __webpack_require__(/*! ../utils/events */ \"./src/utils/events.ts\");\n\nvar _dom = __webpack_require__(/*! ../utils/dom */ \"./src/utils/dom.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Menu/Menu.tsx\";\nvar defaultOpenMenuOn = ['click'];\n/**\n * Headless ARIA `menu`\n */\n\nfunction Menu(_ref) {\n  var _items$activeItemInde;\n\n  var disabled = _ref.disabled,\n      children = _ref.children,\n      _ref$openMenuOn = _ref.openMenuOn,\n      openMenuOn = _ref$openMenuOn === void 0 ? defaultOpenMenuOn : _ref$openMenuOn,\n      _ref$defaultOpen = _ref.defaultOpen,\n      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,\n      openProp = _ref.open,\n      menuButtonText = _ref.menuButtonText,\n      renderMenuButton = _ref.renderMenuButton,\n      renderMenuPopup = _ref.renderMenuPopup,\n      onToggleMenu = _ref.onToggleMenu;\n  var buttonElementRef = (0, _react.useRef)(null);\n  var menuElementRef = (0, _react.useRef)(null);\n  var parentMenu = (0, _react.useContext)(_MenuContext.default);\n  var isSubmenu = !!parentMenu;\n  var menu = (0, _useMenu.default)({\n    open: defaultOpen\n  });\n  var _menu$ = menu[0],\n      openState = _menu$.open,\n      items = _menu$.items,\n      activeItemIndex = _menu$.activeItemIndex,\n      dispatch = menu[1];\n  var openControlled = typeof openProp !== 'undefined';\n  var open = openControlled ? openProp : openState;\n\n  var _useCustom = (0, _utils.useCustom)('Menu'),\n      rtl = _useCustom.rtl;\n\n  var activeItem = (0, _isNil.default)(activeItemIndex) ? null : (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;\n\n  var _useFocus = (0, _useFocus2.default)(menuElementRef),\n      grabFocus = _useFocus.grab;\n\n  var openMenu = (0, _react.useCallback)(function (event) {\n    dispatch({\n      type: _MenuContext.MenuActionTypes.OpenMenu\n    });\n\n    if (!event.isTrusted) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.First\n      });\n    }\n\n    onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(true, event);\n    grabFocus();\n  }, [dispatch, onToggleMenu, grabFocus]);\n  var closeMenu = (0, _react.useCallback)(function (event, returnFocusToButton) {\n    if (returnFocusToButton === void 0) {\n      returnFocusToButton = true;\n    }\n\n    dispatch({\n      type: _MenuContext.MenuActionTypes.CloseMenu\n    });\n    dispatch({\n      type: _MenuContext.MenuActionTypes.MoveFocus,\n      to: _MenuContext.MoveFocusTo.None\n    });\n    onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(false, event);\n\n    if (returnFocusToButton) {\n      var _buttonElementRef$cur;\n\n      (_buttonElementRef$cur = buttonElementRef.current) === null || _buttonElementRef$cur === void 0 ? void 0 : _buttonElementRef$cur.focus({\n        preventScroll: true\n      });\n    }\n  }, [dispatch, onToggleMenu, buttonElementRef]);\n  var toggleMenu = (0, _react.useCallback)(function (event) {\n    if (!open) {\n      openMenu(event);\n    } else {\n      closeMenu(event);\n    }\n  }, [open, openMenu, closeMenu]);\n  (0, _useClickOutside.default)({\n    enabled: open,\n    isOutside: function isOutside(event) {\n      var _buttonElementRef$cur2, _menuElementRef$curre;\n\n      return !((_buttonElementRef$cur2 = buttonElementRef.current) !== null && _buttonElementRef$cur2 !== void 0 && _buttonElementRef$cur2.contains(event.target)) && !((_menuElementRef$curre = menuElementRef.current) !== null && _menuElementRef$curre !== void 0 && _menuElementRef$curre.contains(event.target));\n    },\n    // fixme if clicking on a focusable element, don't move focus to menu button\n    handle: function handle(event) {\n      return closeMenu(event, !(0, _dom.isFocusableElement)(event.target));\n    }\n  });\n  /**\n   * Keyboard interaction on menu button\n   * @see https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13\n   */\n\n  var handleButtonKeydown = (0, _react.useCallback)(function (e) {\n    switch (e.key) {\n      // Open the menu\n      case _utils.KEY_VALUES.ENTER:\n      case _utils.KEY_VALUES.SPACE:\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (!open) {\n          openMenu(e);\n          dispatch({\n            type: _MenuContext.MenuActionTypes.MoveFocus,\n            to: _MenuContext.MoveFocusTo.First\n          });\n        } else {\n          closeMenu(e);\n        }\n\n        break;\n      // Open the menu (if closed) and move focus to first item\n      // This is mostly useful after opening the menu with click\n\n      case _utils.KEY_VALUES.DOWN:\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (!open) {\n          openMenu(e);\n        }\n\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n        break;\n    }\n  }, [open, openMenu, closeMenu, dispatch]);\n  var handleButtonClick = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n\n    toggleMenu(event);\n  }, [disabled, toggleMenu]);\n  var handleButtonContextMenu = (0, _react.useCallback)(function (event) {\n    // prevents default contextmenu\n    event.preventDefault(); // Only opens menu on right click. Left click can close the menu opened by a right click\n\n    if (open) return;\n    if (disabled) return;\n    openMenu(event);\n  }, [open, disabled, openMenu]);\n  var buttonEventHandlers = (0, _react.useMemo)(function () {\n    var buttonEventHandlers = {\n      onKeyDown: handleButtonKeydown\n    };\n    /**\n     * Bind event of trigger,\n     * not used in  in the expanded state of '<Sidenav>'\n     */\n\n    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('click')) {\n      buttonEventHandlers.onClick = handleButtonClick;\n    }\n\n    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('contextmenu')) {\n      buttonEventHandlers.onContextMenu = handleButtonContextMenu;\n    }\n\n    return buttonEventHandlers;\n  }, [openMenuOn, handleButtonKeydown, handleButtonClick, handleButtonContextMenu]);\n  var buttonId = (0, _useUniqueId.default)('menubutton-');\n  var menuId = (0, _useUniqueId.default)('menu-');\n  var buttonAriaAttributes = (0, _react.useMemo)(function () {\n    // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14\n    return {\n      role: 'button',\n      'aria-haspopup': 'menu',\n      'aria-expanded': open || undefined,\n      // it's recommend to remove aria-expanded when menu is hidden\n      'aria-controls': menuId\n    };\n  }, [open, menuId]);\n  var buttonProps = (0, _react.useMemo)(function () {\n    return (0, _extends2.default)({\n      id: buttonId\n    }, buttonAriaAttributes, buttonEventHandlers, {\n      // render props\n      open: open\n    });\n  }, [buttonId, buttonAriaAttributes, buttonEventHandlers, open]);\n  var customMenuButton = (0, _react.useMemo)(function () {\n    return renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);\n  }, [renderMenuButton, buttonProps, buttonElementRef]);\n  var buttonElement = customMenuButton !== null && customMenuButton !== void 0 ? customMenuButton : /*#__PURE__*/_react.default.createElement(\"button\", (0, _extends2.default)({\n    ref: buttonElementRef\n  }, buttonProps, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 272,\n      columnNumber: 5\n    }\n  }), menuButtonText);\n  /**\n   * Keyboard interaction on menu\n   * @see https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12\n   */\n\n  var handleMenuKeydown = (0, _react.useCallback)(function (e) {\n    switch (e.key) {\n      // Move focus to previous item\n      case _utils.KEY_VALUES.UP:\n        e.preventDefault();\n        e.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Prev\n        });\n        break;\n      // Move focus to next item\n\n      case _utils.KEY_VALUES.DOWN:\n        e.preventDefault();\n        e.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Next\n        });\n        break;\n      // When focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n\n      case _utils.KEY_VALUES.RIGHT:\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (!rtl) {\n          if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.getAttribute('aria-haspopup')) === 'menu') {\n            activeItem.click();\n          }\n        } else if (isSubmenu) {\n          dispatch({\n            type: _MenuContext.MenuActionTypes.CloseMenu\n          });\n        }\n\n        break;\n      // When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.\n\n      case _utils.KEY_VALUES.LEFT:\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (!rtl) {\n          if (isSubmenu) {\n            closeMenu(e);\n          }\n        } else if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.getAttribute('aria-haspopup')) === 'menu') {\n          activeItem.click();\n        }\n\n        break;\n      // Move focus to the first item\n\n      case _utils.KEY_VALUES.HOME:\n        e.preventDefault();\n        e.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n        break;\n      // Move focus to the last item\n\n      case _utils.KEY_VALUES.END:\n        e.preventDefault();\n        e.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Last\n        });\n        break;\n      // - When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      // - Otherwise, activates the item and closes the menu.\n\n      case _utils.KEY_VALUES.ENTER:\n      case _utils.KEY_VALUES.SPACE:\n        if (activeItem) {\n          e.preventDefault();\n          e.stopPropagation();\n          activeItem.click();\n\n          if (!activeItem.getAttribute('aria-haspopup')) {\n            closeMenu(e);\n          }\n        }\n\n        break;\n      //  Close the menu that contains focus and return focus to the element or context,\n      //  e.g., menu button or parent menuitem, from which the menu was opened.\n\n      case _utils.KEY_VALUES.ESC:\n        closeMenu(e);\n        break;\n    }\n  }, [dispatch, activeItem, isSubmenu, rtl, closeMenu]); // Only used for clicks bubbling from child `menuitem`s.\n\n  var handleMenuClick = (0, _react.useCallback)(function (event) {\n    var target = event.target; // Only handle clicks on `menuitem`s\n\n    if (target.getAttribute('role') !== 'menuitem') return; // Ignore clicks on `menuitem`s that controls a submenu\n\n    if (target.getAttribute('aria-haspopup') === 'menu') return; // Ignore disabled `menuitem`s\n\n    if (target.getAttribute('aria-disabled') === 'true') return;\n    closeMenu(event, !isSubmenu);\n  }, [closeMenu, isSubmenu]); // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-13\n\n  var menuAriaAttributes = {\n    role: 'menu',\n    'aria-labelledby': buttonId,\n    'aria-activedescendant': activeItem === null || activeItem === void 0 ? void 0 : activeItem.id\n  };\n  var menuEventHandlers = {\n    onClick: handleMenuClick,\n    onKeyDown: handleMenuKeydown\n  };\n  var menuProps = (0, _extends2.default)({\n    id: menuId\n  }, menuAriaAttributes, menuEventHandlers, {\n    tabIndex: 0\n  });\n  var customMenuPopup = renderMenuPopup === null || renderMenuPopup === void 0 ? void 0 : renderMenuPopup((0, _extends2.default)({}, menuProps, {\n    open: open\n  }), menuElementRef); // fixme Wrong children here\n\n  var menuElement = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n    ref: menuElementRef\n  }, menuProps, {\n    hidden: !open,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 417,\n      columnNumber: 5\n    }\n  }), children);\n  var handleMouseEnter = (0, _react.useCallback)(function (e) {\n    if (!disabled) {\n      openMenu(e);\n    }\n  }, [disabled, openMenu]);\n  var handleMouseLeave = (0, _react.useCallback)(function (e) {\n    if (!disabled) {\n      closeMenu(e);\n    }\n  }, [disabled, closeMenu]);\n  var rootElementRef = (0, _react.useRef)(null);\n  var handleContainerBlur = (0, _react.useCallback)(function (event) {\n    if ((0, _events.isFocusLeaving)(event)) {\n      closeMenu(event, false);\n    }\n  }, [closeMenu]);\n  var rootEventHandlers = {\n    onBlur: handleContainerBlur\n  };\n\n  if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('mouseover')) {\n    rootEventHandlers.onMouseEnter = handleMouseEnter;\n    rootEventHandlers.onMouseLeave = handleMouseLeave;\n  }\n\n  var rootProps = (0, _extends2.default)({}, rootEventHandlers, {\n    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttonElement, /*#__PURE__*/_react.default.createElement(_MenuContext.default.Provider, {\n      value: menu,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 465,\n        columnNumber: 9\n      }\n    }, menuElement)),\n    // render props\n    open: open\n  });\n\n  if (isSubmenu) {\n    rootProps.role = 'none presentation';\n  }\n\n  return children(rootProps, rootElementRef);\n}\n\nMenu.displayName = 'Menu';\nMenu.propTypes = {\n  children: _propTypes.default.func.isRequired\n};\nvar _default = Menu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Menu/Menu.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _MenuContext = _interopRequireWildcard(__webpack_require__(/*! ./MenuContext */ \"./src/Menu/MenuContext.ts\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _useUniqueId = _interopRequireDefault(__webpack_require__(/*! ../utils/useUniqueId */ \"./src/utils/useUniqueId.ts\"));\n\nvar _useMenu = _interopRequireDefault(__webpack_require__(/*! ./useMenu */ \"./src/Menu/useMenu.ts\"));\n\nvar _useFocus2 = _interopRequireDefault(__webpack_require__(/*! ../utils/useFocus */ \"./src/utils/useFocus.ts\"));\n\nvar _useClickOutside = _interopRequireDefault(__webpack_require__(/*! ../utils/useClickOutside */ \"./src/utils/useClickOutside.ts\"));\n\nvar _events = __webpack_require__(/*! ../utils/events */ \"./src/utils/events.ts\");\n\nvar _dom = __webpack_require__(/*! ../utils/dom */ \"./src/utils/dom.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Menu/Menu.tsx\";\nvar defaultOpenMenuOn = ['click'];\n/**\n * Headless ARIA `menu`\n * @private\n */\n\nfunction Menu(_ref) {\n  var _items$activeItemInde;\n\n  var disabled = _ref.disabled,\n      children = _ref.children,\n      _ref$openMenuOn = _ref.openMenuOn,\n      openMenuOn = _ref$openMenuOn === void 0 ? defaultOpenMenuOn : _ref$openMenuOn,\n      _ref$defaultOpen = _ref.defaultOpen,\n      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,\n      openProp = _ref.open,\n      menuButtonText = _ref.menuButtonText,\n      renderMenuButton = _ref.renderMenuButton,\n      renderMenuPopup = _ref.renderMenuPopup,\n      onToggleMenu = _ref.onToggleMenu;\n  var buttonElementRef = (0, _react.useRef)(null);\n  var menuElementRef = (0, _react.useRef)(null);\n  var parentMenu = (0, _react.useContext)(_MenuContext.default);\n  var isSubmenu = !!parentMenu;\n  var menu = (0, _useMenu.default)({\n    open: defaultOpen\n  });\n  var _menu$ = menu[0],\n      openState = _menu$.open,\n      items = _menu$.items,\n      activeItemIndex = _menu$.activeItemIndex,\n      dispatch = menu[1];\n  var openControlled = typeof openProp !== 'undefined';\n  var open = openControlled ? openProp : openState;\n\n  var _useCustom = (0, _utils.useCustom)('Menu'),\n      rtl = _useCustom.rtl;\n\n  var activeItem = (0, _isNil.default)(activeItemIndex) ? null : (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;\n\n  var _useFocus = (0, _useFocus2.default)(menuElementRef),\n      grabFocus = _useFocus.grab;\n\n  var openMenu = (0, _react.useCallback)(function (event) {\n    dispatch({\n      type: _MenuContext.MenuActionTypes.OpenMenu\n    });\n\n    if (!event.isTrusted) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.First\n      });\n    }\n\n    onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(true, event);\n    grabFocus();\n  }, [dispatch, onToggleMenu, grabFocus]);\n  var closeMenu = (0, _react.useCallback)(function (event, returnFocusToButton) {\n    if (returnFocusToButton === void 0) {\n      returnFocusToButton = true;\n    }\n\n    dispatch({\n      type: _MenuContext.MenuActionTypes.CloseMenu\n    });\n    dispatch({\n      type: _MenuContext.MenuActionTypes.MoveFocus,\n      to: _MenuContext.MoveFocusTo.None\n    });\n    onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(false, event);\n\n    if (returnFocusToButton) {\n      var _buttonElementRef$cur;\n\n      (_buttonElementRef$cur = buttonElementRef.current) === null || _buttonElementRef$cur === void 0 ? void 0 : _buttonElementRef$cur.focus({\n        preventScroll: true\n      });\n    }\n  }, [dispatch, onToggleMenu, buttonElementRef]);\n  var toggleMenu = (0, _react.useCallback)(function (event) {\n    if (!open) {\n      openMenu(event);\n    } else {\n      closeMenu(event);\n    }\n  }, [open, openMenu, closeMenu]);\n  (0, _useClickOutside.default)({\n    enabled: open,\n    isOutside: function isOutside(event) {\n      var _buttonElementRef$cur2, _menuElementRef$curre;\n\n      return !((_buttonElementRef$cur2 = buttonElementRef.current) !== null && _buttonElementRef$cur2 !== void 0 && _buttonElementRef$cur2.contains(event.target)) && !((_menuElementRef$curre = menuElementRef.current) !== null && _menuElementRef$curre !== void 0 && _menuElementRef$curre.contains(event.target));\n    },\n    // fixme if clicking on a focusable element, don't move focus to menu button\n    handle: function handle(event) {\n      return closeMenu(event, !(0, _dom.isFocusableElement)(event.target));\n    }\n  });\n  /**\n   * Keyboard interaction on menu button\n   * @see https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13\n   */\n\n  var handleButtonKeydown = (0, _react.useCallback)(function (e) {\n    switch (e.key) {\n      // Open the menu\n      case _utils.KEY_VALUES.ENTER:\n      case _utils.KEY_VALUES.SPACE:\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (!open) {\n          openMenu(e);\n          dispatch({\n            type: _MenuContext.MenuActionTypes.MoveFocus,\n            to: _MenuContext.MoveFocusTo.First\n          });\n        } else {\n          closeMenu(e);\n        }\n\n        break;\n      // Open the menu (if closed) and move focus to first item\n      // This is mostly useful after opening the menu with click\n\n      case _utils.KEY_VALUES.DOWN:\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (!open) {\n          openMenu(e);\n        }\n\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n        break;\n    }\n  }, [open, openMenu, closeMenu, dispatch]);\n  var handleButtonClick = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n\n    toggleMenu(event);\n  }, [disabled, toggleMenu]);\n  var handleButtonContextMenu = (0, _react.useCallback)(function (event) {\n    // prevents default contextmenu\n    event.preventDefault(); // Only opens menu on right click. Left click can close the menu opened by a right click\n\n    if (open) return;\n    if (disabled) return;\n    openMenu(event);\n  }, [open, disabled, openMenu]);\n  var buttonEventHandlers = (0, _react.useMemo)(function () {\n    var buttonEventHandlers = {\n      onKeyDown: handleButtonKeydown\n    };\n    /**\n     * Bind event of trigger,\n     * not used in  in the expanded state of '<Sidenav>'\n     */\n\n    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('click')) {\n      buttonEventHandlers.onClick = handleButtonClick;\n    }\n\n    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('contextmenu')) {\n      buttonEventHandlers.onContextMenu = handleButtonContextMenu;\n    }\n\n    return buttonEventHandlers;\n  }, [openMenuOn, handleButtonKeydown, handleButtonClick, handleButtonContextMenu]);\n  var buttonId = (0, _useUniqueId.default)('menubutton-');\n  var menuId = (0, _useUniqueId.default)('menu-');\n  var buttonAriaAttributes = (0, _react.useMemo)(function () {\n    // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14\n    return {\n      role: 'button',\n      'aria-haspopup': 'menu',\n      'aria-expanded': open || undefined,\n      // it's recommend to remove aria-expanded when menu is hidden\n      'aria-controls': menuId\n    };\n  }, [open, menuId]);\n  var buttonProps = (0, _react.useMemo)(function () {\n    return (0, _extends2.default)({\n      id: buttonId\n    }, buttonAriaAttributes, buttonEventHandlers, {\n      // render props\n      open: open\n    });\n  }, [buttonId, buttonAriaAttributes, buttonEventHandlers, open]);\n  var customMenuButton = (0, _react.useMemo)(function () {\n    return renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);\n  }, [renderMenuButton, buttonProps, buttonElementRef]);\n  var buttonElement = customMenuButton !== null && customMenuButton !== void 0 ? customMenuButton : /*#__PURE__*/_react.default.createElement(\"button\", (0, _extends2.default)({\n    ref: buttonElementRef\n  }, buttonProps, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 273,\n      columnNumber: 5\n    }\n  }), menuButtonText);\n  /**\n   * Keyboard interaction on menu\n   * @see https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12\n   */\n\n  var handleMenuKeydown = (0, _react.useCallback)(function (e) {\n    switch (e.key) {\n      // Move focus to previous item\n      case _utils.KEY_VALUES.UP:\n        e.preventDefault();\n        e.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Prev\n        });\n        break;\n      // Move focus to next item\n\n      case _utils.KEY_VALUES.DOWN:\n        e.preventDefault();\n        e.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Next\n        });\n        break;\n      // When focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n\n      case _utils.KEY_VALUES.RIGHT:\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (!rtl) {\n          if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.getAttribute('aria-haspopup')) === 'menu') {\n            activeItem.click();\n          }\n        } else if (isSubmenu) {\n          dispatch({\n            type: _MenuContext.MenuActionTypes.CloseMenu\n          });\n        }\n\n        break;\n      // When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.\n\n      case _utils.KEY_VALUES.LEFT:\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (!rtl) {\n          if (isSubmenu) {\n            closeMenu(e);\n          }\n        } else if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.getAttribute('aria-haspopup')) === 'menu') {\n          activeItem.click();\n        }\n\n        break;\n      // Move focus to the first item\n\n      case _utils.KEY_VALUES.HOME:\n        e.preventDefault();\n        e.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n        break;\n      // Move focus to the last item\n\n      case _utils.KEY_VALUES.END:\n        e.preventDefault();\n        e.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Last\n        });\n        break;\n      // - When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      // - Otherwise, activates the item and closes the menu.\n\n      case _utils.KEY_VALUES.ENTER:\n      case _utils.KEY_VALUES.SPACE:\n        if (activeItem) {\n          e.preventDefault();\n          e.stopPropagation();\n          activeItem.click();\n\n          if (!activeItem.getAttribute('aria-haspopup')) {\n            closeMenu(e);\n          }\n        }\n\n        break;\n      //  Close the menu that contains focus and return focus to the element or context,\n      //  e.g., menu button or parent menuitem, from which the menu was opened.\n\n      case _utils.KEY_VALUES.ESC:\n        closeMenu(e);\n        break;\n    }\n  }, [dispatch, activeItem, isSubmenu, rtl, closeMenu]); // Only used for clicks bubbling from child `menuitem`s.\n\n  var handleMenuClick = (0, _react.useCallback)(function (event) {\n    var target = event.target; // Only handle clicks on `menuitem`s\n\n    if (target.getAttribute('role') !== 'menuitem') return; // Ignore clicks on `menuitem`s that controls a submenu\n\n    if (target.getAttribute('aria-haspopup') === 'menu') return; // Ignore disabled `menuitem`s\n\n    if (target.getAttribute('aria-disabled') === 'true') return;\n    closeMenu(event, !isSubmenu);\n  }, [closeMenu, isSubmenu]); // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-13\n\n  var menuAriaAttributes = {\n    role: 'menu',\n    'aria-labelledby': buttonId,\n    'aria-activedescendant': activeItem === null || activeItem === void 0 ? void 0 : activeItem.id\n  };\n  var menuEventHandlers = {\n    onClick: handleMenuClick,\n    onKeyDown: handleMenuKeydown\n  };\n  var menuProps = (0, _extends2.default)({\n    id: menuId\n  }, menuAriaAttributes, menuEventHandlers, {\n    tabIndex: 0\n  });\n  var customMenuPopup = renderMenuPopup === null || renderMenuPopup === void 0 ? void 0 : renderMenuPopup((0, _extends2.default)({}, menuProps, {\n    open: open\n  }), menuElementRef); // fixme Wrong children here\n\n  var menuElement = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n    ref: menuElementRef\n  }, menuProps, {\n    hidden: !open,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 418,\n      columnNumber: 5\n    }\n  }), children);\n  var handleMouseEnter = (0, _react.useCallback)(function (e) {\n    if (!disabled) {\n      openMenu(e);\n    }\n  }, [disabled, openMenu]);\n  var handleMouseLeave = (0, _react.useCallback)(function (e) {\n    if (!disabled) {\n      closeMenu(e);\n    }\n  }, [disabled, closeMenu]);\n  var rootElementRef = (0, _react.useRef)(null);\n  var handleContainerBlur = (0, _react.useCallback)(function (event) {\n    if ((0, _events.isFocusLeaving)(event)) {\n      closeMenu(event, false);\n    }\n  }, [closeMenu]);\n  var rootEventHandlers = {\n    onBlur: handleContainerBlur\n  };\n\n  if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('mouseover')) {\n    rootEventHandlers.onMouseEnter = handleMouseEnter;\n    rootEventHandlers.onMouseLeave = handleMouseLeave;\n  }\n\n  var rootProps = (0, _extends2.default)({}, rootEventHandlers, {\n    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttonElement, /*#__PURE__*/_react.default.createElement(_MenuContext.default.Provider, {\n      value: menu,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 466,\n        columnNumber: 9\n      }\n    }, menuElement)),\n    // render props\n    open: open\n  });\n\n  if (isSubmenu) {\n    rootProps.role = 'none presentation';\n  }\n\n  return children(rootProps, rootElementRef);\n}\n\nMenu.displayName = 'Menu';\nMenu.propTypes = {\n  children: _propTypes.default.func.isRequired\n};\nvar _default = Menu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Menu/Menu.tsx?");
 
 /***/ }),
 
@@ -3211,7 +3332,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _useUniqueId = _interopRequireDefault(__webpack_require__(/*! ../utils/useUniqueId */ \"./src/utils/useUniqueId.ts\"));\n\nvar _MenuContext = _interopRequireWildcard(__webpack_require__(/*! ./MenuContext */ \"./src/Menu/MenuContext.ts\"));\n\n/**\n * Headless ARIA `menuitem`\n */\nfunction MenuItem(props) {\n  var children = props.children,\n      _props$selected = props.selected,\n      selected = _props$selected === void 0 ? false : _props$selected,\n      _props$disabled = props.disabled,\n      disabled = _props$disabled === void 0 ? false : _props$disabled,\n      onActivate = props.onActivate;\n  var menuitemRef = (0, _react.useRef)(null);\n  var menuitemId = (0, _useUniqueId.default)('menuitem-');\n  var menu = (0, _react.useContext)(_MenuContext.default);\n\n  if (!menu) {\n    throw new Error('<MenuItem> must be rendered within a <Menu>');\n  }\n\n  var menuState = menu[0],\n      dispatch = menu[1]; // Whether this menuitem has focus (indicated by `aria-activedescendant` from parent menu)\n\n  var hasFocus = !(0, _isNil.default)(menuitemRef.current) && !(0, _isNil.default)(menuState.activeItemIndex) && menuState.items[menuState.activeItemIndex].element === menuitemRef.current;\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n\n    onActivate === null || onActivate === void 0 ? void 0 : onActivate(event);\n  }, [disabled, onActivate]); // Gain/release focus on mousedown in `menubar`\n\n  var handleMouseDown = (0, _react.useCallback)(function () {\n    if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.Specific,\n        id: menuitemRef.current.id\n      });\n    }\n  }, [dispatch, hasFocus]); // Gain/release focus on mouseenter/mouseleave in `menu`\n\n  var handleMouseMove = (0, _react.useCallback)(function () {\n    if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.Specific,\n        id: menuitemRef.current.id\n      });\n    }\n  }, [hasFocus, dispatch]);\n  var handleMouseLeave = (0, _react.useCallback)(function () {\n    dispatch({\n      type: _MenuContext.MenuActionTypes.MoveFocus,\n      to: _MenuContext.MoveFocusTo.None\n    });\n  }, [dispatch]);\n  (0, _react.useEffect)(function () {\n    var menuitemElement = menuitemRef.current;\n\n    if (menuitemElement) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.RegisterItem,\n        element: menuitemElement,\n        props: {\n          disabled: disabled\n        }\n      });\n      return function () {\n        dispatch({\n          type: _MenuContext.MenuActionTypes.UnregisterItem,\n          id: menuitemElement.id\n        });\n      };\n    }\n  }, [menuitemRef, disabled, dispatch]);\n  var menuitemProps = {\n    id: menuitemId,\n    role: 'menuitem',\n    // fixme Only use `aria-checked` on menuitemradio and menuitemcheckbox\n    'aria-checked': selected || undefined,\n    'aria-disabled': disabled,\n    tabIndex: -1,\n    onClick: handleClick,\n    // render props\n    selected: selected,\n    active: hasFocus\n  }; // Only move focus on hover in a `menu`, not `menubar`\n\n  if ((menuState === null || menuState === void 0 ? void 0 : menuState.role) === 'menu') {\n    menuitemProps.onMouseMove = handleMouseMove;\n    menuitemProps.onMouseLeave = handleMouseLeave;\n  }\n\n  if ((menuState === null || menuState === void 0 ? void 0 : menuState.role) === 'menubar') {\n    menuitemProps.onMouseDown = handleMouseDown;\n    menuitemProps.onMouseOver = handleMouseMove;\n    menuitemProps.onMouseLeave = handleMouseLeave;\n  }\n\n  return children(menuitemProps, menuitemRef);\n}\n\nMenuItem.displayName = 'MenuItem';\nMenuItem.propTypes = {\n  selected: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  children: _propTypes.default.func.isRequired,\n  onActivate: _propTypes.default.func\n};\nvar _default = MenuItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Menu/MenuItem.tsx?");
+eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _useUniqueId = _interopRequireDefault(__webpack_require__(/*! ../utils/useUniqueId */ \"./src/utils/useUniqueId.ts\"));\n\nvar _MenuContext = _interopRequireWildcard(__webpack_require__(/*! ./MenuContext */ \"./src/Menu/MenuContext.ts\"));\n\n/**\n * Headless ARIA `menuitem`\n * @private\n */\nfunction MenuItem(props) {\n  var children = props.children,\n      _props$selected = props.selected,\n      selected = _props$selected === void 0 ? false : _props$selected,\n      _props$disabled = props.disabled,\n      disabled = _props$disabled === void 0 ? false : _props$disabled,\n      onActivate = props.onActivate;\n  var menuitemRef = (0, _react.useRef)(null);\n  var menuitemId = (0, _useUniqueId.default)('menuitem-');\n  var menu = (0, _react.useContext)(_MenuContext.default);\n\n  if (!menu) {\n    throw new Error('<MenuItem> must be rendered within a <Menu>');\n  }\n\n  var menuState = menu[0],\n      dispatch = menu[1]; // Whether this menuitem has focus (indicated by `aria-activedescendant` from parent menu)\n\n  var hasFocus = !(0, _isNil.default)(menuitemRef.current) && !(0, _isNil.default)(menuState.activeItemIndex) && menuState.items[menuState.activeItemIndex].element === menuitemRef.current;\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n\n    onActivate === null || onActivate === void 0 ? void 0 : onActivate(event);\n  }, [disabled, onActivate]); // Gain/release focus on mousedown in `menubar`\n\n  var handleMouseDown = (0, _react.useCallback)(function () {\n    if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.Specific,\n        id: menuitemRef.current.id\n      });\n    }\n  }, [dispatch, hasFocus]); // Gain/release focus on mouseenter/mouseleave in `menu`\n\n  var handleMouseMove = (0, _react.useCallback)(function () {\n    if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.Specific,\n        id: menuitemRef.current.id\n      });\n    }\n  }, [hasFocus, dispatch]);\n  var handleMouseLeave = (0, _react.useCallback)(function () {\n    dispatch({\n      type: _MenuContext.MenuActionTypes.MoveFocus,\n      to: _MenuContext.MoveFocusTo.None\n    });\n  }, [dispatch]);\n  (0, _react.useEffect)(function () {\n    var menuitemElement = menuitemRef.current;\n\n    if (menuitemElement) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.RegisterItem,\n        element: menuitemElement,\n        props: {\n          disabled: disabled\n        }\n      });\n      return function () {\n        dispatch({\n          type: _MenuContext.MenuActionTypes.UnregisterItem,\n          id: menuitemElement.id\n        });\n      };\n    }\n  }, [menuitemRef, disabled, dispatch]);\n  var menuitemProps = {\n    id: menuitemId,\n    role: 'menuitem',\n    // fixme Only use `aria-checked` on menuitemradio and menuitemcheckbox\n    'aria-checked': selected || undefined,\n    'aria-disabled': disabled,\n    tabIndex: -1,\n    onClick: handleClick,\n    // render props\n    selected: selected,\n    active: hasFocus\n  }; // Only move focus on hover in a `menu`, not `menubar`\n\n  if ((menuState === null || menuState === void 0 ? void 0 : menuState.role) === 'menu') {\n    menuitemProps.onMouseMove = handleMouseMove;\n    menuitemProps.onMouseLeave = handleMouseLeave;\n  }\n\n  if ((menuState === null || menuState === void 0 ? void 0 : menuState.role) === 'menubar') {\n    menuitemProps.onMouseDown = handleMouseDown;\n    menuitemProps.onMouseOver = handleMouseMove;\n    menuitemProps.onMouseLeave = handleMouseLeave;\n  }\n\n  return children(menuitemProps, menuitemRef);\n}\n\nMenuItem.displayName = 'MenuItem';\nMenuItem.propTypes = {\n  selected: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  children: _propTypes.default.func.isRequired,\n  onActivate: _propTypes.default.func\n};\nvar _default = MenuItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Menu/MenuItem.tsx?");
 
 /***/ }),
 
@@ -3222,7 +3343,7 @@ eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/h
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = Menubar;\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _MenuContext = _interopRequireWildcard(__webpack_require__(/*! ./MenuContext */ \"./src/Menu/MenuContext.ts\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _events = __webpack_require__(/*! ../utils/events */ \"./src/utils/events.ts\");\n\nvar _useMenu = _interopRequireDefault(__webpack_require__(/*! ./useMenu */ \"./src/Menu/useMenu.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Menu/Menubar.tsx\";\n\nfunction Menubar(_ref) {\n  var _ref$vertical = _ref.vertical,\n      vertical = _ref$vertical === void 0 ? false : _ref$vertical,\n      children = _ref.children,\n      onActivateItem = _ref.onActivateItem;\n  var menubar = (0, _useMenu.default)({\n    role: 'menubar'\n  });\n  var _menubar$ = menubar[0],\n      items = _menubar$.items,\n      activeItemIndex = _menubar$.activeItemIndex,\n      dispatch = menubar[1];\n  var menubarElementRef = (0, _react.useRef)(null);\n  var onFocus = (0, _react.useCallback)(function (event) {\n    // Focus moves inside Menubar\n    if ((0, _events.isFocusEntering)(event)) {\n      if (activeItemIndex === null) {\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n      }\n    }\n  }, [activeItemIndex, dispatch]);\n  var onBlur = (0, _react.useCallback)(function (event) {\n    // Focus moves outside of Menubar\n    if ((0, _events.isFocusLeaving)(event)) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.None\n      });\n    }\n  }, [dispatch]);\n\n  var _useCustom = (0, _utils.useCustom)('Menubar'),\n      rtl = _useCustom.rtl;\n\n  var onKeyDown = (0, _react.useCallback)(function (event) {\n    var activeItemElement = (0, _isNil.default)(activeItemIndex) ? null : items[activeItemIndex].element;\n\n    switch (true) {\n      case !vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case !vertical && rtl && event.key === _utils.KEY_VALUES.LEFT:\n      case vertical && event.key === _utils.KEY_VALUES.DOWN:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Next\n        });\n        break;\n\n      case !vertical && !rtl && event.key === _utils.KEY_VALUES.LEFT:\n      case !vertical && rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case vertical && event.key === _utils.KEY_VALUES.UP:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Prev\n        });\n        break;\n\n      case event.key === _utils.KEY_VALUES.HOME:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n        break;\n\n      case event.key === _utils.KEY_VALUES.END:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Last\n        });\n        break;\n\n      case !vertical && event.key === _utils.KEY_VALUES.DOWN:\n      case vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case vertical && rtl && event.key === _utils.KEY_VALUES.LEFT:\n        if ((activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.getAttribute('aria-haspopup')) === 'menu') {\n          event.preventDefault();\n          event.stopPropagation();\n          activeItemElement.click();\n        }\n\n        break;\n\n      case event.key === _utils.KEY_VALUES.ENTER:\n      case event.key === _utils.KEY_VALUES.SPACE:\n        event.preventDefault();\n        event.stopPropagation();\n        activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.click();\n        break;\n    }\n  }, [rtl, items, activeItemIndex, dispatch, vertical]); // Only used for handling click events bubbling from children\n  // Which indicates that a child menuitem is being activated\n\n  var onClick = (0, _react.useCallback)(function (event) {\n    if (items.some(function (item) {\n      return item.element === event.target;\n    })) {\n      onActivateItem === null || onActivateItem === void 0 ? void 0 : onActivateItem(event);\n    }\n  }, [items, onActivateItem]);\n  return /*#__PURE__*/_react.default.createElement(_MenuContext.default.Provider, {\n    value: menubar,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 127,\n      columnNumber: 5\n    }\n  }, children({\n    role: 'menubar',\n    tabIndex: 0,\n    onFocus: onFocus,\n    onBlur: onBlur,\n    onKeyDown: onKeyDown,\n    onClick: onClick,\n    'aria-activedescendant': (0, _isNil.default)(activeItemIndex) ? undefined : items[activeItemIndex].element.id,\n    'aria-orientation': vertical ? 'vertical' : undefined // implicitly set 'horizontal'\n\n  }, menubarElementRef));\n}\n\n//# sourceURL=webpack://rsuite/./src/Menu/Menubar.tsx?");
+eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = Menubar;\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _MenuContext = _interopRequireWildcard(__webpack_require__(/*! ./MenuContext */ \"./src/Menu/MenuContext.ts\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _events = __webpack_require__(/*! ../utils/events */ \"./src/utils/events.ts\");\n\nvar _useMenu = _interopRequireDefault(__webpack_require__(/*! ./useMenu */ \"./src/Menu/useMenu.ts\"));\n\nvar _dom = __webpack_require__(/*! ../utils/dom */ \"./src/utils/dom.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Menu/Menubar.tsx\";\n\n/**\n * @private\n */\nfunction Menubar(_ref) {\n  var _items$activeItemInde3;\n\n  var _ref$vertical = _ref.vertical,\n      vertical = _ref$vertical === void 0 ? false : _ref$vertical,\n      children = _ref.children,\n      onActivateItem = _ref.onActivateItem;\n  var menubar = (0, _useMenu.default)({\n    role: 'menubar'\n  });\n  var _menubar$ = menubar[0],\n      items = _menubar$.items,\n      activeItemIndex = _menubar$.activeItemIndex,\n      dispatch = menubar[1];\n  var menubarElementRef = (0, _react.useRef)(null);\n  var onFocus = (0, _react.useCallback)(function (event) {\n    // Focus moves inside Menubar\n    if ((0, _events.isFocusEntering)(event) && // Skip if focus is moving to a focusable element within this menu\n    !(event.target !== event.currentTarget && (0, _dom.isFocusableElement)(event.target))) {\n      if (activeItemIndex === null) {\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n      }\n    }\n  }, [activeItemIndex, dispatch]);\n  var onBlur = (0, _react.useCallback)(function (event) {\n    // Focus moves outside of Menubar\n    if ((0, _events.isFocusLeaving)(event)) {\n      dispatch({\n        type: _MenuContext.MenuActionTypes.MoveFocus,\n        to: _MenuContext.MoveFocusTo.None\n      });\n    }\n  }, [dispatch]);\n\n  var _useCustom = (0, _utils.useCustom)('Menubar'),\n      rtl = _useCustom.rtl;\n\n  var onKeyDown = (0, _react.useCallback)(function (event) {\n    var _items$activeItemInde, _items$activeItemInde2;\n\n    var activeItemElement = (0, _isNil.default)(activeItemIndex) ? null : (_items$activeItemInde = (_items$activeItemInde2 = items[activeItemIndex]) === null || _items$activeItemInde2 === void 0 ? void 0 : _items$activeItemInde2.element) !== null && _items$activeItemInde !== void 0 ? _items$activeItemInde : null;\n\n    switch (true) {\n      case !vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case !vertical && rtl && event.key === _utils.KEY_VALUES.LEFT:\n      case vertical && event.key === _utils.KEY_VALUES.DOWN:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Next\n        });\n        break;\n\n      case !vertical && !rtl && event.key === _utils.KEY_VALUES.LEFT:\n      case !vertical && rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case vertical && event.key === _utils.KEY_VALUES.UP:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Prev\n        });\n        break;\n\n      case event.key === _utils.KEY_VALUES.HOME:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.First\n        });\n        break;\n\n      case event.key === _utils.KEY_VALUES.END:\n        event.preventDefault();\n        event.stopPropagation();\n        dispatch({\n          type: _MenuContext.MenuActionTypes.MoveFocus,\n          to: _MenuContext.MoveFocusTo.Last\n        });\n        break;\n\n      case !vertical && event.key === _utils.KEY_VALUES.DOWN:\n      case vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:\n      case vertical && rtl && event.key === _utils.KEY_VALUES.LEFT:\n        if ((activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.getAttribute('aria-haspopup')) === 'menu') {\n          event.preventDefault();\n          event.stopPropagation();\n          activeItemElement.click();\n        }\n\n        break;\n\n      case event.key === _utils.KEY_VALUES.ENTER:\n      case event.key === _utils.KEY_VALUES.SPACE:\n        event.preventDefault();\n        event.stopPropagation();\n        activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.click();\n        break;\n    }\n  }, [rtl, items, activeItemIndex, dispatch, vertical]); // Only used for handling click events bubbling from children\n  // Which indicates that a child menuitem is being activated\n\n  var onClick = (0, _react.useCallback)(function (event) {\n    if (items.some(function (item) {\n      return item.element === event.target;\n    })) {\n      onActivateItem === null || onActivateItem === void 0 ? void 0 : onActivateItem(event);\n    }\n  }, [items, onActivateItem]);\n  return /*#__PURE__*/_react.default.createElement(_MenuContext.default.Provider, {\n    value: menubar,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 135,\n      columnNumber: 5\n    }\n  }, children({\n    role: 'menubar',\n    tabIndex: 0,\n    onFocus: onFocus,\n    onBlur: onBlur,\n    onKeyDown: onKeyDown,\n    onClick: onClick,\n    'aria-activedescendant': (0, _isNil.default)(activeItemIndex) ? undefined : (_items$activeItemInde3 = items[activeItemIndex]) === null || _items$activeItemInde3 === void 0 ? void 0 : _items$activeItemInde3.element.id,\n    'aria-orientation': vertical ? 'vertical' : undefined // implicitly set 'horizontal'\n\n  }, menubarElementRef));\n}\n\n//# sourceURL=webpack://rsuite/./src/Menu/Menubar.tsx?");
 
 /***/ }),
 
@@ -3409,7 +3530,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _NavItem = _interopRequireDefault(__webpack_require__(/*! ./NavItem */ \"./src/Nav/NavItem.tsx\"));\n\nvar _Dropdown = _interopRequireDefault(__webpack_require__(/*! ../Dropdown */ \"./src/Dropdown/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Navbar = __webpack_require__(/*! ../Navbar/Navbar */ \"./src/Navbar/Navbar.tsx\");\n\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _useEnsuredRef = _interopRequireDefault(__webpack_require__(/*! ../utils/useEnsuredRef */ \"./src/utils/useEnsuredRef.ts\"));\n\nvar _Menubar = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menubar */ \"./src/Menu/Menubar.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/Nav.tsx\",\n    _this = void 0;\n\nvar Nav = /*#__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 ? 'nav' : _props$classPrefix,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      vertical = props.vertical,\n      justified = props.justified,\n      reversed = props.reversed,\n      pullRight = props.pullRight,\n      className = props.className,\n      children = props.children,\n      activeKeyProp = props.activeKey,\n      onSelectProp = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"appearance\", \"vertical\", \"justified\", \"reversed\", \"pullRight\", \"className\", \"children\", \"activeKey\", \"onSelect\"]);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext); // Whether inside a <Navbar>\n\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var menubarRef = (0, _useEnsuredRef.default)(ref);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge,\n      rootPrefix = _useClassNames.rootPrefix,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, rootPrefix({\n    'navbar-nav': navbar,\n    'navbar-right': pullRight,\n    'sidenav-nav': sidenav\n  }), withClassPrefix(appearance, {\n    horizontal: navbar || !vertical && !sidenav,\n    vertical: vertical || sidenav,\n    justified: justified,\n    reversed: reversed\n  }));\n\n  var _ref = sidenav || {},\n      activeKeyFromSidenav = _ref.activeKey,\n      _ref$onSelect = _ref.onSelect,\n      onSelectFromSidenav = _ref$onSelect === void 0 ? onSelectProp : _ref$onSelect;\n\n  var activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav;\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      withinNav: true,\n      activeKey: activeKey,\n      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav\n    };\n  }, [activeKey, onSelectFromSidenav, onSelectProp]);\n\n  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 98,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n      ref: ref,\n      className: classes\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 99,\n        columnNumber: 9\n      }\n    }), children));\n  }\n\n  var hasWaterline = appearance !== 'default'; // If inside a collapsed <Sidenav>, render an ARIA `menubar` (vertical)\n\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 111,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {\n      vertical: !!sidenav,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 112,\n        columnNumber: 9\n      }\n    }, function (menubar, ref) {\n      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n        ref: ref\n      }, rest, {\n        className: classes\n      }, menubar, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 114,\n          columnNumber: 13\n        }\n      }), children);\n    }));\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 123,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: menubarRef,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 124,\n      columnNumber: 7\n    }\n  }), children, hasWaterline && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('bar'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 126,\n      columnNumber: 26\n    }\n  })));\n});\n\nNav.Dropdown = _Dropdown.default;\nNav.Item = _NavItem.default;\nNav.displayName = 'Nav';\nNav.propTypes = {\n  classPrefix: _propTypes.default.string,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  appearance: _propTypes.default.oneOf(['default', 'subtle', 'tabs']),\n  // Reverse Direction of tabs/subtle\n  reversed: _propTypes.default.bool,\n  justified: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  pullRight: _propTypes.default.bool,\n  activeKey: _propTypes.default.any,\n  onSelect: _propTypes.default.func\n};\nvar _default = Nav;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/Nav.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _NavItem = _interopRequireDefault(__webpack_require__(/*! ./NavItem */ \"./src/Nav/NavItem.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Navbar = __webpack_require__(/*! ../Navbar/Navbar */ \"./src/Navbar/Navbar.tsx\");\n\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _useEnsuredRef = _interopRequireDefault(__webpack_require__(/*! ../utils/useEnsuredRef */ \"./src/utils/useEnsuredRef.ts\"));\n\nvar _Menubar = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menubar */ \"./src/Menu/Menubar.tsx\"));\n\nvar _NavDropdown = _interopRequireDefault(__webpack_require__(/*! ./NavDropdown */ \"./src/Nav/NavDropdown.tsx\"));\n\nvar _NavMenu = _interopRequireWildcard(__webpack_require__(/*! ./NavMenu */ \"./src/Nav/NavMenu.tsx\"));\n\nvar _deprecateComponent = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecateComponent */ \"./src/utils/deprecateComponent.tsx\"));\n\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\n\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\n\nvar _NavbarDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Navbar/NavbarDropdownItem */ \"./src/Navbar/NavbarDropdownItem.tsx\"));\n\nvar _SidenavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavDropdownItem */ \"./src/Sidenav/SidenavDropdownItem.tsx\"));\n\nvar _NavbarItem = _interopRequireDefault(__webpack_require__(/*! ../Navbar/NavbarItem */ \"./src/Navbar/NavbarItem.tsx\"));\n\nvar _SidenavItem = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavItem */ \"./src/Sidenav/SidenavItem.tsx\"));\n\nvar _useInternalId = _interopRequireDefault(__webpack_require__(/*! ../utils/useInternalId */ \"./src/utils/useInternalId.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/Nav.tsx\",\n    _this = void 0;\n\nvar Nav = /*#__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 ? 'nav' : _props$classPrefix,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      vertical = props.vertical,\n      justified = props.justified,\n      reversed = props.reversed,\n      pullRight = props.pullRight,\n      className = props.className,\n      children = props.children,\n      activeKeyProp = props.activeKey,\n      onSelectProp = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"appearance\", \"vertical\", \"justified\", \"reversed\", \"pullRight\", \"className\", \"children\", \"activeKey\", \"onSelect\"]);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext); // Whether inside a <Navbar>\n\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var menubarRef = (0, _useEnsuredRef.default)(ref);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge,\n      rootPrefix = _useClassNames.rootPrefix,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, rootPrefix({\n    'navbar-nav': navbar,\n    'navbar-right': pullRight,\n    'sidenav-nav': sidenav\n  }), withClassPrefix(appearance, {\n    horizontal: navbar || !vertical && !sidenav,\n    vertical: vertical || sidenav,\n    justified: justified,\n    reversed: reversed\n  }));\n\n  var _ref = sidenav || {},\n      activeKeyFromSidenav = _ref.activeKey,\n      _ref$onSelect = _ref.onSelect,\n      onSelectFromSidenav = _ref$onSelect === void 0 ? onSelectProp : _ref$onSelect;\n\n  var activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav;\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      activeKey: activeKey,\n      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav\n    };\n  }, [activeKey, onSelectFromSidenav, onSelectProp]);\n\n  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 110,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n      ref: ref,\n      className: classes\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 111,\n        columnNumber: 9\n      }\n    }), children));\n  }\n\n  var hasWaterline = appearance !== 'default'; // If inside a collapsed <Sidenav>, render an ARIA `menubar` (vertical)\n\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 123,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {\n      vertical: !!sidenav,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 124,\n        columnNumber: 9\n      }\n    }, function (menubar, ref) {\n      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n        ref: ref\n      }, rest, {\n        className: classes\n      }, menubar, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 126,\n          columnNumber: 13\n        }\n      }), children);\n    }));\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 135,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: menubarRef,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 136,\n      columnNumber: 7\n    }\n  }), children, hasWaterline && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('bar'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 138,\n      columnNumber: 26\n    }\n  })));\n});\n\nvar DeprecatedNavDropdown = (0, _deprecateComponent.default)(_NavDropdown.default, '<Nav.Dropdown> is deprecated, use <Nav.Menu> instead.');\nDeprecatedNavDropdown.Menu = (0, _deprecateComponent.default)(_NavDropdownMenu.default, '<Nav.Dropdown.Menu> is deprecated, use <Nav.Menu> instead');\nDeprecatedNavDropdown.Item = (0, _deprecateComponent.default)(_NavDropdownItem.default, '<Nav.Dropdown.Item> is deprecated, use <Nav.Item> instead');\nNav.Dropdown = DeprecatedNavDropdown;\n/**\n * The <Nav.Item> API\n * When used as direct child of <Nav>, render the NavItem\n * When used within a <Nav.Menu>, render the NavDropdownItem\n */\n\nNav.Item = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!nav) {\n    throw new Error('<Nav.Item> must be rendered within a <Nav> component.');\n  }\n\n  var parentNavMenu = (0, _react.useContext)(_NavMenu.NavMenuContext);\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  var _ref2 = parentNavMenu !== null && parentNavMenu !== void 0 ? parentNavMenu : [],\n      dispatch = _ref2[1];\n\n  var _id = (0, _useInternalId.default)('Nav.Item');\n\n  (0, _react.useEffect)(function () {\n    if (dispatch) {\n      var _props$active;\n\n      dispatch({\n        type: _NavMenu.NavMenuActionType.RegisterItem,\n        payload: {\n          _id: _id,\n          eventKey: props.eventKey,\n          active: (_props$active = props.active) !== null && _props$active !== void 0 ? _props$active : false\n        }\n      });\n      return function () {\n        dispatch({\n          type: _NavMenu.NavMenuActionType.UnregisterItem,\n          payload: {\n            _id: _id\n          }\n        });\n      };\n    }\n  }, [dispatch, _id, props.eventKey, props.active]);\n\n  if (parentNavMenu) {\n    if (navbar) {\n      return /*#__PURE__*/_react.default.createElement(_NavbarDropdownItem.default, (0, _extends2.default)({\n        ref: ref\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 201,\n          columnNumber: 14\n        }\n      }));\n    }\n\n    if (sidenav) {\n      return /*#__PURE__*/_react.default.createElement(_SidenavDropdownItem.default, (0, _extends2.default)({\n        ref: ref\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 205,\n          columnNumber: 14\n        }\n      }));\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_NavDropdownItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 208,\n        columnNumber: 12\n      }\n    }));\n  }\n\n  if (navbar) {\n    return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 212,\n        columnNumber: 12\n      }\n    }));\n  }\n\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_SidenavItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 216,\n        columnNumber: 12\n      }\n    }));\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_NavItem.default, (0, _extends2.default)({\n    ref: ref\n  }, props, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 219,\n      columnNumber: 10\n    }\n  }));\n});\nNav.Item.displayName = 'Nav.Item';\nNav.Menu = _NavMenu.default;\nNav.displayName = 'Nav';\nNav.propTypes = {\n  classPrefix: _propTypes.default.string,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  appearance: _propTypes.default.oneOf(['default', 'subtle', 'tabs']),\n  // Reverse Direction of tabs/subtle\n  reversed: _propTypes.default.bool,\n  justified: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  pullRight: _propTypes.default.bool,\n  activeKey: _propTypes.default.any,\n  onSelect: _propTypes.default.func\n};\nvar _default = Nav;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/Nav.tsx?");
 
 /***/ }),
 
@@ -3420,7 +3541,51 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _noop = _interopRequireDefault(__webpack_require__(/*! lodash/noop */ \"./node_modules/lodash/noop.js\"));\n\nvar NavContext = /*#__PURE__*/_react.default.createContext({\n  withinNav: false,\n  activeKey: null,\n  onSelect: _noop.default\n});\n\nvar _default = NavContext;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavContext.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar NavContext = /*#__PURE__*/_react.default.createContext(null);\n\nvar _default = NavContext;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavContext.ts?");
+
+/***/ }),
+
+/***/ "./src/Nav/NavDropdown.tsx":
+/*!*********************************!*\
+  !*** ./src/Nav/NavDropdown.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _DropdownState = __webpack_require__(/*! ../Dropdown/DropdownState */ \"./src/Dropdown/DropdownState.ts\");\n\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menu */ \"./src/Menu/Menu.tsx\"));\n\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\n\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\n\nvar _NavDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownToggle */ \"./src/Nav/NavDropdownToggle.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/NavDropdown.tsx\",\n    _this = void 0;\n\n/**\n * @private this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Menu> call\n *\n * <Nav>\n *   <Nav.Menu> -> This will render <NavDropdown> component\n *   </Nav.Menu>\n * </Nav>\n */\nvar NavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!nav) {\n    throw new Error('<Nav.Dropdown> must be rendered within a <Nav> component.');\n  }\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      title = props.title,\n      onClose = props.onClose,\n      onOpen = props.onOpen,\n      onToggle = props.onToggle,\n      eventKey = props.eventKey,\n      _props$trigger = props.trigger,\n      trigger = _props$trigger === void 0 ? 'click' : _props$trigger,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      toggleAs = props.toggleAs,\n      toggleClassName = props.toggleClassName,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,\n      className = props.className,\n      disabled = props.disabled,\n      children = props.children,\n      menuStyle = props.menuStyle,\n      style = props.style,\n      toggleProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"title\", \"onClose\", \"onOpen\", \"onToggle\", \"eventKey\", \"trigger\", \"placement\", \"toggleAs\", \"toggleClassName\", \"classPrefix\", \"className\", \"disabled\", \"children\", \"menuStyle\", \"style\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  var menuButtonTriggers = (0, _react.useMemo)(function () {\n    if (!trigger) {\n      return undefined;\n    }\n\n    var triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n\n    return trigger.map(function (t) {\n      return triggerMap[t];\n    });\n  }, [trigger]);\n\n  var _useReducer = (0, _react.useReducer)(_DropdownState.reducer, _DropdownState.initialState),\n      items = _useReducer[0].items;\n\n  var hasSelectedItem = (0, _react.useMemo)(function () {\n    return items.some(function (item) {\n      return item.props.selected;\n    });\n  }, [items]);\n\n  var renderMenuButton = function renderMenuButton(menuButtonProps, menuButtonRef) {\n    return /*#__PURE__*/_react.default.createElement(_NavDropdownToggle.default, (0, _extends2.default)({\n      ref: menuButtonRef,\n      as: toggleAs,\n      className: toggleClassName,\n      placement: placement,\n      disabled: disabled\n    }, (0, _omit.default)(menuButtonProps, ['open']), (0, _omit.default)(toggleProps, ['data-testid']), {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 163,\n        columnNumber: 7\n      }\n    }), title);\n  };\n\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    renderMenuButton: renderMenuButton,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: function renderMenuPopup(_ref, popupRef) {\n      var open = _ref.open,\n          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"open\"]);\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 184,\n          columnNumber: 13\n        }\n      }), children);\n    },\n    onToggleMenu: function onToggleMenu(open, event) {\n      onToggle === null || onToggle === void 0 ? void 0 : onToggle(open, eventKey, event);\n\n      if (open) {\n        onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n      } else {\n        onClose === null || onClose === void 0 ? void 0 : onClose();\n      }\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 177,\n      columnNumber: 7\n    }\n  }, function (_ref2, menuContainerRef) {\n    var _withClassPrefix;\n\n    var open = _ref2.open,\n        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"open\"]);\n    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix['selected-within'] = hasSelectedItem, _withClassPrefix)));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 215,\n        columnNumber: 13\n      }\n    }));\n  });\n});\n\nNavDropdown.Item = _NavDropdownItem.default;\nNavDropdown.Menu = _NavDropdownMenu.default;\nNavDropdown.displayName = 'Nav.Dropdown';\nNavDropdown.propTypes = {\n  classPrefix: _propTypes.default.string,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover', 'contextMenu'])]),\n  placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),\n  title: _propTypes.default.node,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  menuStyle: _propTypes.default.object,\n  className: _propTypes.default.string,\n  toggleClassName: _propTypes.default.string,\n  children: _propTypes.default.node,\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  eventKey: _propTypes.default.any,\n  as: _propTypes.default.elementType,\n  toggleAs: _propTypes.default.elementType,\n  noCaret: _propTypes.default.bool,\n  style: _propTypes.default.object,\n  onClose: _propTypes.default.func,\n  onOpen: _propTypes.default.func,\n  onToggle: _propTypes.default.func,\n  onMouseEnter: _propTypes.default.func,\n  onMouseLeave: _propTypes.default.func,\n  onContextMenu: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  renderToggle: _propTypes.default.func\n};\nvar _default = NavDropdown;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavDropdown.tsx?");
+
+/***/ }),
+
+/***/ "./src/Nav/NavDropdownItem.tsx":
+/*!*************************************!*\
+  !*** ./src/Nav/NavDropdownItem.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _useRenderDropdownItem = __webpack_require__(/*! ../Dropdown/useRenderDropdownItem */ \"./src/Dropdown/useRenderDropdownItem.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/NavDropdownItem.tsx\",\n    _this = void 0;\n\n/**\n * @private\n */\nvar NavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!nav) {\n    throw new Error('<Nav.Dropdown.Item> should be used within a <Nav> component.');\n  }\n\n  var _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,\n      className = props.className,\n      activeProp = props.active,\n      eventKey = props.eventKey,\n      onSelect = props.onSelect,\n      icon = props.icon,\n      _props$as = props.as,\n      Component = _props$as === void 0 ? 'li' : _props$as,\n      divider = props.divider,\n      panel = props.panel,\n      children = props.children,\n      disabled = props.disabled,\n      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"classPrefix\", \"className\", \"active\", \"eventKey\", \"onSelect\", \"icon\", \"as\", \"divider\", \"panel\", \"children\", \"disabled\"]);\n  var activeKey = nav.activeKey,\n      onSelectFromNav = nav.onSelect;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(activeKey, eventKey);\n  var handleSelectItem = (0, _react.useCallback)(function (event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);\n  }, [onSelect, eventKey, onSelectFromNav]);\n  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);\n\n  if (divider) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      role: 'separator',\n      className: merge(prefix('divider'), className)\n    }, restProps));\n  }\n\n  if (panel) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      className: merge(prefix('panel'), className),\n      children: children\n    }, restProps));\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n    selected: selected,\n    disabled: disabled,\n    onActivate: handleSelectItem,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 116,\n      columnNumber: 7\n    }\n  }, function (_ref, menuitemRef) {\n    var selected = _ref.selected,\n        active = _ref.active,\n        menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"selected\", \"active\"]);\n    var classes = merge(className, withClassPrefix({\n      'with-icon': icon,\n      active: selected,\n      disabled: disabled,\n      focus: active,\n      divider: divider,\n      panel: panel\n    }));\n    var dataAttributes = {\n      'data-event-key': eventKey\n    };\n\n    if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {\n      dataAttributes['data-event-key-type'] = typeof eventKey;\n    }\n\n    return renderDropdownItem((0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuitemRef),\n      className: classes\n    }, menuitem, dataAttributes, restProps, {\n      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n        className: prefix('menu-icon')\n      }), children)\n    }));\n  });\n});\n\nNavDropdownItem.displayName = 'Nav.Dropdown.Item';\nNavDropdownItem.propTypes = {\n  as: _propTypes.default.elementType,\n  divider: _propTypes.default.bool,\n  panel: _propTypes.default.bool,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  onSelect: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  icon: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  style: _propTypes.default.object,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number\n};\nvar _default = NavDropdownItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavDropdownItem.tsx?");
+
+/***/ }),
+
+/***/ "./src/Nav/NavDropdownMenu.tsx":
+/*!*************************************!*\
+  !*** ./src/Nav/NavDropdownMenu.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menu */ \"./src/Menu/Menu.tsx\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\n\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\n\nvar _useCustom2 = _interopRequireDefault(__webpack_require__(/*! ../utils/useCustom */ \"./src/utils/useCustom.ts\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/NavDropdownMenu.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2;\n\n/**\n * @private\n */\nvar NavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!nav) {\n    throw new Error('<Nav.Dropdown.Menu> should be used within a <Nav> component.');\n  }\n\n  var onToggle = props.onToggle,\n      eventKey = props.eventKey,\n      title = props.title,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,\n      children = props.children,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"onToggle\", \"eventKey\", \"title\", \"classPrefix\", \"children\"]);\n\n  var _useCustom = (0, _useCustom2.default)('DropdownMenu'),\n      rtl = _useCustom.rtl;\n\n  var handleToggleSubmenu = (0, _react.useCallback)(function (open, event) {\n    onToggle === null || onToggle === void 0 ? void 0 : onToggle(open, eventKey, event);\n  }, [eventKey, onToggle]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),\n      mergeItemClassNames = _useClassNames3.merge,\n      withItemClassPrefix = _useClassNames3.withClassPrefix,\n      prefixItemClassName = _useClassNames3.prefix; // Parent menu exists. This is a submenu.\n  // Should render a `menuitem` that controls this submenu.\n\n\n  var _omit = (0, _omit2.default)(rest, ['trigger']),\n      icon = _omit.icon,\n      className = _omit.className,\n      disabled = _omit.disabled,\n      menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, [\"icon\", \"className\", \"disabled\"]);\n\n  var Icon = rtl ? _AngleLeft.default : _AngleRight.default;\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    openMenuOn: ['mouseover', 'click'],\n    renderMenuButton: function renderMenuButton(_ref, buttonRef) {\n      var open = _ref.open,\n          menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"open\"]);\n      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n        disabled: disabled,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 81,\n          columnNumber: 9\n        }\n      }, function (_ref2, menuitemRef) {\n        var selected = _ref2.selected,\n            active = _ref2.active,\n            menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"selected\", \"active\"]);\n        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"toggle\"]))), withItemClassPrefix({\n          'with-icon': icon,\n          open: open,\n          active: selected,\n          disabled: disabled,\n          focus: active\n        }));\n        return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n          ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),\n          className: classes,\n          \"data-event-key\": eventKey,\n          \"data-event-key-type\": typeof eventKey\n        }, menuitem, (0, _omit2.default)(menuButtonProps, ['role']), {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 96,\n            columnNumber: 15\n          }\n        }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n          className: prefix('menu-icon')\n        }), title, /*#__PURE__*/_react.default.createElement(Icon, {\n          className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"toggle-icon\"]))),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 106,\n            columnNumber: 17\n          }\n        }));\n      });\n    },\n    renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {\n      var open = _ref3.open,\n          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3, [\"open\"]);\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        hidden: !open\n      }, popupProps, menuProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 116,\n          columnNumber: 11\n        }\n      }), children);\n    },\n    onToggleMenu: handleToggleSubmenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 78,\n      columnNumber: 5\n    }\n  }, function (_ref4, menuContainerRef) {\n    var open = _ref4.open,\n        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref4, [\"open\"]);\n    var classes = mergeItemClassNames(className, withItemClassPrefix({\n      disabled: disabled,\n      open: open,\n      submenu: true\n    }));\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 139,\n        columnNumber: 11\n      }\n    }));\n  });\n});\n\nNavDropdownMenu.displayName = 'Nav.Dropdown.Menu';\nNavDropdownMenu.propTypes = {\n  active: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  icon: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  pullLeft: _propTypes.default.bool,\n  title: _propTypes.default.node,\n  open: _propTypes.default.bool,\n  eventKey: _propTypes.default.any,\n  expanded: _propTypes.default.bool,\n  collapsible: _propTypes.default.bool,\n  onToggle: _propTypes.default.func\n};\nvar _default = NavDropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavDropdownMenu.tsx?");
+
+/***/ }),
+
+/***/ "./src/Nav/NavDropdownToggle.tsx":
+/*!***************************************!*\
+  !*** ./src/Nav/NavDropdownToggle.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\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/ArrowDownLine.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _NavItem = _interopRequireDefault(__webpack_require__(/*! ./NavItem */ \"./src/Nav/NavItem.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/NavDropdownToggle.tsx\",\n    _this = void 0;\n\n/**\n * @private this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Menu> call\n *\n * <Nav>\n *   <Nav.Menu> -> This will render <NavDropdown> component that renders a <NavDropdownToggle>\n *   </Nav.Menu>\n * </Nav>\n */\nvar NavDropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _NavItem.default : _props$as,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-toggle' : _props$classPrefix,\n      renderToggle = props.renderToggle,\n      children = props.children,\n      noCaret = props.noCaret,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"renderToggle\", \"children\", \"noCaret\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('nav-item'),\n      prefixNavItem = _useClassNames2.prefix;\n\n  var classes = merge(className, withClassPrefix({\n    'no-caret': noCaret\n  }));\n\n  var toggle = /*#__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: 7\n    }\n  }), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {\n    className: prefixNavItem('caret'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 44,\n      columnNumber: 22\n    }\n  }));\n\n  return renderToggle ? renderToggle(rest, ref) : toggle;\n});\n\nNavDropdownToggle.displayName = 'Nav.Dropdown.Toggle';\nNavDropdownToggle.propTypes = {\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  noCaret: _propTypes.default.bool,\n  as: _propTypes.default.elementType,\n  renderToggle: _propTypes.default.func,\n  placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])\n};\nvar _default = NavDropdownToggle;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavDropdownToggle.tsx?");
 
 /***/ }),
 
@@ -3431,7 +3596,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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _Navbar = __webpack_require__(/*! ../Navbar/Navbar */ \"./src/Navbar/Navbar.tsx\");\n\nvar _SidenavItem = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavItem */ \"./src/Sidenav/SidenavItem.tsx\"));\n\nvar _NavbarItem = _interopRequireDefault(__webpack_require__(/*! ../Navbar/NavbarItem */ \"./src/Navbar/NavbarItem.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/NavItem.tsx\",\n    _this = void 0;\n\n/**\n * The <Nav.Item> API\n */\nvar NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,\n      activeProp = props.active,\n      disabled = props.disabled,\n      eventKey = props.eventKey,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'nav-item' : _props$classPrefix,\n      style = props.style,\n      children = props.children,\n      icon = props.icon,\n      divider = props.divider,\n      panel = props.panel,\n      onClick = props.onClick,\n      onSelectProp = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"active\", \"disabled\", \"eventKey\", \"className\", \"classPrefix\", \"style\", \"children\", \"icon\", \"divider\", \"panel\", \"onClick\", \"onSelect\"]);\n\n  var _useContext = (0, _react.useContext)(_NavContext.default),\n      activeKey = _useContext.activeKey,\n      onSelectFromNav = _useContext.onSelect;\n\n  var active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);\n  var emitSelect = (0, _react.useCallback)(function (event) {\n    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);\n  }, [eventKey, onSelectProp, onSelectFromNav]);\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, withClassPrefix({\n    active: active,\n    disabled: disabled\n  }));\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (!disabled) {\n      emitSelect(event);\n      onClick === null || onClick === void 0 ? void 0 : onClick(event);\n    }\n  }, [disabled, emitSelect, onClick]);\n\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_SidenavItem.default, (0, _extends2.default)({}, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 94,\n        columnNumber: 14\n      }\n    }));\n  }\n\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n      ref: ref,\n      role: \"separator\",\n      style: style,\n      className: merge(className, prefix('divider'))\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 99,\n        columnNumber: 9\n      }\n    }));\n  }\n\n  if (panel) {\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n      ref: ref,\n      style: style,\n      className: merge(className, prefix('panel'))\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 111,\n        columnNumber: 9\n      }\n    }), children);\n  }\n\n  if (navbar) {\n    return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 118,\n        columnNumber: 14\n      }\n    }));\n  }\n\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    tabIndex: disabled ? -1 : undefined\n  }, rest, {\n    className: classes,\n    onClick: handleClick,\n    style: style,\n    \"aria-selected\": active || undefined,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 122,\n      columnNumber: 7\n    }\n  }), icon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 133,\n      columnNumber: 9\n    }\n  }));\n});\n\nNavItem.displayName = 'Nav.Item';\nNavItem.propTypes = {\n  as: _propTypes.default.elementType,\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  divider: _propTypes.default.bool,\n  panel: _propTypes.default.bool,\n  onClick: _propTypes.default.func,\n  style: _propTypes.default.object,\n  icon: _propTypes.default.node,\n  onSelect: _propTypes.default.func,\n  children: _propTypes.default.node,\n  eventKey: _propTypes.default.any\n};\nvar _default = NavItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/NavItem.tsx\",\n    _this = void 0;\n\n/**\n * The <Nav.Item> API\n * When used as direct child of <Nav>, render the NavItem\n * When used within a <Nav.Menu>, render the NavDropdownItem\n */\nvar NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!nav) {\n    throw new Error('<Nav.Item> must be rendered within a <Nav> component.');\n  }\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,\n      activeProp = props.active,\n      disabled = props.disabled,\n      eventKey = props.eventKey,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'nav-item' : _props$classPrefix,\n      style = props.style,\n      children = props.children,\n      icon = props.icon,\n      divider = props.divider,\n      panel = props.panel,\n      onClick = props.onClick,\n      onSelectProp = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"active\", \"disabled\", \"eventKey\", \"className\", \"classPrefix\", \"style\", \"children\", \"icon\", \"divider\", \"panel\", \"onClick\", \"onSelect\"]);\n  var activeKey = nav.activeKey,\n      onSelectFromNav = nav.onSelect;\n  var active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);\n  var emitSelect = (0, _react.useCallback)(function (event) {\n    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);\n  }, [eventKey, onSelectProp, onSelectFromNav]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, withClassPrefix({\n    active: active,\n    disabled: disabled\n  }));\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (!disabled) {\n      emitSelect(event);\n      onClick === null || onClick === void 0 ? void 0 : onClick(event);\n    }\n  }, [disabled, emitSelect, onClick]);\n\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n      ref: ref,\n      role: \"separator\",\n      style: style,\n      className: merge(className, prefix('divider'))\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 96,\n        columnNumber: 9\n      }\n    }));\n  }\n\n  if (panel) {\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n      ref: ref,\n      style: style,\n      className: merge(className, prefix('panel'))\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 108,\n        columnNumber: 9\n      }\n    }), children);\n  }\n\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    tabIndex: disabled ? -1 : undefined\n  }, rest, {\n    className: classes,\n    onClick: handleClick,\n    style: style,\n    \"aria-selected\": active || undefined,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 115,\n      columnNumber: 7\n    }\n  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: prefix('icon')\n  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 126,\n      columnNumber: 9\n    }\n  }));\n});\n\nNavItem.displayName = 'Nav.Item';\nNavItem.propTypes = {\n  as: _propTypes.default.elementType,\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  divider: _propTypes.default.bool,\n  panel: _propTypes.default.bool,\n  onClick: _propTypes.default.func,\n  style: _propTypes.default.object,\n  icon: _propTypes.default.node,\n  onSelect: _propTypes.default.func,\n  children: _propTypes.default.node,\n  eventKey: _propTypes.default.any\n};\nvar _default = NavItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavItem.tsx?");
+
+/***/ }),
+
+/***/ "./src/Nav/NavMenu.tsx":
+/*!*****************************!*\
+  !*** ./src/Nav/NavMenu.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.NavMenuActionType = exports.NavMenuContext = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _NavDropdown = _interopRequireDefault(__webpack_require__(/*! ./NavDropdown */ \"./src/Nav/NavDropdown.tsx\"));\n\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\n\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _SidenavDropdown = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavDropdown */ \"./src/Sidenav/SidenavDropdown.tsx\"));\n\nvar _Navbar = __webpack_require__(/*! ../Navbar */ \"./src/Navbar/index.tsx\");\n\nvar _NavbarDropdown = _interopRequireDefault(__webpack_require__(/*! ../Navbar/NavbarDropdown */ \"./src/Navbar/NavbarDropdown.tsx\"));\n\nvar _NavbarDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ../Navbar/NavbarDropdownMenu */ \"./src/Navbar/NavbarDropdownMenu.tsx\"));\n\nvar _SidenavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavDropdownMenu */ \"./src/Sidenav/SidenavDropdownMenu.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/NavMenu.tsx\",\n    _this = void 0;\n\nvar NavMenuContext = /*#__PURE__*/_react.default.createContext(null);\n\nexports.NavMenuContext = NavMenuContext;\nNavMenuContext.displayName = 'NavMenu.Context';\nvar NavMenuActionType;\nexports.NavMenuActionType = NavMenuActionType;\n\n(function (NavMenuActionType) {\n  NavMenuActionType[NavMenuActionType[\"RegisterItem\"] = 0] = \"RegisterItem\";\n  NavMenuActionType[NavMenuActionType[\"UnregisterItem\"] = 1] = \"UnregisterItem\";\n})(NavMenuActionType || (exports.NavMenuActionType = NavMenuActionType = {}));\n\nvar initilNavMenuState = {\n  items: []\n};\n\nvar reducer = function reducer(state, action) {\n  switch (action.type) {\n    case NavMenuActionType.RegisterItem:\n      return (0, _extends2.default)({}, state, {\n        items: [].concat(state.items.filter(function (item) {\n          return item._id !== action.payload._id;\n        }), [action.payload])\n      });\n\n    case NavMenuActionType.UnregisterItem:\n      return (0, _extends2.default)({}, state, {\n        items: state.items.filter(function (item) {\n          return item._id !== action.payload._id;\n        })\n      });\n\n    default:\n      throw new Error('Unrecognizable action type: ' + action.type);\n  }\n};\n/**\n * The <Nav.Menu> API\n * When used as direct child of <Nav>, render the NavDropdown\n * When used within another <Nav.Menu>, render the NavDropdownMenu\n */\n\n\nvar NavMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var parentNavMenu = (0, _react.useContext)(NavMenuContext);\n  var navMenuContext = (0, _react.useReducer)(reducer, initilNavMenuState);\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  if (!parentNavMenu) {\n    if (navbar) {\n      return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {\n        value: navMenuContext,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 75,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_NavbarDropdown.default, (0, _extends2.default)({\n        ref: ref\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 76,\n          columnNumber: 11\n        }\n      })));\n    }\n\n    if (sidenav) {\n      return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {\n        value: navMenuContext,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 82,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_SidenavDropdown.default, (0, _extends2.default)({\n        ref: ref\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 83,\n          columnNumber: 11\n        }\n      })));\n    }\n\n    return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {\n      value: navMenuContext,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 88,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_NavDropdown.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 89,\n        columnNumber: 9\n      }\n    })));\n  }\n\n  if (navbar) {\n    return /*#__PURE__*/_react.default.createElement(_NavbarDropdownMenu.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 95,\n        columnNumber: 12\n      }\n    }));\n  }\n\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_SidenavDropdownMenu.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 99,\n        columnNumber: 12\n      }\n    }));\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_NavDropdownMenu.default, (0, _extends2.default)({\n    ref: ref\n  }, props, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 102,\n      columnNumber: 10\n    }\n  }));\n});\n\nNavMenu.displayName = 'Nav.Menu';\nvar _default = NavMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavMenu.tsx?");
 
 /***/ }),
 
@@ -3479,6 +3655,50 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/Navbar/NavbarDropdown.tsx":
+/*!***************************************!*\
+  !*** ./src/Navbar/NavbarDropdown.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _ = __webpack_require__(/*! . */ \"./src/Navbar/index.tsx\");\n\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../Disclosure/Disclosure */ \"./src/Disclosure/Disclosure.tsx\"));\n\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\n\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\n\nvar _NavbarDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./NavbarDropdownToggle */ \"./src/Navbar/NavbarDropdownToggle.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Navbar/NavbarDropdown.tsx\",\n    _this = void 0;\n\n/**\n * @private\n */\nvar NavbarDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var navbar = (0, _react.useContext)(_.NavbarContext);\n\n  if (!navbar) {\n    throw new Error('<Navbar.Dropdown> should be used within a <Navbar> component.');\n  }\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      title = props.title,\n      onClose = props.onClose,\n      onOpen = props.onOpen,\n      _onToggle = props.onToggle,\n      _props$trigger = props.trigger,\n      trigger = _props$trigger === void 0 ? 'click' : _props$trigger,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      toggleAs = props.toggleAs,\n      toggleClassName = props.toggleClassName,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,\n      className = props.className,\n      disabled = props.disabled,\n      children = props.children,\n      menuStyle = props.menuStyle,\n      style = props.style,\n      toggleProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"title\", \"onClose\", \"onOpen\", \"onToggle\", \"trigger\", \"placement\", \"toggleAs\", \"toggleClassName\", \"classPrefix\", \"className\", \"disabled\", \"children\", \"menuStyle\", \"style\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n    trigger: trigger,\n    hideOnClickOutside: true,\n    onToggle: function onToggle(open) {\n      _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(open);\n\n      if (open) {\n        onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n      } else {\n        onClose === null || onClose === void 0 ? void 0 : onClose();\n      }\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 122,\n      columnNumber: 7\n    }\n  }, function (_ref, containerRef) {\n    var _withClassPrefix;\n\n    var open = _ref.open;\n    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix)));\n    return /*#__PURE__*/_react.default.createElement(Component, {\n      ref: (0, _utils.mergeRefs)(ref, containerRef),\n      className: classes,\n      style: style,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 144,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 145,\n        columnNumber: 15\n      }\n    }, function (buttonProps, buttonRef) {\n      return /*#__PURE__*/_react.default.createElement(_NavbarDropdownToggle.default, (0, _extends2.default)({\n        ref: buttonRef,\n        as: toggleAs,\n        className: toggleClassName,\n        placement: placement,\n        disabled: disabled\n      }, (0, _omit.default)(buttonProps, ['open']), toggleProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 147,\n          columnNumber: 19\n        }\n      }), title);\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 160,\n        columnNumber: 15\n      }\n    }, function (_ref2, elementRef) {\n      var open = _ref2.open;\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", {\n        ref: elementRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 164,\n          columnNumber: 21\n        }\n      }, children);\n    }));\n  });\n});\n\nNavbarDropdown.Item = _NavDropdownItem.default;\nNavbarDropdown.Menu = _NavDropdownMenu.default;\nNavbarDropdown.displayName = 'Navbar.Dropdown';\nNavbarDropdown.propTypes = {\n  classPrefix: _propTypes.default.string,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover', 'contextMenu'])]),\n  placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),\n  title: _propTypes.default.node,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  menuStyle: _propTypes.default.object,\n  className: _propTypes.default.string,\n  toggleClassName: _propTypes.default.string,\n  children: _propTypes.default.node,\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  eventKey: _propTypes.default.any,\n  as: _propTypes.default.elementType,\n  toggleAs: _propTypes.default.elementType,\n  noCaret: _propTypes.default.bool,\n  style: _propTypes.default.object,\n  onClose: _propTypes.default.func,\n  onOpen: _propTypes.default.func,\n  onToggle: _propTypes.default.func,\n  onMouseEnter: _propTypes.default.func,\n  onMouseLeave: _propTypes.default.func,\n  onContextMenu: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  renderToggle: _propTypes.default.func\n};\nvar _default = NavbarDropdown;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarDropdown.tsx?");
+
+/***/ }),
+
+/***/ "./src/Navbar/NavbarDropdownItem.tsx":
+/*!*******************************************!*\
+  !*** ./src/Navbar/NavbarDropdownItem.tsx ***!
+  \*******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Navbar = __webpack_require__(/*! ./Navbar */ \"./src/Navbar/Navbar.tsx\");\n\nvar _DisclosureContext = _interopRequireWildcard(__webpack_require__(/*! ../Disclosure/DisclosureContext */ \"./src/Disclosure/DisclosureContext.ts\"));\n\nvar _useRenderDropdownItem = __webpack_require__(/*! ../Dropdown/useRenderDropdownItem */ \"./src/Dropdown/useRenderDropdownItem.tsx\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\n/**\n * @private\n */\nvar NavbarDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!navbar || !nav) {\n    throw new Error('<Navbar.Dropdown.Item> must be rendered within a <Nav> component within a <Navbar> component.');\n  }\n\n  var _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,\n      className = props.className,\n      activeProp = props.active,\n      eventKey = props.eventKey,\n      onSelect = props.onSelect,\n      icon = props.icon,\n      _props$as = props.as,\n      Component = _props$as === void 0 ? 'li' : _props$as,\n      divider = props.divider,\n      panel = props.panel,\n      children = props.children,\n      disabled = props.disabled,\n      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"classPrefix\", \"className\", \"active\", \"eventKey\", \"onSelect\", \"icon\", \"as\", \"divider\", \"panel\", \"children\", \"disabled\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var handleSelectItem = (0, _react.useCallback)(function (event) {\n    var _nav$onSelect;\n\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    (_nav$onSelect = nav.onSelect) === null || _nav$onSelect === void 0 ? void 0 : _nav$onSelect.call(nav, eventKey, event);\n  }, [onSelect, eventKey, nav]);\n  var disclosure = (0, _react.useContext)(_DisclosureContext.default);\n\n  var _ref = disclosure !== null && disclosure !== void 0 ? disclosure : [],\n      dispatchDisclosure = _ref[1];\n\n  var handleClickNavbarDropdownItem = (0, _react.useCallback)(function (event) {\n    dispatchDisclosure === null || dispatchDisclosure === void 0 ? void 0 : dispatchDisclosure({\n      type: _DisclosureContext.DisclosureActionTypes.Hide,\n      cascade: true\n    });\n    handleSelectItem === null || handleSelectItem === void 0 ? void 0 : handleSelectItem(event);\n  }, [dispatchDisclosure, handleSelectItem]);\n  var selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(nav.activeKey, eventKey);\n  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);\n\n  if (divider) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      role: 'separator',\n      className: merge(prefix('divider'), className)\n    }, restProps));\n  }\n\n  if (panel) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      className: merge(prefix('panel'), className),\n      children: children\n    }, restProps));\n  }\n\n  var classes = merge(className, withClassPrefix({\n    'with-icon': icon,\n    disabled: disabled,\n    divider: divider,\n    panel: panel,\n    active: selected\n  }));\n  var dataAttributes = {\n    'data-event-key': eventKey\n  };\n\n  if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {\n    dataAttributes['data-event-key-type'] = typeof eventKey;\n  }\n\n  return renderDropdownItem((0, _extends2.default)({\n    ref: ref,\n    className: classes,\n    'aria-current': selected || undefined\n  }, dataAttributes, restProps, {\n    onClick: (0, _utils.createChainedFunction)(handleClickNavbarDropdownItem, restProps.onClick),\n    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n      className: prefix('menu-icon')\n    }), children)\n  }));\n});\n\nNavbarDropdownItem.displayName = 'Navbar.Dropdown.Item';\nNavbarDropdownItem.propTypes = {\n  as: _propTypes.default.elementType,\n  divider: _propTypes.default.bool,\n  panel: _propTypes.default.bool,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  submenu: _propTypes.default.element,\n  onSelect: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  icon: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  style: _propTypes.default.object,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number\n};\nvar _default = NavbarDropdownItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarDropdownItem.tsx?");
+
+/***/ }),
+
+/***/ "./src/Navbar/NavbarDropdownMenu.tsx":
+/*!*******************************************!*\
+  !*** ./src/Navbar/NavbarDropdownMenu.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\n\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\n\nvar _useCustom2 = _interopRequireDefault(__webpack_require__(/*! ../utils/useCustom */ \"./src/utils/useCustom.ts\"));\n\nvar _ = __webpack_require__(/*! . */ \"./src/Navbar/index.tsx\");\n\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../Disclosure */ \"./src/Disclosure/index.tsx\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Navbar/NavbarDropdownMenu.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2;\n\n/**\n * @private this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Menu> within a <Navbar>\n *\n * <Navbar>\n *   <Nav>\n *     <Nav.Menu>\n *       <Nav.Menu title=\"menu\"> -> This submenu will render <NavbarDropdownMenu> component\n *       </Nav.Menu>\n *     </Nav.Menu>\n *   </Nav>\n * </Navbar>\n */\nvar NavbarDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var navbar = (0, _react.useContext)(_.NavbarContext);\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!navbar || !nav) {\n    throw new Error('<Navbar.Dropdown.Menu> must be rendered within a <Nav> within a <Navbar> component.');\n  }\n\n  var _onToggle = props.onToggle,\n      eventKey = props.eventKey,\n      title = props.title,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,\n      children = props.children,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"onToggle\", \"eventKey\", \"title\", \"classPrefix\", \"children\"]);\n\n  var _useCustom = (0, _useCustom2.default)('DropdownMenu'),\n      rtl = _useCustom.rtl;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),\n      mergeItemClassNames = _useClassNames3.merge,\n      withItemClassPrefix = _useClassNames3.withClassPrefix,\n      prefixItemClassName = _useClassNames3.prefix; // Parent menu exists. This is a submenu.\n  // Should render a `menuitem` that controls this submenu.\n\n\n  var _omit = (0, _omit2.default)(rest, ['trigger']),\n      icon = _omit.icon,\n      className = _omit.className,\n      disabled = _omit.disabled,\n      menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, [\"icon\", \"className\", \"disabled\"]);\n\n  var Icon = rtl ? _AngleLeft.default : _AngleRight.default;\n  return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n    hideOnClickOutside: true,\n    trigger: ['click', 'mouseover'],\n    onToggle: function onToggle(open, event) {\n      return _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(open, undefined, event);\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 86,\n      columnNumber: 5\n    }\n  }, function (_ref, containerRef) {\n    var open = _ref.open,\n        props = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"open\"]);\n    var classes = mergeItemClassNames(className, withItemClassPrefix({\n      disabled: disabled,\n      open: open,\n      submenu: true\n    }));\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, containerRef),\n      className: classes\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 101,\n        columnNumber: 11\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 102,\n        columnNumber: 13\n      }\n    }, function (_ref2, buttonRef) {\n      var open = _ref2.open,\n          buttonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"open\"]);\n      var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"toggle\"]))), withItemClassPrefix({\n        'with-icon': icon,\n        open: open,\n        disabled: disabled\n      }));\n      return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n        ref: (0, _utils.mergeRefs)(buttonRef, buttonRef),\n        className: classes,\n        \"data-event-key\": eventKey,\n        \"data-event-key-type\": typeof eventKey\n      }, buttonProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 115,\n          columnNumber: 19\n        }\n      }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n        className: prefix('menu-icon')\n      }), title, /*#__PURE__*/_react.default.createElement(Icon, {\n        className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"toggle-icon\"]))),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 124,\n          columnNumber: 21\n        }\n      }));\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 129,\n        columnNumber: 13\n      }\n    }, function (_ref3, elementRef) {\n      var open = _ref3.open;\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: elementRef,\n        className: menuClassName,\n        hidden: !open\n      }, menuProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 134,\n          columnNumber: 19\n        }\n      }), children);\n    }));\n  });\n});\n\nNavbarDropdownMenu.displayName = 'Nav.Dropdown.Menu';\nNavbarDropdownMenu.propTypes = {\n  active: _propTypes.default.bool,\n  activeKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  icon: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  pullLeft: _propTypes.default.bool,\n  title: _propTypes.default.node,\n  open: _propTypes.default.bool,\n  eventKey: _propTypes.default.any,\n  expanded: _propTypes.default.bool,\n  collapsible: _propTypes.default.bool,\n  onToggle: _propTypes.default.func\n};\nvar _default = NavbarDropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarDropdownMenu.tsx?");
+
+/***/ }),
+
+/***/ "./src/Navbar/NavbarDropdownToggle.tsx":
+/*!*********************************************!*\
+  !*** ./src/Navbar/NavbarDropdownToggle.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\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/ArrowDownLine.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _NavbarItem = _interopRequireDefault(__webpack_require__(/*! ./NavbarItem */ \"./src/Navbar/NavbarItem.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Navbar/NavbarDropdownToggle.tsx\",\n    _this = void 0;\n\n/**\n * @private this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Menu> call\n *\n * <Nav>\n *   <Nav.Menu> -> This will render <NavDropdown> component that renders a <NavDropdownToggle>\n *   </Nav.Menu>\n * </Nav>\n */\nvar NavbarDropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _NavbarItem.default : _props$as,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'navbar-item' : _props$classPrefix,\n      renderToggle = props.renderToggle,\n      children = props.children,\n      noCaret = props.noCaret,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"renderToggle\", \"children\", \"noCaret\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix({\n    'no-caret': noCaret\n  }));\n\n  var toggle = /*#__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: 40,\n      columnNumber: 7\n    }\n  }), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {\n    className: prefix('caret'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 22\n    }\n  }));\n\n  return renderToggle ? renderToggle(rest, ref) : toggle;\n});\n\nNavbarDropdownToggle.displayName = 'Navbar.Dropdown.Toggle';\nNavbarDropdownToggle.propTypes = {\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  noCaret: _propTypes.default.bool,\n  as: _propTypes.default.elementType,\n  renderToggle: _propTypes.default.func,\n  placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])\n};\nvar _default = NavbarDropdownToggle;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarDropdownToggle.tsx?");
+
+/***/ }),
+
 /***/ "./src/Navbar/NavbarHeader.tsx":
 /*!*************************************!*\
   !*** ./src/Navbar/NavbarHeader.tsx ***!
@@ -3497,7 +3717,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Navbar/NavbarItem.tsx\",\n    _this = void 0;\n\nvar NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,\n      activeProp = props.active,\n      disabled = props.disabled,\n      eventKey = props.eventKey,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'navbar-item' : _props$classPrefix,\n      style = props.style,\n      children = props.children,\n      icon = props.icon,\n      onClick = props.onClick,\n      onSelectProp = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"active\", \"disabled\", \"eventKey\", \"className\", \"classPrefix\", \"style\", \"children\", \"icon\", \"onClick\", \"onSelect\"]);\n\n  var _useContext = (0, _react.useContext)(_NavContext.default),\n      activeKey = _useContext.activeKey,\n      onSelectFromNav = _useContext.onSelect;\n\n  var active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);\n  var emitSelect = (0, _react.useCallback)(function (event) {\n    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);\n  }, [eventKey, onSelectProp, onSelectFromNav]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix({\n    active: active,\n    disabled: disabled\n  }));\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (!disabled) {\n      emitSelect(event);\n      onClick === null || onClick === void 0 ? void 0 : onClick(event);\n    }\n  }, [disabled, emitSelect, onClick]);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    \"aria-selected\": active || undefined\n  }, rest, {\n    className: classes,\n    onClick: handleClick,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 76,\n      columnNumber: 7\n    }\n  }), icon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 86,\n      columnNumber: 9\n    }\n  }));\n});\n\nNavbarItem.displayName = 'Navbar.Item';\nNavbarItem.propTypes = {\n  as: _propTypes.default.elementType,\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  onClick: _propTypes.default.func,\n  style: _propTypes.default.object,\n  icon: _propTypes.default.node,\n  onSelect: _propTypes.default.func,\n  children: _propTypes.default.node,\n  eventKey: _propTypes.default.any\n};\nvar _default = NavbarItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Navbar/NavbarItem.tsx\",\n    _this = void 0;\n\n/**\n * @private\n */\nvar NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,\n      activeProp = props.active,\n      disabled = props.disabled,\n      eventKey = props.eventKey,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'navbar-item' : _props$classPrefix,\n      style = props.style,\n      children = props.children,\n      icon = props.icon,\n      onClick = props.onClick,\n      onSelectProp = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"active\", \"disabled\", \"eventKey\", \"className\", \"classPrefix\", \"style\", \"children\", \"icon\", \"onClick\", \"onSelect\"]);\n\n  var _ref = (0, _react.useContext)(_NavContext.default),\n      activeKey = _ref.activeKey,\n      onSelectFromNav = _ref.onSelect;\n\n  var active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);\n  var emitSelect = (0, _react.useCallback)(function (event) {\n    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);\n  }, [eventKey, onSelectProp, onSelectFromNav]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix({\n    active: active,\n    disabled: disabled\n  }));\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (!disabled) {\n      emitSelect(event);\n      onClick === null || onClick === void 0 ? void 0 : onClick(event);\n    }\n  }, [disabled, emitSelect, onClick]);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    \"aria-selected\": active || undefined\n  }, rest, {\n    className: classes,\n    onClick: handleClick,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 79,\n      columnNumber: 7\n    }\n  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: prefix('icon')\n  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 89,\n      columnNumber: 9\n    }\n  }));\n});\n\nNavbarItem.displayName = 'Navbar.Item';\nNavbarItem.propTypes = {\n  as: _propTypes.default.elementType,\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  onClick: _propTypes.default.func,\n  style: _propTypes.default.object,\n  icon: _propTypes.default.node,\n  onSelect: _propTypes.default.func,\n  children: _propTypes.default.node,\n  eventKey: _propTypes.default.any\n};\nvar _default = NavbarItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarItem.tsx?");
 
 /***/ }),
 
@@ -3849,7 +4069,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.createConcatChildrenFunction = createConcatChildrenFunction;\nexports.shouldDisplay = shouldDisplay;\nexports.usePickerClassName = usePickerClassName;\nexports.onMenuKeyDown = onMenuKeyDown;\nexports.useSearch = useSearch;\nexports.usePublicMethods = usePublicMethods;\nexports.useToggleKeyDownEvent = exports.useFocusItemValue = void 0;\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _trim = _interopRequireDefault(__webpack_require__(/*! lodash/trim */ \"./node_modules/lodash/trim.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _find = _interopRequireDefault(__webpack_require__(/*! lodash/find */ \"./node_modules/lodash/find.js\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar defaultNodeKeys = {\n  valueKey: 'value',\n  childrenKey: 'children'\n};\n\nfunction createConcatChildrenFunction(node, nodeValue, nodeKeys) {\n  if (nodeKeys === void 0) {\n    nodeKeys = defaultNodeKeys;\n  }\n\n  var _nodeKeys = nodeKeys,\n      valueKey = _nodeKeys.valueKey,\n      childrenKey = _nodeKeys.childrenKey;\n  return function (data, children) {\n    if (nodeValue) {\n      node = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return nodeValue === item[valueKey];\n      });\n    }\n\n    node[childrenKey] = children;\n    return data.concat([]);\n  };\n}\n\nfunction shouldDisplay(label, searchKeyword) {\n  if (!(0, _trim.default)(searchKeyword)) {\n    return true;\n  }\n\n  var keyword = searchKeyword.toLocaleLowerCase();\n\n  if (typeof label === 'string' || typeof label === 'number') {\n    return (\"\" + label).toLocaleLowerCase().indexOf(keyword) >= 0;\n  } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {\n    var nodes = (0, _utils.reactToString)(label);\n    return nodes.join('').toLocaleLowerCase().indexOf(keyword) >= 0;\n  }\n\n  return false;\n}\n\n/**\n * The className of the assembled Toggle is on the Picker.\n */\nfunction usePickerClassName(props) {\n  var _withClassPrefix;\n\n  var name = props.name,\n      classPrefix = props.classPrefix,\n      className = props.className,\n      placement = props.placement,\n      appearance = props.appearance,\n      cleanable = props.cleanable,\n      block = props.block,\n      disabled = props.disabled,\n      countable = props.countable,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      hasValue = props.hasValue,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"name\", \"classPrefix\", \"className\", \"placement\", \"appearance\", \"cleanable\", \"block\", \"disabled\", \"countable\", \"readOnly\", \"plaintext\", \"hasValue\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix)));\n  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext'])));\n  return [classes, usedClassNamePropKeys];\n}\n\n/**\n * Handling keyboard events...\n * @param event Keyboard event object\n * @param events Event callback functions\n */\nfunction onMenuKeyDown(event, events) {\n  var down = events.down,\n      up = events.up,\n      enter = events.enter,\n      del = events.del,\n      esc = events.esc,\n      right = events.right,\n      left = events.left;\n\n  switch (event.key) {\n    // down\n    case _utils.KEY_VALUES.DOWN:\n      down === null || down === void 0 ? void 0 : down(event);\n      event.preventDefault();\n      break;\n    // up\n\n    case _utils.KEY_VALUES.UP:\n      up === null || up === void 0 ? void 0 : up(event);\n      event.preventDefault();\n      break;\n    // enter\n\n    case _utils.KEY_VALUES.ENTER:\n      enter === null || enter === void 0 ? void 0 : enter(event);\n      event.preventDefault();\n      break;\n    // delete\n\n    case _utils.KEY_VALUES.BACKSPACE:\n      del === null || del === void 0 ? void 0 : del(event);\n      break;\n    // esc | tab\n\n    case _utils.KEY_VALUES.ESC:\n    case _utils.KEY_VALUES.TAB:\n      esc === null || esc === void 0 ? void 0 : esc(event);\n      break;\n    // left arrow\n\n    case _utils.KEY_VALUES.LEFT:\n      left === null || left === void 0 ? void 0 : left(event);\n      break;\n    // right arrow\n\n    case _utils.KEY_VALUES.RIGHT:\n      right === null || right === void 0 ? void 0 : right(event);\n      break;\n\n    default:\n  }\n}\n\n/**\n * A hook that manages the focus state of the option.\n * @param defaultFocusItemValue\n * @param props\n */\nvar useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props) {\n  var _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$focusableQuery = props.focusableQueryKey,\n      focusableQueryKey = _props$focusableQuery === void 0 ? '[data-key][aria-disabled=\"false\"]' : _props$focusableQuery,\n      _props$defaultLayer = props.defaultLayer,\n      defaultLayer = _props$defaultLayer === void 0 ? 0 : _props$defaultLayer,\n      data = props.data,\n      target = props.target,\n      rtl = props.rtl,\n      callback = props.callback;\n\n  var _useState = (0, _react.useState)(defaultFocusItemValue),\n      focusItemValue = _useState[0],\n      setFocusItemValue = _useState[1];\n\n  var _useState2 = (0, _react.useState)(defaultLayer),\n      layer = _useState2[0],\n      setLayer = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      keys = _useState3[0],\n      setKeys = _useState3[1];\n  /**\n   * Get the elements visible in all options.\n   */\n\n\n  var getFocusableMenuItems = (0, _react.useCallback)(function () {\n    if (!target) {\n      return [];\n    }\n\n    var menu = (0, _isFunction.default)(target) ? target() : target;\n    var currentKeys = keys;\n\n    if (currentKeys.length === 0 && !(0, _isNil.default)(menu)) {\n      currentKeys = Array.from(menu.querySelectorAll(focusableQueryKey)).map(function (item) {\n        var _item$dataset;\n\n        return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;\n      });\n      setKeys(currentKeys);\n    }\n\n    if (currentKeys.length === 0) {\n      return [];\n    } // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.\n    // 2. The values ​​in `keys` are all string, so the corresponding value of `data` should also be converted to string\n\n\n    return currentKeys.map(function (key) {\n      return (0, _find.default)(data, function (i) {\n        return \"\" + i[valueKey] === key;\n      });\n    });\n  }, [data, focusableQueryKey, keys, target, valueKey]);\n  /**\n   * Get the index of the focus item.\n   */\n\n  var findFocusItemIndex = (0, _react.useCallback)(function (callback) {\n    var items = getFocusableMenuItems();\n\n    for (var i = 0; i < items.length; i += 1) {\n      var _items$i;\n\n      if ((0, _utils.shallowEqual)(focusItemValue, (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[valueKey])) {\n        callback(items, i);\n        return;\n      }\n    }\n\n    callback(items, -1);\n  }, [focusItemValue, getFocusableMenuItems, valueKey]);\n  var focusNextMenuItem = (0, _react.useCallback)(function (event) {\n    findFocusItemIndex(function (items, index) {\n      var nextIndex = index + 2 > items.length ? 0 : index + 1;\n      var focusItem = items[nextIndex];\n\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);\n      }\n    });\n  }, [callback, findFocusItemIndex, valueKey]);\n  var focusPrevMenuItem = (0, _react.useCallback)(function (event) {\n    findFocusItemIndex(function (items, index) {\n      var nextIndex = index === 0 ? items.length - 1 : index - 1;\n      var focusItem = items[nextIndex];\n\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);\n      }\n    });\n  }, [callback, findFocusItemIndex, valueKey]);\n  var getSubMenuKeys = (0, _react.useCallback)(function (nextLayer) {\n    var menu = (0, _isFunction.default)(target) ? target() : target;\n    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(\"[data-layer=\\\"\" + nextLayer + \"\\\"]\");\n\n    if (subMenu) {\n      var _Array$from;\n\n      return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {\n        var _item$dataset2;\n\n        return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;\n      });\n    }\n\n    return null;\n  }, [focusableQueryKey, target]);\n  var focusNextLevelMenu = (0, _react.useCallback)(function (event) {\n    var nextLayer = layer + 1;\n    var nextKeys = getSubMenuKeys(nextLayer);\n\n    if (nextKeys) {\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      setFocusItemValue(nextKeys[0]);\n      callback === null || callback === void 0 ? void 0 : callback(nextKeys[0], event);\n    }\n  }, [callback, getSubMenuKeys, layer]);\n  var focusPrevLevelMenu = (0, _react.useCallback)(function (event) {\n    var nextLayer = layer - 1;\n    var nextKeys = getSubMenuKeys(nextLayer);\n\n    if (nextKeys) {\n      var _focusItem$parent;\n\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return item[valueKey] === focusItemValue;\n      });\n      var parentItemValue = focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];\n\n      if (parentItemValue) {\n        setFocusItemValue(parentItemValue);\n        callback === null || callback === void 0 ? void 0 : callback(parentItemValue, event);\n      }\n    }\n  }, [callback, data, focusItemValue, getSubMenuKeys, layer, valueKey]);\n  var handleKeyDown = (0, _react.useCallback)(function (event) {\n    var _onMenuKeyDown;\n\n    onMenuKeyDown(event, (_onMenuKeyDown = {\n      down: focusNextMenuItem,\n      up: focusPrevMenuItem\n    }, _onMenuKeyDown[rtl ? 'left' : 'right'] = focusNextLevelMenu, _onMenuKeyDown[rtl ? 'right' : 'left'] = focusPrevLevelMenu, _onMenuKeyDown));\n  }, [focusNextLevelMenu, focusNextMenuItem, focusPrevLevelMenu, focusPrevMenuItem, rtl]);\n  return {\n    focusItemValue: focusItemValue,\n    setFocusItemValue: setFocusItemValue,\n    layer: layer,\n    setLayer: setLayer,\n    keys: keys,\n    setKeys: setKeys,\n    onKeyDown: handleKeyDown\n  };\n};\n\nexports.useFocusItemValue = useFocusItemValue;\n\n/**\n * A hook to control the toggle keyboard operation\n * @param props\n */\nvar useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {\n  var _props$toggle = props.toggle,\n      toggle = _props$toggle === void 0 ? true : _props$toggle,\n      triggerRef = props.triggerRef,\n      targetRef = props.targetRef,\n      overlayRef = props.overlayRef,\n      searchInputRef = props.searchInputRef,\n      active = props.active,\n      onExit = props.onExit,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      onKeyDown = props.onKeyDown,\n      onMenuKeyDown = props.onMenuKeyDown,\n      onMenuPressEnter = props.onMenuPressEnter,\n      onMenuPressBackspace = props.onMenuPressBackspace;\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose, triggerRef]);\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current2, _triggerRef$current2$;\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  }, [onOpen, triggerRef]);\n  var handleToggleDropdown = (0, _react.useCallback)(function () {\n    if (active) {\n      handleClose();\n      return;\n    }\n\n    handleOpen();\n  }, [active, handleOpen, handleClose]);\n  var onToggle = (0, _react.useCallback)(function (event) {\n    if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {\n      // enter\n      if (toggle && event.key === _utils.KEY_VALUES.ENTER) {\n        handleToggleDropdown();\n      } // delete\n\n\n      if (event.key === _utils.KEY_VALUES.BACKSPACE) {\n        onExit === null || onExit === void 0 ? void 0 : onExit(event);\n      }\n    }\n\n    if (overlayRef !== null && overlayRef !== void 0 && overlayRef.current) {\n      // The keyboard operation callback on the menu.\n      onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);\n\n      if (event.key === _utils.KEY_VALUES.ENTER) {\n        onMenuPressEnter === null || onMenuPressEnter === void 0 ? void 0 : onMenuPressEnter(event);\n      }\n      /**\n       * There is no callback when typing the Backspace key in the search box.\n       * The default is to remove search keywords\n       */\n\n\n      if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current)) {\n        onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);\n      } // The search box gets focus when typing characters and numbers.\n\n\n      if (event.key.length === 1 && /\\w/.test(event.key)) {\n        var _event$target;\n\n        // Exclude Input\n        // eg: <SelectPicker renderExtraFooter={() => <Input />} />\n        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {\n          var _searchInputRef$curre;\n\n          searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();\n        }\n      }\n    }\n\n    if (event.key === _utils.KEY_VALUES.ESC || event.key === _utils.KEY_VALUES.TAB) {\n      handleClose();\n    } // Native event callback\n\n\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  }, [handleClose, handleToggleDropdown, overlayRef, onExit, onKeyDown, onMenuKeyDown, onMenuPressBackspace, onMenuPressEnter, toggle, targetRef, searchInputRef]);\n  return onToggle;\n};\n\nexports.useToggleKeyDownEvent = useToggleKeyDownEvent;\n\n/**\n * A hook that handles search filter options\n * @param props\n */\nfunction useSearch(props) {\n  var labelKey = props.labelKey,\n      data = props.data,\n      searchBy = props.searchBy,\n      callback = props.callback; // Use search keywords to filter options.\n\n  var _useState4 = (0, _react.useState)(''),\n      searchKeyword = _useState4[0],\n      setSearchKeyword = _useState4[1];\n  /**\n   * Index of keyword  in `label`\n   * @param {node} label\n   */\n\n\n  var checkShouldDisplay = (0, _react.useCallback)(function (item, keyword) {\n    var label = item === null || item === void 0 ? void 0 : item[labelKey];\n\n    var _keyword = (0, _isUndefined.default)(keyword) ? searchKeyword : keyword;\n\n    if (typeof searchBy === 'function') {\n      return searchBy(_keyword, label, item);\n    }\n\n    return shouldDisplay(label, _keyword);\n  }, [labelKey, searchBy, searchKeyword]);\n  var updateFilteredData = (0, _react.useCallback)(function (nextData) {\n    setFilteredData((0, _treeUtils.filterNodesOfTree)(nextData, function (item) {\n      return checkShouldDisplay(item);\n    }));\n  }, [checkShouldDisplay]);\n\n  var _useState5 = (0, _react.useState)((0, _treeUtils.filterNodesOfTree)(data, function (item) {\n    return checkShouldDisplay(item);\n  })),\n      filteredData = _useState5[0],\n      setFilteredData = _useState5[1];\n\n  var handleSearch = function handleSearch(searchKeyword, event) {\n    var filteredData = (0, _treeUtils.filterNodesOfTree)(data, function (item) {\n      return checkShouldDisplay(item, searchKeyword);\n    });\n    setFilteredData(filteredData);\n    setSearchKeyword(searchKeyword);\n    callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);\n  };\n\n  return {\n    searchKeyword: searchKeyword,\n    filteredData: filteredData,\n    updateFilteredData: updateFilteredData,\n    setSearchKeyword: setSearchKeyword,\n    checkShouldDisplay: checkShouldDisplay,\n    handleSearch: handleSearch\n  };\n}\n\n/**\n * A hook of the exposed method of Picker\n */\nfunction usePublicMethods(ref, parmas) {\n  var triggerRef = parmas.triggerRef,\n      overlayRef = parmas.overlayRef,\n      targetRef = parmas.targetRef,\n      rootRef = parmas.rootRef,\n      listRef = parmas.listRef,\n      inline = parmas.inline;\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current3;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();\n  }, [triggerRef]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current4;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.close();\n  }, [triggerRef]);\n  var handleUpdatePosition = (0, _react.useCallback)(function () {\n    var _triggerRef$current5;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();\n  }, [triggerRef]);\n  (0, _react.useImperativeHandle)(ref, function () {\n    // Tree and CheckTree\n    if (inline) {\n      return {\n        get root() {\n          var _triggerRef$current$r, _triggerRef$current6;\n\n          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current$r = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root) !== null && _triggerRef$current$r !== void 0 ? _triggerRef$current$r : null;\n        },\n\n        get list() {\n          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {\n            throw new Error('The list is not found, please set `virtualized` for the component.');\n          }\n\n          return listRef === null || listRef === void 0 ? void 0 : listRef.current;\n        }\n\n      };\n    }\n\n    return {\n      get root() {\n        var _ref, _triggerRef$current7;\n\n        return (_ref = (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) || (triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root)) !== null && _ref !== void 0 ? _ref : null;\n      },\n\n      get overlay() {\n        var _overlayRef$current;\n\n        return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;\n      },\n\n      get target() {\n        var _targetRef$current;\n\n        return (_targetRef$current = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current !== void 0 ? _targetRef$current : null;\n      },\n\n      get list() {\n        if (!(listRef !== null && listRef !== void 0 && listRef.current)) {\n          throw new Error(\"\\n            The list is not found.\\n            1.Please set virtualized for the component.\\n            2.Please confirm whether the picker is open.\\n          \");\n        }\n\n        return listRef === null || listRef === void 0 ? void 0 : listRef.current;\n      },\n\n      updatePosition: handleUpdatePosition,\n      open: handleOpen,\n      close: handleClose\n    };\n  });\n}\n\n//# sourceURL=webpack://rsuite/./src/Picker/utils.ts?");
+eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.createConcatChildrenFunction = createConcatChildrenFunction;\nexports.shouldDisplay = shouldDisplay;\nexports.usePickerClassName = usePickerClassName;\nexports.onMenuKeyDown = onMenuKeyDown;\nexports.useSearch = useSearch;\nexports.usePublicMethods = usePublicMethods;\nexports.useToggleKeyDownEvent = exports.useFocusItemValue = void 0;\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _trim = _interopRequireDefault(__webpack_require__(/*! lodash/trim */ \"./node_modules/lodash/trim.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _find = _interopRequireDefault(__webpack_require__(/*! lodash/find */ \"./node_modules/lodash/find.js\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar defaultNodeKeys = {\n  valueKey: 'value',\n  childrenKey: 'children'\n};\n\nfunction createConcatChildrenFunction(node, nodeValue, nodeKeys) {\n  if (nodeKeys === void 0) {\n    nodeKeys = defaultNodeKeys;\n  }\n\n  var _nodeKeys = nodeKeys,\n      valueKey = _nodeKeys.valueKey,\n      childrenKey = _nodeKeys.childrenKey;\n  return function (data, children) {\n    if (nodeValue) {\n      node = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return nodeValue === item[valueKey];\n      });\n    }\n\n    node[childrenKey] = children;\n    return data.concat([]);\n  };\n}\n\nfunction shouldDisplay(label, searchKeyword) {\n  if (!(0, _trim.default)(searchKeyword)) {\n    return true;\n  }\n\n  var keyword = searchKeyword.toLocaleLowerCase();\n\n  if (typeof label === 'string' || typeof label === 'number') {\n    return (\"\" + label).toLocaleLowerCase().indexOf(keyword) >= 0;\n  } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {\n    var nodes = (0, _utils.reactToString)(label);\n    return nodes.join('').toLocaleLowerCase().indexOf(keyword) >= 0;\n  }\n\n  return false;\n}\n\n/**\n * The className of the assembled Toggle is on the Picker.\n */\nfunction usePickerClassName(props) {\n  var _withClassPrefix;\n\n  var name = props.name,\n      classPrefix = props.classPrefix,\n      className = props.className,\n      placement = props.placement,\n      appearance = props.appearance,\n      cleanable = props.cleanable,\n      block = props.block,\n      disabled = props.disabled,\n      countable = props.countable,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      hasValue = props.hasValue,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"name\", \"classPrefix\", \"className\", \"placement\", \"appearance\", \"cleanable\", \"block\", \"disabled\", \"countable\", \"readOnly\", \"plaintext\", \"hasValue\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix)));\n  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext'])));\n  return [classes, usedClassNamePropKeys];\n}\n\n/**\n * Handling keyboard events...\n * @param event Keyboard event object\n * @param events Event callback functions\n */\nfunction onMenuKeyDown(event, events) {\n  var down = events.down,\n      up = events.up,\n      enter = events.enter,\n      del = events.del,\n      esc = events.esc,\n      right = events.right,\n      left = events.left;\n\n  switch (event.key) {\n    // down\n    case _utils.KEY_VALUES.DOWN:\n      down === null || down === void 0 ? void 0 : down(event);\n      event.preventDefault();\n      break;\n    // up\n\n    case _utils.KEY_VALUES.UP:\n      up === null || up === void 0 ? void 0 : up(event);\n      event.preventDefault();\n      break;\n    // enter\n\n    case _utils.KEY_VALUES.ENTER:\n      enter === null || enter === void 0 ? void 0 : enter(event);\n      event.preventDefault();\n      break;\n    // delete\n\n    case _utils.KEY_VALUES.BACKSPACE:\n      del === null || del === void 0 ? void 0 : del(event);\n      break;\n    // esc | tab\n\n    case _utils.KEY_VALUES.ESC:\n    case _utils.KEY_VALUES.TAB:\n      esc === null || esc === void 0 ? void 0 : esc(event);\n      break;\n    // left arrow\n\n    case _utils.KEY_VALUES.LEFT:\n      left === null || left === void 0 ? void 0 : left(event);\n      break;\n    // right arrow\n\n    case _utils.KEY_VALUES.RIGHT:\n      right === null || right === void 0 ? void 0 : right(event);\n      break;\n\n    default:\n  }\n}\n\n/**\n * A hook that manages the focus state of the option.\n * @param defaultFocusItemValue\n * @param props\n */\nvar useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props) {\n  var _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$focusableQuery = props.focusableQueryKey,\n      focusableQueryKey = _props$focusableQuery === void 0 ? '[data-key][aria-disabled=\"false\"]' : _props$focusableQuery,\n      _props$defaultLayer = props.defaultLayer,\n      defaultLayer = _props$defaultLayer === void 0 ? 0 : _props$defaultLayer,\n      data = props.data,\n      target = props.target,\n      rtl = props.rtl,\n      callback = props.callback;\n\n  var _useState = (0, _react.useState)(defaultFocusItemValue),\n      focusItemValue = _useState[0],\n      setFocusItemValue = _useState[1];\n\n  var _useState2 = (0, _react.useState)(defaultLayer),\n      layer = _useState2[0],\n      setLayer = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      keys = _useState3[0],\n      setKeys = _useState3[1];\n  /**\n   * Get the elements visible in all options.\n   */\n\n\n  var getFocusableMenuItems = (0, _react.useCallback)(function () {\n    if (!target) {\n      return [];\n    }\n\n    var currentKeys = keys;\n\n    if (layer < 1) {\n      var popup = (0, _isFunction.default)(target) ? target() : target;\n      var rootMenu = popup === null || popup === void 0 ? void 0 : popup.querySelector('[data-layer=\"0\"]');\n\n      if (rootMenu) {\n        var _rootMenu$querySelect;\n\n        currentKeys = Array.from((_rootMenu$querySelect = rootMenu.querySelectorAll(focusableQueryKey)) !== null && _rootMenu$querySelect !== void 0 ? _rootMenu$querySelect : []).map(function (item) {\n          var _item$dataset;\n\n          return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;\n        });\n      } else {\n        var _popup$querySelectorA;\n\n        currentKeys = Array.from((_popup$querySelectorA = popup === null || popup === void 0 ? void 0 : popup.querySelectorAll(focusableQueryKey)) !== null && _popup$querySelectorA !== void 0 ? _popup$querySelectorA : []).map(function (item) {\n          var _item$dataset2;\n\n          return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;\n        });\n      }\n    } // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.\n    // 2. The values ​​in `keys` are all string, so the corresponding value of `data` should also be converted to string\n\n\n    return currentKeys.map(function (key) {\n      return (0, _find.default)(data, function (i) {\n        return \"\" + i[valueKey] === key;\n      });\n    });\n  }, [data, focusableQueryKey, keys, target, valueKey, layer]);\n  /**\n   * Get the index of the focus item.\n   */\n\n  var findFocusItemIndex = (0, _react.useCallback)(function (callback) {\n    var items = getFocusableMenuItems();\n\n    for (var i = 0; i < items.length; i += 1) {\n      var _items$i;\n\n      if ((0, _utils.shallowEqual)(focusItemValue, (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[valueKey])) {\n        callback(items, i);\n        return;\n      }\n    }\n\n    callback(items, -1);\n  }, [focusItemValue, getFocusableMenuItems, valueKey]);\n  var focusNextMenuItem = (0, _react.useCallback)(function (event) {\n    findFocusItemIndex(function (items, index) {\n      var nextIndex = index + 2 > items.length ? 0 : index + 1;\n      var focusItem = items[nextIndex];\n\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);\n      }\n    });\n  }, [callback, findFocusItemIndex, valueKey]);\n  var focusPrevMenuItem = (0, _react.useCallback)(function (event) {\n    findFocusItemIndex(function (items, index) {\n      var nextIndex = index === 0 ? items.length - 1 : index - 1;\n      var focusItem = items[nextIndex];\n\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);\n      }\n    });\n  }, [callback, findFocusItemIndex, valueKey]);\n  var getSubMenuKeys = (0, _react.useCallback)(function (nextLayer) {\n    var menu = (0, _isFunction.default)(target) ? target() : target;\n    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(\"[data-layer=\\\"\" + nextLayer + \"\\\"]\");\n\n    if (subMenu) {\n      var _Array$from;\n\n      return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {\n        var _item$dataset3;\n\n        return (_item$dataset3 = item.dataset) === null || _item$dataset3 === void 0 ? void 0 : _item$dataset3.key;\n      });\n    }\n\n    return null;\n  }, [focusableQueryKey, target]);\n  var focusNextLevelMenu = (0, _react.useCallback)(function (event) {\n    var nextLayer = layer + 1;\n    var nextKeys = getSubMenuKeys(nextLayer);\n\n    if (nextKeys) {\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      setFocusItemValue(nextKeys[0]);\n      callback === null || callback === void 0 ? void 0 : callback(nextKeys[0], event);\n    }\n  }, [callback, getSubMenuKeys, layer]);\n  var focusPrevLevelMenu = (0, _react.useCallback)(function (event) {\n    var nextLayer = layer - 1;\n    var nextKeys = getSubMenuKeys(nextLayer);\n\n    if (nextKeys) {\n      var _focusItem$parent;\n\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return item[valueKey] === focusItemValue;\n      });\n      var parentItemValue = focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];\n\n      if (parentItemValue) {\n        setFocusItemValue(parentItemValue);\n        callback === null || callback === void 0 ? void 0 : callback(parentItemValue, event);\n      }\n    }\n  }, [callback, data, focusItemValue, getSubMenuKeys, layer, valueKey]);\n  var handleKeyDown = (0, _react.useCallback)(function (event) {\n    var _onMenuKeyDown;\n\n    onMenuKeyDown(event, (_onMenuKeyDown = {\n      down: focusNextMenuItem,\n      up: focusPrevMenuItem\n    }, _onMenuKeyDown[rtl ? 'left' : 'right'] = focusNextLevelMenu, _onMenuKeyDown[rtl ? 'right' : 'left'] = focusPrevLevelMenu, _onMenuKeyDown));\n  }, [focusNextLevelMenu, focusNextMenuItem, focusPrevLevelMenu, focusPrevMenuItem, rtl]);\n  return {\n    focusItemValue: focusItemValue,\n    setFocusItemValue: setFocusItemValue,\n    layer: layer,\n    setLayer: setLayer,\n    keys: keys,\n    setKeys: setKeys,\n    onKeyDown: handleKeyDown\n  };\n};\n\nexports.useFocusItemValue = useFocusItemValue;\n\n/**\n * A hook to control the toggle keyboard operation\n * @param props\n */\nvar useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {\n  var _props$toggle = props.toggle,\n      toggle = _props$toggle === void 0 ? true : _props$toggle,\n      triggerRef = props.triggerRef,\n      targetRef = props.targetRef,\n      overlayRef = props.overlayRef,\n      searchInputRef = props.searchInputRef,\n      active = props.active,\n      onExit = props.onExit,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      onKeyDown = props.onKeyDown,\n      onMenuKeyDown = props.onMenuKeyDown,\n      onMenuPressEnter = props.onMenuPressEnter,\n      onMenuPressBackspace = props.onMenuPressBackspace;\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose, triggerRef]);\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current2, _triggerRef$current2$;\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  }, [onOpen, triggerRef]);\n  var handleToggleDropdown = (0, _react.useCallback)(function () {\n    if (active) {\n      handleClose();\n      return;\n    }\n\n    handleOpen();\n  }, [active, handleOpen, handleClose]);\n  var onToggle = (0, _react.useCallback)(function (event) {\n    if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {\n      // enter\n      if (toggle && event.key === _utils.KEY_VALUES.ENTER) {\n        handleToggleDropdown();\n      } // delete\n\n\n      if (event.key === _utils.KEY_VALUES.BACKSPACE) {\n        onExit === null || onExit === void 0 ? void 0 : onExit(event);\n      }\n    }\n\n    if (overlayRef !== null && overlayRef !== void 0 && overlayRef.current) {\n      // The keyboard operation callback on the menu.\n      onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);\n\n      if (event.key === _utils.KEY_VALUES.ENTER) {\n        onMenuPressEnter === null || onMenuPressEnter === void 0 ? void 0 : onMenuPressEnter(event);\n      }\n      /**\n       * There is no callback when typing the Backspace key in the search box.\n       * The default is to remove search keywords\n       */\n\n\n      if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current)) {\n        onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);\n      } // The search box gets focus when typing characters and numbers.\n\n\n      if (event.key.length === 1 && /\\w/.test(event.key)) {\n        var _event$target;\n\n        // Exclude Input\n        // eg: <SelectPicker renderExtraFooter={() => <Input />} />\n        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {\n          var _searchInputRef$curre;\n\n          searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();\n        }\n      }\n    }\n\n    if (event.key === _utils.KEY_VALUES.ESC || event.key === _utils.KEY_VALUES.TAB) {\n      handleClose();\n    } // Native event callback\n\n\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  }, [handleClose, handleToggleDropdown, overlayRef, onExit, onKeyDown, onMenuKeyDown, onMenuPressBackspace, onMenuPressEnter, toggle, targetRef, searchInputRef]);\n  return onToggle;\n};\n\nexports.useToggleKeyDownEvent = useToggleKeyDownEvent;\n\n/**\n * A hook that handles search filter options\n * @param props\n */\nfunction useSearch(props) {\n  var labelKey = props.labelKey,\n      data = props.data,\n      searchBy = props.searchBy,\n      callback = props.callback; // Use search keywords to filter options.\n\n  var _useState4 = (0, _react.useState)(''),\n      searchKeyword = _useState4[0],\n      setSearchKeyword = _useState4[1];\n  /**\n   * Index of keyword  in `label`\n   * @param {node} label\n   */\n\n\n  var checkShouldDisplay = (0, _react.useCallback)(function (item, keyword) {\n    var label = item === null || item === void 0 ? void 0 : item[labelKey];\n\n    var _keyword = (0, _isUndefined.default)(keyword) ? searchKeyword : keyword;\n\n    if (typeof searchBy === 'function') {\n      return searchBy(_keyword, label, item);\n    }\n\n    return shouldDisplay(label, _keyword);\n  }, [labelKey, searchBy, searchKeyword]);\n  var updateFilteredData = (0, _react.useCallback)(function (nextData) {\n    setFilteredData((0, _treeUtils.filterNodesOfTree)(nextData, function (item) {\n      return checkShouldDisplay(item);\n    }));\n  }, [checkShouldDisplay]);\n\n  var _useState5 = (0, _react.useState)((0, _treeUtils.filterNodesOfTree)(data, function (item) {\n    return checkShouldDisplay(item);\n  })),\n      filteredData = _useState5[0],\n      setFilteredData = _useState5[1];\n\n  var handleSearch = function handleSearch(searchKeyword, event) {\n    var filteredData = (0, _treeUtils.filterNodesOfTree)(data, function (item) {\n      return checkShouldDisplay(item, searchKeyword);\n    });\n    setFilteredData(filteredData);\n    setSearchKeyword(searchKeyword);\n    callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);\n  };\n\n  return {\n    searchKeyword: searchKeyword,\n    filteredData: filteredData,\n    updateFilteredData: updateFilteredData,\n    setSearchKeyword: setSearchKeyword,\n    checkShouldDisplay: checkShouldDisplay,\n    handleSearch: handleSearch\n  };\n}\n\n/**\n * A hook of the exposed method of Picker\n */\nfunction usePublicMethods(ref, parmas) {\n  var triggerRef = parmas.triggerRef,\n      overlayRef = parmas.overlayRef,\n      targetRef = parmas.targetRef,\n      rootRef = parmas.rootRef,\n      listRef = parmas.listRef,\n      inline = parmas.inline;\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current3;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();\n  }, [triggerRef]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current4;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.close();\n  }, [triggerRef]);\n  var handleUpdatePosition = (0, _react.useCallback)(function () {\n    var _triggerRef$current5;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();\n  }, [triggerRef]);\n  (0, _react.useImperativeHandle)(ref, function () {\n    // Tree and CheckTree\n    if (inline) {\n      return {\n        get root() {\n          var _triggerRef$current$r, _triggerRef$current6;\n\n          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current$r = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root) !== null && _triggerRef$current$r !== void 0 ? _triggerRef$current$r : null;\n        },\n\n        get list() {\n          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {\n            throw new Error('The list is not found, please set `virtualized` for the component.');\n          }\n\n          return listRef === null || listRef === void 0 ? void 0 : listRef.current;\n        }\n\n      };\n    }\n\n    return {\n      get root() {\n        var _ref, _triggerRef$current7;\n\n        return (_ref = (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) || (triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root)) !== null && _ref !== void 0 ? _ref : null;\n      },\n\n      get overlay() {\n        var _overlayRef$current;\n\n        return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;\n      },\n\n      get target() {\n        var _targetRef$current;\n\n        return (_targetRef$current = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current !== void 0 ? _targetRef$current : null;\n      },\n\n      get list() {\n        if (!(listRef !== null && listRef !== void 0 && listRef.current)) {\n          throw new Error(\"\\n            The list is not found.\\n            1.Please set virtualized for the component.\\n            2.Please confirm whether the picker is open.\\n          \");\n        }\n\n        return listRef === null || listRef === void 0 ? void 0 : listRef.current;\n      },\n\n      updatePosition: handleUpdatePosition,\n      open: handleOpen,\n      close: handleClose\n    };\n  });\n}\n\n//# sourceURL=webpack://rsuite/./src/Picker/utils.ts?");
 
 /***/ }),
 
@@ -4238,6 +4458,39 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/Sidenav/ExpandedSidenavDropdown.tsx":
+/*!*************************************************!*\
+  !*** ./src/Sidenav/ExpandedSidenavDropdown.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _SidenavDropdownCollapse = _interopRequireDefault(__webpack_require__(/*! ./SidenavDropdownCollapse */ \"./src/Sidenav/SidenavDropdownCollapse.tsx\"));\n\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../Disclosure/Disclosure */ \"./src/Disclosure/Disclosure.tsx\"));\n\nvar _useInternalId = _interopRequireDefault(__webpack_require__(/*! ../utils/useInternalId */ \"./src/utils/useInternalId.ts\"));\n\nvar _SidenavDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./SidenavDropdownToggle */ \"./src/Sidenav/SidenavDropdownToggle.tsx\"));\n\nvar _NavMenu = __webpack_require__(/*! ../Nav/NavMenu */ \"./src/Nav/NavMenu.tsx\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/ExpandedSidenavDropdown.tsx\",\n    _this = void 0;\n\nvar ExpandedSidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var nav = (0, _react.useContext)(_NavContext.default);\n  var navMenu = (0, _react.useContext)(_NavMenu.NavMenuContext);\n\n  if (!sidenav || !nav || !navMenu) {\n    throw new Error('<SidenavDropdown> component is not supposed to be used standalone. Use <Nav.Menu> inside <Sidenav> instead.');\n  }\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      title = props.title,\n      children = props.children,\n      className = props.className,\n      menuStyle = props.menuStyle,\n      disabled = props.disabled,\n      renderTitle = props.renderTitle,\n      renderToggle = props.renderToggle,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      toggleClassName = props.toggleClassName,\n      icon = props.icon,\n      eventKey = props.eventKey,\n      toggleAs = props.toggleAs,\n      noCaret = props.noCaret,\n      style = props.style,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      openProp = props.open,\n      onToggle = props.onToggle,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"title\", \"children\", \"className\", \"menuStyle\", \"disabled\", \"renderTitle\", \"renderToggle\", \"classPrefix\", \"placement\", \"toggleClassName\", \"icon\", \"eventKey\", \"toggleAs\", \"noCaret\", \"style\", \"onOpen\", \"onClose\", \"open\", \"onToggle\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var internalId = (0, _useInternalId.default)('SidenavDropdown');\n  var uniqueKey = eventKey !== null && eventKey !== void 0 ? eventKey : internalId;\n  var _sidenav$openKeys = sidenav.openKeys,\n      openKeys = _sidenav$openKeys === void 0 ? [] : _sidenav$openKeys,\n      onOpenChange = sidenav.onOpenChange;\n  var items = navMenu[0].items;\n  var hasSelectedItems = // has items that is active indicated by <Nav activeKey>\n  nav.activeKey && items.some(function (item) {\n    return item.eventKey === nav.activeKey;\n  }) || // has items that is active indicated by <Nav.Item active>\n  items.some(function (item) {\n    return item.active;\n  });\n  var handleToggleDisclosure = (0, _react.useCallback)(function (open, event) {\n    if (open) {\n      onClose === null || onClose === void 0 ? void 0 : onClose();\n    } else {\n      onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    }\n\n    onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);\n    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(uniqueKey, event);\n  }, [onClose, onOpen, onToggle, uniqueKey, onOpenChange]);\n  var open = openProp !== null && openProp !== void 0 ? openProp : openKeys.includes(uniqueKey);\n  return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n    open: open,\n    onToggle: handleToggleDisclosure,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 142,\n      columnNumber: 7\n    }\n  }, function (_ref, containerRef) {\n    var _withClassPrefix;\n\n    var open = _ref.open;\n    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix[open ? 'expand' : 'collapse'] = true, _withClassPrefix.disabled = disabled, _withClassPrefix['selected-within'] = hasSelectedItems, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, containerRef),\n      style: style,\n      className: classes\n    }, rest, {\n      \"data-event-key\": eventKey,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 156,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 163,\n        columnNumber: 15\n      }\n    }, function (buttonProps, buttonRef) {\n      return /*#__PURE__*/_react.default.createElement(_SidenavDropdownToggle.default, (0, _extends2.default)({\n        ref: buttonRef,\n        as: toggleAs,\n        noCaret: noCaret,\n        className: toggleClassName,\n        renderToggle: renderToggle,\n        icon: icon,\n        placement: placement\n      }, (0, _omit.default)(buttonProps, ['open']), {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 165,\n          columnNumber: 19\n        }\n      }), title);\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 179,\n        columnNumber: 15\n      }\n    }, function (_ref2) {\n      var open = _ref2.open;\n      return /*#__PURE__*/_react.default.createElement(_SidenavDropdownCollapse.default, {\n        open: open,\n        style: menuStyle,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 181,\n          columnNumber: 19\n        }\n      }, children);\n    }));\n  });\n});\n\nExpandedSidenavDropdown.displayName = 'Sidenav.Dropdown';\nExpandedSidenavDropdown.propTypes = {\n  activeKey: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),\n  title: _propTypes.default.node,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  menuStyle: _propTypes.default.object,\n  className: _propTypes.default.string,\n  toggleClassName: _propTypes.default.string,\n  children: _propTypes.default.node,\n  tabIndex: _propTypes.default.number,\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  eventKey: _propTypes.default.any,\n  as: _propTypes.default.elementType,\n  toggleAs: _propTypes.default.elementType,\n  noCaret: _propTypes.default.bool,\n  style: _propTypes.default.object,\n  onClose: _propTypes.default.func,\n  onOpen: _propTypes.default.func,\n  onToggle: _propTypes.default.func,\n  onMouseEnter: _propTypes.default.func,\n  onMouseLeave: _propTypes.default.func,\n  onContextMenu: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  renderTitle: (0, _deprecatePropType.default)(_propTypes.default.func),\n  renderToggle: _propTypes.default.func\n};\nvar _default = ExpandedSidenavDropdown;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/ExpandedSidenavDropdown.tsx?");
+
+/***/ }),
+
+/***/ "./src/Sidenav/ExpandedSidenavDropdownItem.tsx":
+/*!*****************************************************!*\
+  !*** ./src/Sidenav/ExpandedSidenavDropdownItem.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _useRenderDropdownItem = __webpack_require__(/*! ../Dropdown/useRenderDropdownItem */ \"./src/Dropdown/useRenderDropdownItem.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/ExpandedSidenavDropdownItem.tsx\",\n    _this = void 0;\n\n/**\n * Tree View Node\n * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView\n */\nvar ExpandedSidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!sidenav || !nav) {\n    throw new Error('<SidenavDropdownItem> component is not supposed to be used standalone. Use <Nav.Item> within <Sidenav> instead.');\n  }\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'li' : _props$as,\n      activeProp = props.active,\n      children = props.children,\n      disabled = props.disabled,\n      divider = props.divider,\n      panel = props.panel,\n      className = props.className,\n      style = props.style,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,\n      icon = props.icon,\n      eventKey = props.eventKey,\n      onClick = props.onClick,\n      onSelect = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"active\", \"children\", \"disabled\", \"divider\", \"panel\", \"className\", \"style\", \"classPrefix\", \"icon\", \"eventKey\", \"onClick\", \"onSelect\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && ((0, _utils.shallowEqual)(eventKey, sidenav.activeKey) || (0, _utils.shallowEqual)(nav.activeKey, eventKey));\n  var classes = merge(className, withClassPrefix({\n    'with-icon': icon,\n    active: selected,\n    disabled: disabled\n  }));\n  var handleClick = (0, _react.useCallback)(function (event) {\n    var _nav$onSelect, _sidenav$onSelect;\n\n    if (disabled) return;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    (_nav$onSelect = nav.onSelect) === null || _nav$onSelect === void 0 ? void 0 : _nav$onSelect.call(nav, eventKey, event);\n    (_sidenav$onSelect = sidenav.onSelect) === null || _sidenav$onSelect === void 0 ? void 0 : _sidenav$onSelect.call(sidenav, eventKey, event);\n  }, [disabled, onSelect, sidenav, eventKey, nav]);\n  var menuitemEventHandlers = {\n    onClick: (0, _utils.createChainedFunction)(handleClick, onClick)\n  };\n  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);\n\n  if (divider) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      role: 'separator',\n      style: style,\n      className: merge(prefix('divider'), className)\n    }, rest));\n  }\n\n  if (panel) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      role: 'none presentation',\n      style: style,\n      className: merge(prefix('panel'), className)\n    }, rest, {\n      children: children\n    }));\n  }\n\n  return renderDropdownItem((0, _extends2.default)({\n    ref: ref\n  }, rest, {\n    style: style,\n    className: classes,\n    'aria-current': selected || undefined\n  }, menuitemEventHandlers, {\n    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n      className: prefix('menu-icon')\n    }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 144,\n        columnNumber: 13\n      }\n    }))\n  }), _SafeAnchor.default);\n});\n\nExpandedSidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';\nExpandedSidenavDropdownItem.propTypes = {\n  as: _propTypes.default.elementType,\n  expanded: _propTypes.default.bool,\n  active: _propTypes.default.bool,\n  divider: _propTypes.default.bool,\n  panel: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  submenu: _propTypes.default.element,\n  onSelect: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  icon: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  style: _propTypes.default.object,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number,\n  title: _propTypes.default.node,\n  onMouseOver: _propTypes.default.func,\n  onMouseOut: _propTypes.default.func\n};\nvar _default = ExpandedSidenavDropdownItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/ExpandedSidenavDropdownItem.tsx?");
+
+/***/ }),
+
+/***/ "./src/Sidenav/ExpandedSidenavDropdownMenu.tsx":
+/*!*****************************************************!*\
+  !*** ./src/Sidenav/ExpandedSidenavDropdownMenu.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _useCustom2 = _interopRequireDefault(__webpack_require__(/*! ../utils/useCustom */ \"./src/utils/useCustom.ts\"));\n\nvar _ArrowLeftLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowLeftLine */ \"./node_modules/@rsuite/icons/ArrowLeftLine.js\"));\n\nvar _ArrowRightLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowRightLine */ \"./node_modules/@rsuite/icons/ArrowRightLine.js\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _SidenavDropdownCollapse = _interopRequireDefault(__webpack_require__(/*! ./SidenavDropdownCollapse */ \"./src/Sidenav/SidenavDropdownCollapse.tsx\"));\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../Disclosure/Disclosure */ \"./src/Disclosure/Disclosure.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/ExpandedSidenavDropdownMenu.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2;\n\n/**\n * Tree View Node\n * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView\n */\nvar ExpandedSidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  if (!sidenavContext) {\n    throw new Error('<SidenavDropdownMenu> component is not supposed to be used standalone. Use <Nav.Menu> inside <Sidenav> instead.');\n  }\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'li' : _props$as,\n      children = props.children,\n      disabled = props.disabled,\n      className = props.className,\n      style = props.style,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,\n      tabIndex = props.tabIndex,\n      icon = props.icon,\n      title = props.title,\n      eventKey = props.eventKey,\n      onClick = props.onClick,\n      onSelect = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"children\", \"disabled\", \"className\", \"style\", \"classPrefix\", \"tabIndex\", \"icon\", \"title\", \"eventKey\", \"onClick\", \"onSelect\"]);\n\n  var _useCustom = (0, _useCustom2.default)('DropdownMenu'),\n      rtl = _useCustom.rtl;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var _sidenavContext$openK = sidenavContext.openKeys,\n      openKeys = _sidenavContext$openK === void 0 ? [] : _sidenavContext$openK,\n      onOpenChange = sidenavContext.onOpenChange,\n      onSidenavSelect = sidenavContext.onSelect;\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (disabled) return;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    onSidenavSelect === null || onSidenavSelect === void 0 ? void 0 : onSidenavSelect(eventKey, event);\n  }, [disabled, onSelect, onSidenavSelect, eventKey]);\n  var menuitemEventHandlers = {\n    onClick: (0, _utils.createChainedFunction)(handleClick, onClick)\n  };\n  var Icon = rtl ? _ArrowLeftLine.default : _ArrowRightLine.default;\n  return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n    open: !(0, _isNil.default)(eventKey) && openKeys.includes(eventKey),\n    onToggle: function onToggle(_, event) {\n      return onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event);\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 93,\n      columnNumber: 7\n    }\n  }, function (_ref) {\n    var open = _ref.open;\n    var classes = merge(className, prefix('submenu'), prefix(\"pull-\" + (rtl ? 'left' : 'right')), prefix(open ? 'expand' : 'collapse'), withClassPrefix({\n      'with-icon': icon,\n      // open,\n      disabled: disabled\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: ref\n    }, rest, {\n      tabIndex: disabled ? -1 : tabIndex,\n      style: style,\n      className: classes\n    }, menuitemEventHandlers, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 110,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 118,\n        columnNumber: 15\n      }\n    }, function (buttonProps) {\n      return /*#__PURE__*/_react.default.createElement(\"button\", (0, _extends2.default)({\n        className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"toggle\"]))),\n        onClick: handleClick\n      }, (0, _omit.default)(buttonProps, ['open']), {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 121,\n          columnNumber: 21\n        }\n      }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n        className: prefix('menu-icon')\n      }), title, /*#__PURE__*/_react.default.createElement(Icon, {\n        className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"toggle-icon\"]))),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 128,\n          columnNumber: 23\n        }\n      }), /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 129,\n          columnNumber: 23\n        }\n      }));\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 134,\n        columnNumber: 15\n      }\n    }, function (_ref2) {\n      var open = _ref2.open;\n      return /*#__PURE__*/_react.default.createElement(_SidenavDropdownCollapse.default, {\n        open: open,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 136,\n          columnNumber: 26\n        }\n      }, children);\n    }));\n  });\n});\n\nExpandedSidenavDropdownMenu.displayName = 'Sidenav.Dropdown.Menu';\nExpandedSidenavDropdownMenu.propTypes = {\n  as: _propTypes.default.elementType,\n  expanded: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  onSelect: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  icon: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  style: _propTypes.default.object,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number,\n  title: _propTypes.default.node,\n  onMouseOver: _propTypes.default.func,\n  onMouseOut: _propTypes.default.func\n};\nvar _default = ExpandedSidenavDropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/ExpandedSidenavDropdownMenu.tsx?");
+
+/***/ }),
+
 /***/ "./src/Sidenav/Sidenav.tsx":
 /*!*********************************!*\
   !*** ./src/Sidenav/Sidenav.tsx ***!
@@ -4245,7 +4498,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.SidenavContext = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\n\nvar _Transition = _interopRequireDefault(__webpack_require__(/*! ../Animation/Transition */ \"./src/Animation/Transition.tsx\"));\n\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _SidenavBody = _interopRequireDefault(__webpack_require__(/*! ./SidenavBody */ \"./src/Sidenav/SidenavBody.tsx\"));\n\nvar _SidenavHeader = _interopRequireDefault(__webpack_require__(/*! ./SidenavHeader */ \"./src/Sidenav/SidenavHeader.tsx\"));\n\nvar _SidenavToggle = _interopRequireDefault(__webpack_require__(/*! ./SidenavToggle */ \"./src/Sidenav/SidenavToggle.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/Sidenav.tsx\",\n    _this = void 0;\n\nvar SidenavContext = /*#__PURE__*/_react.default.createContext(null);\n\nexports.SidenavContext = SidenavContext;\nvar emptyArray = [];\n\nvar Sidenav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'nav' : _props$as,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'sidenav' : _props$classPrefix,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$expanded = props.expanded,\n      expanded = _props$expanded === void 0 ? true : _props$expanded,\n      _props$activeKey = props.activeKey,\n      activeKey = _props$activeKey === void 0 ? null : _props$activeKey,\n      _props$defaultOpenKey = props.defaultOpenKeys,\n      defaultOpenKeys = _props$defaultOpenKey === void 0 ? emptyArray : _props$defaultOpenKey,\n      openKeysProp = props.openKeys,\n      onSelect = props.onSelect,\n      onOpenChange = props.onOpenChange,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"appearance\", \"expanded\", \"activeKey\", \"defaultOpenKeys\", \"openKeys\", \"onSelect\", \"onOpenChange\"]);\n\n  var _useControlled = (0, _utils.useControlled)(openKeysProp, defaultOpenKeys),\n      openKeys = _useControlled[0],\n      setOpenKeys = _useControlled[1];\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var classes = merge(className, withClassPrefix(appearance));\n  var handleOpenChange = (0, _react.useCallback)(function (eventKey, event) {\n    var find = function find(key) {\n      return (0, _shallowEqual.default)(key, eventKey);\n    };\n\n    var nextOpenKeys = [].concat(openKeys);\n\n    if (nextOpenKeys.some(find)) {\n      (0, _remove.default)(nextOpenKeys, find);\n    } else {\n      nextOpenKeys.push(eventKey);\n    }\n\n    setOpenKeys(nextOpenKeys);\n    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpenKeys, event);\n  }, [onOpenChange, openKeys, setOpenKeys]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      expanded: expanded,\n      activeKey: activeKey,\n      sidenav: true,\n      openKeys: openKeys !== null && openKeys !== void 0 ? openKeys : [],\n      onOpenChange: handleOpenChange,\n      onSelect: onSelect\n    };\n  }, [activeKey, expanded, handleOpenChange, onSelect, openKeys]);\n  return /*#__PURE__*/_react.default.createElement(SidenavContext.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 110,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Transition.default, {\n    in: expanded,\n    timeout: 300,\n    exitedClassName: prefix('collapse-out'),\n    exitingClassName: prefix('collapse-out', 'collapsing'),\n    enteredClassName: prefix('collapse-in'),\n    enteringClassName: prefix('collapse-in', 'collapsing'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 111,\n      columnNumber: 7\n    }\n  }, function (transitionProps, transitionRef) {\n    var className = transitionProps.className,\n        transitionRest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, [\"className\"]);\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, transitionRest, {\n      ref: (0, _utils.mergeRefs)(ref, transitionRef),\n      className: merge(classes, className),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 122,\n        columnNumber: 13\n      }\n    }));\n  }));\n});\n\nSidenav.Header = _SidenavHeader.default;\nSidenav.Body = _SidenavBody.default;\nSidenav.Toggle = _SidenavToggle.default;\nSidenav.displayName = 'Sidenav';\nSidenav.propTypes = {\n  as: _propTypes.default.elementType,\n  classPrefix: _propTypes.default.string,\n  className: _propTypes.default.string,\n  expanded: _propTypes.default.bool,\n  appearance: _propTypes.default.oneOf(['default', 'inverse', 'subtle']),\n  defaultOpenKeys: _propTypes.default.array,\n  openKeys: _propTypes.default.array,\n  onOpenChange: _propTypes.default.func,\n  activeKey: (0, _deprecatePropType.default)(_propTypes.default.any, 'Use `activeKey` on <Nav> component instead'),\n  onSelect: (0, _deprecatePropType.default)(_propTypes.default.func, 'Use `onSelect` on <Nav> component instead')\n};\nvar _default = Sidenav;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/Sidenav.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.SidenavContext = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\n\nvar _Transition = _interopRequireDefault(__webpack_require__(/*! ../Animation/Transition */ \"./src/Animation/Transition.tsx\"));\n\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _SidenavBody = _interopRequireDefault(__webpack_require__(/*! ./SidenavBody */ \"./src/Sidenav/SidenavBody.tsx\"));\n\nvar _SidenavHeader = _interopRequireDefault(__webpack_require__(/*! ./SidenavHeader */ \"./src/Sidenav/SidenavHeader.tsx\"));\n\nvar _SidenavToggle = _interopRequireDefault(__webpack_require__(/*! ./SidenavToggle */ \"./src/Sidenav/SidenavToggle.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/Sidenav.tsx\",\n    _this = void 0;\n\nvar SidenavContext = /*#__PURE__*/_react.default.createContext(null);\n\nexports.SidenavContext = SidenavContext;\nvar emptyArray = [];\n\nvar Sidenav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'nav' : _props$as,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'sidenav' : _props$classPrefix,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$expanded = props.expanded,\n      expanded = _props$expanded === void 0 ? true : _props$expanded,\n      activeKey = props.activeKey,\n      _props$defaultOpenKey = props.defaultOpenKeys,\n      defaultOpenKeys = _props$defaultOpenKey === void 0 ? emptyArray : _props$defaultOpenKey,\n      openKeysProp = props.openKeys,\n      onSelect = props.onSelect,\n      onOpenChange = props.onOpenChange,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"appearance\", \"expanded\", \"activeKey\", \"defaultOpenKeys\", \"openKeys\", \"onSelect\", \"onOpenChange\"]);\n\n  var _useControlled = (0, _utils.useControlled)(openKeysProp, defaultOpenKeys),\n      openKeys = _useControlled[0],\n      setOpenKeys = _useControlled[1];\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var classes = merge(className, withClassPrefix(appearance));\n  var handleOpenChange = (0, _react.useCallback)(function (eventKey, event) {\n    var find = function find(key) {\n      return (0, _shallowEqual.default)(key, eventKey);\n    };\n\n    var nextOpenKeys = [].concat(openKeys);\n\n    if (nextOpenKeys.some(find)) {\n      (0, _remove.default)(nextOpenKeys, find);\n    } else {\n      nextOpenKeys.push(eventKey);\n    }\n\n    setOpenKeys(nextOpenKeys);\n    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpenKeys, event);\n  }, [onOpenChange, openKeys, setOpenKeys]);\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      expanded: expanded,\n      activeKey: activeKey,\n      sidenav: true,\n      openKeys: openKeys !== null && openKeys !== void 0 ? openKeys : [],\n      onOpenChange: handleOpenChange,\n      onSelect: onSelect\n    };\n  }, [activeKey, expanded, handleOpenChange, onSelect, openKeys]);\n  return /*#__PURE__*/_react.default.createElement(SidenavContext.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 116,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Transition.default, {\n    in: expanded,\n    timeout: 300,\n    exitedClassName: prefix('collapse-out'),\n    exitingClassName: prefix('collapse-out', 'collapsing'),\n    enteredClassName: prefix('collapse-in'),\n    enteringClassName: prefix('collapse-in', 'collapsing'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 117,\n      columnNumber: 7\n    }\n  }, function (transitionProps, transitionRef) {\n    var className = transitionProps.className,\n        transitionRest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, [\"className\"]);\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, transitionRest, {\n      ref: (0, _utils.mergeRefs)(ref, transitionRef),\n      className: merge(classes, className),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 128,\n        columnNumber: 13\n      }\n    }));\n  }));\n});\n\nSidenav.Header = _SidenavHeader.default;\nSidenav.Body = _SidenavBody.default;\nSidenav.Toggle = _SidenavToggle.default;\nSidenav.displayName = 'Sidenav';\nSidenav.propTypes = {\n  as: _propTypes.default.elementType,\n  classPrefix: _propTypes.default.string,\n  className: _propTypes.default.string,\n  expanded: _propTypes.default.bool,\n  appearance: _propTypes.default.oneOf(['default', 'inverse', 'subtle']),\n  defaultOpenKeys: _propTypes.default.array,\n  openKeys: _propTypes.default.array,\n  onOpenChange: _propTypes.default.func,\n  activeKey: (0, _deprecatePropType.default)(_propTypes.default.any, 'Use `activeKey` on <Nav> component instead'),\n  onSelect: (0, _deprecatePropType.default)(_propTypes.default.func, 'Use `onSelect` on <Nav> component instead')\n};\nvar _default = Sidenav;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/Sidenav.tsx?");
 
 /***/ }),
 
@@ -4267,7 +4520,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _DropdownToggle = _interopRequireDefault(__webpack_require__(/*! ../Dropdown/DropdownToggle */ \"./src/Dropdown/DropdownToggle.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _SidenavDropdownCollapse = _interopRequireDefault(__webpack_require__(/*! ./SidenavDropdownCollapse */ \"./src/Sidenav/SidenavDropdownCollapse.tsx\"));\n\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../Disclosure/Disclosure */ \"./src/Disclosure/Disclosure.tsx\"));\n\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ../Dropdown/DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\n\nvar _useInternalId = _interopRequireDefault(__webpack_require__(/*! ../utils/useInternalId */ \"./src/utils/useInternalId.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/SidenavDropdown.tsx\",\n    _this = void 0;\n\nvar SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      title = props.title,\n      children = props.children,\n      className = props.className,\n      menuStyle = props.menuStyle,\n      disabled = props.disabled,\n      renderTitle = props.renderTitle,\n      renderToggle = props.renderToggle,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      toggleClassName = props.toggleClassName,\n      icon = props.icon,\n      eventKey = props.eventKey,\n      toggleAs = props.toggleAs,\n      noCaret = props.noCaret,\n      style = props.style,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      openProp = props.open,\n      onToggle = props.onToggle,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"title\", \"children\", \"className\", \"menuStyle\", \"disabled\", \"renderTitle\", \"renderToggle\", \"classPrefix\", \"placement\", \"toggleClassName\", \"icon\", \"eventKey\", \"toggleAs\", \"noCaret\", \"style\", \"onOpen\", \"onClose\", \"open\", \"onToggle\"]);\n  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var dropdownContext = (0, _react.useContext)(_DropdownContext.default);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var internalId = (0, _useInternalId.default)('SidenavDropdown');\n  var uniqueKey = eventKey !== null && eventKey !== void 0 ? eventKey : internalId;\n\n  if (!sidenavContext || !dropdownContext) {\n    throw new Error('<SidenavDropdown> component is not supposed to be used standalone. Use <Dropdown> inside <Sidenav> instead.');\n  }\n\n  var _sidenavContext$openK = sidenavContext.openKeys,\n      openKeys = _sidenavContext$openK === void 0 ? [] : _sidenavContext$openK,\n      onOpenChange = sidenavContext.onOpenChange;\n  var hasSelectedItem = dropdownContext.hasSelectedItem;\n  var handleToggleDisclosure = (0, _react.useCallback)(function (open, event) {\n    if (open) {\n      onClose === null || onClose === void 0 ? void 0 : onClose();\n    } else {\n      onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    }\n\n    onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);\n    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(uniqueKey, event);\n  }, [onClose, onOpen, onToggle, uniqueKey, onOpenChange]);\n  var open = openProp !== null && openProp !== void 0 ? openProp : openKeys.includes(uniqueKey);\n  return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n    open: open,\n    onToggle: handleToggleDisclosure,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 137,\n      columnNumber: 5\n    }\n  }, function (_ref, containerRef) {\n    var _withClassPrefix;\n\n    var open = _ref.open;\n    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix[open ? 'expand' : 'collapse'] = true, _withClassPrefix.disabled = disabled, _withClassPrefix['selected-within'] = hasSelectedItem, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, containerRef),\n      style: style,\n      className: classes\n    }, rest, {\n      \"data-event-key\": eventKey,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 151,\n        columnNumber: 11\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 158,\n        columnNumber: 13\n      }\n    }, function (buttonProps, buttonRef) {\n      return /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({\n        ref: buttonRef,\n        as: toggleAs,\n        noCaret: noCaret,\n        className: toggleClassName,\n        renderToggle: renderToggle,\n        icon: icon,\n        placement: placement\n      }, (0, _omit.default)(buttonProps, ['open']), {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 160,\n          columnNumber: 17\n        }\n      }), title);\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 174,\n        columnNumber: 13\n      }\n    }, function (_ref2) {\n      var open = _ref2.open;\n      return /*#__PURE__*/_react.default.createElement(_SidenavDropdownCollapse.default, {\n        open: open,\n        style: menuStyle,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 176,\n          columnNumber: 17\n        }\n      }, children);\n    }));\n  });\n});\n\nSidenavDropdown.displayName = 'Sidenav.Dropdown';\nSidenavDropdown.propTypes = {\n  activeKey: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),\n  title: _propTypes.default.node,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  menuStyle: _propTypes.default.object,\n  className: _propTypes.default.string,\n  toggleClassName: _propTypes.default.string,\n  children: _propTypes.default.node,\n  tabIndex: _propTypes.default.number,\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  eventKey: _propTypes.default.any,\n  as: _propTypes.default.elementType,\n  toggleAs: _propTypes.default.elementType,\n  noCaret: _propTypes.default.bool,\n  style: _propTypes.default.object,\n  onClose: _propTypes.default.func,\n  onOpen: _propTypes.default.func,\n  onToggle: _propTypes.default.func,\n  onMouseEnter: _propTypes.default.func,\n  onMouseLeave: _propTypes.default.func,\n  onContextMenu: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  renderTitle: (0, _deprecatePropType.default)(_propTypes.default.func),\n  renderToggle: _propTypes.default.func\n};\nvar _default = SidenavDropdown;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavDropdown.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menu */ \"./src/Menu/Menu.tsx\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _ExpandedSidenavDropdown = _interopRequireDefault(__webpack_require__(/*! ./ExpandedSidenavDropdown */ \"./src/Sidenav/ExpandedSidenavDropdown.tsx\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\n\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\n\nvar _SidenavDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./SidenavDropdownToggle */ \"./src/Sidenav/SidenavDropdownToggle.tsx\"));\n\nvar _NavMenu = __webpack_require__(/*! ../Nav/NavMenu */ \"./src/Nav/NavMenu.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/SidenavDropdown.tsx\",\n    _this = void 0;\n\n/**\n * @private this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Menu> within a <Sidenav>\n *\n * <Sidenav>\n *   <Nav>\n *     <Nav.Menu> -> This submenu will render <SidenavDropdown> component\n *     </Nav.Menu>\n *   </Nav>\n * </Sidenav>\n */\nvar SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var nav = (0, _react.useContext)(_NavContext.default);\n  var navMenu = (0, _react.useContext)(_NavMenu.NavMenuContext);\n\n  if (!sidenav || !nav || !navMenu) {\n    throw new Error('<Sidenav.Dropdown> must be rendered within a <Nav> component within a <Sidenav> component.');\n  }\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      title = props.title,\n      onClose = props.onClose,\n      onOpen = props.onOpen,\n      onToggle = props.onToggle,\n      eventKey = props.eventKey,\n      _props$trigger = props.trigger,\n      trigger = _props$trigger === void 0 ? 'click' : _props$trigger,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      toggleAs = props.toggleAs,\n      toggleClassName = props.toggleClassName,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,\n      className = props.className,\n      disabled = props.disabled,\n      children = props.children,\n      menuStyle = props.menuStyle,\n      style = props.style,\n      toggleProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"title\", \"onClose\", \"onOpen\", \"onToggle\", \"eventKey\", \"trigger\", \"placement\", \"toggleAs\", \"toggleClassName\", \"classPrefix\", \"className\", \"disabled\", \"children\", \"menuStyle\", \"style\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  var _useClassNames3 = (0, _utils.useClassNames)('nav-item'),\n      withNavItemClassPrefix = _useClassNames3.withClassPrefix,\n      mergeNavItemClassNames = _useClassNames3.merge;\n\n  var items = navMenu[0].items;\n  var hasSelectedItems = // has items that is active indicated by <Nav activeKey>\n  nav.activeKey && items.some(function (item) {\n    return item.eventKey === nav.activeKey;\n  }) || // has items that is active indicated by <Nav.Item active>\n  items.some(function (item) {\n    return item.active;\n  });\n  var menuButtonTriggers = (0, _react.useMemo)(function () {\n    if (!trigger) {\n      return undefined;\n    }\n\n    var triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n\n    return trigger.map(function (t) {\n      return triggerMap[t];\n    });\n  }, [trigger]); // Render a disclosure when inside expanded <Sidenav>\n\n  if (sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_ExpandedSidenavDropdown.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 173,\n        columnNumber: 14\n      }\n    }));\n  }\n\n  var renderMenuButton = function renderMenuButton(menuButtonProps, buttonRef) {\n    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n      disabled: disabled,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 177,\n        columnNumber: 7\n      }\n    }, function (_ref, menuitemRef) {\n      var active = _ref.active,\n          menuitemProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"active\"]);\n      return /*#__PURE__*/_react.default.createElement(_SidenavDropdownToggle.default, (0, _extends2.default)({\n        ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),\n        as: toggleAs,\n        className: mergeNavItemClassNames(toggleClassName, withNavItemClassPrefix({\n          focus: active\n        }))\n      }, menuButtonProps, (0, _omit.default)(menuitemProps, ['onClick']), (0, _omit.default)(toggleProps, 'data-testid'), {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 180,\n          columnNumber: 13\n        }\n      }), title);\n    });\n  };\n\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    menuButtonText: title,\n    renderMenuButton: renderMenuButton,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: function renderMenuPopup(_ref2, popupRef) {\n      var open = _ref2.open,\n          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"open\"]);\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix({})); // When inside a collapsed <Sidenav>, render a header in menu\n\n      var showHeader = !!sidenav;\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 211,\n          columnNumber: 13\n        }\n      }), showHeader && /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('header'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 218,\n          columnNumber: 30\n        }\n      }, title), children);\n    },\n    onToggleMenu: function onToggleMenu(open, event) {\n      onToggle === null || onToggle === void 0 ? void 0 : onToggle(open, eventKey, event);\n      sidenav === null || sidenav === void 0 ? void 0 : sidenav.onOpenChange(eventKey, event);\n\n      if (open) {\n        onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n      } else {\n        onClose === null || onClose === void 0 ? void 0 : onClose();\n      }\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 201,\n      columnNumber: 7\n    }\n  }, function (_ref3, menuContainerRef) {\n    var _withClassPrefix;\n\n    var open = _ref3.open,\n        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref3, [\"open\"]);\n    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix.submenu = true, _withClassPrefix['selected-within'] = hasSelectedItems, _withClassPrefix)));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 245,\n        columnNumber: 13\n      }\n    }));\n  });\n});\n\nSidenavDropdown.Item = _NavDropdownItem.default;\nSidenavDropdown.Menu = _NavDropdownMenu.default;\nSidenavDropdown.displayName = 'Sidenav.Dropdown';\nSidenavDropdown.propTypes = {\n  activeKey: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover', 'contextMenu'])]),\n  placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),\n  title: _propTypes.default.node,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  menuStyle: _propTypes.default.object,\n  className: _propTypes.default.string,\n  toggleClassName: _propTypes.default.string,\n  children: _propTypes.default.node,\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  eventKey: _propTypes.default.any,\n  as: _propTypes.default.elementType,\n  toggleAs: _propTypes.default.elementType,\n  noCaret: _propTypes.default.bool,\n  style: _propTypes.default.object,\n  onClose: _propTypes.default.func,\n  onOpen: _propTypes.default.func,\n  onToggle: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onMouseEnter: _propTypes.default.func,\n  onMouseLeave: _propTypes.default.func,\n  onContextMenu: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  renderToggle: _propTypes.default.func\n};\nvar _default = SidenavDropdown;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavDropdown.tsx?");
 
 /***/ }),
 
@@ -4289,7 +4542,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ../Dropdown/DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\n\nvar _useRenderDropdownItem = __webpack_require__(/*! ../Dropdown/useRenderDropdownItem */ \"./src/Dropdown/useRenderDropdownItem.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/SidenavDropdownItem.tsx\",\n    _this = void 0;\n\n/**\n * Tree View Node\n * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView\n */\nvar SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'li' : _props$as,\n      activeProp = props.active,\n      children = props.children,\n      disabled = props.disabled,\n      divider = props.divider,\n      panel = props.panel,\n      className = props.className,\n      style = props.style,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,\n      icon = props.icon,\n      eventKey = props.eventKey,\n      onClick = props.onClick,\n      onSelect = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"active\", \"children\", \"disabled\", \"divider\", \"panel\", \"className\", \"style\", \"classPrefix\", \"icon\", \"eventKey\", \"onClick\", \"onSelect\"]);\n  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var dropdown = (0, _react.useContext)(_DropdownContext.default);\n\n  if (!sidenavContext || !dropdown) {\n    throw new Error('<SidenavDropdownItem> component is not supposed to be used standalone. Use <Dropdown.Item> within <Sidenav> instead.');\n  }\n\n  var activeKey = sidenavContext.activeKey,\n      onSidenavSelect = sidenavContext.onSelect;\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && ((0, _utils.shallowEqual)(eventKey, activeKey) || (0, _utils.shallowEqual)(nav === null || nav === void 0 ? void 0 : nav.activeKey, eventKey));\n  var classes = merge(className, withClassPrefix({\n    'with-icon': icon,\n    active: selected,\n    disabled: disabled\n  }));\n  var handleClick = (0, _react.useCallback)(function (event) {\n    var _dropdown$onSelect;\n\n    if (disabled) return;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    (_dropdown$onSelect = dropdown.onSelect) === null || _dropdown$onSelect === void 0 ? void 0 : _dropdown$onSelect.call(dropdown, eventKey, event);\n    onSidenavSelect === null || onSidenavSelect === void 0 ? void 0 : onSidenavSelect(eventKey, event);\n  }, [disabled, onSelect, onSidenavSelect, eventKey, dropdown]);\n  var menuitemEventHandlers = {\n    onClick: (0, _utils.createChainedFunction)(handleClick, onClick)\n  };\n  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);\n\n  if (divider) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      role: 'separator',\n      style: style,\n      className: merge(prefix('divider'), className)\n    }, rest));\n  }\n\n  if (panel) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      role: 'none presentation',\n      style: style,\n      className: merge(prefix('panel'), className)\n    }, rest, {\n      children: children\n    }));\n  }\n\n  return renderDropdownItem((0, _extends2.default)({\n    ref: ref\n  }, rest, {\n    style: style,\n    className: classes,\n    'aria-current': selected || undefined\n  }, menuitemEventHandlers, {\n    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n      className: prefix('menu-icon')\n    }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 151,\n        columnNumber: 13\n      }\n    }))\n  }), _SafeAnchor.default);\n});\n\nSidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';\nSidenavDropdownItem.propTypes = {\n  as: _propTypes.default.elementType,\n  expanded: _propTypes.default.bool,\n  active: _propTypes.default.bool,\n  divider: _propTypes.default.bool,\n  panel: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  submenu: _propTypes.default.element,\n  onSelect: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  icon: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  style: _propTypes.default.object,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number,\n  title: _propTypes.default.node,\n  onMouseOver: _propTypes.default.func,\n  onMouseOut: _propTypes.default.func\n};\nvar _default = SidenavDropdownItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavDropdownItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _deprecatePropType = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecatePropType */ \"./src/utils/deprecatePropType.ts\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _useRenderDropdownItem = __webpack_require__(/*! ../Dropdown/useRenderDropdownItem */ \"./src/Dropdown/useRenderDropdownItem.tsx\");\n\nvar _ExpandedSidenavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ./ExpandedSidenavDropdownItem */ \"./src/Sidenav/ExpandedSidenavDropdownItem.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/SidenavDropdownItem.tsx\",\n    _this = void 0;\n\n/**\n * @private this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Item> within a <Sidenav>\n *\n * <Sidenav>\n *   <Nav>\n *     <Nav.Menu>\n *       <Nav.Item></Nav.Item> -> This will render <SidenavDropdownItem> component\n *     </Nav.Menu>\n *   </Nav>\n * </Sidenav>\n */\nvar SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!sidenav || !nav) {\n    throw new Error('<Sidenav.Dropdown.Item> must be used within a <Nav> within a <Sidenav> component.');\n  }\n\n  var _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,\n      className = props.className,\n      activeProp = props.active,\n      eventKey = props.eventKey,\n      onSelect = props.onSelect,\n      icon = props.icon,\n      _props$as = props.as,\n      Component = _props$as === void 0 ? 'li' : _props$as,\n      divider = props.divider,\n      panel = props.panel,\n      children = props.children,\n      disabled = props.disabled,\n      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"classPrefix\", \"className\", \"active\", \"eventKey\", \"onSelect\", \"icon\", \"as\", \"divider\", \"panel\", \"children\", \"disabled\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var handleSelectItem = (0, _react.useCallback)(function (event) {\n    var _nav$onSelect;\n\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    (_nav$onSelect = nav.onSelect) === null || _nav$onSelect === void 0 ? void 0 : _nav$onSelect.call(nav, eventKey, event);\n  }, [onSelect, eventKey, nav]);\n  var selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(nav === null || nav === void 0 ? void 0 : nav.activeKey, eventKey);\n  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);\n\n  if (sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_ExpandedSidenavDropdownItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 114,\n        columnNumber: 14\n      }\n    }));\n  }\n\n  if (divider) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      role: 'separator',\n      className: merge(prefix('divider'), className)\n    }, restProps));\n  }\n\n  if (panel) {\n    return renderDropdownItem((0, _extends2.default)({\n      ref: ref,\n      className: merge(prefix('panel'), className),\n      children: children\n    }, restProps));\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n    selected: selected,\n    disabled: disabled,\n    onActivate: handleSelectItem,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 135,\n      columnNumber: 7\n    }\n  }, function (_ref, menuitemRef) {\n    var selected = _ref.selected,\n        active = _ref.active,\n        menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"selected\", \"active\"]);\n    var classes = merge(className, withClassPrefix({\n      'with-icon': icon,\n      active: selected,\n      disabled: disabled,\n      focus: active,\n      divider: divider,\n      panel: panel\n    }));\n    var dataAttributes = {\n      'data-event-key': eventKey\n    };\n\n    if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {\n      dataAttributes['data-event-key-type'] = typeof eventKey;\n    }\n\n    return renderDropdownItem((0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuitemRef),\n      className: classes\n    }, menuitem, dataAttributes, restProps, {\n      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n        className: prefix('menu-icon')\n      }), children)\n    }));\n  });\n});\n\nSidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';\nSidenavDropdownItem.propTypes = {\n  as: _propTypes.default.elementType,\n  divider: _propTypes.default.bool,\n  panel: _propTypes.default.bool,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),\n  open: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool),\n  submenu: _propTypes.default.element,\n  onSelect: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  icon: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  style: _propTypes.default.object,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number\n};\nvar _default = SidenavDropdownItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavDropdownItem.tsx?");
 
 /***/ }),
 
@@ -4300,7 +4553,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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _useCustom2 = _interopRequireDefault(__webpack_require__(/*! ../utils/useCustom */ \"./src/utils/useCustom.ts\"));\n\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\n\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _SidenavDropdownCollapse = _interopRequireDefault(__webpack_require__(/*! ./SidenavDropdownCollapse */ \"./src/Sidenav/SidenavDropdownCollapse.tsx\"));\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../Disclosure/Disclosure */ \"./src/Disclosure/Disclosure.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/SidenavDropdownMenu.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2;\n\n/**\n * Tree View Node\n * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView\n */\nvar SidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'li' : _props$as,\n      children = props.children,\n      disabled = props.disabled,\n      className = props.className,\n      style = props.style,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,\n      tabIndex = props.tabIndex,\n      icon = props.icon,\n      title = props.title,\n      eventKey = props.eventKey,\n      onClick = props.onClick,\n      onSelect = props.onSelect,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"children\", \"disabled\", \"className\", \"style\", \"classPrefix\", \"tabIndex\", \"icon\", \"title\", \"eventKey\", \"onClick\", \"onSelect\"]);\n\n  var _useCustom = (0, _useCustom2.default)('DropdownMenu'),\n      rtl = _useCustom.rtl;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  if (!sidenavContext) {\n    throw new Error('<SidenavDropdownMenu> component is not supposed to be used standalone. Use <Dropdown.Item> inside <Sidenav> instead.');\n  }\n\n  var _sidenavContext$openK = sidenavContext.openKeys,\n      openKeys = _sidenavContext$openK === void 0 ? [] : _sidenavContext$openK,\n      onOpenChange = sidenavContext.onOpenChange,\n      onSidenavSelect = sidenavContext.onSelect;\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (disabled) return;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    onSidenavSelect === null || onSidenavSelect === void 0 ? void 0 : onSidenavSelect(eventKey, event);\n  }, [disabled, onSelect, onSidenavSelect, eventKey]);\n  var menuitemEventHandlers = {\n    onClick: (0, _utils.createChainedFunction)(handleClick, onClick)\n  };\n  var Icon = rtl ? _AngleLeft.default : _AngleRight.default;\n  return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n    open: !(0, _isNil.default)(eventKey) && openKeys.includes(eventKey),\n    onToggle: function onToggle(_, event) {\n      return onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event);\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 93,\n      columnNumber: 7\n    }\n  }, function (_ref) {\n    var open = _ref.open;\n    var classes = merge(className, prefix('submenu'), prefix(\"pull-\" + (rtl ? 'left' : 'right')), prefix(open ? 'expand' : 'collapse'), withClassPrefix({\n      'with-icon': icon,\n      // open,\n      disabled: disabled\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: ref\n    }, rest, {\n      tabIndex: disabled ? -1 : tabIndex,\n      style: style,\n      className: classes\n    }, menuitemEventHandlers, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 110,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 118,\n        columnNumber: 15\n      }\n    }, function (buttonProps) {\n      return /*#__PURE__*/_react.default.createElement(\"button\", (0, _extends2.default)({\n        className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"toggle\"]))),\n        onClick: handleClick\n      }, (0, _omit.default)(buttonProps, ['open']), {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 121,\n          columnNumber: 21\n        }\n      }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n        className: prefix('menu-icon')\n      }), title, /*#__PURE__*/_react.default.createElement(Icon, {\n        className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"toggle-icon\"]))),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 128,\n          columnNumber: 23\n        }\n      }), /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 129,\n          columnNumber: 23\n        }\n      }));\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 134,\n        columnNumber: 15\n      }\n    }, function (_ref2) {\n      var open = _ref2.open;\n      return /*#__PURE__*/_react.default.createElement(_SidenavDropdownCollapse.default, {\n        open: open,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 136,\n          columnNumber: 26\n        }\n      }, children);\n    }));\n  });\n});\n\nSidenavDropdownMenu.displayName = 'Sidenav.Dropdown.Menu';\nSidenavDropdownMenu.propTypes = {\n  as: _propTypes.default.elementType,\n  expanded: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  onSelect: _propTypes.default.func,\n  onClick: _propTypes.default.func,\n  icon: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  style: _propTypes.default.object,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  tabIndex: _propTypes.default.number,\n  title: _propTypes.default.node,\n  onMouseOver: _propTypes.default.func,\n  onMouseOut: _propTypes.default.func\n};\nvar _default = SidenavDropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavDropdownMenu.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../Menu/Menu */ \"./src/Menu/Menu.tsx\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _ArrowLeftLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowLeftLine */ \"./node_modules/@rsuite/icons/ArrowLeftLine.js\"));\n\nvar _ArrowRightLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowRightLine */ \"./node_modules/@rsuite/icons/ArrowRightLine.js\"));\n\nvar _useCustom2 = _interopRequireDefault(__webpack_require__(/*! ../utils/useCustom */ \"./src/utils/useCustom.ts\"));\n\nvar _ExpandedSidenavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./ExpandedSidenavDropdownMenu */ \"./src/Sidenav/ExpandedSidenavDropdownMenu.tsx\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/SidenavDropdownMenu.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2;\n\n/**\n * @private this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Menu> within a <Sidenav>\n *\n * <Sidenav>\n *   <Nav>\n *     <Nav.Menu>\n *       <Nav.Menu></Nav.Menu> -> This submenu will render <SidenavDropdownMenu> component\n *     </Nav.Menu>\n *   </Nav>\n * </Sidenav>\n */\nvar SidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var nav = (0, _react.useContext)(_NavContext.default);\n\n  if (!sidenav || !nav) {\n    throw new Error('<Sidenav.Dropdown.Menu> must be rendered within a <Nav> within a <Sidenav> component.');\n  }\n\n  var onToggle = props.onToggle,\n      eventKey = props.eventKey,\n      title = props.title,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,\n      children = props.children,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"onToggle\", \"eventKey\", \"title\", \"classPrefix\", \"children\"]);\n\n  var _useCustom = (0, _useCustom2.default)('DropdownMenu'),\n      rtl = _useCustom.rtl;\n\n  var handleToggleSubmenu = (0, _react.useCallback)(function (open, event) {\n    onToggle === null || onToggle === void 0 ? void 0 : onToggle(open, eventKey, event);\n  }, [eventKey, onToggle]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),\n      withMenuClassPrefix = _useClassNames2.withClassPrefix,\n      mergeMenuClassName = _useClassNames2.merge;\n\n  var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),\n      mergeItemClassNames = _useClassNames3.merge,\n      withItemClassPrefix = _useClassNames3.withClassPrefix,\n      prefixItemClassName = _useClassNames3.prefix;\n\n  if (sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_ExpandedSidenavDropdownMenu.default, (0, _extends2.default)({\n      ref: ref\n    }, (0, _omit2.default)(props, 'classPrefix'), {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 87,\n        columnNumber: 12\n      }\n    }));\n  } // Parent menu exists. This is a submenu.\n  // Should render a `menuitem` that controls this submenu.\n\n\n  var _omit = (0, _omit2.default)(rest, ['trigger']),\n      icon = _omit.icon,\n      className = _omit.className,\n      disabled = _omit.disabled,\n      menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, [\"icon\", \"className\", \"disabled\"]);\n\n  var Icon = rtl ? _ArrowLeftLine.default : _ArrowRightLine.default;\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    openMenuOn: ['mouseover', 'click'],\n    renderMenuButton: function renderMenuButton(_ref, buttonRef) {\n      var open = _ref.open,\n          menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"open\"]);\n      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n        disabled: disabled,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 100,\n          columnNumber: 9\n        }\n      }, function (_ref2, menuitemRef) {\n        var selected = _ref2.selected,\n            active = _ref2.active,\n            menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"selected\", \"active\"]);\n        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"toggle\"]))), withItemClassPrefix({\n          'with-icon': icon,\n          open: open,\n          active: selected,\n          disabled: disabled,\n          focus: active\n        }));\n        return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n          ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),\n          className: classes,\n          \"data-event-key\": eventKey,\n          \"data-event-key-type\": typeof eventKey\n        }, menuitem, (0, _omit2.default)(menuButtonProps, ['role']), {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 115,\n            columnNumber: 15\n          }\n        }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n          className: prefix('menu-icon')\n        }), title, /*#__PURE__*/_react.default.createElement(Icon, {\n          className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"toggle-icon\"]))),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 125,\n            columnNumber: 17\n          }\n        }));\n      });\n    },\n    renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {\n      var open = _ref3.open,\n          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3, [\"open\"]);\n      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        hidden: !open\n      }, popupProps, menuProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 135,\n          columnNumber: 11\n        }\n      }), children);\n    },\n    onToggleMenu: handleToggleSubmenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 97,\n      columnNumber: 5\n    }\n  }, function (_ref4, menuContainerRef) {\n    var open = _ref4.open,\n        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref4, [\"open\"]);\n    var classes = mergeItemClassNames(className, withItemClassPrefix({\n      disabled: disabled,\n      open: open,\n      submenu: true\n    }));\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 158,\n        columnNumber: 11\n      }\n    }));\n  });\n});\n\nSidenavDropdownMenu.displayName = 'Sidenav.Dropdown.Menu';\nSidenavDropdownMenu.propTypes = {\n  active: _propTypes.default.bool,\n  activeKey: _propTypes.default.any,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  icon: _propTypes.default.any,\n  classPrefix: _propTypes.default.string,\n  pullLeft: _propTypes.default.bool,\n  title: _propTypes.default.node,\n  open: _propTypes.default.bool,\n  eventKey: _propTypes.default.any,\n  expanded: _propTypes.default.bool,\n  collapsible: _propTypes.default.bool,\n  onToggle: _propTypes.default.func\n};\nvar _default = SidenavDropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavDropdownMenu.tsx?");
+
+/***/ }),
+
+/***/ "./src/Sidenav/SidenavDropdownToggle.tsx":
+/*!***********************************************!*\
+  !*** ./src/Sidenav/SidenavDropdownToggle.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\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/ArrowDownLine.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _SidenavItem = _interopRequireDefault(__webpack_require__(/*! ./SidenavItem */ \"./src/Sidenav/SidenavItem.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/SidenavDropdownToggle.tsx\",\n    _this = void 0;\n\n/**\n * @private this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Menu> call\n *\n * <Nav>\n *   <Nav.Menu> -> This will render <NavDropdown> component that renders a <NavDropdownToggle>\n *   </Nav.Menu>\n * </Nav>\n */\nvar SidenavDropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _SidenavItem.default : _props$as,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'dropdown-toggle' : _props$classPrefix,\n      renderToggle = props.renderToggle,\n      children = props.children,\n      noCaret = props.noCaret,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"renderToggle\", \"children\", \"noCaret\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix({\n    'no-caret': noCaret\n  }));\n\n  var toggle = /*#__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: 40,\n      columnNumber: 7\n    }\n  }), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {\n    className: prefix('caret'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 22\n    }\n  }));\n\n  return renderToggle ? renderToggle(rest, ref) : toggle;\n});\n\nSidenavDropdownToggle.displayName = 'Sidenav.Dropdown.Toggle';\nSidenavDropdownToggle.propTypes = {\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  noCaret: _propTypes.default.bool,\n  as: _propTypes.default.elementType,\n  renderToggle: _propTypes.default.func,\n  placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])\n};\nvar _default = SidenavDropdownToggle;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavDropdownToggle.tsx?");
 
 /***/ }),
 
@@ -4322,7 +4586,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/SidenavItem.tsx\",\n    _this = void 0;\n\nvar SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,\n      activeProp = props.active,\n      _children = props.children,\n      className = props.className,\n      disabled = props.disabled,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'sidenav-item' : _props$classPrefix,\n      icon = props.icon,\n      eventKey = props.eventKey,\n      style = props.style,\n      onClick = props.onClick,\n      onSelect = props.onSelect,\n      divider = props.divider,\n      panel = props.panel,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"active\", \"children\", \"className\", \"disabled\", \"classPrefix\", \"icon\", \"eventKey\", \"style\", \"onClick\", \"onSelect\", \"divider\", \"panel\"]);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  if (!sidenav) {\n    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');\n  }\n\n  var _useContext = (0, _react.useContext)(_NavContext.default),\n      activeKey = _useContext.activeKey,\n      onSelectFromNav = _useContext.onSelect;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(activeKey, eventKey);\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (disabled) return;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);\n    onClick === null || onClick === void 0 ? void 0 : onClick(event);\n  }, [disabled, onSelect, onSelectFromNav, eventKey, onClick]);\n\n  if (!sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n      selected: selected,\n      disabled: disabled,\n      onActivate: handleClick,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 85,\n        columnNumber: 7\n      }\n    }, function (_ref, menuitemRef) {\n      var selected = _ref.selected,\n          active = _ref.active,\n          menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"selected\", \"active\"]);\n      var classes = merge(className, withClassPrefix({\n        focus: active,\n        active: selected,\n        disabled: disabled\n      })); // Show tooltip when inside a collapse <Sidenav>\n\n      return (0, _utils.appendTooltip)({\n        children: function children(triggerProps, triggerRef) {\n          return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n            ref: (0, _utils.mergeRefs)((0, _utils.mergeRefs)(ref, menuitemRef), triggerRef),\n            disabled: Component === _SafeAnchor.default ? disabled : undefined,\n            className: classes,\n            \"data-event-key\": eventKey\n          }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem, {\n            __self: _this,\n            __source: {\n              fileName: _jsxFileName,\n              lineNumber: 96,\n              columnNumber: 17\n            }\n          }), icon, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n            __self: _this,\n            __source: {\n              fileName: _jsxFileName,\n              lineNumber: 107,\n              columnNumber: 19\n            }\n          }));\n        },\n        message: _children,\n        placement: 'right'\n      });\n    });\n  }\n\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: ref,\n      role: \"separator\",\n      style: style,\n      className: merge(className, prefix('divider'))\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 121,\n        columnNumber: 7\n      }\n    }));\n  }\n\n  if (panel) {\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: ref,\n      role: \"none presentation\",\n      style: style,\n      className: merge(className, prefix('panel'))\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 133,\n        columnNumber: 7\n      }\n    }), _children);\n  }\n\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    className: merge(className, withClassPrefix({\n      active: selected,\n      disabled: disabled\n    })),\n    onClick: handleClick,\n    style: style,\n    \"aria-selected\": selected || undefined,\n    \"data-event-key\": eventKey\n  }, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 146,\n      columnNumber: 5\n    }\n  }), icon, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 157,\n      columnNumber: 7\n    }\n  }));\n});\n\nSidenavItem.displayName = 'Sidenav.Item';\nSidenavItem.propTypes = {\n  classPrefix: _propTypes.default.string,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  as: _propTypes.default.elementType,\n  style: _propTypes.default.object,\n  onSelect: _propTypes.default.func,\n  onMouseEnter: _propTypes.default.func,\n  onMouseLeave: _propTypes.default.func,\n  onContextMenu: _propTypes.default.func,\n  onClick: _propTypes.default.func\n};\nvar _default = SidenavItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../Ripple */ \"./src/Ripple/index.tsx\"));\n\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\n\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\n\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../Menu/MenuItem */ \"./src/Menu/MenuItem.tsx\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Sidenav/SidenavItem.tsx\",\n    _this = void 0;\n\n/**\n * @private\n */\nvar SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  if (!sidenav) {\n    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');\n  }\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,\n      activeProp = props.active,\n      _children = props.children,\n      className = props.className,\n      disabled = props.disabled,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'sidenav-item' : _props$classPrefix,\n      icon = props.icon,\n      eventKey = props.eventKey,\n      style = props.style,\n      onClick = props.onClick,\n      onSelect = props.onSelect,\n      divider = props.divider,\n      panel = props.panel,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"active\", \"children\", \"className\", \"disabled\", \"classPrefix\", \"icon\", \"eventKey\", \"style\", \"onClick\", \"onSelect\", \"divider\", \"panel\"]);\n\n  var _ref = (0, _react.useContext)(_NavContext.default),\n      activeKey = _ref.activeKey,\n      onSelectFromNav = _ref.onSelect;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(activeKey, eventKey);\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (disabled) return;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);\n    onClick === null || onClick === void 0 ? void 0 : onClick(event);\n  }, [disabled, onSelect, onSelectFromNav, eventKey, onClick]);\n\n  if (!sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n      selected: selected,\n      disabled: disabled,\n      onActivate: handleClick,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 88,\n        columnNumber: 7\n      }\n    }, function (_ref2, menuitemRef) {\n      var selected = _ref2.selected,\n          active = _ref2.active,\n          menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, [\"selected\", \"active\"]);\n      var classes = merge(className, withClassPrefix({\n        focus: active,\n        active: selected,\n        disabled: disabled\n      })); // Show tooltip when inside a collapse <Sidenav>\n\n      return (0, _utils.appendTooltip)({\n        children: function children(triggerProps, triggerRef) {\n          return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n            ref: (0, _utils.mergeRefs)((0, _utils.mergeRefs)(ref, menuitemRef), triggerRef),\n            disabled: Component === _SafeAnchor.default ? disabled : undefined,\n            className: classes,\n            \"data-event-key\": eventKey\n          }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem, {\n            __self: _this,\n            __source: {\n              fileName: _jsxFileName,\n              lineNumber: 99,\n              columnNumber: 17\n            }\n          }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n            className: prefix('icon')\n          }), _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n            __self: _this,\n            __source: {\n              fileName: _jsxFileName,\n              lineNumber: 110,\n              columnNumber: 19\n            }\n          }));\n        },\n        message: _children,\n        placement: 'right'\n      });\n    });\n  }\n\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: ref,\n      role: \"separator\",\n      style: style,\n      className: merge(className, prefix('divider'))\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 124,\n        columnNumber: 7\n      }\n    }));\n  }\n\n  if (panel) {\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: ref,\n      role: \"none presentation\",\n      style: style,\n      className: merge(className, prefix('panel'))\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 136,\n        columnNumber: 7\n      }\n    }), _children);\n  }\n\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    className: merge(className, withClassPrefix({\n      active: selected,\n      disabled: disabled\n    })),\n    onClick: handleClick,\n    style: style,\n    \"aria-selected\": selected || undefined,\n    \"data-event-key\": eventKey\n  }, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 149,\n      columnNumber: 5\n    }\n  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: prefix('icon')\n  }), _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 160,\n      columnNumber: 7\n    }\n  }));\n});\n\nSidenavItem.displayName = 'Sidenav.Item';\nSidenavItem.propTypes = {\n  classPrefix: _propTypes.default.string,\n  disabled: _propTypes.default.bool,\n  icon: _propTypes.default.node,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  eventKey: _propTypes.default.any,\n  as: _propTypes.default.elementType,\n  style: _propTypes.default.object,\n  onSelect: _propTypes.default.func,\n  onMouseEnter: _propTypes.default.func,\n  onMouseLeave: _propTypes.default.func,\n  onContextMenu: _propTypes.default.func,\n  onClick: _propTypes.default.func\n};\nvar _default = SidenavItem;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavItem.tsx?");
 
 /***/ }),
 
@@ -4960,7 +5224,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = deprecateComponent;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/utils/deprecateComponent.tsx\";\n\n/**\n * HOC for display a deprecation message from a deprecated component\n * fixme: Only display deprecation message in non-production environment\n */\nfunction deprecateComponent(Component, message) {\n  var _Component$displayNam,\n      _this = this;\n\n  var componentDisplayName = (_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 ? _Component$displayNam : Component.name;\n\n  var Deprecated = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n    (0, _react.useEffect)(function () {\n      console.warn(message);\n    }, []);\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 18,\n        columnNumber: 12\n      }\n    }));\n  });\n\n  Deprecated.displayName = \"deprecated(\" + componentDisplayName + \")\";\n  return Deprecated;\n}\n\n//# sourceURL=webpack://rsuite/./src/utils/deprecateComponent.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = deprecateComponent;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _warnOnce = _interopRequireDefault(__webpack_require__(/*! ./warnOnce */ \"./src/utils/warnOnce.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/utils/deprecateComponent.tsx\";\n\n/**\n * HOC for display a deprecation message from a deprecated component\n * fixme: Only display deprecation message in non-production environment\n */\nfunction deprecateComponent(Component, message) {\n  var _Component$displayNam,\n      _this = this;\n\n  var componentDisplayName = (_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 ? _Component$displayNam : Component.name;\n\n  var Deprecated = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n    (0, _warnOnce.default)(message);\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 17,\n        columnNumber: 12\n      }\n    }));\n  });\n\n  Deprecated.displayName = \"deprecated(\" + componentDisplayName + \")\";\n  return Deprecated;\n}\n\n//# sourceURL=webpack://rsuite/./src/utils/deprecateComponent.tsx?");
 
 /***/ }),
 
@@ -4968,10 +5232,10 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /*!****************************************!*\
   !*** ./src/utils/deprecatePropType.ts ***!
   \****************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.default = deprecatePropType;\n// Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js\nvar warned = {};\n\nfunction deprecatePropType(propType, explanation) {\n  return function validate(props, propName, componentName) {\n    // Note ...rest here\n    if (props[propName] != null) {\n      var message = \"\\\"\" + propName + \"\\\" property of \\\"\" + componentName + \"\\\" has been deprecated.\\n\" + explanation;\n\n      if (!warned[message]) {\n        console.warn(message);\n        warned[message] = true;\n      }\n    }\n\n    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {\n      rest[_key - 3] = arguments[_key];\n    }\n\n    return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here\n  };\n}\n\nfunction _resetWarned() {\n  warned = {};\n}\n\ndeprecatePropType._resetWarned = _resetWarned;\n\n//# sourceURL=webpack://rsuite/./src/utils/deprecatePropType.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = deprecatePropType;\n\nvar _warnOnce = _interopRequireDefault(__webpack_require__(/*! ./warnOnce */ \"./src/utils/warnOnce.ts\"));\n\n// Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js\nfunction deprecatePropType(propType, explanation) {\n  return function validate(props, propName, componentName) {\n    // Note ...rest here\n    if (props[propName] != null) {\n      var message = \"\\\"\" + propName + \"\\\" property of \\\"\" + componentName + \"\\\" has been deprecated.\\n\" + explanation;\n      (0, _warnOnce.default)(message);\n    }\n\n    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {\n      rest[_key - 3] = arguments[_key];\n    }\n\n    return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/utils/deprecatePropType.ts?");
 
 /***/ }),
 
@@ -5323,7 +5587,7 @@ eval("\n\nexports.__esModule = true;\nexports.default = useFocus;\n\nvar _react
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = useInternalId;\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _uniqueId = _interopRequireDefault(__webpack_require__(/*! lodash/uniqueId */ \"./node_modules/lodash/uniqueId.js\"));\n\n/**\n * Used for generating unique ID for DOM elements\n */\nfunction useInternalId(prefix) {\n  var idRef = (0, _react.useRef)();\n\n  if (!idRef.current) {\n    idRef.current = (0, _uniqueId.default)(\"internal://\" + prefix);\n  }\n\n  (0, _react.useDebugValue)(idRef.current);\n  return idRef.current;\n}\n\n//# sourceURL=webpack://rsuite/./src/utils/useInternalId.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = useInternalId;\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _uniqueId = _interopRequireDefault(__webpack_require__(/*! lodash/uniqueId */ \"./node_modules/lodash/uniqueId.js\"));\n\n/**\n * Used for generating unique ID for DOM elements\n */\nfunction useInternalId(namespace) {\n  var idRef = (0, _react.useRef)();\n\n  if (!idRef.current) {\n    idRef.current = (0, _uniqueId.default)(\"internal://\" + namespace);\n  }\n\n  (0, _react.useDebugValue)(idRef.current);\n  return idRef.current;\n}\n\n//# sourceURL=webpack://rsuite/./src/utils/useInternalId.ts?");
 
 /***/ }),
 
@@ -5437,6 +5701,17 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/utils/warnOnce.ts":
+/*!*******************************!*\
+  !*** ./src/utils/warnOnce.ts ***!
+  \*******************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.default = warnOnce;\nvar warned = {};\n/**\n * Logs a warning message\n * but dont warn a same message twice\n */\n\nfunction warnOnce(message) {\n  if (!warned[message]) {\n    console.warn(message);\n    warned[message] = true;\n  }\n}\n\nwarnOnce._resetWarned = function () {\n  for (var _message in warned) {\n    delete warned[_message];\n  }\n};\n\n//# sourceURL=webpack://rsuite/./src/utils/warnOnce.ts?");
+
+/***/ }),
+
 /***/ "./node_modules/classnames/index.js":
 /*!******************************************!*\
   !*** ./node_modules/classnames/index.js ***!